/* ShipMode — v5 (Figma "LANDING PAGE" 516:2) */
@font-face{font-family:"Funnel Display";font-weight:700;font-style:normal;font-display:swap;src:url(../assets/fonts/funnel-display-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Funnel Display";font-weight:800;font-style:normal;font-display:swap;src:url(../assets/fonts/funnel-display-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:400;font-style:normal;font-display:swap;src:url(../assets/fonts/space-grotesk-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:500;font-style:normal;font-display:swap;src:url(../assets/fonts/space-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:700;font-style:normal;font-display:swap;src:url(../assets/fonts/space-grotesk-latin-700-normal.woff2) format("woff2")}
:root{
  --container-stroke:3px;
  --blue:#4e88c3;
  --blue-line:rgba(242,237,223,.085);
  --ink:#272b37;
  --ink-2:#222630;
  --cream:#f2eddf;
  --cream-2:#f3efe6;
  --text:#282828;
  --text-2:#323232;
  --title:#1a1a1a;
  --navy:#1c374f;
  --chip:rgba(159,175,190,.21);
  --divider:#cdcdcd;
  --display:"Funnel Display",system-ui,sans-serif;
  --body:"Space Grotesk",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --wrap:1204px;
  --wrap-wide:1280px;
  --gutter:clamp(16px,4vw,79px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:110px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background-color:var(--blue);background-image:linear-gradient(var(--blue-line) 1px,transparent 1px),linear-gradient(90deg,var(--blue-line) 1px,transparent 1px);background-size:29px 29px;background-position:-2px -2px;color:var(--text);font-family:var(--body);font-size:16px;line-height:1.4;overflow-x:hidden}
img{max-width:100%;display:block}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
button,input{font:inherit}
em{font-style:normal}
:focus-visible{outline:3px solid var(--cream);outline-offset:4px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--ink);color:var(--cream);padding:12px 18px;border-radius:10px;font-weight:700}
.skip:focus{top:12px}

.wrap{width:min(var(--wrap),100% - var(--gutter)*2);margin-inline:auto}
.wrap--wide{width:min(var(--wrap-wide),100% - var(--gutter)*2)}
.center{text-align:center}

/* progress */
.progress{position:fixed;inset:0 0 auto;height:4px;z-index:60;pointer-events:none}
.progress i{display:block;height:100%;width:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--p,0))}

/* ---------- shared atoms ---------- */
.pill{display:inline-block;background:var(--ink);color:var(--cream);font:700 12px/1.25 var(--body);text-transform:uppercase;padding:10px 18px;border-radius:10px;letter-spacing:0}
.h2{font:800 50px/1 var(--display);letter-spacing:-.06em;text-transform:uppercase}
.h2 em{color:var(--blue)}
.h2--cream{color:var(--cream)}
.h2--ink{color:var(--ink)}
.lead{font-size:20px;line-height:1.4;color:var(--text)}
.lead--cream{color:var(--cream)}
.lead--ink{color:var(--ink)}
.card{background:var(--cream);border:var(--container-stroke) solid var(--ink-2);border-radius:16px;box-shadow:12px 12px 0 var(--ink-2);position:relative}
.card--xl{border:var(--container-stroke) solid var(--ink);border-radius:21.5px;box-shadow:9px 9px 0 var(--ink-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 16px/1.25 var(--body);text-transform:uppercase;letter-spacing:.02em;text-decoration:none;cursor:pointer;border:0;border-radius:12px;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .2s}
.btn--nav{background:var(--blue);color:var(--cream);border:var(--container-stroke) solid var(--ink-2);padding:10px 20px;box-shadow:5px 5px 0 var(--ink-2)}
.btn--nav:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink-2)}
.btn--nav:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink-2)}
.btn--blue{background:var(--blue);color:#fff;padding:0 32.5px;height:53px}
.btn--blue:hover{background:#3f79b4}
.textlink{font:700 17px/1.25 var(--body);color:var(--title);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;display:inline-block;transition:transform .2s var(--ease)}
.textlink:hover{transform:translateX(4px)}
.textlink--lg{font-size:20px}

/* reveal choreography */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:50;transition:transform .35s var(--ease),background .3s}
.nav.scrolled{background:rgba(78,136,195,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 3px 0 var(--ink-2)}
.nav.away{transform:translateY(-110%)}
.nav__inner{width:min(var(--wrap-wide),100% - var(--gutter)*2);margin-inline:auto;height:126px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;transition:height .3s var(--ease)}
.nav.scrolled .nav__inner{height:86px}
.nav__logo{justify-self:start;transition:transform .3s var(--ease)}
.nav__logo img{width:71px;height:auto}
.nav__logo:hover{transform:rotate(-6deg) scale(1.05)}
.nav.scrolled .nav__logo img{width:56px}
.nav__links{display:flex;gap:28px}
.nav__links a{color:var(--cream);font:700 16px/1.25 var(--body);text-transform:uppercase;text-decoration:none;position:relative;padding:4px 0}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;border-radius:3px;background:var(--cream);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease)}
.nav__links a:hover::after,.nav__links a.active::after{transform:scaleX(1);transform-origin:left}
.nav .btn--nav{justify-self:end}
.nav__burger{display:none;justify-self:end;width:48px;height:44px;border:var(--container-stroke) solid var(--ink-2);border-radius:12px;background:var(--cream);box-shadow:4px 4px 0 var(--ink-2);cursor:pointer;position:relative}
.nav__burger span{position:absolute;left:11px;right:11px;height:3px;border-radius:3px;background:var(--ink);transition:transform .3s var(--ease),top .3s var(--ease)}
.nav__burger span:first-child{top:13px}.nav__burger span:last-child{top:22px}
.nav__burger[aria-expanded=true] span:first-child{top:17.5px;transform:rotate(45deg)}
.nav__burger[aria-expanded=true] span:last-child{top:17.5px;transform:rotate(-45deg)}
.drawer[hidden]{display:none}
.drawer{width:min(var(--wrap-wide),100% - var(--gutter)*2);margin:0 auto 16px;background:var(--cream);border:var(--container-stroke) solid var(--ink-2);border-radius:16px;box-shadow:8px 8px 0 var(--ink-2);padding:10px 22px 22px;display:grid}
.drawer a{font:800 26px/1 var(--display);text-transform:uppercase;letter-spacing:-.04em;color:var(--ink);text-decoration:none;padding:16px 0;border-bottom:1px solid var(--divider)}
.drawer .btn{margin-top:18px;font:700 16px/1.25 var(--body);letter-spacing:.02em;border-bottom:var(--container-stroke) solid var(--ink-2);padding:14px 20px;color:var(--cream)}

