/* /trade/ scroll sell sheet (loaded only on that page, after styles.css). Mobile first, same tokens as the site.
   The story: a sticky stage (.tr-stage: 3D can and bottle, posters until the 3D starts) with steps scrolling past.
   Phones: the product sits in the top half, step cards rise through the bottom half and cover it as they pass.
   980px and up: the stage is the right half, steps run down the left half.
   js/trade.js sets --out (can slides out) and --in (bottle fades and turns in) on the stage, 0 to 1, from the handoff step,
   and .is-proof while the proof step is up (phones: the product shrinks to make room). */
.tr-body{--stage-h:calc(100svh - var(--header-h))}
.tr-nav{display:flex;align-items:center;gap:14px;height:var(--header-h)}
.tr-nav .logo img{height:30px}
.tr-top-l{margin-right:auto;padding-left:14px;border-left:1px solid var(--line);line-height:1;font-size:16px}
@media (min-width:980px){.tr-nav .logo img{height:36px}}

.tr-story{position:relative}
.tr-stage{position:sticky;top:var(--header-h);height:var(--stage-h);margin-bottom:calc(-1 * var(--stage-h));z-index:0;overflow:hidden;pointer-events:none;--out:0;--in:0}
.tr-prod{position:absolute;left:0;right:0;top:3%;height:48%;transform-origin:50% 0;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.tr-prod::before{content:"";position:absolute;inset:0;margin:auto;height:72%;aspect-ratio:1;border-radius:50%;background:var(--paper2);opacity:calc(1 - var(--out) * 1.6)}
.tr-prod::after{content:"";position:absolute;left:0;right:0;bottom:2%;margin:auto;width:34%;height:4.5%;border-radius:50%;background:radial-gradient(closest-side,rgba(18,23,47,.2),transparent);opacity:calc(1 - var(--out) * 1.6)}
.tr-can{position:absolute;inset:0;margin:auto;height:100%;aspect-ratio:3/4;z-index:1;transform:translateX(calc(var(--out) * -165%)) rotate(calc(var(--out) * -10deg));animation:tr-in .9s cubic-bezier(.2,.7,.2,1) both}
.tr-bottle[data-wesake-bottle]{position:absolute;inset:0;margin:auto;height:100%;width:auto;aspect-ratio:1/2;z-index:0;opacity:var(--in);scale:calc(.84 + var(--in) * .16)}
.tr[data-poster-mode] .tr-bottle[data-wesake-bottle]{opacity:1;scale:1;z-index:3}
@keyframes tr-in{from{opacity:0;translate:0 10%;scale:.9}to{opacity:1;translate:0 0;scale:1}}
.tr-stage.is-proof .tr-prod{opacity:0;transform:scale(.9)}
.tr-prod{transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .5s}
/* everything after the story covers the stage as it leaves (sticky stages overhang their container) */
.tr-specs,.tr-shelf,.tr-order,.tr-foot{position:relative;z-index:2}

/* steps */
.tr-step{position:relative;z-index:1;padding:0 max(var(--gutter),env(safe-area-inset-right,0px)) 0 max(var(--gutter),env(safe-area-inset-left,0px))}
.tr-card{position:relative;background:var(--paper)}
.tr-card::before{content:"";position:absolute;left:calc(-1 * var(--gutter));right:calc(-1 * var(--gutter));bottom:100%;height:48px;background:linear-gradient(to top,var(--paper),rgba(245,243,238,0));pointer-events:none}
.tr-card::after{content:"";position:absolute;z-index:-1;inset:0 calc(-1 * var(--gutter));background:var(--paper)}
.tr-hook{min-height:var(--stage-h);display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:20px}
.tr-hook .tr-card::before{display:none}
.tr-hook h1{margin-top:10px;font-size:clamp(31px,8.8vw,46px);line-height:1}
.tr-hook .lede{margin-top:12px;font-size:17px;line-height:1.5;color:var(--ink);max-width:36ch}
.tr-for{display:flex;width:fit-content;align-items:center;gap:6px;margin-bottom:12px;padding:7px 14px 6px;border-radius:999px;background:var(--navy);color:#fff;font-size:14px;font-weight:600;line-height:1.3}
.tr-for b{font-weight:800}
.tr-for[hidden]{display:none}
.tr-cue{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:14px;font-weight:800;font-size:15px;color:var(--navy);text-decoration:none}
.tr-cue svg{width:20px;height:20px;animation:tr-bob 1.8s ease-in-out infinite}
@keyframes tr-bob{50%{transform:translateY(4px)}}

.tr-why{padding-top:12vh}
.tr-why-head{padding-bottom:8px}
.tr-points{list-style:none;margin:0;padding:0}
.tr-point{min-height:72svh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:6svh}
.tr-point .tr-card{padding:6px 0 2px}
.tr-num{font-family:"Bebas Neue",sans-serif;font-size:44px;line-height:1;color:var(--red)}
.tr-point h3{margin-top:6px;font-size:clamp(26px,7vw,34px);line-height:1.05;letter-spacing:-.02em}
.tr-point p{margin-top:10px;font-size:17px;max-width:34ch;color:var(--ink)}
.tr-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:14px 0 0;padding:0}
.tr-chips li{padding:8px 14px 7px;border:1.5px solid var(--navy);border-radius:999px;font-size:15px;font-weight:700;color:var(--navy)}
.tr-chips li.solid{background:var(--navy);color:#fff}
.tr-js .tr-reveal{opacity:.08;transform:translateY(28px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.tr-js .tr-reveal.in{opacity:1;transform:none}

.tr-proof{padding-top:40svh}
.tr-proof .tr-card{padding:8px 0 24px}
.tr-proof h2{font-size:clamp(32px,9vw,52px)}
.tr-retail{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.tr-rcard{display:grid;gap:10px;align-content:start;padding:16px;border-radius:16px;background:#fff}
.tr-rcard img{height:30px;width:auto}
.tr-rcard p{font-size:14px;line-height:1.35}
.tr-rcard b{display:block;font-size:17px;font-weight:900;color:var(--navy);letter-spacing:-.01em}
.tr-big{display:grid;gap:4px;margin-top:22px}
.tr-big b{font-size:clamp(44px,13vw,72px);line-height:.95;font-weight:900;letter-spacing:-.03em;color:var(--red)}
.tr-big span{font-size:16px;color:var(--ink)}
.tr-press-l{margin-top:24px}
.tr-press{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 18px;align-items:center;list-style:none;margin:10px 0 0;padding:0}
.tr-press img{height:auto;max-height:22px;width:auto;max-width:100%;margin:auto;filter:grayscale(1) brightness(.35);opacity:.85}
.tr-quote{margin:26px 0 0;padding:20px;border-radius:18px;background:var(--paper2)}
.tr-quote blockquote{margin:0;font-size:18px;line-height:1.4;font-weight:700;color:var(--navy)}
.tr-quote blockquote::before{content:"\201C"}.tr-quote blockquote::after{content:"\201D"}
.tr-quote .who{display:flex;align-items:center;gap:12px;margin-top:14px}
.tr-quote .who img,.tr-quote .av{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.tr-quote .av{display:grid;place-items:center;background:var(--navy);color:#fff;font-weight:800;font-size:14px}
.tr-quote .who strong{display:block;font-size:15px;color:var(--ink)}
.tr-quote .who span span{font-size:14px;color:var(--muted)}

.tr-handoff{min-height:200svh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:28px}
.tr-handoff h2{margin-top:10px;font-size:clamp(30px,8.4vw,52px)}
.tr-handoff p{margin-top:12px;font-size:17px;color:var(--ink)}

/* after the story */
.tr-head{display:grid;gap:12px;margin-bottom:28px}
.tr-head .label+h2{margin-top:0}
.tr-specs{background:#fff}
.tr-table-wrap{border-radius:20px;background:var(--paper);padding:6px 8px}
.tr-table{width:100%;border-collapse:collapse;table-layout:fixed}
.tr-table th,.tr-table td{padding:13px 5px;text-align:left;vertical-align:top;border-top:1px solid var(--line);font-size:15px;line-height:1.35}
.tr-table thead th{border-top:0;vertical-align:bottom;padding-top:14px}
.tr-table thead img{height:84px;width:auto;margin-bottom:8px}
.tr-table thead span{display:block;font-size:16px;font-weight:900;color:var(--navy);letter-spacing:-.01em}
.tr-table tbody th{width:20%;font-family:"Bebas Neue",sans-serif;font-weight:400;letter-spacing:.12em;font-size:15px;color:var(--muted)}
.tr-table thead th:first-child{width:20%}
.tr-table .tr-code td{font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tr-table td{font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.tr-note{margin-top:14px;font-size:15px}
.tr-shelf{background:var(--paper2)}
.tr-spots{display:grid;gap:12px;list-style:none;margin:0;padding:0}
.tr-spots li{display:grid;grid-template-columns:44px 1fr;column-gap:14px;padding:18px;border-radius:18px;background:var(--paper)}
.tr-spots svg{grid-row:span 2;width:40px;height:40px;padding:8px;border-radius:50%;background:var(--navy);color:#fff}
.tr-spots h3{font-size:19px}
.tr-spots p{margin-top:4px;font-size:16px;color:var(--ink)}
.tr-order{background:var(--paper)}
.tr-order .tr-for{justify-self:start;margin:4px 0 0}
.tr-order-grid{display:grid;gap:16px}
.tr-dist{display:grid;gap:14px;align-content:start}
.tr-state{display:grid;gap:6px}
.tr-state select{min-height:52px;width:100%;padding:0 44px 0 16px;border:1.5px solid var(--navy);border-radius:14px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%232A388F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center/20px;appearance:none;font:inherit;font-size:17px;font-weight:700;color:var(--navy)}
.tr-dcard{padding:20px;border-radius:20px;background:var(--ink);color:#fff}
.tr-dcard .label{color:rgba(255,255,255,.7)}
.tr-dname b{display:block;margin-top:6px;font-size:clamp(24px,6.6vw,32px);line-height:1.1;font-weight:900;letter-spacing:-.02em;color:#fff}
.tr-dname span{display:block;margin-top:6px;font-size:16px;color:rgba(255,255,255,.8)}
.tr-dname a{color:#fff;font-weight:700}
.tr-dname[hidden]{display:none}
.tr-dlist{list-style:none;margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--line-d);display:grid;gap:8px;font-size:14px;font-weight:600;color:rgba(255,255,255,.85)}
.tr-dlist span{display:inline-block;min-width:92px;font-family:"Bebas Neue",sans-serif;font-weight:400;letter-spacing:.12em;font-size:15px;color:rgba(255,255,255,.6)}
.tr-pdfs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.tr-print{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:15px;color:var(--navy)}
.tr-form{display:grid;gap:14px;padding:20px;border-radius:20px;background:#fff}
.tr-form h3{font-size:22px}
.tr-req{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0;padding:4px;border:0;border-radius:999px;background:var(--paper2)}
.tr-req label{position:relative;display:grid}
.tr-req input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.tr-req span{display:grid;place-items:center;min-height:44px;border-radius:999px;font-weight:800;font-size:15px;color:var(--navy)}
.tr-req input:checked+span{background:var(--navy);color:#fff}
.tr-req input:focus-visible+span{outline:2px solid var(--red);outline-offset:2px}
.tr-form .btn{width:100%}

.tr-foot{background:var(--ink);color:#fff;padding:40px 0 max(32px,env(safe-area-inset-bottom,0px))}
.tr-foot .wrap{display:grid;gap:14px}
.tr-foot .logo img{height:30px}
.tr-foot p{font-size:14px;color:rgba(255,255,255,.72)}
.tr-foot nav{display:flex;flex-wrap:wrap;gap:4px 20px}
.tr-foot nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:15px;color:#fff;text-decoration:none}

@media (min-width:600px){
.tr-spots{grid-template-columns:1fr 1fr}
.tr-table .tr-code td{font-size:15px}
.tr-table th,.tr-table td{padding:15px 12px;font-size:16px}
.tr-table thead img{height:110px}}

@media (min-width:980px){
.tr-stage{width:50%;margin-left:50%}
.tr-prod{top:9%;height:80%}
.tr-stage.is-proof .tr-prod{transform:none;opacity:1}
.tr-step{width:50%;padding:0 48px 0 max(var(--gutter),calc((100% - 1200px) / 2 + var(--gutter)))}
.tr-card::before,.tr-card::after{display:none}
.tr-card{background:none}
.tr-hook{justify-content:center;padding-bottom:4vh}
.tr-hook h1{font-size:clamp(46px,4.6vw,74px);line-height:.95}
.tr-hook .lede{font-size:20px;margin-top:20px}
.tr-why{padding-top:10vh}
.tr-point{min-height:78vh;justify-content:center;padding-bottom:0}
.tr-point h3{font-size:clamp(34px,3.4vw,48px)}
.tr-point p{font-size:19px}
.tr-proof{padding-top:16vh;padding-bottom:10vh}
.tr-retail{gap:14px}
.tr-press{gap:22px 28px}
.tr-press img{max-height:26px}
.tr-handoff{min-height:170vh;justify-content:flex-end;padding-bottom:28vh}
.tr-handoff h2{font-size:clamp(40px,3.8vw,58px)}
.tr-head{grid-template-columns:minmax(0,1fr) auto;align-items:end;margin-bottom:40px}
.tr-head .label{grid-column:1/-1}
.tr-table-wrap{padding:8px 28px}
.tr-table thead img{height:140px}
.tr-spots{grid-template-columns:repeat(4,1fr);gap:16px}
.tr-spots li{grid-template-columns:1fr;row-gap:12px;padding:24px}
.tr-spots svg{grid-row:auto;width:48px;height:48px;padding:10px}
.tr-order-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.tr-form{padding:28px}
.tr-foot .wrap{grid-template-columns:auto 1fr auto;align-items:center;gap:28px}}

@media (prefers-reduced-motion:reduce){
.tr-can{animation:none}
.tr-prod,.tr-js .tr-reveal{transition:none}
.tr-cue svg{animation:none}}