/* Merchandise page. Loads after styles.css and reuses its tokens, nav, FAQ, form and finale. */

/* ---------- hero ---------- */
.mc-hero{position:relative;overflow:hidden;text-align:left;padding-block:clamp(36px,6vw,80px) clamp(64px,8vw,104px);background:var(--bg)}
.mc-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:radial-gradient(55% 70% at 78% 45%,#000 0%,transparent 75%);mask-image:radial-gradient(55% 70% at 78% 45%,#000 0%,transparent 75%);opacity:.6}
.mc-hero>.wrap{position:relative;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(36px,5vw,72px);align-items:center}
@media (max-width:1020px){.mc-hero>.wrap{grid-template-columns:1fr}}
.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink3);margin-bottom:22px}
.crumb a{color:var(--ink3);text-decoration:none}.crumb a:hover{color:var(--ink)}
.crumb .here{color:var(--ink);font-weight:600}
.mc-hero h1{font-size:clamp(50px,5.8vw,92px);line-height:.88;margin:0 0 22px}
.mc-hero h1 .ln{display:block;overflow-x:visible;overflow-y:clip;padding-top:.04em}
.mc-hero h1 .ln>span{display:block;white-space:normal;animation:lnUp 1.1s cubic-bezier(.2,.8,.2,1) backwards}
.mc-hero h1 .ln:nth-child(2)>span{animation-delay:.12s}
.mc-hero h1 em{font-style:normal;color:var(--red)}
.mc-hero .lead{margin:0 0 28px}
.mc-hero .hero-ctas{justify-content:flex-start}
.hero-ticks{list-style:none;margin:28px 0 0;padding:22px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 24px;font-size:15px;font-weight:500;color:var(--ink2)}
.hero-ticks li{display:inline-flex;align-items:center;gap:8px}
.hero-ticks svg{width:18px;height:18px;padding:3px;border-radius:50%;background:var(--tint);color:var(--red)}
.mc-hero .lead,.mc-hero .hero-ctas,.hero-ticks,.crumb{animation:fadeUp 1s .3s cubic-bezier(.2,.8,.2,1) backwards}