/* ---------- HERO ---------- */
.hero{padding:4px 0 16px}
.card--hero{--W:1280px;--H:746px;min-height:746px;overflow:hidden}
.hero__content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding:83px 24px 140px}
.hero__title{margin-top:42px;font:800 90px/.9 var(--display);letter-spacing:-.0736em;color:var(--ink);text-transform:uppercase;max-width:1104px}
.hero__title .line{display:block;overflow:hidden;padding:0 .06em .04em}
.hero__title .line>span{display:inline-block}
.hero__title em{color:var(--blue)}
.js .hero__title .line>span{transform:translateY(105%);transition:transform 1s var(--ease)}
.js .hero__title .line:nth-child(2)>span{transition-delay:.09s}
.js .hero__title .line:nth-child(3)>span{transition-delay:.18s}
.js .loaded .hero__title .line>span,.js.loaded .hero__title .line>span{transform:none}
.hero__sub{max-width:625px;margin-top:37px;font-size:20px;line-height:1.4;color:var(--text)}
.capture{margin-top:26px;width:min(624px,100%);height:78px;background:var(--cream-2);border:var(--container-stroke) solid var(--ink);border-radius:21.5px;display:flex;align-items:center;padding:0 9px 0 33px;position:relative;transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.capture:focus-within{box-shadow:6px 6px 0 var(--ink-2);transform:translate(-2px,-2px)}
.capture input{flex:1;min-width:0;border:0;background:transparent;outline:0;font:700 16px/1 var(--body);letter-spacing:.01em;color:var(--ink);height:100%}
.capture input::placeholder{color:rgba(39,43,55,.3)}
.capture .btn{flex:none}
.capture__msg{position:absolute;left:0;right:0;top:calc(100% + 10px);font:700 13px/1.3 var(--body);color:var(--navy)}
.capture.ok{border-color:var(--blue)}
.capture.err{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:38px}
.chips li{background:var(--chip);color:var(--navy);font:700 12px/1.25 var(--body);padding:10px 18px;border-radius:10px}

/* stickers — positioned on the Figma 1280×746 (hero) / 1280×539 (cta) grid */
.stickers{--k:1;position:absolute;inset:-4px;pointer-events:none;z-index:1}
.stk{position:absolute;left:calc(var(--x) * var(--k));top:calc(100% - (var(--H) - var(--y)) * var(--k));scale:var(--k);transform-origin:0 0;max-width:none;pointer-events:auto;transition:transform .45s cubic-bezier(.3,1.6,.5,1);will-change:transform}
.stk{translate:0 0}
.stickers .stk{margin:0}
.stk--r{left:calc(100% - (var(--W) - var(--x)) * var(--k))}
.stk--t{top:calc(var(--y) * var(--k))}
.stk:hover{transform:translateY(-10px) rotate(-4deg) scale(1.06)}
.js .stickers .stk{opacity:0;translate:0 40px;transition:transform .45s cubic-bezier(.3,1.6,.5,1),opacity .6s var(--ease),translate .8s cubic-bezier(.3,1.4,.5,1)}
.stickers.in .stk{opacity:1;translate:0 0}
.stickers.in .stk:nth-child(2){transition-delay:0s,.06s,.06s}.stickers.in .stk:nth-child(3){transition-delay:0s,.12s,.12s}.stickers.in .stk:nth-child(4){transition-delay:0s,.18s,.18s}.stickers.in .stk:nth-child(5){transition-delay:0s,.24s,.24s}.stickers.in .stk:nth-child(6){transition-delay:0s,.3s,.3s}.stickers.in .stk:nth-child(7){transition-delay:0s,.36s,.36s}.stickers.in .stk:nth-child(8){transition-delay:0s,.42s,.42s}

/* ---------- sections ---------- */
.sec{padding:61px 0}
.sec--why{padding-top:77px;padding-bottom:59px}
.why__head{display:flex;align-items:flex-end;gap:60px;margin-top:26px;padding-left:22px}
.sec--why .pill{margin-left:22px}
.why__head .h2{flex:0 0 556px}
.why__head .lead{flex:0 1 497px}
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:64px;align-items:stretch}
.value{padding:29px;display:flex;flex-direction:column;gap:5px}
.value h3{font:700 20px/1.25 var(--display);color:var(--title)}
.value p{font-size:15px;line-height:1.5;color:var(--text-2);max-width:220px}
.card--sm{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.value:hover{transform:translate(-3px,-3px);box-shadow:15px 15px 0 var(--ink-2)}

.sec--support{padding-top:61px;padding-bottom:0}
.support{display:grid;grid-template-columns:552px 566px;justify-content:space-between;align-items:start;padding-left:17px}
.support__left .pill{margin-left:5px}
.support__left .h2{margin:26px 0 0 5px;max-width:556px}
.photo{margin-top:40px;border:var(--container-stroke) solid var(--ink);border-radius:12px;overflow:hidden;height:240px;background:var(--navy)}
.photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.photo:hover img{transform:scale(1.04)}
.support__card{padding:35px 35px 40px}
.bullets li{display:flex;gap:12px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--divider)}
.arrow{font:700 20px/1.3 var(--body);color:var(--blue);transition:transform .3s var(--ease)}
.bullets li:hover .arrow{transform:translate(3px,-3px)}
.bullets strong{display:block;font:700 18px/1.5 var(--display);color:var(--title)}
.bullets p{font-size:18px;line-height:1.5;color:var(--text)}

