/* Shared Seekies nav and footer extras for the inner pages. Source: tools/chrome/chrome.css, copied by tools/build-chrome.py. */ .nav.sc{position:fixed;left:0;right:0;top:0;z-index:60;padding-top:env(safe-area-inset-top,0px);background:transparent;transition:background-color .25s ease,box-shadow .25s ease,-webkit-backdrop-filter .25s ease,backdrop-filter .25s ease} .nav.sc.sticky{position:sticky} /* clear soft glass, only once content scrolls under the bar (Darcy, 10 Oct: never a dark or solid bar) */ .nav.sc.stuck{background:rgba(255,255,255,.24);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);box-shadow:0 1px 0 rgba(255,255,255,.3)} .nav.sc .nav-in{display:flex;align-items:center;gap:28px;padding:14px 28px;width:auto;max-width:none;margin:0} .nav.sc .lk{display:flex;align-items:center;gap:8px;text-decoration:none;color:#FF4A3D} .nav.sc .lk .lead{width:47px;height:auto;overflow:visible} .nav.sc .lk .lead path{fill:none;stroke:#FF4A3D;stroke-width:18;stroke-linecap:round;stroke-linejoin:round} .nav.sc .lk .lead .ck circle,.nav.sc .lk .lead .ck path{fill:none;stroke:#FF4A3D;stroke-width:4.8;stroke-linecap:round} .nav.sc .lk .lead .ck .ck-b{fill:#FF4A3D;stroke:none;fill-rule:evenodd} .nav.sc .lk span{font-family:"General Sans",system-ui,sans-serif;font-weight:700;font-size:22px;letter-spacing:-.05em;line-height:1;color:#FF4A3D} .nav.sc ul{display:flex;gap:26px;list-style:none;margin:0 auto;padding:0} .nav.sc ul a{font-family:"Bebas Neue","Anton",Impact,sans-serif;font-size:19px;letter-spacing:.05em;color:#B81A10;text-decoration:none;font-weight:400} .nav.sc ul a:hover,.nav.sc ul a[aria-current]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px} .nav.sc .tab{margin:-14px 0 0;align-self:flex-start;background:#FF4A3D;color:#fff;font-family:"Bebas Neue","Anton",Impact,sans-serif;font-size:19px;letter-spacing:.05em;border:0;border-radius:0 0 14px 14px;padding:18px 22px 12px;text-decoration:none;line-height:1;box-shadow:0 10px 24px -14px rgba(255,74,61,.7);transition:background-color .2s} .nav.sc .tab:hover{background:#C9170F} @media (max-width:900px){ .nav.sc .nav-in{gap:16px;padding:10px 18px} .nav.sc ul{margin:0 0 0 auto;gap:0} .nav.sc ul li{display:none} .nav.sc ul li.m{display:block} .nav.sc .lk .lead{width:40px} .nav.sc .lk span{font-size:20px} .nav.sc .tab{margin-top:-10px;padding:15px 16px 10px;font-size:17px} } @media (max-width:360px){.nav.sc .lk span{display:none}} /* Seekies for Walkers on Google Play, beside the first Apply button on walker pages (build-chrome) */ .wk-app{display:inline-flex;vertical-align:middle;margin:0 0 0 12px}.wk-app .store{min-height:48px} @media (max-width:620px){.wk-app{display:flex;margin:14px 0 0}} /* the walker jobs row: one link per area jobs page (tools/build-jobs-areas.py) */ .sf-jobs{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;margin:44px 0 0;font-size:13.5px;line-height:1.5;color:#544D46} .sf-jobs b{font-weight:600;color:#2A1709;margin-right:4px} .sf-jobs a{color:inherit;text-decoration:none} .sf-jobs a:hover{color:#C8160F;text-decoration:underline} /* phones: a long button label wraps instead of pushing the page sideways ("Apply to walk (free, about ten minutes)", 11 Nov) */ @media (max-width:480px){html .btn.btn-lg{white-space:normal;max-width:100%;text-align:center;line-height:1.25}} /* App Store and Google Play badges before launch: the badge art stays as issued; a plain "Coming soon" line says the rest (no tags or stamps, Nikola 31 Oct 2026) */ .store.soon{position:relative;text-decoration:none;opacity:.86;transition:opacity .25s ease,transform .25s ease} .store.soon:hover,.store.soon:focus-visible{opacity:1;transform:translateY(-2px)} .soon-pair{display:flex;gap:14px;flex-wrap:nowrap} .soon-line{flex-basis:100%;margin:10px 0 0;font-size:14px;line-height:1.4;font-weight:500;color:#6A625B} /* ===== AA pass (10 Oct 2026). Collar Red #C9170F carries small red text on cream and pastel grounds (4.8:1 or better on every Seekies ground) and fills buttons with white labels (5.8:1). Bright Lead Red #FF4A3D stays for large display type, the lead and the illustrations. Grey captions use #6A625B (4.9:1 or better). ===== */ :root{--ink-3:#6A625B} /* buttons and chips with white labels */ .btn-red,.btn.btn-lg:not(.ghost),.pg .btn:not(.ghost),.pill:not(.ghost):not(.sv-reg):not(.cream),html .ap-next,.apb-go,.nav .tab,.soon-tag,.stop-n,.day.on,.nr-days span.on,.nw-wk i.on,.wk i.on,.of-a,.st-foot,.tp i,.ap-next,.fa-go,ol li.on>i,.pg-steps li>i,.cl-copy .pill,html .pack-wait .pill.cream{background-color:#C9170F!important} .btn-red:hover,.btn.btn-lg:not(.ghost):hover,.pill:not(.ghost):not(.sv-reg):not(.cream):hover,.nav .tab:hover,.fa-go:hover{background-color:#A8140C!important} /* small red text on light grounds */ .kick,.hx-kick,.sv-no,.bwm-tx b,.ppm-hd span,.ppm-k,.rt-tag,.rt-route-k,.ph-tabs span.on,.apb-brand b,.mpp-hd span,.fa-kick,.wt-no,.wt-tag,.wd-dict i,.svc-h .meta span,.menu-box button,.dial small,.pill.ghost,.pp-st,.pp-st b,.pp-st small,.lt-tk b,.pk-kick,.fs-kick,.cl-kick:not(.club .cl-kick),.pg-kick,.pg-eyebrow{color:#C9170F!important} .pill.ghost{border-color:#C9170F!important} /* grey captions */ .wd-dict span,.pg-crumbs i,.lg-upd,.lg-upd time,.nw-ph,.nw-lb,.nw-clk span,.tl-r,.of-t,.ap-left,.ap-sub i,.fine,.pg-small,.sf-by,.lab,.st small,.hs-tx small,.tx small,.permalink,.tile em,.day i,.ph-tabs span{color:#5E5751!important} .ppm-pn{color:#4F5868!important} /* small white labels on green */ .tm-done .tm-live,.ps-two .r,.ps-tick.home{background-color:#1A7A4C!important} .day.on i,.day.on span{color:#fff!important} .rt-earn .kick,.club .kick{color:#E3F23B!important} .wt-reg .wt-no,.wt-reg .wt-tag{color:var(--k)!important} .nw-wk i:not(.on){color:#5F557E!important} /* ===== Nav, ported verbatim from /maxiinspired (Darcy, 11 Oct). No bar: the logo sits on the page (on the cloud at the top), the link pill turns to clear glass (white 24%) once the page has scrolled 60% of a screen, then the red Get first access pill and the white Menu pill. Values copied from public/maxiinspired/index.html. ===== */ html .nav.mx{position:fixed!important;left:0;right:0;top:0;z-index:75;background:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:0!important;pointer-events:none;--mxg:clamp(18px,4vw,56px)} html .nav.mx.sticky{position:sticky!important} html .nav.mx .nav-in{display:flex!important;align-items:center;gap:14px;width:auto!important;max-width:none!important;margin:0!important;padding:calc(env(safe-area-inset-top,0px) + 14px) var(--mxg) 0!important} html .nav.mx .nav-in>*{pointer-events:auto} html .nav.mx .lk{display:flex;align-items:center;gap:8px;text-decoration:none;margin-right:auto;background:none!important;padding:0!important;box-shadow:none!important} html .nav.mx .lk>svg{width:46px!important;height:auto;overflow:visible} html .nav.mx .lk path{fill:none;stroke:#FF4A3D!important;stroke-width:18;stroke-linecap:round;stroke-linejoin:round}html .nav.mx .lk .ck circle,html .nav.mx .lk .ck path{fill:none;stroke:#FF4A3D!important;stroke-width:4.8;stroke-linecap:round}html .nav.mx .lk .ck .ck-b{fill:#FF4A3D!important;stroke:none!important;fill-rule:evenodd} html .nav.mx .lk>span{font:700 22px/1 "General Sans",system-ui,sans-serif!important;letter-spacing:-.05em!important;color:#FF4A3D!important;text-shadow:none!important;white-space:nowrap} html .nav.mx .lk .tm{font-size:.36em!important;line-height:0!important;vertical-align:1.15em!important;letter-spacing:0!important;margin-left:.06em!important;font-weight:700} html .nav.mx nav.pillnav,html .mnu nav{position:static!important;left:auto!important;right:auto!important;top:auto!important;z-index:auto!important;padding-top:0} html .nav.mx nav.pillnav{display:flex;gap:4px;padding:6px!important;border-radius:999px;background:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transition:background-color .3s,box-shadow .3s,backdrop-filter .3s} html .nav.mx .pillnav a{font:500 15px/1 "General Sans",system-ui,sans-serif!important;letter-spacing:normal!important;text-transform:none!important;color:#2A1709!important;text-decoration:none;padding:11px 14px!important;border-radius:999px;text-shadow:none!important;transition:background-color .2s} html .nav.mx .pillnav a:hover{background:rgba(255,255,255,.6)!important} html .nav.mx.mx-glass nav.pillnav{background:rgba(255,255,255,.24)!important;-webkit-backdrop-filter:blur(18px) saturate(1.6)!important;backdrop-filter:blur(18px) saturate(1.6)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)!important} html .nav.mx .tab{margin:0!important;align-self:center!important;display:inline-flex;align-items:center;gap:10px;font:600 15px/1 "General Sans",system-ui,sans-serif!important;letter-spacing:normal!important;text-transform:none!important;text-decoration:none;color:#fff!important;background:#C9170F!important;border-radius:999px!important;padding:13px 20px!important;border:0;cursor:pointer;height:auto!important;white-space:nowrap;box-shadow:0 12px 26px -14px rgba(185,26,16,.7)!important;transition:transform .35s cubic-bezier(.3,1.6,.5,1),background-color .2s} html .nav.mx .tab:hover{transform:translateY(-3px) rotate(-2deg);background:#A8140C!important} html .nav.mx .menu-btn{font:600 15px/1 "General Sans",system-ui,sans-serif;background:#fff;color:#2A1709;border:0;border-radius:999px;padding:13px 18px;cursor:pointer;white-space:nowrap;box-shadow:0 10px 24px -16px rgba(29,27,24,.45)} html .nav.mx ul{display:none!important} @media (max-width:900px){html .nav.mx nav.pillnav{display:none!important}html .nav.mx .tab{padding:12px 16px!important;font-size:14px!important}} /* the cloud cluster at the top-left, behind the logo, as on /maxiinspired: two (three) clouds that drift apart and back */ .mx-clouds{position:fixed;left:calc(clamp(18px,4vw,56px) + 76px);top:calc(env(safe-area-inset-top,0px) + 36px);width:0;height:0;z-index:74;pointer-events:none;transform-origin:0 0;will-change:transform} /* the clouds follow the logo (Darcy, 14 Oct): fixed just under the nav (z 60), so the logo always sits in front; the script below shrinks the cluster to 80% about the logo over the first 260px of scroll and grows it back at the top. Reduced motion: two sizes, no tween. */ .mxc{position:absolute;display:block;width:var(--mxw,110px);aspect-ratio:2.4;opacity:1;animation:mxcIn 1.2s cubic-bezier(.22,1,.36,1) .3s both} .mxc.c1{left:calc(var(--mxw,110px)*-1.05);top:calc(var(--mxw,110px)/2.4*-.45)}.mxc.c2{left:calc(var(--mxw,110px)*-.5);top:calc(var(--mxw,110px)/2.4*-.62)}.mxc.c3{left:calc(var(--mxw,110px)*.05);top:calc(var(--mxw,110px)/2.4*-.4)} .mxc i{position:absolute;inset:0;display:block;animation:mxcDrift var(--t) ease-in-out infinite alternate} .mxc.c1{--from:-200px}.mxc.c1 i{--t:6s;--dx:40px}.mxc.c2{--from:200px;animation-delay:.42s}.mxc.c2 i{--t:8s;--dx:-40px}.mxc.c3{--from:-200px;animation-delay:.54s}.mxc.c3 i{--t:10s;--dx:40px} .mxc b{position:absolute;bottom:0;border-radius:999px;background:#fff}.mx-clouds:before{content:"";position:absolute;left:calc(var(--mxw,110px)*-1.15);top:calc(var(--mxw,110px)/2.4*-.5);width:calc(var(--mxw,110px)*2.3);height:calc(var(--mxw,110px)/2.4*1.05);border-radius:999px;background:#fff} .mxc b:nth-child(1){left:0;width:46%;height:56%}.mxc b:nth-child(2){left:22%;width:46%;height:100%}.mxc b:nth-child(3){left:50%;width:50%;height:72%} @keyframes mxcIn{from{translate:var(--from) 0;opacity:0}to{translate:0 0;opacity:1}} @keyframes mxcDrift{from{transform:translateX(0)}to{transform:translateX(var(--dx))}} @media (prefers-reduced-motion:reduce){.mxc,.mxc i{animation:none}} .mnu{position:fixed;inset:0;z-index:80} .mnu-bg{position:absolute;inset:0;background:rgba(29,27,24,.35);opacity:0;transition:opacity .3s} .mnu.open .mnu-bg{opacity:1} .mnu-card{position:absolute;right:clamp(16px,3vw,40px);top:calc(env(safe-area-inset-top,0px) + 12px);width:min(760px,calc(100% - 2*clamp(16px,3vw,40px)));min-height:min(560px,calc(100svh - 24px));background:#fff;border-radius:34px;padding:clamp(28px,4vw,54px);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;transform-origin:92% 0;transform:translateY(-30%) rotate(-8deg);opacity:0;transition:transform .6s cubic-bezier(.3,1.5,.5,1),opacity .3s;box-shadow:0 40px 80px -40px rgba(29,27,24,.55)} .mnu.open .mnu-card{transform:rotate(-2deg);opacity:1} .mnu-card nav a{display:block;font-family:"Bebas Neue","Anton",Impact,sans-serif;font-weight:400;font-size:clamp(52px,7vw,104px);line-height:.88;text-transform:uppercase;color:#FF4A3D;text-decoration:none;transition:transform .25s,color .2s;transform:translateY(40%);opacity:0} .mnu.open .mnu-card nav a{transform:none;opacity:1;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s,color .2s} .mnu.open .mnu-card nav a:nth-child(2){transition-delay:.05s}.mnu.open .mnu-card nav a:nth-child(3){transition-delay:.1s}.mnu.open .mnu-card nav a:nth-child(4){transition-delay:.15s}.mnu.open .mnu-card nav a:nth-child(5){transition-delay:.2s}.mnu.open .mnu-card nav a:nth-child(6){transition-delay:.25s} .mnu-card nav a:hover{color:#C9170F;transform:translateX(8px)} .mnu-x{position:absolute;right:20px;top:20px;width:48px;height:48px;border-radius:50%;border:0;background:#EFE8DC;color:#2A1709;font:600 24px/1 "General Sans",system-ui,sans-serif;cursor:pointer} .mnu-ph{margin:0;width:clamp(160px,18vw,230px);background:#fff;padding:10px 10px 14px;border-radius:10px;box-shadow:0 24px 46px -22px rgba(29,27,24,.5);transform:translateY(60px) rotate(18deg);opacity:0;transition:transform .7s cubic-bezier(.3,1.5,.5,1) .15s,opacity .4s .15s} .mnu.open .mnu-ph{transform:rotate(6deg);opacity:1} .mnu-ph img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px} .mnu-ph figcaption{margin-top:10px;font:600 13px/1.2 "General Sans",system-ui,sans-serif;color:#4D4842} @media (max-width:760px){.mnu-card{grid-template-columns:1fr;align-items:start}.mnu-ph{display:none}} @media (prefers-reduced-motion:reduce){.mnu-card,.mnu-card nav a,.mnu-ph,.mnu-bg{transition:none!important}} /* menu: no wrapped links, a square photo */ .mnu-card nav a{white-space:nowrap;font-size:clamp(44px,5.4vw,84px)!important} .mnu-ph img{height:auto!important;aspect-ratio:1/1} @media (max-width:760px){.mnu-card{min-height:0}} /* ball cursor */ .bc{position:fixed;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;z-index:9999;pointer-events:none;will-change:transform;transition:width .25s,height .25s,margin .25s,opacity .2s} .bc svg{display:block;width:100%;height:100%;transition:transform .15s} .bc.big{width:54px;height:54px;margin:-27px 0 0 -27px} .bc.down svg{transform:scale(.82)} .bc.txt,.bc:not(.bc-moved){opacity:0} html.bc-on,html.bc-on a,html.bc-on button,html.bc-on [role=button],html.bc-on label,html.bc-on summary{cursor:none!important} html.bc-on input,html.bc-on textarea,html.bc-on select,html.bc-on [contenteditable]{cursor:text!important} html.bc-on .cur{display:none!important} @media (max-width:389px){html .nav.mx .nav-in{gap:8px}html .nav.mx .tab{padding:11px 13px!important;font-size:13.5px!important}html .nav.mx .menu-btn{padding:11px 14px;font-size:14px}html .nav.mx .lk>svg{width:40px!important}html .nav.mx .lk>span{font-size:20px!important}} /* ===== The home page's header on every page (Darcy, 11 Nov: "make sure off links have same menu nav"). Values copied from public/prelaunch.html (style#brand-v3 and style#speed-logo): the "seekies." wordmark replaces the lead mark and the cloud, and sits on a frosted cream pill once the page moves. ===== */ .mx-cushion,.mx-clouds{display:none!important} html .nav.mx .lk>svg,html .nav.mx .lk>span{display:none!important} html .nav.mx .lk .wm3{display:block;height:24px;width:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.18))} @media (min-width:901px){html .nav.mx .lk{transform:translate(12px,13px)}} @media (max-width:900px){html .nav.mx .lk .wm3{height:21px}} html .nav.mx .lk{transition:background-color .25s ease,padding .25s ease,box-shadow .25s ease} html .nav.mx.lk-s .lk{background:rgba(246,241,234,.82)!important;-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);padding:10px 16px!important;border-radius:999px;box-shadow:0 6px 20px rgba(20,17,14,.12)!important} /* menu sheet (Darcy, 13 Nov 2026) */ .mnu2{position:absolute;right:clamp(12px,2.4vw,32px);top:calc(env(safe-area-inset-top,0px) + 12px);width:min(1000px,calc(100% - 2*clamp(12px,2.4vw,32px)));max-height:calc(100svh - 24px - env(safe-area-inset-top,0px));overflow:auto;overscroll-behavior:contain;background:#FBF7EF;border-radius:32px;padding:22px 24px 26px;box-shadow:0 40px 90px -30px rgba(42,23,9,.55),0 0 0 1px rgba(42,23,9,.06);opacity:0;transform:translateY(-14px) scale(.985);transform-origin:top right;transition:opacity .28s ease,transform .45s cubic-bezier(.2,.8,.2,1);font-family:"General Sans",system-ui,sans-serif;color:#2A1709} .mnu.open .mnu2{opacity:1;transform:none} .mnu-bg{background:rgba(42,23,9,.38)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .m2-top{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 14px 8px} .m2-k{font-size:12px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:#C9170F} .mnu2 .mnu-x{position:static;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;background:#EFE6D6;color:#2A1709;cursor:pointer;transition:background .2s,transform .3s} .mnu2 .mnu-x:hover{background:#E6DAC5;transform:rotate(90deg)} .mnu2 .mnu-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round} .m2-body{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:22px;align-items:start} .m2-nav{display:grid;gap:4px} .m2-row{display:grid;grid-template-columns:52px minmax(0,1fr) 22px;gap:16px;align-items:center;padding:12px 14px;border-radius:20px;color:#2A1709;text-decoration:none;transition:background .2s,box-shadow .25s,transform .25s;opacity:0;transform:translateY(10px)} .mnu.open .m2-row{opacity:1;transform:none;transition:opacity .4s calc(.06s + var(--i)*.04s),transform .5s cubic-bezier(.2,.8,.2,1) calc(.06s + var(--i)*.04s),background .2s,box-shadow .25s} .m2-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:#FFE7E1;color:#E5332A;transition:transform .35s cubic-bezier(.3,1.6,.5,1),background .2s} .m2-row:nth-child(even) .m2-ic{background:#F1E8D8;color:#2A1709} .m2-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .m2-t b{display:block;font:800 21px/1.15 "Inter Tight","General Sans",sans-serif;letter-spacing:-.02em} .m2-t small{display:block;margin-top:3px;font-size:14.5px;line-height:1.35;color:#6A5D52} .m2-ar{width:20px;height:20px;fill:none;stroke:#2A1709;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.35;transition:transform .25s,opacity .2s} .m2-row:hover,.m2-row:focus-visible{background:#fff;box-shadow:0 10px 26px -16px rgba(42,23,9,.4);outline:none} .m2-row:hover .m2-ic,.m2-row:focus-visible .m2-ic{transform:rotate(-8deg) scale(1.08)} .m2-row:hover .m2-ar,.m2-row:focus-visible .m2-ar{opacity:1;transform:translateX(4px)} .m2-side{display:flex;flex-direction:column;align-items:stretch;background:#FF4A3D;border-radius:26px;padding:34px 22px 22px;color:#fff;position:relative;overflow:hidden} .m2-side:before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-70px;top:-80px;background:rgba(255,255,255,.12)} .m2-levi{position:relative;margin:4px auto 0;width:min(210px,70%);background:#fff;padding:9px 9px 12px;border-radius:8px;box-shadow:0 22px 40px -18px rgba(42,23,9,.6);transform:rotate(-5deg) translateY(16px);opacity:0;transition:transform .7s cubic-bezier(.3,1.5,.5,1) .12s,opacity .35s .12s} .mnu.open .m2-levi{transform:rotate(-5deg);opacity:1} .m2-levi:hover{transform:rotate(3deg) scale(1.03)!important;transition:transform .45s cubic-bezier(.3,1.6,.5,1)!important} .m2-levi img{display:block;width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;border-radius:4px} .m2-levi figcaption{margin-top:8px;font:600 13px/1.25 "General Sans",sans-serif;color:#4D4842;text-align:center} .m2-tag{position:relative;margin:18px 0 0;text-align:center;font:800 19px/1.2 "Inter Tight",sans-serif;letter-spacing:-.01em} .m2-cta{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;height:56px;border-radius:999px;background:#2A1709;color:#fff;font:700 17px/1 "General Sans",sans-serif;text-decoration:none;transition:transform .2s,box-shadow .2s} .m2-cta i{width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .25s} .m2-cta:hover{transform:translateY(-2px);box-shadow:0 14px 26px -14px rgba(42,23,9,.8)} .m2-cta:hover i{transform:translateX(3px)} .m2-dl{position:relative;margin:16px 0 8px;text-align:center;font-size:13px;font-weight:500;color:rgba(255,255,255,.88)} .m2-stores{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px} .m2-store{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:14px;background:#fff;color:#2A1709;text-decoration:none;font:700 14px/1.05 "General Sans",sans-serif;transition:transform .2s} .m2-store:hover{transform:translateY(-2px)} .m2-store small{display:block;font-size:10px;font-weight:500;color:#6A5D52} @media (max-width:760px){ .mnu2{right:8px;left:8px;width:auto;top:calc(env(safe-area-inset-top,0px) + 8px);max-height:calc(100svh - 16px - env(safe-area-inset-top,0px));border-radius:28px;padding:16px 14px 18px} .m2-body{grid-template-columns:1fr;gap:14px} .m2-row{grid-template-columns:46px minmax(0,1fr) 18px;gap:13px;padding:10px 10px} .m2-ic{width:46px;height:46px;border-radius:14px} .m2-ic svg{width:23px;height:23px} .m2-t b{font-size:18.5px} .m2-t small{font-size:13.5px} .m2-side{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:16px;align-items:center;padding:22px 16px 16px} .m2-levi{width:96px;margin:4px 0 0 4px;padding:6px 6px 8px} .m2-levi figcaption{display:none} .m2-tag{margin:0;text-align:left;font-size:17px;align-self:center} .m2-tag:after{content:"Levi, head of quality control";display:block;margin-top:4px;font:500 13px/1.3 "General Sans",sans-serif;color:rgba(255,255,255,.9)} .m2-cta,.m2-dl,.m2-stores{grid-column:1/-1} .m2-cta{margin-top:16px} } /* the side panel is a