/* Packday · free pack maker */
.pk-head{padding-bottom:36px}
.pk-head .lead{max-width:56ch}
.maker{padding:28px 0 56px;background:var(--stock)}
.maker-grid{display:grid;gap:28px}
.brief{background:#fff;border-radius:var(--r);padding:20px;box-shadow:var(--shadow);border-top:6px solid var(--cerise-d)}
.brief-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.brief h2{font-size:1.5rem;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 18px;padding:12px;border-radius:12px;background:var(--stock2)}
.chips-l{width:100%;color:var(--muted)}
.chip{min-height:44px;padding:.5em 1em;border-radius:999px;border:2px solid var(--ink);background:#fff;color:var(--ink);font:650 .95rem var(--f-text);cursor:pointer;transition:background .15s,transform .15s}
.chip:hover{transform:translateY(-1px)}
.chip[aria-pressed=true]{background:var(--ink);color:#fff}
.f{display:grid;gap:6px;margin:0 0 14px;min-width:0}
.f label{font-weight:650;font-size:.95rem}
.opt{font-weight:400;color:var(--muted)}
.f input,.f select{min-height:48px;width:100%;padding:.6em .8em;border:2px solid #CFC5BC;border-radius:10px;background:#fff;color:var(--ink);font:400 1rem var(--f-text)}
.f input:focus-visible,.f select:focus-visible{outline:3px solid var(--cerise-d);outline-offset:1px;border-color:var(--ink)}
.f input[aria-invalid=true]{border-color:var(--cerise-d);background:#FFF2F6}
.f input[type=color]{padding:4px;cursor:pointer}
.hint{color:var(--muted);font-size:.84rem;line-height:1.35}
.f2,.f3{display:grid;gap:0 12px}
.err{margin:0 0 12px;padding:10px 12px;border-radius:10px;background:#FFE5EE;color:#7A0D33;font-weight:650}
.go{width:100%;margin:4px 0 10px}
.small{font-size:.88rem}
.btn.sm{min-height:44px;padding:.5em .9em;font-size:.9rem}

/* sealed pack */
.out{min-width:0}
.sealed{display:grid;justify-items:center;gap:16px;padding:28px 12px;text-align:center}
.sealed-pack{position:relative;width:min(62vw,240px);aspect-ratio:5/7;border-radius:18px;background:linear-gradient(160deg,#5A1530,var(--wine) 60%);box-shadow:0 24px 50px -20px rgba(42,11,20,.7),inset 0 0 0 2px rgba(255,255,255,.08);display:grid;place-items:center;overflow:hidden;transform:rotate(-4deg)}
.sealed-pack::before{content:"";position:absolute;inset:0;background:var(--foil);opacity:.28;mix-blend-mode:screen}
.sp-strip{position:absolute;left:0;right:0;top:14%;height:12px;background:repeating-linear-gradient(90deg,var(--stock) 0 8px,transparent 8px 14px);opacity:.55}
.sp-logo{position:relative;width:70%;color:#fff}.sp-logo svg{width:100%;height:auto}
.sp-n{position:absolute;bottom:14%;font:500 .8rem var(--f-mono);color:var(--pist);letter-spacing:.1em;text-transform:uppercase}
.sp-tear{position:absolute;top:4%;right:8%;font:500 .66rem var(--f-mono);color:var(--muted-d);text-transform:uppercase;letter-spacing:.08em}
.sealed-t{max-width:34ch;color:var(--muted)}

/* result */
.result{--bc:#E8175D;--bct:#fff;--bca:#B0124B}
.res-head{margin-bottom:16px}
.ok{display:inline-block;margin:0 0 8px;padding:6px 10px;border-radius:8px;background:var(--pist);color:#183B12;font-weight:600}
.res-h{font-size:clamp(1.6rem,1.2rem + 2vw,2.4rem);margin:0 0 6px;outline:none}
.res-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.res-tools .btn.ghost{background:#fff}
.ang-h{font-size:1.3rem}.angles{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:8px}
.angles li{display:grid;gap:2px;padding:10px 12px;border-left:4px solid var(--bca);background:#fff;border-radius:0 10px 10px 0}
.angles li span{color:var(--muted);font-size:.9rem;line-height:1.4}

/* cards */
.cards{list-style:none;padding:0;margin:0 0 28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pc{perspective:900px;min-width:0}
.pc-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;border-radius:14px;color:inherit;text-align:left;font:inherit}
.pc-btn:focus-visible{outline:3px solid var(--cerise-d);outline-offset:3px}
.pc-in{position:relative;display:block;aspect-ratio:4/5.7;transform-style:preserve-3d;transition:transform .55s var(--deal)}
.pc-btn:hover .pc-in{transform:translateY(-3px) rotate(-1deg)}
.backs .pc-in,.backs .pc-btn:hover .pc-in{transform:rotateY(180deg)}
.pc-face{position:absolute;inset:0;display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;box-shadow:0 1px 0 rgba(22,10,14,.08),0 12px 24px -14px rgba(22,10,14,.5)}
.pc-front{background:color-mix(in srgb,var(--bc) 16%,#FBFAF6);border:1px solid color-mix(in srgb,var(--bc) 30%,#E6DED4)}
.pc-back{transform:rotateY(180deg);background:#FBFAF6;border:1px solid var(--line);background-image:repeating-linear-gradient(0deg,transparent 0 23px,rgba(92,72,80,.12) 23px 24px)}
.pc-top{display:flex;justify-content:space-between;gap:4px;align-items:center}
.pc-no{font:600 .72rem var(--f-mono);color:var(--muted)}
.pc-ex{font:600 .6rem var(--f-mono);text-transform:uppercase;letter-spacing:.06em;background:#FFE58A;color:#3B2E00;padding:2px 5px;border-radius:4px;white-space:nowrap}
.pc-art{position:relative;flex:1 1 auto;min-height:0;border-radius:9px;display:grid;place-items:center;overflow:hidden}
.pc-art.st{background:color-mix(in srgb,var(--bc) 10%,#fff);border:1.5px dashed color-mix(in srgb,var(--bc) 45%,#bbb)}
.pc-ic{width:56%;max-width:110px;height:auto;color:var(--ink)}
.ph{position:absolute;bottom:5px;left:0;right:0;text-align:center;font:500 .6rem var(--f-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.pc-art.car{display:flex;gap:6px;padding:8px 8px 18px;background:color-mix(in srgb,var(--bc) 22%,#fff);place-items:initial;align-items:stretch}
.car-f{flex:0 0 78%;display:flex;align-items:flex-end;padding:8px;border-radius:7px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.car-f b{font:700 .8rem/1.15 var(--f-text);text-wrap:balance}
.car-f.nx{opacity:.7}
.car-dots{position:absolute;bottom:6px;left:0;right:0;display:flex;justify-content:center;gap:4px}
.car-dots i{width:5px;height:5px;border-radius:50%;background:var(--ink);opacity:.25}.car-dots i.on{opacity:.9}
.pc-art.vid{background:#1A0A10;color:#fff;align-content:center;padding:10px;border:3px solid #000}
.pc-art.vid::before{content:"";position:absolute;inset:10% 9% 26%;border:1px dashed rgba(255,255,255,.35);border-radius:4px}
.vid-hook{position:relative;margin-bottom:14%;font:400 .9rem/1.05 var(--f-disp);text-align:center;text-wrap:balance}
.vid-play{position:absolute;width:24px;height:24px;border-radius:50%;background:var(--bc);bottom:6px;left:7px}
.vid-play::after{content:"";position:absolute;left:9px;top:6px;border-left:8px solid var(--bct);border-top:6px solid transparent;border-bottom:6px solid transparent}
.vid-len{position:absolute;top:6px;right:7px;font:600 .6rem var(--f-mono);color:#fff;opacity:.8}
.pc-h{font:800 .98rem/1.08 var(--f-text);font-stretch:110%;text-wrap:balance;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
[data-tone=bold] .pc-h{font:400 .92rem/1.05 var(--f-disp)}
[data-tone=plain] .pc-h{font-weight:650;font-stretch:100%}
.pc-cta{align-self:flex-start;padding:4px 10px;border-radius:6px;background:var(--bc);color:var(--bct);font:700 .74rem var(--f-text)}
[data-tone=bold] .pc-cta{border-radius:0;text-transform:uppercase;letter-spacing:.04em}
[data-tone=warm] .pc-cta{border-radius:999px}
.pc-foot{font:500 .6rem/1.3 var(--f-mono);color:var(--muted);border-top:1px dashed color-mix(in srgb,var(--bc) 40%,#bbb);padding-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-back dl{margin:4px 0 0;display:grid;gap:7px;flex:1}
.pc-back dl div{display:grid;gap:0}
.pc-back dt{font:600 .6rem var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.pc-back dd{margin:0;font:600 .8rem/1.25 var(--f-text)}
.pc-sl{align-self:flex-start;font:600 .62rem var(--f-mono);text-transform:uppercase;padding:3px 6px;border-radius:5px;border:1.5px solid #1F7A3A;color:#1F5E2E}
.ctrl .pc-front{border:2px solid transparent;background:linear-gradient(color-mix(in srgb,var(--bc) 16%,#FBFAF6),color-mix(in srgb,var(--bc) 16%,#FBFAF6)) padding-box,var(--foil) border-box}
.ctrl .pc-front::after{content:"";position:absolute;inset:0;background:var(--foil);opacity:.16;mix-blend-mode:multiply;pointer-events:none}
/* deal in */
.dealt .pc{animation:dealin .6s var(--deal) both;animation-delay:calc(var(--i)*55ms)}
@keyframes dealin{from{opacity:0;transform:translate(-30px,-60px) rotate(-12deg) scale(.86)}to{opacity:1;transform:none}}

/* plan + sleeve */
.plan4 h3,.sleeve-out h3{font-size:1.3rem}
.weeks{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:10px}
.weeks li{background:#fff;border-radius:12px;padding:14px;border-top:4px solid var(--bca)}
.weeks li p{margin:6px 0 0}
.wk{display:inline-block;color:var(--muted);margin-right:6px}
.wk-c{display:block;font:500 .8rem var(--f-mono);color:var(--muted)}
.flags{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.fl{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;background:#fff;border-radius:10px;padding:12px;font-size:.92rem;line-height:1.45}
.fl .st{font:600 .66rem var(--f-mono);text-transform:uppercase;letter-spacing:.05em;padding:3px 7px;border-radius:5px;white-space:nowrap;background:#E5F6DF;color:#1F5E2E}
.fl.s-check .st{background:#FFF1C2;color:#5C4300}
.fl.s-needs-evidence .st{background:#FFE5EE;color:#7A0D33}
.fl.s-blocked .st{background:#2A0B14;color:#fff}
.refused{background:#fff;border-radius:var(--r);padding:22px;border-top:6px solid var(--ink)}
.refused h2{font-size:1.6rem;outline:none}
.kick2{color:var(--cerise-d);text-transform:uppercase;letter-spacing:.08em;margin:0 0 8px}

/* after */
.pk-after{padding:8px 0 64px}
.pk-after-grid{display:grid;gap:24px;align-items:start}
.pk-next h2{font-size:1.5rem}

/* dialog */
.dlg{width:min(100% - 20px,760px);max-height:min(92dvh,900px);padding:0;border:0;border-radius:18px;background:var(--stock);color:var(--ink);box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.dlg::backdrop{background:rgba(26,6,12,.72)}
.dlg-in{padding:0 18px 22px}
.dlg-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0 12px;background:var(--stock);border-bottom:1px solid var(--line)}
.dlg-top h2{font-size:1.2rem;margin:0}
.x{flex:none;width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);background:#fff;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--ink)}
.dlg-grid{display:grid;gap:18px;margin:16px 0}
.pc.big{max-width:240px;width:70%;margin:0 auto}
.pc.big .pc-in{display:block}
.facts{margin:0;display:grid;gap:10px}
.facts div{display:grid;gap:1px}
.facts dt{font:600 .7rem var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.facts dd{margin:0}
.dlg h3{font-size:1.1rem;margin:20px 0 8px}
.frames,.hooks{margin:0;padding-left:1.3em;display:grid;gap:6px}
.hooks .mono{color:var(--cerise-d);margin-right:4px}
.tblw{overflow-x:auto}
.scr{width:100%;border-collapse:collapse;font-size:.9rem}
.scr th,.scr td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.scr th{font:600 .7rem var(--f-mono);text-transform:uppercase;color:var(--muted)}
.board{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.board li{position:relative;aspect-ratio:9/16;border-radius:8px;background:#1A0A10;color:#fff;display:grid;place-items:center;padding:12% 10% 22%;text-align:center}
.board li::before{content:"";position:absolute;inset:8% 8% 20%;border:1px dashed rgba(255,255,255,.4);border-radius:4px}
.bd-n{position:absolute;top:5px;left:7px;font-size:.66rem;opacity:.75}
.bd-t{position:relative;font:600 .74rem/1.2 var(--f-text);overflow-wrap:anywhere}

@media (min-width:600px){
 .f2{grid-template-columns:1fr 1fr}
 .f3{grid-template-columns:1fr 1fr 110px}
 .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
 .dlg-grid{grid-template-columns:220px 1fr;align-items:start}
 .pc.big{width:100%}
 .board{grid-template-columns:repeat(6,minmax(0,1fr))}
 .weeks{grid-template-columns:1fr 1fr}
}
@media (min-width:900px){
 .maker-grid{grid-template-columns:minmax(340px,400px) 1fr;gap:40px;align-items:start}
 .brief{position:sticky;top:92px}
 .pk-after-grid{grid-template-columns:1fr 1fr}
 .sealed{padding-top:60px}
}
@media (min-width:1200px){ .pc-h{font-size:1.06rem} .pc-face{padding:12px} }
@media (prefers-reduced-motion:reduce){ .dealt .pc{animation:none} .pc-in{transition:none} .pc-btn:hover .pc-in{transform:none} .backs .pc-in{transform:rotateY(180deg)} }
@media (min-width:900px){.angles{grid-template-columns:repeat(3,1fr)}}

/* static layout variety: three compositions so a pack doesn't read as ten copies */
.pc-art.st.l1{background:color-mix(in srgb,var(--bc) 50%,#fff);border:0;place-items:end end}
.pc-art.st.l1 .pc-ic{width:74%;max-width:150px;transform:translate(10%,8%) rotate(-9deg);color:var(--ink);filter:drop-shadow(2px 2px 0 #fff) drop-shadow(-2px -2px 0 #fff) drop-shadow(2px -2px 0 #fff) drop-shadow(-2px 2px 0 #fff)}
.pc-art.st.l2{background:linear-gradient(140deg,color-mix(in srgb,var(--bc) 30%,#fff) 0 48%,#fff 48%);border:0;place-items:start start;padding:10px}
.pc-art.st.l2 .pc-ic{width:40%;max-width:80px}
.pc-art.st.l2::after{content:"";position:absolute;right:12%;bottom:22%;width:30%;aspect-ratio:1;border-radius:50%;border:2px dashed color-mix(in srgb,var(--bc) 60%,#888)}
.pc-art.st.l1 .ph,.pc-art.st.l2 .ph{left:6px;right:auto;bottom:6px;background:#fff;color:#4a3a40;padding:2px 6px;border-radius:4px}

/* upgrade 2026-10-24: example photos instead of drawn icons */
.pc-art img.pc-photo{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transform:none;filter:none;color:inherit}
.pc-art.st.l2 img.pc-photo{inset:0 0 0 48%;width:52%}
.pc-art .ph{z-index:1}
/* upgrade 2026-10-24: sealed pack is the foil-pack photo */
.sealed-pack{background:#2A0B14 url(../img/wrapper-600.webp) center/100% 100% no-repeat;border-radius:6px;box-shadow:0 24px 50px -20px rgba(42,11,20,.7)}
.sealed-pack::before{background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.25) 50%,transparent 65%);opacity:1;mix-blend-mode:normal}
.sp-strip{display:none}
.sp-n,.sp-tear{color:#fff;text-shadow:0 1px 6px rgba(42,11,20,.7)}
.sp-tear{top:9%}.sp-n{bottom:16%}