/* Paperchef concept site. (c) 2026 Zentriarch Private Limited. All rights reserved.
   Layout concept: a stack of sheets. Each section is a sheet with a cutter-torn top edge. */
:root{
  --paper:#f7f4ec; --sheet:#fffdf8; --ink:#11131a; --dim:#5c5f6b; --line:#e2ddcf;
  --cobalt:#1b3be0; --cobalt-d:#142bab; --butter:#ffd84d; --butter-l:#fff3bd;
  --silver:#dfe2e6; --sky:#d9f0f4;
  --tint:var(--butter-l);
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --body:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gut:clamp(16px,4vw,56px); --top:96px; --max:1240px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.5 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p{margin:0}
a{color:inherit}
img,svg,canvas{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px}
main:focus{outline:0}
.skip{position:fixed;left:12px;top:-60px;z-index:90;background:var(--ink);color:#fff;padding:8px 12px}
.skip:focus{top:8px}

/* Header */
.top{position:fixed;inset:0 0 auto;z-index:50;background:var(--paper);padding-top:env(safe-area-inset-top,0px)}
.strip{background:var(--ink);color:#d9dbe3;font:500 .6875rem/1 var(--mono);text-align:center;padding:7px 10px}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-inline:var(--gut);border-bottom:1.5px solid var(--ink)}
.brand{font:600 1.6rem/1 var(--display);letter-spacing:-.04em;text-decoration:none}
.brand b{font-weight:800;color:var(--cobalt)}
.links{display:flex;gap:clamp(14px,2.2vw,30px)}
.links a{font-weight:600;font-size:.95rem;text-decoration:none;padding-block:6px;background:linear-gradient(var(--cobalt),var(--cobalt)) 0 100%/0 2px no-repeat;transition:background-size .3s var(--ease)}
.links a:hover,.links a.on{background-size:100% 2px}
.cartlink{font-weight:700;text-decoration:none;display:flex;align-items:center;gap:7px}
[data-count]{display:inline-grid;place-items:center;min-width:22px;height:22px;padding-inline:6px;border-radius:11px;background:var(--line);font:500 .75rem var(--mono);transition:background .2s,color .2s}
[data-count].has{background:var(--cobalt);color:#fff}
[data-count].bump{animation:bump .5s var(--ease)}
@keyframes bump{40%{transform:scale(1.5)}}
.tabs{display:none}

main{padding-top:var(--top);min-height:100vh;min-height:100svh}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}

/* Type */
.eyebrow{font:500 .75rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cobalt)}
h1,.h1{font:800 clamp(2.5rem,6.2vw,5.5rem)/.98 var(--display);letter-spacing:-.04em;text-wrap:balance}
h2,.h2{font:800 clamp(1.9rem,4vw,3.4rem)/1.02 var(--display);letter-spacing:-.03em;text-wrap:balance}
h3{font:700 1.2rem/1.2 var(--display);letter-spacing:-.015em}
.lede{font-size:clamp(1.02rem,1.5vw,1.25rem);max-width:34em}
.dim{color:var(--dim)}
.small{font-size:.9rem}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* Buttons */
.btn{--b:var(--cobalt);--t:#fff;appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 24px;border:2px solid var(--b);border-radius:10px;background:var(--b);color:var(--t);font-weight:700;text-decoration:none;cursor:pointer;box-shadow:0 3px 0 var(--ink);transition:transform .15s,box-shadow .15s,background .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--ink)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.btn.alt{--b:var(--butter);--t:var(--ink)}
.btn.line{--b:var(--ink);--t:var(--ink);background:transparent;box-shadow:none}
.btn.line:hover{background:var(--ink);color:#fff;transform:none}
.btn.wide{width:100%;flex:1 1 100%}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);min-height:calc(100vh - var(--top));background:var(--tint);transition:background .5s}
.hero-text{display:flex;flex-direction:column;justify-content:center;gap:20px;padding:clamp(28px,5vw,64px) var(--gut)}
.linebar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:2px solid var(--ink);border-radius:12px;overflow:hidden;background:var(--sheet);max-width:520px}
.linebar button{appearance:none;background:transparent;border:0;border-left:2px solid var(--ink);padding:12px 6px;font-weight:700;font-size:.95rem;cursor:pointer;transition:background .25s,color .25s}
.linebar button:first-child{border-left:0}
.linebar button[aria-pressed="true"]{background:var(--ink);color:#fff}
.hero-sub{min-height:3em;max-width:30em}
.stagev{position:relative;overflow:hidden;background:var(--paper);min-height:420px}
.stagev canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 100% 0 0);transition:clip-path .7s var(--ease)}
.stagev canvas.on{clip-path:inset(0 0 0 0)}
.stagev canvas.was{clip-path:inset(0 0 0 0);transition:none}
.stagev::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.34) 48%,transparent 60%);background-size:260% 100%;background-position:120% 0;animation:sheen 6s ease-in-out infinite}
@keyframes sheen{to{background-position:-60% 0}}
.herpack{position:absolute;left:50%;top:50%;width:min(88%,660px);transform:translate(-50%,-50%);z-index:2;filter:drop-shadow(0 22px 22px rgba(17,19,26,.28))}
.herpack.in{animation:packin .75s var(--ease) both}
@keyframes packin{from{opacity:0;transform:translate(-50%,-38%) rotate(-3deg)}}
.mark{position:absolute;right:12px;bottom:10px;z-index:3;font:500 .6875rem var(--mono);color:var(--ink);opacity:.7}