.collage{position:relative;height:clamp(460px,46vw,600px)}
.cl{position:absolute;margin:0;border-radius:20px;overflow:hidden;box-shadow:0 30px 60px -36px rgba(0,0,0,.45);animation:clIn 1.1s cubic-bezier(.2,.8,.2,1) backwards}
.cl img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.cl:hover img{transform:scale(1.04)}
.c-a{left:0;top:6%;width:40%;height:74%;animation-delay:.2s}
.c-b{left:43%;top:0;width:28%;height:42%;background:#E5E5E3;animation-delay:.32s}
.c-c{left:43%;top:46%;width:28%;height:50%;animation-delay:.44s}
.c-d{right:0;top:18%;width:26%;height:44%;background:#E5E5E3;animation-delay:.56s}
.c-b img,.c-d img{object-fit:contain}
@keyframes clIn{from{opacity:0;transform:translateY(40px)}}
.order{position:absolute;left:6%;bottom:2%;z-index:2;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 18px 12px 12px;box-shadow:0 24px 40px -20px rgba(0,0,0,.35);transition:opacity .35s,transform .45s cubic-bezier(.2,1.2,.4,1)}
.order.swap{opacity:0;transform:translateY(10px)}
.oi{width:40px;height:40px;border-radius:12px;background:#E5F6EC;color:#0B7A43;display:grid;place-items:center;flex:none}
.oi svg{width:21px;height:21px}
.order small{display:block;font-size:12px;color:var(--ink3)}
.order b{display:block;font-size:14px;font-weight:600;white-space:nowrap}
.mc-note{position:absolute;right:0;bottom:-28px;margin:0;font-size:12px;color:var(--ink3)}
@media (max-width:560px){.collage{height:440px}.c-a{width:48%;height:66%}.c-b{left:51%;width:49%;height:38%}.c-c{left:51%;top:41%;width:49%;height:42%}.c-d{display:none}.order{left:0;bottom:0}}

/* ---------- principle band ---------- */
.mc-band{background:var(--dark);color:#fff}
.mc-band-in{display:flex;justify-content:space-between;align-items:center;gap:16px 40px;flex-wrap:wrap;padding-block:30px}
.mc-band p{margin:0;font:700 clamp(30px,3.6vw,52px)/.95 var(--cond);text-transform:uppercase}
.mc-band b{color:#FF5252;font-weight:700}
.mc-band span{font-size:16px;color:var(--dmuted);max-width:42ch}

/* ---------- process ---------- */
.mc-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:860px){.mc-steps{grid-template-columns:1fr}}
.mc-steps li{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:22px;padding:22px;display:flex;flex-direction:column}
.mc-steps .n{position:absolute;z-index:2;top:34px;right:34px;background:var(--bg);padding:6px 8px 5px;border-radius:6px;font:700 15px/1 var(--cond);letter-spacing:.1em;color:var(--red)}
.mc-steps h3{font:700 clamp(28px,2.6vw,36px)/.95 var(--cond);text-transform:uppercase;letter-spacing:0;margin:20px 0 8px}
.mc-steps p{margin:0;font-size:15px;line-height:1.55;color:var(--ink2)}
.vis{height:180px;border-radius:14px;background:var(--soft);position:relative;overflow:hidden}
.v1{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:22px}
.v1 i{border-radius:10px;border:2px dashed #CFCFCB;background:var(--bg)}
.v1 i:nth-child(2){border:0;background:var(--ink)}
.v1 i:nth-child(2)::after{content:"";display:block;width:50%;height:6px;margin:45% auto 0;border-radius:3px;background:#E8281E}
.v2{display:grid;place-items:center}
.v2 img{height:150px;width:auto}
.v2 b{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#0B7A43;background:#E5F6EC;padding:6px 10px;border-radius:999px}
.v2 b svg{width:14px;height:14px}
.v3{display:grid;align-content:center;gap:8px;padding:18px}
.v3 span{display:flex;align-items:center;gap:10px;background:var(--bg);border-radius:10px;padding:10px 12px;font-size:13px;font-weight:600}
.v3 span::before{content:"";width:10px;height:10px;border-radius:50%;background:#2BD576}
.v3 span:nth-child(2){opacity:.7}.v3 span:nth-child(3){opacity:.45}

/* ---------- hands on / off ---------- */
.inv{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:center}
@media (max-width:900px){.inv{grid-template-columns:1fr}}
.inv h2{margin:16px 0 14px}
.inv .lead{margin-bottom:24px}
.seg2{display:inline-grid;grid-auto-flow:column;gap:4px;background:var(--soft);border-radius:999px;padding:4px}
.seg2 button{border:0;background:none;border-radius:999px;padding:0 22px;min-height:46px;font:600 15px/1 var(--sans);color:var(--ink2);cursor:pointer;transition:background .25s,color .25s}
.seg2 button[aria-pressed="true"]{background:var(--ink);color:#fff}
.who-t{border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -44px rgba(0,0,0,.3)}
.wt-h,.wt{display:grid;grid-template-columns:minmax(0,1.6fr) 1fr 1fr;align-items:center}
.wt-h{background:var(--dark);color:#fff;font:700 13px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase}
.wt-h span{padding:16px 20px}
.wt-h span+span,.wt i{text-align:center}
.wt{border-top:1px solid var(--line)}
.wt b{padding:16px 20px;font-size:15px;font-weight:600}
.wt i{display:grid;place-items:center;height:100%;font-style:normal}
.wt i::before{content:"";width:26px;height:26px;border-radius:50%;background:var(--soft2);transition:background .35s,transform .35s}
.wt i.on::before{background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 8.5 2.5 2.5L12 5.5'/%3E%3C/svg%3E") center/14px no-repeat;transform:scale(1.06)}
.wt i.you.on::before{background-color:var(--ink)}

/* ---------- made with creators ---------- */
.made{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:860px){.made{grid-template-columns:1fr 1fr}}
.made figure{margin:0;aspect-ratio:3/4;border-radius:18px;overflow:hidden;background:#E5E5E3}
.made img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.made figure:nth-child(even) img{object-fit:contain}
.made figure:hover img{transform:scale(1.04)}

.opt{color:var(--ink3);font-weight:400}