.sec--compare{padding-top:76px;padding-bottom:165px}
.center-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:26px}
.center-head .lead{max-width:625px;margin-top:4px}
.compare{margin-top:37px;display:grid;grid-template-columns:1fr 608px;align-items:center;padding:30px 33px 30px 68px;min-height:425px}
.compare h3{font:700 30px/1.5 var(--display);color:var(--title);margin-bottom:20px}
.compare__col--us{background:var(--cream-2);border:var(--container-stroke) solid var(--ink);border-radius:21.5px;padding:27px 40px 40px 57px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.compare__col--us:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink-2)}
.ticks{display:grid;gap:20px}
.ticks li{display:flex;align-items:center;gap:10px;font-size:18px;color:var(--text)}
.ticks li::before{content:"";flex:none;width:20px;height:20px;border-radius:50%}
.ticks--off li::before{border:var(--container-stroke) solid var(--ink);background:var(--cream)}
.ticks--on li::before{width:20px;height:20px;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.6 10.3l2 2.1 4.6-5' fill='none' stroke='%23F3EFE6' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;transform:scale(.4);opacity:0;transition:transform .5s cubic-bezier(.3,1.6,.5,1),opacity .3s}
.compare.in .ticks--on li::before{transform:none;opacity:1}
.compare.in .ticks--on li:nth-child(2)::before{transition-delay:.12s}.compare.in .ticks--on li:nth-child(3)::before{transition-delay:.24s}.compare.in .ticks--on li:nth-child(4)::before{transition-delay:.36s}.compare.in .ticks--on li:nth-child(5)::before{transition-delay:.48s}

/* ---------- band + parcel ---------- */
.band{position:relative;background:var(--cream);border-block:var(--container-stroke) solid var(--ink);overflow:hidden;min-height:552px;display:flex;align-items:center}
.decor{position:absolute;opacity:.07;pointer-events:none;max-width:none}
.decor--box{left:41px;top:0}
.decor--globe{right:1px;bottom:0}
.band__inner{position:relative;display:grid;grid-template-columns:1fr 874px 1fr;align-items:center;padding:90px 0}
.band__copy{grid-column:2;text-align:center;display:flex;flex-direction:column;align-items:center}
.band__copy .lead{max-width:625px;margin-top:30px}
.parcel-wrap{position:absolute;right:-30px;top:50%;translate:0 -50%;display:flex;flex-direction:column;align-items:center;gap:6px;margin-left:12px}
.parcel-stage{--box-size:148px;--box-half:74px;position:relative;width:220px;height:236px;display:grid;place-items:center;perspective:900px;cursor:pointer;border-radius:16px;-webkit-tap-highlight-color:transparent}
.parcel-stage:focus-visible{outline:3px solid var(--blue)}
.parcel-box{width:var(--box-size);height:var(--box-size);position:relative;transform-style:preserve-3d;transform:translateX(var(--box-drift,0px)) translateY(var(--box-bob,0px)) rotateX(var(--box-x,-20deg)) rotateY(var(--box-y,-32deg)) scale3d(var(--parcel-w,1),var(--parcel-h,1),var(--parcel-d,1));transition:transform .45s var(--ease);will-change:transform}
.parcel-stage.pop .parcel-box{animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{scale:1}35%{scale:.86}100%{scale:1}}
.parcel-face{position:absolute;inset:0;backface-visibility:hidden;border:1.5px solid rgba(39,43,55,.55);background:#e9dcc0;transition:background .35s ease,border-color .35s}
.parcel-front{transform:translateZ(var(--box-half));background:var(--blue);display:grid;place-items:center}
.parcel-front img{width:56%;height:auto;transform:scale(calc(1 / var(--parcel-w,1)),calc(1 / var(--parcel-h,1)))}
.parcel-back{transform:rotateY(180deg) translateZ(var(--box-half));background:#d8c8a8}
.parcel-right{transform:rotateY(90deg) translateZ(var(--box-half));background:#efe3c8;padding:14px 12px}
.parcel-left{transform:rotateY(-90deg) translateZ(var(--box-half));background:#cdb994}
.parcel-top{transform:rotateX(90deg) translateZ(var(--box-half));background:#f4ead4;display:grid;place-items:center}
.parcel-bottom{transform:rotateX(-90deg) translateZ(var(--box-half));background:#bba67f}
.parcel-tape{width:30px;height:100%;background:var(--blue);color:var(--cream);writing-mode:vertical-rl;text-align:center;font:700 6px/30px var(--body);letter-spacing:.12em;border-inline:1px dashed rgba(255,255,255,.5);overflow:hidden;white-space:nowrap}
.parcel-label{background:var(--cream-2);border:1px solid var(--ink);border-radius:3px;padding:7px;display:grid;gap:5px;color:var(--ink);font:700 5px/1.2 var(--body);letter-spacing:.06em}
.parcel-label b{font:800 9px/1 var(--display);letter-spacing:-.02em}
.parcel-label i{height:20px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 8px)}
.parcel-arrows{display:block;font-size:20px;line-height:1;color:var(--ink);margin-top:8px}
.parcel-shadow{position:absolute;width:160px;height:30px;background:rgba(34,38,48,.28);border-radius:50%;filter:blur(12px);bottom:22px;transform:rotate(-8deg);transition:transform .45s var(--ease)}
.parcel-hint{font:700 10px/1.3 var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--navy);text-align:center;white-space:nowrap}
.parcel-hint b{color:var(--blue)}
[data-variant=white]{--parcel-w:1.14;--parcel-h:.7;--parcel-d:.88}
[data-variant=white] .parcel-face{background:#fff;border-color:rgba(39,43,55,.35)}
[data-variant=white] .parcel-front{background:#fff}
[data-variant=white] .parcel-front img{filter:drop-shadow(0 0 0 var(--ink))}
[data-variant=white] .parcel-left,[data-variant=white] .parcel-bottom{background:#e6e8ec}
[data-variant=ink]{--parcel-w:.78;--parcel-h:1.18;--parcel-d:.86}
[data-variant=ink] .parcel-face{background:var(--ink);border-color:rgba(242,237,223,.35)}
[data-variant=ink] .parcel-top{background:#353a48}
[data-variant=ink] .parcel-right{background:#2e3240}
[data-variant=ink] .parcel-tape{background:var(--cream);color:var(--ink)}
[data-variant=ink] .parcel-arrows{color:var(--blue)}
[data-variant=pattern]{--parcel-w:1.16;--parcel-h:.86;--parcel-d:.96}
[data-variant=pattern] .parcel-face{background:repeating-linear-gradient(135deg,var(--blue) 0 14px,var(--navy) 14px 28px)}
[data-variant=pattern] .parcel-front{background:var(--blue)}
[data-variant=pattern] .parcel-arrows{color:var(--cream)}
[data-variant=pattern] .parcel-tape{background:var(--ink)}

/* ---------- HOW IT WORKS ---------- */
.sec--how{padding-top:113px;padding-bottom:90px}
.flow{--card:320px;position:relative;margin-top:57px;display:grid;grid-template-columns:var(--card) 1fr 350px 1fr var(--card);grid-template-rows:auto 58px auto 56px auto;align-items:center;justify-items:center;width:min(1160px,100%);margin-inline:auto}
.flow__channels{grid-column:3;grid-row:1;white-space:nowrap}
.flow__channels span{display:inline-block;background:var(--cream);border:var(--container-stroke) solid var(--ink-2);border-radius:12px;box-shadow:5px 5px 0 var(--ink-2);padding:10px 20px;font:700 17px/1.25 var(--display);color:var(--title)}
.wire{display:block;position:relative;pointer-events:none}
.wire b{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--cream);box-shadow:0 0 0 3px rgba(242,237,223,.25);opacity:0}
.wire--v{width:2px;height:100%;background:repeating-linear-gradient(180deg,var(--ink) 0 4px,transparent 4px 8px);background-size:2px 8px;animation:antsV .8s linear infinite}
.wire--h{height:2px;width:calc(100% + 30px);background:repeating-linear-gradient(90deg,var(--ink) 0 4px,transparent 4px 8px);background-size:8px 2px;animation:antsH .8s linear infinite}
@keyframes antsV{to{background-position:0 8px}}
@keyframes antsH{to{background-position:8px 0}}
.wire--top{grid-column:3;grid-row:2}
.wire--bottom{grid-column:3;grid-row:4}
.wire--left{grid-column:2;grid-row:3}
.wire--right{grid-column:4;grid-row:3;animation-direction:reverse}
.wire--v b{left:-3.5px;animation:packetV 2.6s var(--ease) infinite}
.wire--left b{top:-3.5px;animation:packetH 2.6s var(--ease) infinite .9s}
.wire--right b{top:-3.5px;animation:packetHr 2.6s var(--ease) infinite 1.6s}
.wire--bottom b{animation-delay:1.3s}
@keyframes packetV{0%{top:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:100%;opacity:0}}
@keyframes packetH{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:100%;opacity:0}}
@keyframes packetHr{0%{left:100%;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:0;opacity:0}}
.flow__card{width:var(--card);border-width:var(--container-stroke);border-radius:19.3px;box-shadow:8px 8px 0 var(--ink-2);padding:31px 31px 36px;display:flex;flex-direction:column;gap:9px;z-index:1}
.flow__card--1{grid-column:1;grid-row:3}
.flow__card--2{grid-column:5;grid-row:3}
.flow__card--3{grid-column:3;grid-row:5}
.flow__card h3{font:700 17px/1.25 var(--display);color:var(--title);display:flex;align-items:baseline;gap:7px}
.flow__card h3 span{font:800 19.8px/1 var(--display);color:var(--blue)}
.flow__card>p{font-size:13.5px;line-height:1.5;color:var(--text-2)}
.rows{display:grid;gap:9px}
.row{display:flex;align-items:center;justify-content:space-between;height:44px;background:var(--cream-2);border:var(--container-stroke) solid var(--ink);border-radius:10.8px;padding:0 10.8px;font-size:11.7px;color:var(--text)}
.row b{font-weight:400;font-variant-numeric:tabular-nums}
.tag{display:inline-flex;align-items:center;gap:2px;background:var(--blue);color:var(--title);font:700 10.8px/1.25 var(--body);padding:3.6px 12.6px;border-radius:10.8px;transition:background .3s,transform .3s var(--ease)}
.tag svg{width:9px;height:9px;fill:none;stroke:var(--title);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.tag.flip{animation:flip .45s var(--ease)}
@keyframes flip{0%{transform:scale(1)}40%{transform:scale(.8)}100%{transform:scale(1)}}
.tag--warn{animation:warn 2.4s ease-in-out infinite}
@keyframes warn{50%{background:#7aa6d4}}
.device{grid-column:3;grid-row:3;width:350px;height:245px;background:var(--navy);border:var(--container-stroke) solid var(--ink);outline:none;border-radius:22.8px;box-shadow:7px 7px 0 var(--ink-2);padding:8.75px;z-index:1}
.device__screen{height:100%;background:var(--blue);border:var(--container-stroke) solid var(--ink);border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.device__title{font:700 24.4px/1.5 var(--display);color:var(--cream)}
.device__pill{width:264px;height:52.5px;display:grid;place-items:center;background:var(--cream);border:var(--container-stroke) solid var(--ink);border-radius:9.8px;box-shadow:3.3px 3.3px 0 var(--ink-2);font-size:14px;color:var(--ink);transition:opacity .3s}
.device__dots{display:flex;gap:6.5px}
.device__dots i{width:6.5px;height:6.5px;border-radius:50%;background:rgba(28,55,79,.4);transition:background .3s}
.device__dots i.on{background:var(--cream)}

/* ---------- cream block: map + amazon ---------- */
.cream-block{background:var(--cream);border-block:var(--container-stroke) solid var(--ink);margin-top:29px}
.sec--map{padding-top:100px;padding-bottom:96px;border-bottom:1px solid var(--ink)}
.sec--map>.pill,.sec--map>.h2,.sec--map>.lead{margin-left:22px}
.sec--map .h2{margin-top:26px}
.lead--wide{max-width:1043px;margin-top:30px}
.mapcard{margin-top:44px;background:var(--cream-2);padding:12px 13px 0;overflow:hidden}
.map{position:relative;aspect-ratio:1164/457;border:var(--container-stroke) solid var(--ink-2);border-radius:12px;overflow:hidden;background:#3a5373}
.map__base,.map__lanes{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.map__lanes{overflow:visible}
.map__lanes .lane{fill:none;stroke-linecap:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.map__lanes .lane--glow{filter:url(#laneGlow);opacity:.75}
.mapcard.live .map__lanes .lane{animation:laneDraw 1.3s var(--ease) forwards;animation-delay:var(--ld,0s)}
@keyframes laneDraw{to{stroke-dashoffset:0}}
.map__lanes .city{fill:#fff;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(0)}
.mapcard.live .map__lanes .city{animation:cityIn .5s cubic-bezier(.3,1.6,.5,1) forwards;animation-delay:var(--cd,0s)}
@keyframes cityIn{to{opacity:1;transform:scale(1)}}
.map__lanes .city.ping{animation:cityPing .7s ease-out!important;opacity:1;transform:scale(1)}
@keyframes cityPing{0%{transform:scale(1)}40%{transform:scale(2.6)}100%{transform:scale(1)}}
.map__lanes .origin{fill:#fff}
.map__lanes .origin-ring{fill:none;stroke:#fff;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:mapPulse 2.2s ease-out infinite}
.map__lanes .origin-ring:nth-of-type(2){animation-delay:1.1s}
@keyframes mapPulse{0%{transform:scale(.4);opacity:.9}100%{transform:scale(3.2);opacity:0}}
.map__lanes .packet{fill:#fff}
.map__ticker{position:absolute;left:14px;bottom:12px;display:flex;align-items:center;gap:8px;background:rgba(28,55,79,.72);color:var(--cream);font:700 11px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;padding:8px 12px;border-radius:8px;backdrop-filter:blur(4px);opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s var(--ease)}
.mapcard.live .map__ticker{opacity:1;transform:none;transition-delay:1.6s}
.map__live{width:7px;height:7px;border-radius:50%;background:#7fe0a0;box-shadow:0 0 0 0 rgba(127,224,160,.6);animation:live 1.6s infinite}
@keyframes live{70%{box-shadow:0 0 0 7px rgba(127,224,160,0)}100%{box-shadow:0 0 0 0 rgba(127,224,160,0)}}
#map-ticker{transition:opacity .25s}
.mapcard__label{text-align:right;font:700 18px/1 var(--body);color:var(--ink);padding:15px 16px 18px}
.map__after{margin-top:46px}

.sec--amazon{padding-top:79px;padding-bottom:94px}
.h2--amazon{max-width:1019px}
.sec--amazon .lead{max-width:none}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;width:min(925px,100%);margin:50px auto 0}
.duo .value{background:var(--cream-2)}
.duo .value h3{white-space:nowrap}
.duo .value p{max-width:none}
.sec--amazon .center{margin-top:48px}

/* ---------- manufacturing ---------- */
.sec--mfg{padding-top:150px;padding-bottom:28px}
.mfg{padding:44px 48px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.mfg__title{font:700 30px/1.5 var(--display);color:var(--title);margin-top:-5px}
.mfg__title em{color:var(--blue)}
.mfg__cols{display:grid;grid-template-columns:551px 1fr;gap:20px;font-size:20px;line-height:1.4;color:var(--ink)}

/* ---------- FAQ ---------- */
.sec--faq{padding-top:70px;padding-bottom:80px}
.h2--faq{max-width:724px}
.faq{width:min(1029px,100%);margin:40px auto 0;display:grid;gap:20px}
.qa{background:var(--cream-2);padding:0}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:29px;font:700 20px/1.25 var(--display);color:var(--title)}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{position:relative;flex:none;width:14px;height:14px}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:0;right:0;top:6px;height:2.6px;border-radius:2px;background:var(--title);transition:transform .35s var(--ease)}
.qa summary i::after{transform:rotate(90deg)}
.qa[open] summary i::after{transform:rotate(0)}
.qa__a{overflow:hidden}
.qa[open] summary{padding-bottom:5px}
.qa__a p{padding:0 29px 29px;font-size:15px;line-height:1.5;color:var(--text-2);max-width:960px}
.qa:hover{transform:translate(-2px,-2px);box-shadow:14px 14px 0 var(--ink-2)}

/* ---------- CTA ---------- */
.sec--cta{padding-top:42px;padding-bottom:140px}
.cta{--H:539px;min-height:539px;display:flex;align-items:center;justify-content:center}
.cta__content{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;padding:85px 24px 89px}
.h2--cta{max-width:1024px}
.cta .lead{margin-top:18px;max-width:682px}
.cta .btn{margin-top:23px}

/* ---------- footer ---------- */
.footer{position:relative;background:var(--cream);border-top:var(--container-stroke) solid var(--ink);overflow:hidden;min-height:329px}
.footer .decor{opacity:.06}
.decor--fglobe{left:-120px;bottom:-60px;width:300px;height:auto;transform:rotate(-8deg)}
.decor--fboxes{right:0;bottom:50px}
.footer__inner{position:relative;width:min(var(--wrap-wide),100% - var(--gutter)*2);margin-inline:auto;display:grid;grid-template-columns:1fr auto auto;gap:64px;padding:39px 0 60px}
.footer__brand{display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding-bottom:30px}
.footer__brand img{width:87px}
.footer__brand p,.footer__links a,.footer__contact p{font:700 16px/1.25 var(--body);text-transform:uppercase;color:var(--ink-2);text-decoration:none}
.footer__links,.footer__contact{display:flex;flex-direction:column;gap:20px;padding-top:12px}
.footer__links{margin-right:16px}
.footer__links a:hover{color:var(--blue)}
.footer__contact a{font:700 16px/1.25 var(--body);color:var(--blue);text-decoration:none}
.footer__contact a:hover{text-decoration:underline}

/* ---------- responsive ---------- */
@media (max-width:1240px){
  .why__head .h2{flex-basis:50%}
  .support{grid-template-columns:1fr 1fr;gap:40px;padding-left:0}
  .photo{height:auto;aspect-ratio:552/240}
  .compare{grid-template-columns:1fr 1.15fr;padding-left:40px;gap:24px}
  .band__inner{grid-template-columns:1fr;justify-items:center;gap:30px;padding:80px 0}
  .band__copy{grid-column:1;max-width:874px}
  .parcel-wrap{position:static;translate:none;margin:0}
  .mfg__cols{grid-template-columns:1fr 1fr}
}
@media (max-width:1180px){
  .flow{grid-template-columns:1fr;grid-template-rows:none;max-width:420px;gap:0}
  .flow>*{grid-column:1!important;grid-row:auto!important}
  .wire--h{width:2px;height:48px;background:repeating-linear-gradient(180deg,var(--ink) 0 4px,transparent 4px 8px);background-size:2px 8px;animation:antsV .8s linear infinite}
  .wire--v{height:48px}
  .wire--h b{top:auto;left:-3.5px;animation:packetV 2.6s var(--ease) infinite}
  .flow__channels{order:1}.wire--top{order:2}.flow__card--1{order:3}.wire--left{order:4}.device{order:5}.wire--right{order:6}.flow__card--2{order:7}.wire--bottom{order:8}.flow__card--3{order:9}
  .flow__card{width:100%}
  .device{width:100%;max-width:350px}
}
@media (max-width:1100px){
  .nav__links{display:none}
  .nav__inner{grid-template-columns:auto 1fr auto auto;gap:14px}
  .nav .btn--nav{grid-column:3}
  .nav__burger{display:block;grid-column:4}
  .values{grid-template-columns:repeat(2,1fr)}
  .hero__title{font-size:clamp(46px,7.6vw,90px)}
}
@media (max-width:860px){
  .h2{font-size:clamp(34px,7vw,50px)}
  .why__head{flex-direction:column;align-items:flex-start;gap:24px;padding-left:0}
  .sec--why .pill,.sec--map>.pill,.sec--map>.h2,.sec--map>.lead{margin-left:0}
  .why__head .h2,.why__head .lead{flex:none}
  .support{grid-template-columns:1fr}
  .support__left .pill,.support__left .h2{margin-left:0}
  .compare{grid-template-columns:1fr;padding:28px;gap:28px}
  .compare__col--us{padding:24px}
  .duo{grid-template-columns:1fr}
  .mfg{padding:30px 26px}
  .mfg__cols{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr 1fr;gap:36px}
  .footer__brand{grid-column:1/-1;padding-bottom:0}
  .card--hero{min-height:0}
  .hero__content{padding:56px 18px 190px}
  .stickers{--k:.66}
  .cta__content{padding:120px 18px 120px}
  .sec--mfg{padding-top:90px}
  .sec--compare{padding-bottom:100px}
}
@media (max-width:560px){
  body{font-size:15px}
  .nav__inner{height:86px}
  .nav .btn--nav{display:none}
  .nav__inner{grid-template-columns:auto 1fr auto}
  .nav__burger{grid-column:3}
  .lead,.hero__sub{font-size:17px}
  .hero__title{font-size:clamp(30px,9.2vw,56px);letter-spacing:-.065em}
  .stickers{--k:.52}
  .hero__title .line{display:inline;padding:0}
  .js .hero__title .line>span{display:inline;transform:none}
  .hero__content{padding-bottom:150px}
  .cta__content{padding:100px 16px 96px}
  .capture{height:auto;flex-direction:column;align-items:stretch;padding:8px;gap:8px;border-radius:18px}
  .capture input{height:52px;padding:0 14px;text-align:center}
  .capture .btn{width:100%}
  .values{grid-template-columns:1fr}
  .value p{max-width:none}
  .bullets strong,.bullets p,.ticks li{font-size:16px}
  .support__card{padding:26px 22px}
  .compare h3,.mfg__title{font-size:24px}
  .qa summary{font-size:17px;padding:22px}
  .qa__a p{padding:0 22px 22px}
  .duo .value h3{white-space:normal}
  .mapcard{padding:8px 8px 0}
  .map{aspect-ratio:4/3}
  .map__ticker{font-size:9px;left:8px;bottom:8px}
  .mapcard__label{font-size:15px}
  .footer__inner{grid-template-columns:1fr}
  .flow__channels span{white-space:normal;text-align:center;display:block}
  .flow__channels{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal,.js .stickers .stk{opacity:1;transform:none;translate:none}
  .js .hero__title .line>span{transform:none}
  .map__lanes .lane{stroke-dashoffset:0}
  .map__lanes .city{opacity:1;transform:none}
  .map__ticker{opacity:1;transform:none}
}

/* ---------- brand ticker ---------- */
.ticker{--h:30px;margin:26px 0 0;background:var(--cream);border-block:var(--container-stroke) solid var(--ink);display:flex;align-items:stretch;overflow:hidden;position:relative}
.ticker__label{flex:none;display:flex;align-items:center;padding:0 22px 0 max(16px,calc((100vw - var(--wrap-wide)) / 2));background:var(--ink);color:var(--cream);font:700 12px/1.2 var(--body);text-transform:uppercase;letter-spacing:.06em;position:relative;z-index:2;clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);padding-right:36px}
.ticker__viewport{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
.ticker__track{display:flex;width:max-content;animation:tick 46s linear infinite}
.ticker:hover .ticker__track,.ticker:focus-within .ticker__track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
.ticker__group{display:flex;align-items:center;flex:none}
.ticker__group li{display:flex;align-items:center;height:78px}
.sep{color:var(--blue);font-size:16px;padding:0 34px}
.brand{display:block;height:calc(var(--h) * var(--s,1));width:calc(var(--h) * var(--s,1) * var(--r));border-radius:6px;outline-offset:6px}
.brand__mark{display:block;width:100%;height:100%;background:var(--ink);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transition:background .25s,transform .3s var(--ease)}
.brand:hover .brand__mark,.brand:focus-visible .brand__mark{background:var(--blue);transform:scale(1.06)}
@media (max-width:560px){.ticker{--h:22px;flex-direction:column}.ticker__label{padding:10px 16px;clip-path:none;justify-content:center}.ticker__group li{height:62px}.sep{padding:0 22px}}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none!important;flex-wrap:wrap}.ticker__group[aria-hidden]{display:none}}

/* Playful interactions: outline at rest, lifted ink shadow on engagement. */
.card,.card--xl,.flow__card,.device,.flow__channels span,.device__pill,.btn--nav,.nav__burger{box-shadow:0 0 0 var(--ink-2);transition:box-shadow .25s var(--ease),transform .3s var(--ease)}
.card:hover,.card:focus-within,.device:hover,.device:focus-within{box-shadow:10px 10px 0 var(--ink-2)}
.card--hero:hover,.card--hero:focus-within{box-shadow:0 0 0 var(--ink-2)}
.card--sm:hover,.card--sm:focus-within,.flow__card:hover,.flow__card:focus-within,.qa:hover,.qa:focus-within{transform:translate(-4px,-4px);box-shadow:10px 10px 0 var(--ink-2)}
.card:focus-visible{outline:3px solid var(--blue);outline-offset:5px}
.value__icon{width:64px;height:58px;object-fit:contain;margin-bottom:14px;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.value:hover .value__icon,.value:focus-within .value__icon{transform:rotate(-9deg) translateY(-5px) scale(1.12)}
.stickers--hero{z-index:5;inset:0}
.stickers--hero .stk{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;translate:var(--drag-x,0px) var(--drag-y,0px)}
.stickers--hero .stk:nth-child(1){width:162px;--x:210px;--y:655px}
.stickers--hero .stk:nth-child(2){width:177px;--x:0px;--y:510px}
.stickers--hero .stk:nth-child(3){width:222px;--x:65px;--y:600px}
.stickers--hero .stk:nth-child(4){width:233px;--x:1040px;--y:583px}
.stickers--hero .stk:nth-child(5){width:275px;--x:735px;--y:683px}
.stickers--hero .stk:nth-child(6){width:207px;--x:975px;--y:660px}
.stickers--hero .stk:nth-child(7){width:158px;--x:1120px;--y:440px}
.stickers--hero .stk:nth-child(8){width:190px;--x:0px;--y:360px}
.stickers--hero .stk{height:auto;left:calc(var(--x) * var(--k));top:calc(100% - (746px - var(--y)) * var(--k));}
.stickers--hero .stk--r{left:calc(100% - (1280px - var(--x)) * var(--k))}
.stickers--hero.in .stk{translate:var(--drag-x,0px) var(--drag-y,0px);transition:transform .25s var(--ease),opacity .6s var(--ease)}
.stickers--hero .stk:hover{transform:rotate(-5deg) scale(1.1);z-index:10}
.stickers--hero .stk.is-dragging{cursor:grabbing;transform:rotate(3deg) scale(1.08);transition:none;filter:drop-shadow(5px 9px 0 rgba(39,43,55,.2))}
.sticker-hint{position:absolute;bottom:22px;left:50%;translate:-50% 0;z-index:2;font:700 11px/1.3 var(--body);text-transform:uppercase;color:var(--navy);letter-spacing:.04em;white-space:nowrap}
.ticker__label span{width:100px}
.band__inner{grid-template-columns:minmax(280px,.85fr) minmax(0,1.35fr);gap:70px;padding:85px 0}
.band__copy{grid-column:2;text-align:left;align-items:flex-start}
.band__copy .h2{font-size:clamp(34px,3.6vw,50px)}
.parcel-wrap{position:relative;grid-column:1;grid-row:1;right:auto;top:auto;translate:none;margin:0;gap:28px}
.parcel-stage{--box-size:220px;--box-half:110px;width:100%;max-width:350px;height:330px}
.parcel-stage:hover .parcel-shadow{transform:rotate(-8deg) scale(1.2)}
.parcel-hint{font-size:11px}
.row{transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s}
.row:hover{transform:translateX(4px);box-shadow:3px 3px 0 var(--ink);background:#fff9e9}
.row:hover .tag{transform:scale(1.08)}
.flow__card h3 span{display:inline-grid;place-items:center;width:33px;height:33px;border:var(--container-stroke) solid var(--ink);border-radius:50%;transition:transform .35s var(--ease),background .3s}
.flow__card:hover h3 span,.flow__card:focus-visible h3 span{transform:rotate(-12deg);background:var(--blue);color:var(--cream)}
.flow__channels span:hover{transform:translate(-3px,-3px) rotate(-1deg);box-shadow:6px 6px 0 var(--ink)}

.bullets li,.ticks li{transition:transform .25s var(--ease)}
.bullets li:hover,.ticks li:hover{transform:translateX(5px)}
.chips li{transition:transform .25s var(--ease),background .25s}
.chips li:hover{transform:translateY(-4px) rotate(-2deg);background:#c7d5df}
.btn--blue:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
body{background-position:calc(-2px + var(--grid-x,0px)) calc(-2px + var(--grid-y,0px));background-attachment:fixed}
@media(max-width:860px){
 .band__inner{grid-template-columns:1fr;gap:42px;padding:65px 0}
 .parcel-wrap{grid-column:1;grid-row:1}
 .band__copy{grid-column:1;grid-row:2;max-width:650px}
 .stickers--hero{--k:.66}
}
@media(max-width:560px){
 .stickers--hero{--k:.46}
 .stickers--hero .stk:nth-child(8){--y:490px}
 .stickers--hero .stk:nth-child(7){--y:525px}
 .ticker{flex-direction:row}
 .ticker__label{padding:0 15px;justify-content:flex-start;text-align:left}
 .ticker__label span{width:85px;font-size:11px}
 .parcel-stage{--box-size:180px;--box-half:90px;height:280px}
 .sticker-hint{font-size:9px;bottom:12px}
}
@media(prefers-reduced-motion:reduce){body{background-position:-2px -2px}.stickers--hero.in .stk{translate:var(--drag-x,0px) var(--drag-y,0px)}}

/* Sticker artwork has complete view boxes; allow hover edges beyond the frame. */
.card--hero{overflow:visible}

/* Original blue line icons from the ShipMode Figma icon sheet (284:8). */
.support-icon{flex:none;width:30px;height:32px;object-fit:contain;margin-top:3px;transition:transform .3s var(--ease)}
.bullets li:hover .support-icon{transform:translate(2px,-3px) rotate(-7deg)}
.flow-icon{width:48px;height:48px;object-fit:contain;margin-bottom:7px;transition:transform .35s var(--ease)}
.flow__card:hover .flow-icon,.flow__card:focus-visible .flow-icon{transform:translateY(-4px) rotate(-7deg)}
.section-icon{width:72px;height:72px;object-fit:contain;transition:transform .4s var(--ease)}
.mfg:hover .section-icon{transform:rotate(-8deg) translateY(-3px)}
.icon-heading{display:flex;align-items:center;gap:14px}
.heading-icon{width:36px;height:40px;object-fit:contain}
.mapcard__label{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.location-icon{width:28px;height:28px;object-fit:contain}

/* Review refinements: brand marks and a clean, growing final CTA. */
.value__icon.platform-logo{width:132px;height:44px;object-fit:contain;object-position:left center;margin-bottom:20px}
.compare__brand img{width:210px;max-width:100%;height:auto}
.js .cta.reveal{opacity:0;transform:translateY(36px) scale(.9);transform-origin:center;transition:opacity .7s var(--ease),transform 1s var(--ease)}
.js .cta.reveal.in{opacity:1;transform:translateY(0) scale(1)}
@media(prefers-reduced-motion:reduce){.js .cta.reveal{opacity:1;transform:none}}

/* Keep the cart compact; its SVG canvas includes the full heavy outline. */
.stickers--hero .stk:nth-child(3){width:160px}

/* Reference compositions: desktop scattered; mobile top corners + bottom cluster. */
.stickers--hero{--k:1}
.stickers--hero .stk:nth-child(n){scale:1;left:var(--left);top:var(--top,auto);bottom:var(--bottom,auto);width:var(--size);height:auto;transform-origin:center;max-width:none}
.stickers--hero .stk:nth-child(1){--left:9%;--top:60%;--size:12.7%}
.stickers--hero .stk:nth-child(2){--left:3%;--top:10%;--size:13.8%}
.stickers--hero .stk:nth-child(3){--left:1%;--top:auto;--bottom:2%;--size:12.5%}
.stickers--hero .stk:nth-child(4){--left:80%;--top:70%;--size:18.2%}
.stickers--hero .stk:nth-child(5){--left:71%;--top:auto;--bottom:2%;--size:21.5%}
.stickers--hero .stk:nth-child(6){--left:66.5%;--top:1%;--size:16.2%}
.stickers--hero .stk:nth-child(7){--left:24.5%;--top:auto;--bottom:3%;--size:12.4%}
.stickers--hero .stk:nth-child(8){--left:78%;--top:35%;--size:14.9%}
.js .stickers--hero .stk{opacity:0;translate:var(--drag-x,0px) var(--drag-y,0px);pointer-events:none;transition:transform .25s var(--ease)}
.js .stickers--hero .stk.is-placed{opacity:1;pointer-events:auto}
.js .stickers--hero .stk.is-placing{animation:sticker-place .24s cubic-bezier(.2,.8,.25,1) both}
@keyframes sticker-place{
  0%{opacity:0;transform:translateY(-22px) rotate(var(--entry-turn,-8deg)) scale(1.28)}
  65%{opacity:1;transform:translateY(2px) rotate(2deg) scale(.96)}
  100%{opacity:1;transform:translateY(0) rotate(0) scale(1)}
}
@media(max-width:860px){
 .hero__content{padding-bottom:240px}
 .stickers--hero .stk:nth-child(1){--left:78%;--top:auto;--bottom:4%;--size:22%;z-index:8}
 .stickers--hero .stk:nth-child(2){--left:2%;--top:0%;--bottom:auto;--size:22%}
 .stickers--hero .stk:nth-child(3){--left:2%;--top:auto;--bottom:6%;--size:20%;z-index:2}
 .stickers--hero .stk:nth-child(4){--left:20%;--top:auto;--bottom:4%;--size:30%;z-index:4}
 .stickers--hero .stk:nth-child(5){--left:60%;--top:auto;--bottom:4%;--size:34%;z-index:3}
 .stickers--hero .stk:nth-child(6){--left:70%;--top:1%;--bottom:auto;--size:26%}
 .stickers--hero .stk:nth-child(7){--left:5%;--top:auto;--bottom:0%;--size:20%;z-index:6}
 .stickers--hero .stk:nth-child(8){--left:44%;--top:auto;--bottom:1%;--size:24%;z-index:5}
 .sticker-hint{bottom:10px}
}
@media(max-width:560px){.hero__content{padding-bottom:160px}}
@media(prefers-reduced-motion:reduce){.js .stickers--hero .stk{opacity:1;pointer-events:auto;animation:none}}

/* Top-down unboxing: the real hero sits beneath four hinged cardboard flaps. */
.unboxing{display:none;position:fixed;inset:0;z-index:1000;perspective:1600px;overflow:hidden;isolation:isolate}
.intro-pending .unboxing{display:block}
html.intro-pending{overflow:hidden}
.unboxing__interior{position:absolute;inset:0;background:#30291f;transition:opacity .55s ease .45s}
.unboxing__flap{position:absolute;background-color:#c9ab7d;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.68' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%235b3e17' opacity='.11' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");border:1px solid #95764e;backface-visibility:hidden;transition:transform 1.05s cubic-bezier(.45,0,.15,1);will-change:transform}
.unboxing__flap--top,.unboxing__flap--bottom{left:0;width:100%;height:50%;z-index:2;box-shadow:0 3px 18px #30291f44}
.unboxing__flap--top{top:0;transform-origin:center top;transition-delay:.08s;background-color:#d5b98b}
.unboxing__flap--bottom{bottom:0;transform-origin:center bottom;transition-delay:.22s;background-color:#c9aa7a}
.unboxing__flap--left,.unboxing__flap--right{top:0;height:100%;width:50%;z-index:1;transition-duration:.95s;transition-delay:.48s;background-color:#b99a6d}
.unboxing__flap--left{left:0;transform-origin:left center}
.unboxing__flap--right{right:0;transform-origin:right center}
.unboxing__tape{position:absolute;left:calc(50% - 37px);top:0;bottom:0;width:74px;background:var(--blue);border-inline:1px dashed #f2eddf88;box-shadow:2px 0 5px #30291f22}
.unboxing__tape::after{content:"SHIPMODE · HANDLE WITH CARE · SHIPMODE · HANDLE WITH CARE";position:absolute;inset:12px 0;writing-mode:vertical-rl;text-align:center;color:var(--cream);font:700 11px/74px var(--body);letter-spacing:.12em;overflow:hidden;white-space:nowrap}
.unboxing__logo{position:absolute;left:clamp(24px,8vw,120px);bottom:55px;width:clamp(160px,24vw,310px);height:auto;opacity:.85;rotate:-4deg}
.unboxing__stamp{position:absolute;right:8%;bottom:50px;font:700 clamp(10px,1.2vw,15px)/1.45 var(--body);letter-spacing:.08em;color:#5c482e;rotate:3deg}
.unboxing__label{position:absolute;top:48px;right:8%;width:clamp(180px,24vw,290px);padding:18px 20px;background:var(--cream);color:var(--ink);border-radius:3px;box-shadow:0 2px 3px #30291f22;display:grid;gap:10px;rotate:-5deg}
.unboxing__label b{font:800 clamp(16px,2vw,23px)/1 var(--display);letter-spacing:-.03em}
.unboxing__label span,.unboxing__label small{font:700 9px/1.3 var(--body);letter-spacing:.1em}
.unboxing__label i{height:34px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 8px)}
.unboxing__arrows{position:absolute;left:10%;top:60px;color:#5c482e;font:700 60px/1 var(--body)}
.unboxing__skip{position:absolute;right:24px;bottom:24px;z-index:5;padding:10px 16px;border:var(--container-stroke) solid var(--ink);border-radius:10px;background:var(--cream);color:var(--ink);font:700 12px/1.2 var(--body);text-transform:uppercase;cursor:pointer;transition:opacity .2s}
.unboxing__skip:hover{background:var(--blue);color:var(--cream)}
.intro-opening .unboxing__flap--top{transform:rotateX(115deg)}
.intro-opening .unboxing__flap--bottom{transform:rotateX(-115deg)}
.intro-opening .unboxing__flap--left{transform:rotateY(-112deg)}
.intro-opening .unboxing__flap--right{transform:rotateY(112deg)}
.intro-opening .unboxing__interior{opacity:0}
.intro-opening .unboxing__skip{opacity:.85;pointer-events:auto}
.intro-pending .hero>.wrap{transform:scale(.95);opacity:0;transition:transform 1s var(--ease),opacity .6s ease;transform-origin:50% 30%}
.intro-pending.intro-opening .hero>.wrap{transform:scale(1);opacity:1;transition-delay:.45s}
.intro-pending .nav{opacity:0}
.intro-opening .nav{opacity:1;transition:opacity .65s ease .65s,transform .35s var(--ease)}
@media(max-width:560px){
 .unboxing__tape{left:calc(50% - 25px);width:50px}
 .unboxing__tape::after{font-size:9px;line-height:50px}
 .unboxing__logo{left:22px;bottom:50px;width:145px}
 .unboxing__stamp{right:20px;bottom:25px;font-size:8px}
 .unboxing__label{right:20px;top:55px;width:170px;padding:14px;gap:8px}
 .unboxing__label b{font-size:16px}
 .unboxing__arrows{left:22px;top:60px;font-size:42px}
}
@media(prefers-reduced-motion:reduce){.unboxing{display:none!important}.intro-pending .hero>.wrap{transform:none;opacity:1}.intro-pending .nav{opacity:1}}

/* Stickers never retain a selection frame after dragging or keyboard movement. */
.stickers--hero .stk:focus,.stickers--hero .stk:focus-visible{outline:none;outline-offset:0}

/* One shared raised-card treatment across content boxes. Individual transforms
   keep scroll entrances independent from the hover lift. */
.hover-box{translate:0 0;rotate:0deg;box-shadow:0 0 0 var(--ink-2)}
.hover-box,
.js .hover-box.reveal,
.js .cta.hover-box.reveal{
  transition:opacity .7s var(--ease),transform .8s var(--ease),translate .3s var(--ease),rotate .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
  transition-delay:var(--d,0s),var(--d,0s),0s,0s,0s,0s;
}
.hover-box:focus-within{transform:none;translate:-3px -3px;rotate:-1deg;box-shadow:6px 6px 0 var(--ink-2)}
@media(hover:hover) and (pointer:fine){
 .hover-box:hover{transform:none;translate:-3px -3px;rotate:-1deg;box-shadow:6px 6px 0 var(--ink-2)}
 /* Only the box being explored lifts, so nested cards don't compound the tilt. */
 .hover-box:has(.hover-box:hover),.hover-box:has(.hover-box:focus-within){translate:0 0;rotate:0deg;box-shadow:0 0 0 var(--ink-2)}
}
@media(prefers-reduced-motion:reduce){
 .hover-box,.js .hover-box.reveal,.js .cta.hover-box.reveal{transition:none}
 .hover-box:hover,.hover-box:focus-within{translate:0 0;rotate:0deg}
}

/* Selected larger panels stay stationary with permanent ink shadows. */
.static-box,.static-box:hover,.static-box:focus-within{translate:0 0;rotate:0deg;box-shadow:6px 6px 0 var(--ink-2)}
.static-box:hover,.static-box:focus-within{transform:none}
.photo.static-box img,.photo.static-box:hover img{transform:none}
.static-box.value .value__icon,.static-box.value:hover .value__icon,.static-box.value:focus-within .value__icon{transform:none}
.capture--flat,.capture--flat:hover,.capture--flat:focus-within{translate:0 0;rotate:0deg;box-shadow:none}
.capture--flat:focus-within{transform:none}

/* The opening hero expands to the viewport, then settles into its normal frame.
   Width changes preserve the artwork proportions and keep stickers draggable. */
.js .hero{--hero-progress:0;padding-top:calc(4px * var(--hero-progress))}
.js .hero>.wrap--wide{width:calc(100% - (100% - min(var(--wrap-wide),100% - var(--gutter)*2)) * var(--hero-progress));max-width:none}
.js .hero>.wrap>.card--hero{min-height:calc(746px + max(0px,100svh - 846px) * (1 - var(--hero-progress)));border-radius:calc(16px * var(--hero-progress));border-color:color-mix(in srgb,var(--ink-2) calc(var(--hero-progress) * 100%),transparent)}
@media(max-width:860px){.js .hero>.wrap>.card--hero{min-height:calc((100svh - 86px) * (1 - var(--hero-progress)))}}
@media(prefers-reduced-motion:reduce){.js .hero{--hero-progress:1!important}}

/* The landing navigation is part of the cream hero surface. */
.nav{background:var(--cream)}
.nav:not(.scrolled){box-shadow:none}
.nav:not(.scrolled) .nav__links a{color:var(--ink)}
.nav:not(.scrolled) .nav__links a::after{background:var(--ink)}
.nav__links a{transition:color .3s ease}