/* Sheets: every section is a sheet with a cutter-torn top edge */
.sheet{--bg:var(--sheet);position:relative;background:var(--bg);padding-block:clamp(44px,7vw,92px)}
.sheet::before{content:"";position:absolute;left:0;right:0;top:-11px;height:12px;background:var(--bg);-webkit-mask:conic-gradient(from -45deg at 50% 100%,#000 90deg,#0000 0) 0 100%/16px 12px repeat-x;mask:conic-gradient(from -45deg at 50% 100%,#000 90deg,#0000 0) 0 100%/16px 12px repeat-x}
.sheet.butter{--bg:var(--butter)}
.sheet.ink{--bg:var(--ink);color:#fff}
.sheet.ink .dim{color:#b6b9c6}
.sheet.ink .eyebrow{color:var(--butter)}
.sheet.cobalt{--bg:var(--cobalt);color:#fff}
.sheet.cobalt .eyebrow{color:var(--butter)}
.sheet.paper{--bg:var(--paper)}
.head{display:grid;gap:12px;margin-bottom:clamp(22px,4vw,40px);max-width:760px}
.rowhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px 24px;margin-bottom:clamp(20px,3.5vw,36px)}

/* What are you packing */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{appearance:none;background:var(--sheet);border:2px solid var(--ink);border-radius:30px;padding:9px 16px;min-height:44px;font-weight:600;font-size:.95rem;cursor:pointer;transition:background .2s,color .2s,transform .15s}
.chip:hover{transform:translateY(-1px)}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff}
.finder{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(18px,4vw,48px);margin-top:26px;align-items:center}
.finder-pic{border-radius:16px;border:2px solid var(--ink);overflow:hidden;background:var(--t,var(--butter-l));padding:clamp(14px,3vw,32px);transition:background .35s}
.finder-copy{display:grid;gap:12px;justify-items:start}
.finder-copy.go{animation:lift .45s var(--ease)}
@keyframes lift{from{opacity:0;transform:translateY(12px)}}
.note{font-size:.92rem;padding:10px 12px;border-left:3px solid var(--cobalt);background:var(--paper)}

/* Product cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(16px,2.4vw,28px)}
.card{display:grid;gap:10px;align-content:start;min-width:0;background:var(--sheet);border:2px solid var(--ink);border-radius:16px;padding:10px 10px 14px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.card:hover{transform:translateY(-5px) rotate(-.4deg);box-shadow:0 8px 0 var(--ink)}
.pic{position:relative;display:block;border-radius:9px;overflow:hidden;background:var(--t,var(--butter-l));padding:12px}
.pic::after{content:"© Zentriarch";position:absolute;right:7px;bottom:5px;font:500 .5625rem var(--mono);color:var(--ink);opacity:.6;pointer-events:none}
.card-body{display:grid;gap:4px;padding-inline:4px}
.card h3 a{text-decoration:none}
.spec{font:500 .75rem/1.4 var(--mono);color:var(--dim)}
.card-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 4px 0}
.price{font:700 1.25rem var(--display)}
.add{appearance:none;border:2px solid var(--ink);border-radius:9px;background:var(--butter);padding:8px 14px;min-height:42px;font-weight:700;cursor:pointer;transition:background .2s,transform .15s}
.add:hover{background:var(--ink);color:#fff}
.add:active{transform:scale(.96)}
.scroller{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:clamp(14px,2vw,24px);overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x proximity}
.scroller .card{scroll-snap-align:start}

/* Business calculator */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,5vw,64px);align-items:center}
.calc-box{background:var(--sheet);color:var(--ink);border:2px solid var(--ink);border-radius:16px;padding:clamp(16px,3vw,28px);display:grid;gap:14px}
.calc-out{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.calc-out div{background:var(--paper);border-radius:10px;padding:12px;min-width:0}
.calc-box .dim{color:var(--dim)}
.calc-out strong{display:block;font:800 clamp(1.4rem,3vw,2rem)/1.1 var(--display);font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--cobalt);height:30px}
.fld{display:grid;gap:6px;min-width:0}
.fld>label,.lab{font:500 .75rem var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}

/* Reasons */
.reasons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,36px)}
.reasons div{display:grid;gap:6px;border-top:2px solid currentColor;padding-top:14px}
.big{font:800 clamp(2rem,5vw,4.2rem)/1 var(--display);letter-spacing:-.03em;max-width:17ch;text-wrap:balance}

