/* ZERO FAFF marketing strategy page: its own moving parts, on top of case.css and location.css. Every animation name
   starts with sg so nothing clashes with the shared stylesheets. The page is a treasure map: a map unrolls in the
   opening, you dig blind in the game, then a ship sails the route down the page. */

/* ===================================================================== the opening: the map unrolls */
.sh{width:112%;max-width:720px;justify-self:end;margin-right:-4%;aspect-ratio:600/470;position:relative;container-type:inline-size}
.sh-map{position:absolute;left:3%;right:3%;top:2%;aspect-ratio:600/420;border:var(--border);border-radius:10px;background:#E8DCC0;box-shadow:10px 10px 0 #000;transform:rotate(-1.5deg);clip-path:inset(0 50% 0 50%)}
.sh.on .sh-map{animation:sgunroll 1.1s cubic-bezier(.6,0,.2,1) .2s forwards}
@keyframes sgunroll{to{clip-path:inset(-6% -6% -6% -6%)}}
.sh-map .roll{position:absolute;top:-3%;bottom:-3%;width:4.4cqw;border:var(--border);border-radius:999px;background:linear-gradient(90deg,#C9B48E,#E8DCC0 45%,#B89F73);z-index:3;left:calc(50% - 2.2cqw)}
.sh.on .sh-map .r1{animation:sgrollL 1.1s cubic-bezier(.6,0,.2,1) .2s forwards}
.sh.on .sh-map .r2{animation:sgrollR 1.1s cubic-bezier(.6,0,.2,1) .2s forwards}
@keyframes sgrollL{to{left:-2.2cqw}}
@keyframes sgrollR{to{left:calc(100% - 2.2cqw)}}
.sh-svg{display:block;width:100%;height:100%;border-radius:8px}
.sh.on .rmask{animation:sgdraw 2.2s ease-in-out 1.4s forwards}
@keyframes sgdraw{to{stroke-dashoffset:0}}
.sh-svg .xm,.sh-svg .here{transform-box:fill-box;transform-origin:center}
.sh-svg .xm path{stroke-dasharray:40;stroke-dashoffset:40}
.sh.on .sh-svg .xm path{animation:sgx .35s ease forwards}
.sh.on .sh-svg .xm path:first-child{animation-delay:3.5s}.sh.on .sh-svg .xm path:last-child{animation-delay:3.75s}
@keyframes sgx{to{stroke-dashoffset:0}}
.sh-svg .here{animation:sgbob 1.6s ease-in-out infinite}
@keyframes sgbob{50%{transform:translateY(-3px)}}
.sh-svg .cw{animation:sgwa 11s ease-in-out var(--d) infinite}
.sh-svg .wb{animation-name:sgwb;animation-duration:13s}.sh-svg .wc{animation-name:sgwc;animation-duration:12s}.sh-svg .wd{animation-name:sgwd;animation-duration:14s}
/* each crab wanders its own patch of sand, sideways mostly, stopping now and then */
@keyframes sgwa{0%,8%{transform:none}22%,30%{transform:translate(26px,6px)}46%,52%{transform:translate(40px,-4px)}70%,78%{transform:translate(12px,-10px)}100%{transform:none}}
@keyframes sgwb{0%,10%{transform:none}25%,32%{transform:translate(-24px,8px)}50%,56%{transform:translate(-38px,0)}74%,80%{transform:translate(-14px,-8px)}100%{transform:none}}
@keyframes sgwc{0%,6%{transform:none}20%,28%{transform:translate(30px,-8px)}44%,50%{transform:translate(48px,4px)}68%,76%{transform:translate(18px,8px)}100%{transform:none}}
@keyframes sgwd{0%,9%{transform:none}24%,30%{transform:translate(-28px,-6px)}48%,55%{transform:translate(-8px,-14px)}72%,80%{transform:translate(22px,-4px)}100%{transform:none}}
.sh-svg .cl{transform-box:fill-box;transform-origin:50% 100%;animation:sgclaw .5s ease-in-out infinite alternate}
@keyframes sgclaw{to{transform:scaleY(.8) translateY(1px)}}
.compass{position:absolute;right:3%;top:4%;width:13cqw;z-index:2;opacity:0}
.sh.on .compass{animation:sgfade .4s ease 1.2s forwards}
.compass .needle{transform-box:view-box;transform-origin:40px 40px;animation:sgneedle 4s ease-in-out infinite}
@keyframes sgneedle{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(18deg)}}
@keyframes sgfade{to{opacity:1}}
/* the ship sails the route: it rides the same curve as the drawn line (offset-path in the map's own units) */
.sh-ship{position:absolute;left:0;top:calc(var(--k,1) * 40px);width:600px;height:340px;transform:scale(var(--k,1));transform-origin:0 0;z-index:2;pointer-events:none}
.sh-ship .boat{position:absolute;left:0;top:0;width:50px;opacity:0;offset-path:path("M126 272 C164 292 206 290 228 254 C250 218 232 170 270 144 C306 120 352 118 382 140 C404 156 406 170 428 168");offset-rotate:0deg;offset-anchor:50% 85%}
.sh-ship .ship{display:block;width:100%;height:auto}
.sh.on .sh-ship .boat{animation:sgsail 2.2s ease-in-out 1.4s forwards}
@keyframes sgsail{0%{opacity:1;offset-distance:0%}92%{opacity:1}100%{opacity:0;offset-distance:100%}}
.sh-chest{position:absolute;left:calc(85.7% - 4cqw);top:calc(45.2% - 6.8cqw);width:8cqw;z-index:4;opacity:0;transform:translateY(16px) scale(.6)}
.sh.on .sh-chest{animation:sgpop .5s cubic-bezier(.3,1.6,.5,1) 3.9s forwards}
@keyframes sgpop{to{opacity:1;transform:none}}
.chest{display:block;width:100%;height:auto;overflow:visible}
.chest .lid{transform-box:fill-box;transform-origin:10% 100%}
.chest .glow{opacity:0}
.sh.on .chest .lid{animation:sglid .6s cubic-bezier(.3,1.5,.5,1) 4.4s forwards}
.sh.on .chest .glow{animation:sgfade .4s ease 4.5s forwards}
@keyframes sglid{to{transform:rotate(-26deg) translate(-2px,-4px)}}
.sh-toast{position:absolute;left:8%;bottom:0;display:flex;align-items:center;gap:1.6cqw;padding:1.8cqw 2.6cqw 1.8cqw 2cqw;border:var(--border);border-radius:14px;background:var(--paper);color:var(--ink);box-shadow:6px 6px 0 #000;white-space:nowrap;opacity:0;transform:translateY(14px) scale(.9);z-index:5}
.sh.on .sh-toast{animation:sgpop .5s cubic-bezier(.3,1.5,.5,1) 4.8s forwards}
.sh-toast .dot{width:2.6cqw;height:2.6cqw;border:2px solid var(--ink);border-radius:50%;background:#8FD18A}
.sh-toast span{display:grid;line-height:1.1}.sh-toast b{font-size:2.4cqw}.sh-toast em{font-style:normal;font-size:1.7cqw;color:rgba(17,23,27,.62)}

/* ===================================================================== the voyage's hazards and wildlife */
.vy .spin{transform-box:fill-box;transform-origin:center;animation:vyspin 4s linear infinite}
@keyframes vyspin{to{transform:rotate(360deg)}}
.vy .drift{animation:vydrift 9s ease-in-out infinite alternate}
@keyframes vydrift{to{transform:translateX(18px)}}
.vy .bolt{opacity:0;animation:vybolt 3.2s steps(1) infinite}
@keyframes vybolt{0%,62%{opacity:0}64%{opacity:1}68%{opacity:0}71%,75%{opacity:1}78%,100%{opacity:0}}
.vy .rain{animation:vyrain .7s linear infinite}
@keyframes vyrain{from{transform:translateY(-3px)}to{transform:translateY(4px)}}
.vy .tent{transform-box:fill-box;transform-origin:50% 100%;animation:vytent 2.6s ease-in-out infinite alternate}
.vy .t2{animation-delay:-.9s}.vy .t3{animation-delay:-1.7s}
@keyframes vytent{from{transform:rotate(-7deg) translateY(2px)}to{transform:rotate(8deg) translateY(-2px)}}
.vy .patrol{animation:vypatrol 7s ease-in-out infinite alternate}
@keyframes vypatrol{to{transform:translateX(-46px)}}
.vy .foam{transform-box:fill-box;transform-origin:center;animation:vyfoam 2.4s ease-in-out infinite alternate}
@keyframes vyfoam{to{transform:scale(1.12);opacity:.5}}
.vy .ripple{animation:vyrip 2s ease-in-out infinite alternate}
@keyframes vyrip{to{transform:translateX(4px)}}
.vy .beam{transform-box:view-box;animation:vybeam 3s ease-in-out infinite alternate}
@keyframes vybeam{from{opacity:.4}to{opacity:1}}
.vy .palm{transform-box:fill-box;transform-origin:50% 100%;animation:vypalm 3.4s ease-in-out infinite alternate}
@keyframes vypalm{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
.vy .rock{transform-box:fill-box;transform-origin:50% 90%;animation:vyrock 1.8s ease-in-out infinite alternate}
@keyframes vyrock{from{transform:rotate(-4deg)}to{transform:rotate(4deg) translateY(-1px)}}
.vy .crab-w{animation:vycrab 8s ease-in-out infinite}
.vy .c2{animation-delay:-3s}
@keyframes vycrab{0%,12%,100%{transform:none}32%,42%{transform:translateX(12px)}64%,74%{transform:translateX(-8px)}}
.vy .cl{transform-box:fill-box;transform-origin:50% 100%;animation:vyclaw .5s ease-in-out infinite alternate}
@keyframes vyclaw{to{transform:scaleY(.8) translateY(1px)}}
.vy .waves{animation:vywave 6s linear infinite}
@keyframes vywave{to{transform:translateX(40px)}}
@media (prefers-reduced-motion:reduce){.vy *{animation:none!important}}

/* ===================================================================== the game */
.dg-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(24px,3.5vw,50px);align-items:start}
.dg-board{position:relative;aspect-ratio:600/340;border:var(--border);border-radius:22px;overflow:hidden;box-shadow:12px 12px 0 var(--ink);container-type:inline-size}
.dg-island{position:absolute;inset:0;width:100%;height:100%}
.dg-board[data-mode="map"] .gmask{animation:sgdraw 1.2s ease-in-out forwards}
/* the sand patches sit on the island (the outer ones are tucked in so none land in the sea) */
.dg-cells{position:absolute;inset:0}
.dg-c{position:absolute;translate:-50% -50%;border:0;padding:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;rotate:var(--r,0deg)}
.dg-c .sand{position:absolute;inset:0;border:2.5px dashed rgba(17,23,27,.35);border-radius:var(--b,50%);background:radial-gradient(#DCCBA6,#D2BE94);transition:transform .2s,border-color .2s}
.dg-c:hover .sand,.dg-c:focus-visible .sand{transform:scale(1.08);border-color:var(--ink)}
.dg-c:focus-visible{outline:none}
.dg-c .hole{position:absolute;inset:14% 12%;border:3px solid var(--ink);border-radius:var(--b,50%);background:#5B4632;box-shadow:inset 0 .8cqw 0 rgba(0,0,0,.35);transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.dg-c.dug .hole{transform:none}
.dg-c.dug{cursor:default}
.dg-c.dug .sand{border-style:solid;border-color:rgba(17,23,27,.25)}
.dg-c .spade{position:absolute;left:50%;top:-30%;width:3.6cqw;height:7.6cqw;margin-left:-1.8cqw;opacity:0;pointer-events:none;
  background:linear-gradient(#7A4A33,#7A4A33) 50% 0/22% 62% no-repeat;transform-origin:50% 100%}
.dg-c .spade::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;border:2.5px solid var(--ink);border-radius:0 0 50% 50%;background:#B9B1A4}
.dg-c.digging .spade{animation:sgdig .55s ease forwards}
@keyframes sgdig{0%{opacity:1;transform:translateY(-12px) rotate(-12deg)}40%{opacity:1;transform:translateY(8px) rotate(4deg)}70%{opacity:1;transform:translateY(-4px) rotate(-20deg)}100%{opacity:0;transform:translateY(-14px) rotate(-26deg)}}
.dg-c.gold .hole{background:#F2C46B;box-shadow:inset 0 0 0 .6cqw #B18A57,0 0 0 1.4cqw rgba(242,196,107,.4)}
/* the treasure: a gold coin stamped with the ZERO FAFF wordmark spins up out of the hole */
.dg-c .coin{position:absolute;left:50%;top:50%;width:min(76%,8cqw);aspect-ratio:1;display:grid;place-items:center;border:.35cqw solid var(--ink);border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#FBE7A8 0 14%,#F2C46B 38%,#C99A45 78%,#A77A33);box-shadow:inset 0 0 0 .5cqw rgba(255,240,190,.55),inset 0 0 0 .85cqw #B18A57,.35cqw .35cqw 0 var(--ink);
  translate:-50% -50%;transform:scale(0) rotateY(90deg);opacity:0;pointer-events:none;z-index:2}
.dg-c .coin::before{content:"";position:absolute;inset:4%;border-radius:50%;border:.18cqw dashed rgba(17,23,27,.45)}
.dg-c .coin .wm{display:block;font-family:"Big Shoulders",Impact,sans-serif;font-weight:900;font-size:1.55cqw;line-height:.86;letter-spacing:.02em;text-align:center;color:#5B3F14;text-shadow:0 .08cqw 0 rgba(255,240,190,.8)}
.dg-c.gold .coin{animation:sgcoin .9s cubic-bezier(.3,1.5,.5,1) .15s forwards}
@keyframes sgcoin{0%{opacity:0;transform:translateY(40%) scale(0) rotateY(90deg)}55%{opacity:1;transform:translateY(-18%) scale(1.12) rotateY(540deg)}100%{opacity:1;transform:translateY(-8%) scale(1) rotateY(720deg)}}
.dg-x{position:absolute;width:6cqw;height:6cqw;margin:-3cqw 0 0 -3cqw;opacity:0;pointer-events:none;z-index:2;transform:scale(.4) rotate(-20deg);transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.5,1)}
.dg-x::before,.dg-x::after{content:"";position:absolute;left:44%;top:-10%;width:12%;height:120%;border-radius:4px;background:#6E2F40;transform:rotate(45deg)}
.dg-x::after{transform:rotate(-45deg)}
.dg-board[data-mode="map"] .dg-x{opacity:1;transform:none;transition-delay:1.2s}
.dg-board[data-mode="map"] .dg-x.gone{opacity:0;transition-delay:0s}
.dg-pop{position:absolute;left:50%;top:50%;z-index:5;max-width:72%;padding:1.8cqw 2.6cqw;border:var(--border);border-radius:16px;background:var(--paper);color:var(--ink);text-align:center;box-shadow:6px 6px 0 var(--ink);opacity:0;transform:translate(-50%,-50%) scale(.6);pointer-events:none}
.dg-pop.on{animation:sgpopup 1.9s cubic-bezier(.3,1.5,.5,1) forwards}
.dg-pop b{display:block;font-size:clamp(15px,2.8cqw,22px);font-weight:900}
.dg-pop small{display:block;margin-top:.4em;font-size:clamp(12px,2cqw,15px);font-weight:700;color:rgba(17,23,27,.65)}
.dg-pop.win{background:#D8EFD5}
.dg-pop.win.on{animation:sgpopwin .5s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes sgpopup{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}15%,75%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-60%)}}
@keyframes sgpopwin{to{opacity:1;transform:translate(-50%,-50%)}}
.dg-side{display:grid;gap:16px}
.dg-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dg-stats > div{padding:14px 16px;border:var(--border);border-radius:16px;background:var(--paper);box-shadow:5px 5px 0 var(--ink)}
.dg-stats span{display:block;font-size:12.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:rgba(17,23,27,.55)}
.dg-stats b{display:block;margin-top:2px;font-size:clamp(30px,3vw,42px);font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.dg-spent{color:#A23B4C}
.dg-log{list-style:none;display:grid;gap:8px;min-height:40px}
.dg-log li{padding:10px 12px;border:2px solid var(--ink);border-radius:12px;background:var(--paper);font-size:14.5px;line-height:1.3;animation:sgpop .4s cubic-bezier(.3,1.5,.5,1) both;transform:translateY(8px) scale(.9);opacity:0}
.dg-log li b{display:block;font-size:15px}
.dg-log li small{color:rgba(17,23,27,.65)}
.dg-log li em{float:right;font-style:normal;font-weight:900;color:#A23B4C}
.dg-log li.ok{background:#D8EFD5}.dg-log li.ok em{color:var(--moss)}
.dg-end{padding:16px;border:var(--border);border-radius:16px;background:#FFF0C9;box-shadow:5px 5px 0 var(--ink)}
.dg-end[hidden]{display:none}
.dg-msg{margin-bottom:12px;font-size:16px;font-weight:700;line-height:1.35}
.dg-reset{justify-self:start;padding:8px 16px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);font:inherit;font-size:15px;font-weight:850;cursor:pointer}
.dg-reset:hover{background:var(--brass)}
.dg-reset[hidden],.dg-map[hidden]{display:none}

/* ===================================================================== the route */
.rt-map{position:relative;display:grid;gap:clamp(40px,6vw,90px);padding:20px 0 30px}
.rt-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.rt-path{fill:none;stroke:rgba(110,47,64,.35);stroke-width:5;stroke-linecap:round;stroke-dasharray:1 14}
.rt-done{fill:none;stroke:#6E2F40;stroke-width:5;stroke-linecap:round;stroke-dasharray:1 14}
.rt-ship{position:absolute;left:0;top:0;z-index:0;width:70px;translate:-50% -80%;pointer-events:none}
.rt-ship .ship{display:block;width:100%;height:auto;filter:drop-shadow(3px 3px 0 rgba(17,23,27,.3))}
.rt-ship.flip .ship{transform:scaleX(-1)}
.rt-stop{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;width:min(560px,62%);z-index:1}
.rt-stop:nth-of-type(even){justify-self:end}
.rt-pin{display:grid;place-items:center;width:94px;height:94px;padding:12px;border:var(--border);border-radius:50%;background:var(--paper);box-shadow:5px 5px 0 var(--ink);transition:transform .4s cubic-bezier(.3,1.6,.5,1),background .3s}
.rt-pin svg{width:100%;height:auto;overflow:visible}
.rt-stop.here .rt-pin{transform:scale(1.12) rotate(-4deg);background:#FFF0C9}
.rt-card{padding:20px 22px;border:var(--border);border-radius:20px;background:var(--paper);box-shadow:7px 7px 0 var(--ink);transition:transform .4s cubic-bezier(.3,1.4,.5,1)}
.rt-stop.here .rt-card{transform:translateY(-4px)}
.rt-n{font-size:12.5px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:#6E2F40}
.rt-card h3{margin:6px 0 8px;font-family:"Melodrama",serif;font-weight:700;font-size:clamp(26px,2.4vw,34px);line-height:1}
.rt-card p{font-size:17px;line-height:1.45;color:rgba(17,23,27,.75)}
.rt-card .sc-get{margin-top:14px}
.chest.mini .lid{transform:rotate(-22deg) translate(-2px,-3px)}
.chest.mini .glow{opacity:1}

/* ===================================================================== what you leave with: the map unrolls */
.lv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center}
.lv-copy h2{font-family:"Melodrama",serif;font-weight:500;font-size:clamp(40px,4.4vw,66px);line-height:.98;margin:18px 0 28px}
.lv-copy .sec-lede{margin:0 0 24px}
.lv-serv{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.lv-serv a{display:inline-flex;align-items:center;gap:6px;padding:8px 13px 8px 15px;border:2px solid var(--canvas);border-radius:999px;color:var(--canvas);font-size:15px;font-weight:800;text-decoration:none;transition:background .2s,color .2s}
.lv-serv a svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.lv-serv a:hover{background:var(--brass);color:var(--ink);border-color:var(--ink)}
.lv-doc{position:relative;padding:30px 0}
.lv-doc .rl{position:absolute;left:-3%;right:-3%;height:34px;border:var(--border);border-radius:999px;background:linear-gradient(#C9B48E,#E8DCC0 45%,#B89F73);z-index:2}
.lv-doc .top{top:4px}.lv-doc .bot{bottom:4px;transform:translateY(calc(-1 * var(--h,0px)))}
.lv-doc.on .bot{animation:sgroll 1s cubic-bezier(.6,0,.2,1) .2s forwards}
@keyframes sgroll{to{transform:none}}
.pp{position:relative;padding:46px 30px 44px;border:var(--border);border-top:0;border-bottom:0;background:#E8DCC0;color:var(--ink);clip-path:inset(0 0 100% 0);box-shadow:10px 0 0 #000}
.lv-doc.on .pp{animation:sgdoc 1s cubic-bezier(.6,0,.2,1) .2s forwards}
@keyframes sgdoc{to{clip-path:inset(-30px -30px 0 0)}}
.pp-h{margin-bottom:14px;font-family:"Melodrama",serif;font-weight:700;font-size:clamp(24px,2.2vw,32px);line-height:1}
.pp ul{list-style:none;display:grid;gap:10px}
.pp li{display:grid;grid-template-columns:38px 1fr auto;gap:12px;align-items:center;padding:10px 12px;border:2px solid rgba(17,23,27,.25);border-radius:12px;background:rgba(251,249,245,.6)}
.pp .pi{display:grid;place-items:center;width:38px;height:38px;border:2px solid var(--ink);border-radius:50%;background:var(--paper);font-size:18px}
.pp li > span:nth-child(2){display:grid;line-height:1.2}.pp li b{font-size:16px}.pp li small{font-size:13.5px;color:rgba(17,23,27,.65)}
.pp .tk{display:grid;place-items:center;width:26px;height:26px;border:2px solid var(--ink);border-radius:50%;background:#B7E5B2;font-style:normal;font-size:13px;font-weight:900;transform:scale(0)}
.lv-doc.on .pp .tk{animation:sgtick .4s cubic-bezier(.3,1.7,.5,1) forwards;animation-delay:calc(1.3s + var(--i) * .25s)}
@keyframes sgtick{to{transform:none}}
.pp .pp-seal{position:absolute;right:-14px;top:-18px;z-index:3;display:grid;place-items:center;width:52px;height:52px;border:3px solid var(--ink);border-radius:50%;background:#6E2F40;color:var(--canvas);font-weight:900;font-size:16px;transform:rotate(-12deg) scale(0)}
.lv-doc.on .pp .pp-seal{animation:sgseal .45s cubic-bezier(.3,1.6,.5,1) 3s forwards}
@keyframes sgseal{to{transform:rotate(-12deg)}}

/* ===================================================================== two ways */
.wy{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px)}
.wy-c{padding:clamp(22px,2.6vw,34px);border:var(--border);border-radius:24px;background:var(--paper);box-shadow:8px 8px 0 var(--ink)}
.wy-c.alt{background:#E8DCC0}
.wy-i{display:block;width:76px;margin-bottom:14px}
.wy-i svg{display:block;width:100%;height:auto}
.wy-c h3{font-family:"Melodrama",serif;font-weight:700;font-size:clamp(28px,2.6vw,38px);line-height:1}
.wy-c p{margin-top:12px;font-size:17.5px;line-height:1.45;color:rgba(17,23,27,.75)}
.compass.sm{position:static;opacity:1;width:100%}

/* ===================================================================== the closing: the telescope */
.cta-peek .scope{animation:sgscope 5s ease-in-out infinite}
@keyframes sgscope{0%,100%{transform:translate(95px,56px) rotate(-16deg)}50%{transform:translate(95px,56px) rotate(-6deg)}}
.cta-ch .cta-sub{max-width:56ch;text-wrap:balance}

/* ===================================================================== smaller screens */
@media (max-width:980px){
  .sh{width:100%;max-width:600px;margin:clamp(10px,3vw,30px) auto 0;justify-self:center}
  .sg-hero .scroll-cue{display:none}
}
@media (max-width:1000px){
  .dg-grid,.lv-grid{grid-template-columns:1fr}
  .dg-side{grid-template-columns:1fr 1fr;align-items:start}
  .dg-stats{grid-column:1/-1}
}
@media (max-width:720px){
  .sh{max-width:460px}
  .dg-board{box-shadow:7px 7px 0 var(--ink)}
  .dg-side{grid-template-columns:1fr}
  .rt-stop{width:100%;grid-template-columns:64px 1fr;gap:14px;justify-self:stretch!important}
  .rt-pin{width:64px;height:64px;padding:8px}
  .rt-ship{width:52px}
  .wy{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .sh *,.sh-map,.lv-doc *,.dg-c *,.cta-peek .scope{animation:none!important;transition:none!important}
  .sh-map{clip-path:none}
  .sh-map .roll{display:none}
  .rmask{stroke-dashoffset:0}
  .sh-svg .xm path{stroke-dashoffset:0}
  .compass,.sh-chest,.sh-toast{opacity:1;transform:none}
  .sh-ship{display:none}
  .sh-svg .cw,.sh-svg .cl{animation:none}
  .chest .glow{opacity:1}
  .pp{clip-path:none}.lv-doc .bot{transform:none}.pp .tk,.pp .pp-seal{transform:none}
}

/* ===================================================================== results: Salt & Co */
.dpf-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.5vw,70px);align-items:center}
.dpf-pic{position:relative;display:block;width:min(100%,460px);justify-self:center;border:var(--border);border-radius:22px;overflow:visible;box-shadow:10px 10px 0 #000;transform:rotate(-1.2deg);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.dpf-pic:hover{transform:rotate(0) translateY(-3px)}
.dpf-pic img{display:block;width:100%;height:auto;border-radius:20px}
.dpf-badge{position:absolute;right:-14px;bottom:-18px;display:grid;max-width:220px;padding:12px 16px;border:var(--border);border-radius:16px;background:var(--brass);color:var(--ink);font-size:14px;font-weight:800;line-height:1.2;box-shadow:5px 5px 0 #000;transform:rotate(3deg)}
.dpf-badge b{font-size:30px;font-weight:900;line-height:1}
.dpf-k{font-size:15px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.dpf-stat{display:flex;align-items:center;gap:18px;margin:14px 0 20px}
.dpf-stat span{display:grid;line-height:1}
.dpf-stat b{font-size:clamp(46px,5vw,76px);font-weight:900;font-variant-numeric:tabular-nums}
.dpf-stat .from b{opacity:.55}
.dpf-stat .to b{color:var(--brass)}
.dpf-stat small{margin-top:6px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.dpf-stat .arr{width:70px;flex:0 0 auto;color:var(--brass)}
.dpf-q{margin:0 0 16px;padding-left:20px;border-left:4px solid var(--brass);font-family:"Melodrama",serif;font-weight:500;font-size:clamp(22px,2vw,30px);line-height:1.15}
.dpf-q cite{display:block;margin-top:10px;font-family:"Big Shoulders",sans-serif;font-style:normal;font-size:15px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--mute)}
.dpf-p{margin-bottom:24px;font-size:clamp(17px,1.35vw,20px);line-height:1.45;color:var(--mute);max-width:52ch}
.dpf-acts{display:flex;flex-wrap:wrap;gap:12px}