/* T6 Ship Together page. Loads after styles.css on these two pages only.
   Look: factory/t6-order-merge/LOOK.md (Shopify-admin-like white and cool grey, system sans, the 4x6 shipping label as the signature element).
   The six tokens below are the whole palette; everything else is black at some opacity. The site's own colours and fonts are not used here.
   No external resources, no inline styles, no images. */
:root{
--stock:#FFFFFF;--table:#EEF0F2;--print:#000000;--note:#4A4F57;--kraft:#C4925A;--sticker:#FF5B1F;
--rule:rgb(0 0 0 / .16);
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--mono:ui-monospace,SFMono-Regular,Menlo,monospace;
/* Point the shared header, footer, buttons and details at this page's tokens. */
--ink:var(--print);--muted:var(--note);--paper:var(--stock);--line:var(--rule);--serif:var(--sans)}
body{background:var(--stock);color:var(--print);font-family:var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a:focus-visible,summary:focus-visible,.buy-button:focus-visible{outline:3px solid var(--print);outline-offset:4px}
h1{font-weight:800;letter-spacing:-.035em}
h2{font-weight:700;letter-spacing:-.02em}
h3{font-weight:700}
.brand-mark{font-size:25px;font-weight:800;padding-bottom:3px}
.site-header nav a:first-child{display:inline}

/* Hero: headline, one sentence, status on white; the packing bench below it */
.mo-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:72px;align-items:end;padding-block:8px 36px}
.mo-h1{font-size:clamp(52px,6.8vw,96px);line-height:1}
.mo-intro{font-size:20px;line-height:1.45;max-width:440px}
.mo-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:26px}
.mo-soon{cursor:default;border-radius:8px}
.mo-soon:hover{background:var(--ink)}
.mo-actions small{font-size:14px;color:var(--note);line-height:1.35}
.mo-rest .text-link{margin-top:22px;padding-block:8px 5px}
.mo-bench{background:var(--table)}
.mo-art{position:relative;width:min(720px,calc(100% - 48px));margin:0 auto;padding-block:44px 20px}
.mo-tag{position:absolute;left:0;top:20px;font-size:14px;color:var(--note)}
.mo-art figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;font-size:14px;color:var(--note)}
.mo-pause-input{position:absolute;right:0;bottom:0;width:1px;height:1px;margin:0;opacity:0}
.mo-pause-btn{display:inline-flex;white-space:nowrap;flex:none;align-items:center;min-height:44px;padding:0 18px;border:1.5px solid var(--print);border-radius:8px;background:var(--stock);color:var(--print);font-size:14px;font-weight:700;cursor:pointer;transition-property:transform,background-color,color;transition-duration:.15s;transition-timing-function:cubic-bezier(.2,0,0,1)}
.mo-pause-btn:active{transform:scale(.96)}
@media(hover:hover){.mo-pause-btn:hover{background:var(--print);color:var(--stock)}}
.mo-pause-btn .off{display:none}
.mo-pause-input:checked ~ figcaption .on{display:none}
.mo-pause-input:checked ~ figcaption .off{display:inline}
.mo-pause-input:focus-visible ~ figcaption .mo-pause-btn{outline:3px solid var(--print);outline-offset:4px}

/* Shipping-label parts, shared by the animation, the example and the pricing tops */
.mo-defs{position:absolute;width:0;height:0;overflow:hidden}
.f-paper{fill:var(--stock);stroke:rgb(0 0 0 / .22)}
.f-bar,.f-code{fill:var(--print)}
.f-rule{fill:rgb(0 0 0 / .28)}
.skel{fill:rgb(0 0 0 / .13)}
.l-bar{font:700 22px var(--mono);fill:var(--stock)}
.l-bar-s{font-size:20px}
.l-sm{font:400 13px var(--mono);fill:var(--note)}
.l-name{font:700 17px var(--mono);fill:var(--print)}
.l-addr{font:400 15px var(--mono);fill:var(--print)}
.l-price{font:700 40px var(--mono);fill:var(--print);font-variant-numeric:tabular-nums}
.t-cap{font-size:17px;fill:var(--note)}
.t-total{font-size:30px;font-weight:800;fill:var(--print);font-variant-numeric:tabular-nums}
.bracket{fill:none;stroke:rgb(0 0 0 / .4);stroke-width:1.5}
.sticker{fill:var(--sticker)}
.t-st1{font-size:15px;font-weight:700;fill:var(--print);text-anchor:middle}
.t-st2{font-size:28px;font-weight:800;fill:var(--print);text-anchor:middle;font-variant-numeric:tabular-nums}