/* Shop */
.page{max-width:var(--max);margin-inline:auto;padding:clamp(26px,5vw,60px) var(--gut) 64px}
.bar{display:flex;flex-wrap:wrap;gap:10px 16px;justify-content:space-between;align-items:center;margin-bottom:24px}

/* Product page */
.pd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,5vw,64px);align-items:start}
.pd-pic{position:sticky;top:calc(var(--top) + 18px);border:2px solid var(--ink);border-radius:18px;padding:clamp(18px,4vw,44px)}
.pd-info{display:grid;gap:18px;min-width:0}
.crumb{font:500 .75rem var(--mono);color:var(--dim);margin-bottom:14px}
.crumb a{text-underline-offset:3px}
.qtyrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.qty{display:inline-flex;align-items:center;border:2px solid var(--ink);border-radius:10px;overflow:hidden;background:var(--sheet)}
.qty button{appearance:none;border:0;background:transparent;width:44px;height:44px;font-size:1.2rem;font-weight:700;cursor:pointer}
.qty button:hover{background:var(--butter)}
.qty input,.qty output{width:58px;border:0;background:transparent;text-align:center;font:500 1rem var(--mono);-moz-appearance:textfield;appearance:textfield}
.qty input::-webkit-inner-spin-button{appearance:none;margin:0}
.tiers{display:grid;border:2px solid var(--ink);border-radius:12px;overflow:hidden}
.tier{display:grid;grid-template-columns:minmax(0,1.4fr) auto auto;gap:12px;align-items:center;padding:11px 14px;border-top:2px solid var(--ink);transition:background .25s,color .25s}
.tier:first-child{border-top:0}
.tier.on{background:var(--ink);color:#fff}
.tier small{display:block;font-size:.78rem;opacity:.72}
.tier .mono{font-size:.9rem}
.buybox{display:grid;gap:12px;padding:16px;background:var(--sheet);border:2px solid var(--ink);border-radius:14px}
.totals{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:8px}
.totals strong{font:800 2.2rem/1 var(--display);font-variant-numeric:tabular-nums}
.perwrap{font:500 .82rem var(--mono);color:var(--dim)}
.bulknote{display:none;gap:4px;padding:10px 12px;background:var(--butter-l);border-radius:8px;font-size:.92rem}
.bulknote.on{display:grid;animation:lift .35s var(--ease)}
details{border-top:2px solid var(--line)}
details:last-child{border-bottom:2px solid var(--line)}
summary{cursor:pointer;padding-block:12px;font-weight:700}
details p{padding-bottom:12px;color:var(--dim)}

/* Forms, cart */
input[type=text],input[type=tel],input[type=email],input[type=number]:not(.q),textarea,select{width:100%;background:var(--sheet);border:2px solid var(--ink);border-radius:9px;padding:11px 12px;min-height:48px}
input:focus,textarea:focus,select:focus{outline:3px solid var(--butter);outline-offset:0}
input.bad{border-color:#c22b1c}
.err{font-size:.85rem;color:#b3231a}
.form{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.form .full{grid-column:1/-1}
.pay{display:grid;gap:8px}
.pay label{display:flex;gap:12px;align-items:center;border:2px solid var(--line);border-radius:10px;padding:12px;cursor:pointer;font-weight:600}
.pay label:has(input:checked){border-color:var(--cobalt);background:#eef1ff}
.pay input{accent-color:var(--cobalt);width:18px;height:18px}
.pay small{display:block;font-weight:400;color:var(--dim)}
.two{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.85fr);gap:clamp(22px,4vw,56px);align-items:start}
.cline{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:14px;padding-block:14px;border-top:2px solid var(--line);align-items:start}
.cline:last-child{border-bottom:2px solid var(--line)}
.cline .pic{padding:6px}
.cline .pic::after{display:none}
.cline .mid{display:grid;gap:7px;justify-items:start}
.rm{appearance:none;background:none;border:0;padding:0;color:var(--dim);font-size:.85rem;text-decoration:underline;cursor:pointer}
.sum{display:grid;gap:11px;padding:18px;background:var(--sheet);border:2px solid var(--ink);border-radius:14px;position:sticky;top:calc(var(--top) + 18px)}
.sum div{display:flex;justify-content:space-between;gap:12px}
.sum .t{border-top:2px solid var(--line);padding-top:11px;font-weight:700}
.sum .t span:last-child{font:800 1.5rem/1 var(--display)}
.empty,.done{display:grid;gap:16px;justify-items:start;padding-block:clamp(22px,6vw,64px);max-width:40rem}
.ok{width:62px;height:62px;border-radius:50%;background:var(--butter);border:2px solid var(--ink);display:grid;place-items:center;font-size:1.5rem;animation:pop .6s var(--ease)}
@keyframes pop{from{transform:scale(.3);opacity:0}}
.ref{font:500 .95rem var(--mono);padding:7px 11px;background:var(--line);border-radius:6px}
.legal{max-width:740px}
.legal section{display:grid;gap:6px;padding-block:18px;border-top:2px solid var(--line)}
.legal p{color:var(--dim)}

/* Footer */
.foot{background:var(--ink);color:#c9ccd8;padding:28px var(--gut);display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;font-size:.875rem}
.foot a{color:#fff;text-underline-offset:3px}

/* Sheet wipe between pages */
.wipe{position:fixed;inset:0;z-index:70;background:var(--butter);transform:translateX(-102%);pointer-events:none;border-right:2px solid var(--ink)}
.wipe.in{transition:transform .32s cubic-bezier(.7,0,.3,1);transform:none}
.wipe.out{transition:transform .38s cubic-bezier(.7,0,.3,1);transform:translateX(102%)}

.toast{position:fixed;z-index:60;right:var(--gut);bottom:22px;max-width:min(360px,calc(100vw - 32px));padding:12px 15px;background:var(--ink);color:#fff;border-radius:10px;font-weight:600;font-size:.95rem;transform:translateY(calc(100% + 100px));visibility:hidden;transition:transform .4s var(--ease),visibility .4s}
.toast.on{transform:none;visibility:visible}
.toast a{color:var(--butter);margin-left:6px}
.drop{position:fixed;z-index:65;pointer-events:none;transition:transform .68s cubic-bezier(.5,-.1,.3,1),opacity .68s ease-in}

/* Reveal */
.rv{transition:opacity .6s ease,transform .7s var(--ease)}
.rv.pre{opacity:0;transform:translateY(20px)}

@media (max-width:980px){
  .links{display:none}
  .pd,.two,.calc,.finder{grid-template-columns:minmax(0,1fr)}
  .pd-pic,.sum{position:static}
}
/* Phone: the shop is on the first screen with the product beside it */
@media (max-width:760px){
  :root{--top:80px}
  .strip{padding-block:6px;font-size:.625rem}
  .strip .long{display:none}
  .nav{height:56px}
  .cartlink{display:none}
  .tabs{position:fixed;inset:auto 0 0;z-index:50;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--paper);border-top:1.5px solid var(--ink);padding-bottom:env(safe-area-inset-bottom,0px)}
  .tabs a{display:flex;align-items:center;justify-content:center;gap:5px;min-height:54px;font-size:.85rem;font-weight:600;text-decoration:none}
  .tabs a.on{color:var(--cobalt)}
  .tabs [data-count]{min-width:18px;height:18px;font-size:.625rem;padding-inline:4px}
  body{padding-bottom:54px}
  .toast{left:16px;right:16px;bottom:66px;max-width:none}
  .hero{grid-template-columns:minmax(0,1fr);min-height:0;grid-template-areas:"tabs" "stage" "text"}
  .hero-bar{grid-area:tabs;padding:10px var(--gut) 10px}
  .stagev{grid-area:stage;min-height:0;height:clamp(230px,39svh,340px)}
  .herpack{width:min(84%,360px)}
  .hero-text{grid-area:text;padding:16px var(--gut) 22px;gap:10px;justify-content:start}
  .hero-text .linebar{display:none}
  h1{font-size:clamp(2.05rem,9.6vw,2.9rem)}
  .hero-sub{min-height:2.9em;font-size:1rem;line-height:1.42}
  .btns .btn{flex:1 1 42%;padding-inline:10px;min-height:50px}
  .btns .btn.wide{flex:1 1 100%}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .grid .card,.scroller .card{padding:8px 8px 12px;border-radius:13px}
  .grid .card-foot{flex-direction:column;align-items:stretch;gap:7px}
  .scroller{grid-auto-columns:68%}
  .reasons{grid-template-columns:minmax(0,1fr)}
  .form{grid-template-columns:minmax(0,1fr)}
  .cline{grid-template-columns:72px minmax(0,1fr) auto;gap:10px}
  .tier{padding-inline:12px;grid-template-columns:minmax(0,1fr) auto}
  .tier>span.small{display:none}
  .foot{padding-bottom:18px}
}
@media (min-width:761px){.hero-bar{display:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv.pre{opacity:1;transform:none}
}


/* ========== Sample 2: Paper World. Everything is cut paper. ========== */
.btn{box-shadow:0 3px 7px rgba(17,19,26,.28);border-color:transparent}
.btn:hover{box-shadow:0 7px 12px rgba(17,19,26,.26)}
.btn:active{box-shadow:0 1px 3px rgba(17,19,26,.3)}
.btn.line{border-color:var(--ink);box-shadow:none}
.card{border:0;box-shadow:0 2px 3px rgba(17,19,26,.1),0 9px 18px rgba(17,19,26,.1)}
.card:hover{box-shadow:0 4px 5px rgba(17,19,26,.12),0 16px 26px rgba(17,19,26,.14)}
.finder-pic,.buybox,.sum,.calc-box,.tiers,.pd-pic{border-color:transparent;box-shadow:0 2px 3px rgba(17,19,26,.1),0 9px 20px rgba(17,19,26,.1)}
.tier{border-top-color:var(--line)}
.wipe{background:#f6d25c;border:0}

/* Torn top edge on every section */
.torn{position:relative}
.torn::before{content:"";position:absolute;left:0;right:0;top:-23px;height:24px;background:var(--bg);z-index:3;filter:drop-shadow(0 -2px 2px rgba(17,19,26,.12));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='24' viewBox='0 0 600 24'%3E%3Cpath d='M0 24L0 5.0L15 10.6L26 5.6L42 12.7L55 9.1L63 3.0L73 10.0L79 12.5L87 5.8L93 15.0L108 13.5L122 3.4L132 9.0L138 14.4L148 4.9L165 4.5L183 8.4L195 7.1L207 5.2L213 13.4L221 12.4L229 14.6L246 12.1L262 10.0L277 4.5L289 12.9L297 14.1L314 7.9L324 8.4L335 14.9L345 3.3L352 11.6L370 9.0L382 9.6L398 5.7L411 9.7L425 5.2L432 7.2L450 7.2L464 6.7L470 3.8L487 12.3L497 11.2L511 13.8L530 7.9L549 14.5L562 13.6L574 7.5L582 13.5L589 3.8L600 8L600 24Z'/%3E%3C/svg%3E") 0 0/600px 24px repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='24' viewBox='0 0 600 24'%3E%3Cpath d='M0 24L0 5.0L15 10.6L26 5.6L42 12.7L55 9.1L63 3.0L73 10.0L79 12.5L87 5.8L93 15.0L108 13.5L122 3.4L132 9.0L138 14.4L148 4.9L165 4.5L183 8.4L195 7.1L207 5.2L213 13.4L221 12.4L229 14.6L246 12.1L262 10.0L277 4.5L289 12.9L297 14.1L314 7.9L324 8.4L335 14.9L345 3.3L352 11.6L370 9.0L382 9.6L398 5.7L411 9.7L425 5.2L432 7.2L450 7.2L464 6.7L470 3.8L487 12.3L497 11.2L511 13.8L530 7.9L549 14.5L562 13.6L574 7.5L582 13.5L589 3.8L600 8L600 24Z'/%3E%3C/svg%3E") 0 0/600px 24px repeat-x}
.sheet::before{display:none}
.sheet.torn::before{display:block}

/* Hero: one short film per product */
.phero{--bg:#f6d25c;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-areas:"text clip";min-height:calc(100vh - var(--top));background:var(--bg);transition:background .45s;color:var(--ink)}
.phero .hero-bar{display:none}
.hero-text{grid-area:text}
.clipbox{grid-area:clip;position:relative;overflow:hidden;background:var(--bg);min-height:440px;transition:background .45s}
#heroVid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.phero .mark{position:absolute;right:12px;top:10px;left:auto;bottom:auto;color:#fff;opacity:.8;text-shadow:0 0 5px rgba(0,0,0,.6);z-index:2}
.phero.dark{color:#fff}
.phero.dark .eyebrow{color:#ffd84d}
.phero .eyebrow{color:var(--ink);font-size:.8rem}
#heroHead{font-size:clamp(2.3rem,4.4vw,4.3rem)}
#heroHead.swap{animation:lift .45s var(--ease)}
.phero .linebar{border-color:var(--ink);color:var(--ink)}

/* The roll: a pack at the top, and a sheet of the real material pulled out of it */
.table{--bg:#0f3f9f;background:var(--bg);color:#fff;padding-block:clamp(44px,7vw,84px) clamp(50px,8vw,92px)}
.table .eyebrow{color:#ffd84d}
.tabletop{display:grid;gap:8px;max-width:820px;margin-inline:auto}
.rollrig{position:relative;margin-top:14px}
.rollpack{position:relative;z-index:4;display:flex;align-items:center;gap:14px;height:82px;padding-inline:20px 58px;border-radius:7px 7px 2px 2px;background:#ffd84d;color:var(--ink);box-shadow:0 7px 15px rgba(0,0,0,.34);transition:background .35s,color .35s}
.rollpack[data-line="foil"]{background:#1b3be0;color:#fff;outline:2px solid rgba(255,255,255,.35);outline-offset:-2px}
.rollpack[data-line="film"]{background:#f4fbfd}
.rollpack::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:7px;background:#8d939c;-webkit-mask:conic-gradient(from -45deg at 50% 0,#000 90deg,#0000 0) 0 0/9px 7px repeat-x;mask:conic-gradient(from 135deg at 50% 0,#000 90deg,#0000 0) 0 0/9px 7px repeat-x}
.pk-brand{font:600 clamp(1.3rem,3.5vw,1.9rem)/1 var(--display);letter-spacing:-.04em}
.pk-brand b{font-weight:800}
.pk-name{font-weight:700;font-size:.95rem}
.pk-size{margin-left:auto;font:500 .75rem var(--mono);background:rgba(17,19,26,.12);padding:4px 7px;border-radius:4px}
.rollpack[data-line="foil"] .pk-size{background:rgba(255,255,255,.2)}
.pk-end{position:absolute;right:11px;top:50%;width:30px;height:58px;transform:translateY(-50%);border-radius:50%;background:radial-gradient(ellipse 34% 40%,#b9b2a0 0 44%,#fffdf4 47% 100%);box-shadow:inset 0 0 0 2px rgba(17,19,26,.13)}
.rollpack[data-line="foil"] .pk-end{background:radial-gradient(ellipse 34% 40%,#7e8590 0 44%,#e8ebef 47% 100%)}
.rollpack[data-line="film"] .pk-end{background:radial-gradient(ellipse 34% 40%,#8fbcc6 0 44%,#e4f5f9 47% 100%)}
.sheetclip{position:relative;z-index:2;margin-inline:clamp(8px,2.5vw,22px);overflow:hidden;filter:drop-shadow(0 12px 12px rgba(0,0,0,.34))}
.rollsheet{--sheet-ink:var(--ink);position:relative;background-color:#f7f2e6;background-size:720px 720px;color:var(--sheet-ink);padding:26px clamp(18px,4vw,36px) 42px;transform:translateY(0)}
.rollsheet.still{transform:translateY(-101%);transition:none}
.rollsheet.out{transform:none;transition:transform .85s cubic-bezier(.22,.85,.25,1)}
.sheetclip:not(.never) .rollsheet:not(.out){transform:translateY(-101%)}
.rollrows,.rollfoot{position:relative}
.rrow{display:grid;grid-template-columns:clamp(82px,18vw,118px) minmax(0,1fr) auto;gap:clamp(10px,2.5vw,20px);align-items:center;padding-block:15px;border-bottom:1.5px dashed rgba(17,19,26,.32)}
.rrow:last-child{border-bottom:0}
.rtext{display:grid;gap:3px;min-width:0}
.rtext h3{font-size:clamp(1.05rem,2.6vw,1.35rem)}
.rtext h3 a{text-decoration:none}
.rtext .spec{color:#34363f}
.rbuy{display:grid;gap:6px;justify-items:end}
.rollfoot{padding-top:18px}
.rollfoot .btn{min-height:46px}

/* From the chef */
.chefsay{--bg:#f6d25c;background:var(--bg);padding-block:clamp(38px,6vw,76px)}
.chefgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(18px,4vw,52px);align-items:center}
.chefgrid img{width:100%;border-radius:12px}
.chefsay .eyebrow{color:var(--ink)}
.sheet.ink .torn::before{background:var(--ink)}

@media (max-width:980px){.chefgrid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .phero{grid-template-columns:minmax(0,1fr);grid-template-areas:"tabs" "clip" "text";min-height:0}
  .phero .hero-bar{display:block;grid-area:tabs;padding:10px var(--gut)}
  .clipbox{min-height:0;aspect-ratio:16/9}
  .phero .hero-text{padding:14px var(--gut) 30px;gap:9px}
  .phero .hero-text .linebar{display:none}
  #heroHead{font-size:clamp(1.95rem,8.6vw,2.6rem)}
  .rollpack{height:66px;padding-inline:13px 42px;gap:9px}
  .pk-name{font-size:.82rem}
  .pk-size{display:none}
  .pk-end{width:22px;height:46px;right:8px}
  .rrow{grid-template-columns:72px minmax(0,1fr) auto;gap:10px}
  .rbuy .add{min-height:38px;padding:6px 11px}
  .rollsheet{padding-inline:15px}
}
@media (prefers-reduced-motion:reduce){.rollsheet.out{transition:none}}

/* Show the whole film on laptops, so nothing in the story gets cropped */
@media (min-width:761px){
  .phero{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);min-height:0;align-items:stretch}
  .clipbox{min-height:0;aspect-ratio:16/9;align-self:start;width:100%}
  .phero .hero-text{justify-content:center}
}
.chefgrid img{border-radius:0;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(transparent,#000 3%,#000 97%,transparent);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(transparent,#000 3%,#000 97%,transparent);mask-composite:intersect}
.phero.dark .btn:not(.alt){--b:#fff;--t:var(--ink)}

/* Foil reads as metal; film is genuinely see-through, showing the table behind it */
.rollsheet[data-line="foil"]{background-color:#b9bec6}
.rollsheet[data-line="foil"] .rtext h3,.rollsheet[data-line="foil"] .spec,.rollsheet[data-line="foil"] .price{text-shadow:0 0 6px rgba(255,255,255,.95),0 0 2px rgba(255,255,255,.95)}
.rollsheet[data-line="foil"] .rtext .spec{color:#15171e}
.rollsheet[data-line="foil"] .rrow{border-bottom-color:rgba(17,19,26,.55)}
.rollsheet[data-line="film"]{background-color:transparent;--sheet-ink:#fff}
.rollsheet[data-line="film"] .rtext .spec{color:#e3ecff}
.rollsheet[data-line="film"] .rrow{border-bottom-color:rgba(255,255,255,.45)}
.rollsheet[data-line="film"] .btn.line{--b:#fff;--t:#fff}
.rollsheet[data-line="film"] .btn.line:hover{color:var(--ink);background:#fff}
.rollsheet[data-line="film"] .rpic{filter:drop-shadow(0 3px 5px rgba(0,0,0,.3))}

.rollsheet .add{color:var(--ink)}
.rollsheet .add:hover{color:#fff}

/* Keep text readable over the foil's dark folds */
.rollsheet[data-line="foil"] .rtext,.rollsheet[data-line="foil"] .price{background:rgba(255,255,255,.82);border-radius:4px;padding:5px 8px}
.rollsheet[data-line="foil"] .btn.line{background:rgba(255,255,255,.85)}
.rollsheet[data-line="foil"] .btn.line:hover{background:var(--ink)}

/* Plain foil is bright enough for text directly on it */
.table{transition:background .45s}
.rollsheet[data-line="foil"]{background-size:100% 100%;background-color:#d3d7dd}
.rollsheet[data-line="foil"] .rtext,.rollsheet[data-line="foil"] .price{background:none;padding:0}
.rollsheet[data-line="foil"] .rtext h3,.rollsheet[data-line="foil"] .spec,.rollsheet[data-line="foil"] .price{text-shadow:none}
.rollsheet[data-line="foil"] .btn.line{background:transparent}
.rollsheet[data-line="foil"] .btn.line:hover{background:var(--ink)}
.rollsheet[data-line="foil"] .rrow{border-bottom-color:rgba(17,19,26,.38)}
.rollpack[data-line="foil"]{outline:0}

.rollsheet[data-line="film"]{background-size:100% 100%}

.rollsheet[data-line="film"] .btn.line{border-color:#fff}