/* Scene (SVG). The base style is the final frame; the animation only plays the way there. */
.mo-scene{display:block;width:100%;height:auto;overflow:visible}
.mo-scene-wide{--ax:24px;--ay:118px;--bx:224px;--by:118px;--ls:.9;--mx:538px;--my:166px;--ms:.7}
.mo-scene-compact{--ax:15px;--ay:30px;--bx:115px;--by:30px;--ls:.46;--mx:65px;--my:218px;--ms:.46;display:none;max-width:420px;margin-inline:auto}
.mo-scene-compact .t-cap{font-size:15px}
.mo-scene-compact .t-total{font-size:30px}
.mo-scene-compact .t-chip{font-size:13px}
.mo-scene-compact .t-st1{font-size:14px}
.mo-scene-compact .t-st2{font-size:24px}
.mo-scene-compact .l-bar{font-size:26px}
.mo-scene-compact .l-bar-s{font-size:19px}
.mo-scene-compact .l-price{font-size:44px}
.shade{fill:rgb(0 0 0 / .08)}
.box-body,.box-flap{fill:var(--kraft)}
.box-flap-hi{fill:var(--stock);fill-opacity:.18}
.box-fold{fill:rgb(0 0 0 / .18)}
.tape{fill:var(--stock);fill-opacity:.55;stroke:rgb(0 0 0 / .12);transform-box:fill-box;transform-origin:top}
.t-chip{font-size:16px;fill:var(--note)}
.t-head{font-size:34px;font-weight:800;letter-spacing:-.03em;fill:var(--print)}
.sticker-g{transform-box:fill-box;transform-origin:center}
.lbl-a0,.lbl-b0{opacity:.6}
.lbl-a0 .l-sm,.lbl-b0 .l-sm{fill:var(--print)}
.lbl-a0,.lbl-a{transform:translate(var(--ax),var(--ay)) scale(var(--ls))}
.lbl-b0,.lbl-b{transform:translate(var(--bx),var(--by)) scale(var(--ls))}
.lbl-a{opacity:0}
.lbl-b{opacity:0}
.lbl-m{transform:translate(var(--mx),var(--my)) scale(var(--ms))}
.chip{opacity:0}
@media (prefers-reduced-motion:no-preference){
.mo-scene{--ease:cubic-bezier(.45,0,.2,1)}
.mo-scene .lbl-a{animation:mo-a 10s var(--ease) infinite}
.mo-scene .lbl-b{animation:mo-b 10s var(--ease) infinite}
.mo-scene .lbl-m{animation:mo-m 10s var(--ease) infinite}
.mo-scene .chip{animation:mo-chip 10s var(--ease) infinite}
.mo-scene .tape{animation:mo-tape 10s var(--ease) infinite}
.mo-scene .sticker-g{animation:mo-sticker 10s var(--ease) infinite}
.mo-scene .head-g{animation:mo-head 10s var(--ease) infinite}
.mo-scene .after{animation:mo-after 10s var(--ease) infinite}
}
@keyframes mo-a{0%{opacity:0;transform:translate(var(--ax),calc(var(--ay) - 12px)) scale(var(--ls))}5%,24%{opacity:1;transform:translate(var(--ax),var(--ay)) scale(var(--ls))}42%{opacity:1;transform:translate(var(--mx),var(--my)) scale(var(--ms))}44%,100%{opacity:0;transform:translate(var(--mx),var(--my)) scale(var(--ms))}}
@keyframes mo-b{0%{opacity:0;transform:translate(var(--bx),calc(var(--by) - 12px)) scale(var(--ls))}7%,26%{opacity:1;transform:translate(var(--bx),var(--by)) scale(var(--ls))}44%{opacity:1;transform:translate(var(--mx),var(--my)) scale(var(--ms))}46%,100%{opacity:0;transform:translate(var(--mx),var(--my)) scale(var(--ms))}}
@keyframes mo-m{0%,42%{opacity:0}46%,94%{opacity:1}98%,100%{opacity:0}}
@keyframes mo-chip{0%,8%{opacity:0}12%,22%{opacity:1}26%,100%{opacity:0}}
@keyframes mo-tape{0%,46%{opacity:0;transform:scaleY(0)}52%,94%{opacity:1;transform:scaleY(1)}98%,100%{opacity:0;transform:scaleY(1)}}
@keyframes mo-sticker{0%,54%{opacity:0;transform:scale(.7)}60%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
@keyframes mo-head{0%,52%{opacity:0;transform:translateY(6px)}58%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
@keyframes mo-after{0%,56%{opacity:0}62%,94%{opacity:1}98%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.mo-scene *{animation:none!important}.mo-pause-btn,.mo-pause-input{display:none}}
@media print{.mo-scene *{animation:none!important}.mo-pause-btn,.mo-pause-input{display:none}}
.mo-pause-input:checked ~ .mo-scene *{animation-play-state:paused!important}

/* Sections */
.mo-sec{padding-block:104px}
.mo-sec h2{max-width:680px;font-size:clamp(32px,3.8vw,52px);line-height:1.05}
.mo-lead{font-size:20px;line-height:1.5;max-width:560px;margin-top:20px;color:var(--note)}
.mo-points{display:grid;grid-template-columns:repeat(3,1fr);gap:56px;margin-top:56px;padding:0;list-style:none}
.mo-icon{display:block;width:40px;height:40px}
.mo-icon svg{display:block;width:40px;height:40px;fill:none;stroke:var(--print);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mo-points h3{font-size:22px;line-height:1.2;letter-spacing:-.015em;margin:20px 0 8px}
.mo-points p{font-size:17px;line-height:1.55;color:var(--note)}

.mo-save{background:var(--table)}
.mo-save-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:center}
.mo-calc{margin:28px 0 0;padding:0;list-style:none;max-width:460px}
.mo-calc li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-top:1px solid var(--rule);font-size:18px}
.mo-calc li:last-child{border-top:2px solid var(--print);font-weight:800}
.mo-calc strong{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.mo-calc .is-save strong{font-size:28px;font-weight:800}
.mo-chart{margin:0;min-width:0}
.mo-chart svg{display:block;width:100%;height:auto;overflow:visible}
.mo-chart .l-bar{font-size:26px}
.mo-chart .l-bar-s{font-size:15px}
.mo-chart .t-cap{font-size:19px}
.mo-chart .t-total{font-size:28px}
.mo-chart .l-price{font-size:46px}
.mo-chart .c-plus{font-size:36px;fill:var(--note);text-anchor:middle}
.mo-chart .t-st1{font-size:15px}
.mo-chart .t-st2{font-size:25px}
.mo-note{font-size:14px;line-height:1.5;color:var(--note);margin-top:18px;max-width:520px}

.mo-plans{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:48px}
.mo-plan{background:var(--stock);border:1.5px solid var(--print);border-radius:6px;overflow:hidden}
.mo-plan h3{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 12px;background:var(--print);color:var(--stock);font:700 16px/1 var(--mono);letter-spacing:0;padding:14px 20px}
.mo-plan-tag{font-weight:400;font-size:12px}
#pricing .mo-note{margin-top:22px}
.mo-price{font:800 56px/1 var(--mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums;padding:24px 20px 0}
.mo-price small{font:400 15px var(--mono);letter-spacing:0;color:var(--note);margin-left:8px}
.mo-plan-top::after{content:'';display:block;height:26px;margin:22px 20px 22px;background:repeating-linear-gradient(90deg,var(--print) 0 2px,transparent 2px 4px,var(--print) 4px 7px,transparent 7px 9px,var(--print) 9px 10px,transparent 10px 14px)}
.mo-plan ul{margin:0;padding:6px 20px 14px;list-style:none;border-top:1.5px dashed rgb(0 0 0 / .4)}
.mo-plan li{position:relative;padding:12px 0 12px 26px;font-size:16px;line-height:1.4}
.mo-plan li + li{border-top:1px solid var(--rule)}
.mo-plan li::before{content:'';position:absolute;left:2px;top:19px;width:10px;height:6px;border-left:2px solid var(--print);border-bottom:2px solid var(--print);transform:rotate(-45deg)}

.mo-priv{padding-top:24px}
.mo-priv-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px;align-items:start}
.mo-priv .text-link{margin-top:28px;padding-block:8px 5px}
.mo-facts{margin:0;padding:0}
.mo-facts div{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:20px 0;border-top:1px solid var(--rule)}
.mo-facts div:last-child{border-bottom:1px solid var(--rule)}
.mo-facts dt{font-weight:700;font-size:16px;color:var(--print)}
.mo-facts dd{margin:0;font-size:17px;line-height:1.55;color:var(--note)}

.mo-faq{background:var(--table);padding-block:96px}
.mo-faq .faq-grid{align-items:start}
.mo-faq h2{font-size:clamp(32px,3.8vw,52px);line-height:1.05}
.mo-faq .questions details{border-bottom-color:var(--rule)}
.mo-faq .questions details:first-child{border-top:1px solid var(--rule)}
.mo-faq .questions details p{color:var(--note)}
.mo-fine{padding-block:34px 56px;font-size:14px;color:var(--note)}
.mo-fine p{max-width:760px}

/* Privacy page */
.legal h1{font-size:clamp(44px,6vw,72px)}
.legal .lead{color:var(--print)}
.legal h2{font-family:var(--sans);font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.mo-meta{margin-top:20px;font-size:15px;line-height:1.5;color:var(--note)}
.mo-ph{background:var(--table);padding:1px 6px;border-radius:4px}
.legal code{font-family:var(--mono);font-size:.9em;background:var(--table);padding:1px 6px;border-radius:4px}
.legal ul{padding-left:22px;margin:14px 0 0}
.legal li{margin-top:8px}

@media(max-width:1000px){
.mo-head{column-gap:40px}
.mo-save-grid,.mo-priv-grid{gap:40px}
.mo-points{gap:32px}
.mo-plans{gap:16px}
.mo-price{font-size:46px;padding-inline:16px}
.mo-plan h3{padding-inline:16px}
.mo-plan-top::after{margin-inline:16px}
.mo-plan ul{padding-inline:16px}
}
@media(max-width:900px){
.mo-head{grid-template-columns:1fr;row-gap:28px;align-items:start}
.mo-h1{font-size:clamp(52px,11vw,88px)}
}
@media(max-width:820px){
.mo-save-grid,.mo-priv-grid{grid-template-columns:1fr}
.mo-points,.mo-plans{grid-template-columns:1fr}
.mo-points{margin-top:36px;gap:36px}
.mo-plans{margin-top:34px}
.mo-price{font-size:52px;padding-inline:20px}
.mo-plan h3{padding-inline:20px}
.mo-plan-top::after{margin-inline:20px}
.mo-plan ul{padding-inline:20px}
}
@media(max-width:719px){
.mo-scene-wide{display:none}
.mo-scene-compact{display:block}
}
@media(max-width:700px){
.mo-hero{display:flex;flex-direction:column}
.mo-head{display:contents}
.mo-h1,.mo-rest{width:calc(100% - 40px);margin-inline:auto}
.mo-h1{order:1;font-size:clamp(44px,14vw,60px);padding-block:4px 20px}
.mo-bench{order:2}
.mo-rest{order:3;padding-block:28px 40px}
.mo-intro{font-size:18px}
.mo-actions{flex-direction:column;align-items:stretch;margin-top:22px;gap:10px}
.mo-soon{white-space:normal;text-align:center;padding:14px 22px;font-size:16px}
.mo-actions small{text-align:center}
.mo-rest .text-link{margin-top:14px}
.mo-art{width:calc(100% - 40px);padding-block:40px 16px}
.mo-sec{padding-block:64px}
.mo-priv{padding-top:8px}
.mo-lead{font-size:18px}
.mo-faq{padding-block:64px}
.mo-facts div{grid-template-columns:1fr;gap:6px;padding:16px 0}
}
@media(max-width:450px){
.mo-scene-compact{width:calc(100% + 30px);max-width:none;margin-inline:-15px}
}
@media(max-width:350px){
.mo-h1{font-size:44px;width:calc(100% - 32px)}
.mo-rest{width:calc(100% - 32px)}
.mo-art{width:calc(100% - 32px)}
.mo-calc li{font-size:16px}
}
