/* Storefront redesign (2026-11, approved design from the Claude Design
   handoff). Loaded ONLY by templates/public/_layout.html, never by the staff
   portal. Every rule is scoped to a storefront wrapper (.sf-util, .sf-hdr,
   .sf-band, .sf-ft, .sf) so nothing leaks into other pages.
   Rules marked "design" are copied verbatim from the reference pages'
   <style> blocks; the markup carries the rest as inline styles. */

/* ---- Poppins, self-hosted (OFL, latin subset) ---- */
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/poppins/poppins-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins/poppins-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/poppins/poppins-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins/poppins-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins/poppins-latin-700-normal.woff2) format('woff2')}

.sf-util,.sf-hdr,.sf-band,.sf-ft{font-family:Poppins,sans-serif;line-height:normal}  /* design uses browser-default line-height, Tailwind sets 1.5 */
.sf-util a,.sf-hdr a,.sf-band a,.sf-ft a{color:inherit;text-decoration:none}

/* ================= header / menus / footer (design) ================= */
@keyframes menuIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.sf-hdr a:hover,.sf-ft a:hover,.sf-band .crumbs a:hover{color:#93D500}
.sf-ft button:hover{color:#93D500 !important}
.sf-hdr .navbtn:hover{color:#93D500 !important}
.sf-hdr .cta{transition:background .2s,transform .2s}
.sf-hdr .cta:hover{background:#A6E21A !important;transform:translateY(-1px)}
.sf-hdr .tile img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.sf-hdr .tile:hover img{transform:scale(1.05)}
.sf-hdr .burger{display:none}
.sf-util .u-short{display:none}
.sf-hdr .mob-panel{display:none}
.sf-hdr .mm-cols{display:block !important;columns:3 170px;column-gap:28px}
.sf-hdr .mm-cols > div{break-inside:avoid;page-break-inside:avoid;padding-bottom:24px}
.sf-hdr .mm-feat{align-self:flex-start}
.sf-ft .ft-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important}

/* state switching (design: driven by aria-expanded / [hidden]) */
.sf-hdr [hidden]{display:none !important}
.sf-hdr .navbtn[aria-expanded="true"]{color:#93D500 !important}
.sf-hdr .navbtn[aria-expanded="true"] svg{transform:rotate(180deg) !important}
.sf-hdr .burger[aria-expanded="true"]{background:#93D500 !important;border-color:#93D500 !important;color:#142F42 !important}
.sf-hdr .burger .ico-close{display:none}
.sf-hdr .burger[aria-expanded="true"] .ico-close{display:block}
.sf-hdr .burger[aria-expanded="true"] .ico-open{display:none}
.sf-hdr .acc-btn[aria-expanded="true"]{color:#93D500 !important}
.sf-hdr .acc-btn[aria-expanded="true"] svg{transform:rotate(180deg) !important}
.sf-hdr .hdr-search[aria-expanded="true"]{border-color:#93D500 !important;color:#93D500 !important}

/* site-specific additions (not in the static design) */
.sf-hdr .sf-cart-n.hidden{display:flex !important}  /* page scripts toggle .hidden at 0; the design always shows the count */
/* account pill in the strip ("Option 4"). 26px tall with negative margins so
   the strip keeps the design's exact height (13px text -> 19.5px line box). */
.sf-util .u-acct{display:inline-flex;align-items:center;gap:7px;height:26px;margin:-3.25px 0;box-sizing:border-box;padding:0 13px 0 10px;
  border:1px solid rgba(255,255,255,0.28);border-radius:999px;color:#FFFFFF;font-weight:500;white-space:nowrap;min-width:0;transition:border-color .2s}
.sf-util .u-acct:hover{border-color:#93D500;color:#FFFFFF}
.sf-util .u-acct.is-in{padding:0 12px 0 3px}
.sf-util .u-av{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:#93D500;color:#142F42;font-weight:600;font-size:9px;letter-spacing:0;display:flex;align-items:center;justify-content:center}
.sf-util .u-acct-long{max-width:200px;min-width:0;overflow:hidden;text-overflow:ellipsis}
/* the strip never wraps (a wrap would push the whole header down): a long
   company name shrinks with an ellipsis instead. Signed out it always fits,
   so this matches the design exactly. */
.sf-util .u-row{flex-wrap:nowrap !important}
.sf-util .u-right{flex-wrap:nowrap !important;min-width:0}
.sf-util .u-acct{flex:0 1 auto}
.sf-util .u-acct-short{display:none}
.sf-hdr input[type=search]::placeholder{color:#757575}  /* browser default, as in the design (Tailwind sets #9ca3af) */
.sf-hdr input[type=search]::-webkit-search-cancel-button{filter:invert(1)}

@media (max-width:1180px){.sf-hdr .cart-label{display:none}
  .sf-hdr .mm-feat{display:none !important}.sf-hdr .mm-cols{columns:4 170px}}
@media (max-width:1100px){.sf-util .u-long{display:none}.sf-util .u-short{display:inline}.sf-util .u-row{flex-wrap:nowrap !important}.sf-util .u-right{flex-wrap:nowrap !important;white-space:nowrap}
  .sf-ft .ft-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:44px 32px !important}}
@media (max-width:1024px){.sf-hdr .hdr-nav{display:none !important}.sf-hdr .burger{display:flex !important}
  .sf-hdr .mm{display:none !important}.sf-hdr .mob-panel{display:flex}}
/* signed-in strip must never overflow: custom-products link moves to the burger/footer
   only below 1100px, and the pill shows "Account" instead of the company below 900px */
@media (max-width:1100px){.sf-util .u-cp{display:none}}
@media (max-width:900px){.sf-util .u-acct-long{display:none}.sf-util .u-acct-short{display:inline}}
@media (max-width:760px){.sf-util .u-site{display:none}}
@media (max-width:640px){
  .sf-util .gx,.sf-hdr .gx,.sf-band .gx,.sf-ft .gx,.sf .gx{padding-left:20px !important;padding-right:20px !important}
  .sf-util .u-row{padding-top:8px !important;padding-bottom:8px !important;font-size:12px}
  .sf-util .u-right{gap:16px !important}
  .sf-util .u-acct{height:24px;margin:-3px 0}  /* 12px text -> 18px line box */
  /* phones: signed-in shows just the initials circle */
  .sf-util .u-acct.is-in{padding:0 1px;gap:0}
  .sf-util .u-acct.is-in .u-acct-long,.sf-util .u-acct.is-in .u-acct-short{display:none}
  .sf-hdr .hdr-wrap{padding:12px 20px 0 !important}
  .sf-hdr .hdr{padding:8px 8px 8px 14px !important;gap:8px !important;border-radius:14px !important}
  .sf-hdr .hdr-logo{height:32px !important}
  .sf-hdr .hdr-search{display:none !important}
  .sf-hdr .hdr-btn{width:42px !important;height:42px !important}
  .sf-hdr .hdr-cart{height:42px !important;padding:0 10px 0 12px !important;gap:8px !important}
  .sf-hdr .mob-panel{top:76px !important;right:20px !important;width:calc(100% - 40px) !important;max-height:calc(100vh - 96px) !important}
  .sf-hdr .sf-search{top:76px !important;right:20px !important;width:calc(100% - 40px) !important}
  .sf-ft .ft-grid{gap:36px 20px !important;padding-top:52px !important;padding-bottom:36px !important}
  .sf-ft .ft-grid > :first-child,.sf-ft .ft-grid > :last-child{grid-column:1 / -1}
  .sf-ft .ft-logo{height:52px !important}
  .sf-ft .ft-x{padding-bottom:32px !important}
  .sf-ft .ft-x a{padding:18px 20px !important}
  .sf-ft .ft-x-t{font-size:18px !important}
  .sf-ft .ft-bot{flex-direction:column;align-items:flex-start !important;gap:10px !important;font-size:13px !important;padding-top:18px !important;padding-bottom:22px !important}
  .sf-ft .ft-links{gap:20px !important;flex-wrap:wrap}
}

/* ================= navy band + breadcrumb (inner pages) ================= */
/* The existing breadcrumb markup (templates keep their own crumbs + JSON-LD)
   restyled to the design: 14px/300 white .75, current page white 500. */
.sf-band .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:14px;font-weight:300;color:rgba(255,255,255,0.75);padding:0 !important;margin:0 !important;max-width:none !important}
.sf-band .crumbs a{color:rgba(255,255,255,0.75);font-weight:300}
.sf-band .crumbs .sep{color:rgba(255,255,255,0.35);padding:0}
.sf-band .crumbs .active{color:#FFFFFF;font-weight:500}
@media (max-width:640px){
  .sf-band .band{padding-top:100px !important;padding-bottom:18px !important}
  .sf-band .crumbs{font-size:13px !important;gap:6px 8px !important}
}

@media (prefers-reduced-motion: reduce){
  .sf-util *,.sf-hdr *,.sf-band *,.sf-ft *{animation:none !important;transition:none !important}
}

/* ================= inner pages: type + colour (design section 7) =================
   A visual restyle only: fonts, colours, weights, button styling. No layout.
   The palette swap for Tailwind utilities is generated at the end of this
   file (scripts/gen_storefront_palette.py). */
.sf{
  --tsp-green:#93D500; --tsp-green-hover:#93D500; --tsp-green-dark:#4D7A00; --tsp-green-tint:#F4F9E7;
  --tsp-text:#2E3A43; --tsp-muted:#545559; --tsp-subtle:#6B6C70;
  --tsp-border:#E3E7DF; --tsp-border-strong:#CDD3C9;
  background:#F6F7F4; color:#2E3A43;
  -webkit-font-smoothing:auto; -moz-osx-font-smoothing:auto;  /* design renders with default smoothing; base.html's body is `antialiased` */
}
/* Poppins only (monospace order numbers / codes keep their face) */
.sf,.sf *:not(.font-mono):not(code):not(kbd):not(pre):not(samp){font-family:Poppins,sans-serif}

/* headings: 900 "black" -> Poppins 500/600 */
.sf h1,.sf h2,.sf h3,.sf h4,.sf h5,.sf h6{font-weight:600}
.sf .font-black,.sf .font-extrabold,.sf strong,.sf b{font-weight:600}
.sf .tsp-field-label{font-weight:600}
.sf .page-title{font-size:40px;font-weight:600;letter-spacing:-1.4px}
.sf .section-title{font-size:23px;font-weight:600;letter-spacing:-0.6px}
.sf .card-tsp .section-title{font-size:23px}
.sf h4.text-sm.leading-tight{font-size:15px;letter-spacing:normal}
.sf .section-title[style*="font-size:24px"]{font-size:27px !important;letter-spacing:-0.8px}
.sf .card-tsp > .text-lg.font-extrabold{font-size:19px;letter-spacing:-0.4px}
@media (max-width:640px){.sf .page-title{font-size:30px;letter-spacing:-1px}}

/* small text: the design sets these 1px larger in Poppins */
.sf main .text-xs{font-size:13px}
.sf main .text-\[10px\]{font-size:11px}
.sf .tsp-field-label .text-\[11px\]{font-size:12px;font-weight:400}

/* lime buttons: ink text on lime (white on lime fails contrast), sentence case */
.sf .btn-tsp{background:#93D500;border-color:#93D500;color:#142F42;font-weight:600;text-transform:none;letter-spacing:normal}
.sf .btn-tsp:hover{background:#A6E21A;border-color:#A6E21A;color:#142F42}
.sf .btn-tsp:disabled,.sf .btn-tsp[disabled]{color:#142F42}
.sf .bg-tsp-green.text-white{color:#142F42}
/* product page "Add to cart": 17px with the cart icon, as in the design */
.sf .sf-add{font-size:17px;gap:10px}
.sf .sf-add::before{content:"";width:20px;height:20px;flex:0 0 20px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h2.5l2.2 11h10.6l2-8H7' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Ccircle cx='9.5' cy='19.5' r='1.5'/%3E%3Ccircle cx='17' cy='19.5' r='1.5'/%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'%3E%3Cpath d='M3 4h2.5l2.2 11h10.6l2-8H7' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Ccircle cx='9.5' cy='19.5' r='1.5'/%3E%3Ccircle cx='17' cy='19.5' r='1.5'/%3E%3C/svg%3E") center/contain no-repeat}
/* hard-coded colours in page-level <style> blocks */
body:has(> .sf){background:#F6F7F4 !important}
.sf .tsp-std-or{color:#6B6C70}
.sf .tsp-std-more{color:#4D7A00}
.sf .tsp-std-chip:hover{border-color:#93D500}
.sf .tsp-spec-box{background:#F6F7F4}
/* plain text links with a lime underline (no arrow glyphs) */
.sf .sf-ul{color:#4D7A00;font-weight:600;border-bottom:2px solid #93D500;padding-bottom:2px}
.sf .sf-ul:hover{color:#2E3A43}

/* ================= home page (design section 6) =================
   Generated from the design reference by a one-off script; keyframes
   are prefixed sf- so they never clash with Tailwind's (e.g. pulse). */
.sf.sf-home{background:#FFFFFF}
.sf-home main a:hover{color:#93D500}
/* the site's base h1-h6 colour/spacing and Tailwind's 1.5 line-height are not in the design */
.sf-home main{line-height:normal}
.sf-home main h1,.sf-home main h2,.sf-home main h3{color:inherit}
/* the design's proof card sizes its flex-basis/max-width as content-box (Tailwind defaults to border-box) */
.sf-home .pv{box-sizing:content-box}
@keyframes sf-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes sf-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes sf-squeegee{0%{left:0;opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
@keyframes sf-floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes sf-tagdrop{0%{opacity:0;transform:translateY(-16px) rotate(-6deg)}60%{opacity:1;transform:translateY(3px) rotate(2deg)}100%{opacity:1;transform:none}}
@keyframes sf-pulse{0%{box-shadow:0 0 0 0 rgba(147,213,0,.6)}70%{box-shadow:0 0 0 10px rgba(147,213,0,0)}100%{box-shadow:0 0 0 0 rgba(147,213,0,0)}}
@keyframes sf-up{0%{opacity:0;transform:translateY(14px) scale(.8)}70%{opacity:1;transform:translateY(-3px) scale(1.05)}100%{opacity:1;transform:none}}
@keyframes sf-txt{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@keyframes sf-sw{0%{opacity:0}3%,30%{opacity:1}33.33%,100%{opacity:0}}
@keyframes sf-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sf-stars{from{width:0}to{width:94%}}
@keyframes sf-flow{0%,20%{width:20px;opacity:1}25%,45%{width:calc(25% + 28px)}50%,70%{width:calc(50% + 36px)}75%,92%{width:calc(75% + 44px);opacity:1}100%{width:100%;opacity:0}}
@keyframes sf-token{0%{left:20px;opacity:0}4%,20%{left:20px;opacity:1}25%,45%{left:calc(25% + 28px)}50%,70%{left:calc(50% + 36px)}75%,92%{left:calc(75% + 44px);opacity:1}100%{left:calc(75% + 44px);opacity:0}}
@keyframes sf-stepGlow{0%,22%{color:#93D500;transform:translateY(-4px)}28%,94%{color:rgba(147,213,0,.28);transform:none}100%{color:#93D500;transform:translateY(-4px)}}
@keyframes sf-stepText{0%,22%{opacity:1}28%,94%{opacity:.55}100%{opacity:1}}
@keyframes sf-glow{0%,22%{color:#93D500}26%,96%{color:rgba(147,213,0,.28)}100%{color:#93D500}}
@keyframes sf-dim{0%,22%{opacity:1}26%,96%{opacity:.45}100%{opacity:1}}
@keyframes sf-board{0%{opacity:0;transform:scale(.96)}6%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes sf-dims{0%,4%{opacity:0}10%,96%{opacity:1}100%{opacity:0}}
@keyframes sf-art{0%,24%{opacity:0;transform:translateY(12px)}30%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes sf-proof{0%,49%{opacity:0}54%,73%{opacity:1}77%,100%{opacity:0}}
@keyframes sf-stackA{0%,74%{opacity:0;transform:translate(0,0)}80%,96%{opacity:1;transform:translate(12px,12px)}100%{opacity:0}}
@keyframes sf-stackB{0%,76%{opacity:0;transform:translate(0,0)}82%,96%{opacity:1;transform:translate(24px,24px)}100%{opacity:0}}
@keyframes sf-badge{0%,76%{opacity:0;transform:scale(.4)}81%{opacity:1;transform:scale(1.15)}84%,96%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes sf-c1{0%,23%{opacity:1}25%,98%{opacity:0}100%{opacity:1}}
@keyframes sf-c2{0%,24%{opacity:0}26%,48%{opacity:1}50%,100%{opacity:0}}
@keyframes sf-c3{0%,49%{opacity:0}51%,73%{opacity:1}75%,100%{opacity:0}}
@keyframes sf-c4{0%,74%{opacity:0}76%,97%{opacity:1}100%{opacity:0}}
.sf-home .vs-short{display:none}
@media (max-width:1200px){.sf-home .vs-long{display:none}.sf-home .vs-short{display:inline}}
@media (max-width:720px){.sf-home .vs-hide-sm{display:none !important}.sf-home .vs{justify-content:space-around !important}.sf-home .vs-ic{width:28px !important;height:28px !important}}
.sf-home .marq:hover .track{animation-play-state:paused}
.sf-home .tile img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.sf-home .tile:hover img{transform:scale(1.05)}
.sf-home .tile .go{transition:transform .3s}
.sf-home .tile:hover .go{transform:translateX(5px)}
.sf-home .lift{transition:transform .25s,box-shadow .25s}
.sf-home .lift:hover{transform:translateY(-5px);box-shadow:0 18px 30px rgba(20,47,66,.12)}
.sf-home .lift .peek{opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
.sf-home .lift:hover .peek{opacity:1;transform:none}
.sf-home .btn-lime{transition:background .2s,transform .2s}
.sf-home .btn-lime:hover{background:#A6E21A !important;color:#142F42 !important;transform:translateY(-1px)}
@supports (animation-timeline: view()){.sf-home .scrollfill{animation-timeline:view() !important;animation-range:entry 30% cover 55% !important}}
.sf-home .still *,.sf-home .still *::before,.sf-home .still *::after{animation:none !important}
.sf-home .cat-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
.sf-home .bs-grid{grid-template-columns:repeat(6,minmax(0,1fr)) !important}
@media (max-width:1280px){.sf-home .h-p{max-width:430px !important}}
@media (max-width:1180px){.sf-home .oc{gap:40px 32px !important;padding:48px 40px !important}}
@media (max-width:1100px){
.sf-home .h-wrap{flex-wrap:nowrap !important;gap:8px !important;padding:132px 32px 52px !important}
.sf-home .h-text{flex:1 1 0 !important;min-width:0 !important}
.sf-home .h-h1{font-size:clamp(46px,6.4vw,70px) !important;letter-spacing:-2.8px !important}
.sf-home .h-h1 .sg{letter-spacing:-2.4px !important}
.sf-home .h-p{font-size:16px !important;max-width:400px !important}
.sf-home .h-img{flex:1.5 1 0 !important;margin:0 -40px 0 -16px !important}
.sf-home .h-tag-mid{display:none !important}
.sf-home .h-tag-c{left:auto !important;right:7% !important}
.sf-home .cat-head{margin-bottom:28px !important}
.sf-home .cat-grid{gap:16px !important}
.sf-home .cat-img{height:170px !important}
.sf-home .cat-txt{padding:16px 18px 18px !important}
.sf-home .cat-name{font-size:18px !important;letter-spacing:-0.4px !important}
.sf-home .cat-sub{font-size:13px !important}
.sf-home .bs-grid{gap:14px !important}
.sf-home .bs-txt{padding:12px 13px 14px !important}
.sf-home .bs-name{font-size:14px !important}
.sf-home .bs-price{font-size:13px !important}
.sf-home .oc{flex-wrap:nowrap !important;align-items:center !important;gap:32px !important;padding:40px 36px !important}
.sf-home .oc-text{flex:1 1 0 !important}
.sf-home .oc-h2{font-size:34px !important;letter-spacing:-1.4px !important}
.sf-home .oc-steps{gap:16px !important;margin-top:26px !important}
.sf-home .pv{flex:1 1 0 !important;padding:18px 20px !important;gap:10px !important}
.sf-home .pv-stage{zoom:.8}
.sf-home .rv{padding:32px 32px 32px 40px !important;flex-wrap:nowrap !important;gap:32px !important}
.sf-home .rv-head{flex:0 0 240px !important}
.sf-home .rv-h{font-size:32px !important;letter-spacing:-1.4px !important}
.sf-home .rv-grid{flex:1 1 0 !important}
.sf-home .et{flex-wrap:nowrap !important;gap:28px !important;padding:44px 40px !important}
.sf-home .et-text{flex:1 1 0 !important}
.sf-home .et-imgw{flex:0 0 40% !important}
.sf-home .team-img{margin-top:-96px !important;margin-bottom:-20px !important}
}
@media (max-width:960px){.sf-home .bs-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:18px !important}.sf-home .bs-txt{padding:15px 16px 17px !important}.sf-home .bs-name{font-size:15px !important}.sf-home .bs-price{font-size:14px !important}}
@media (max-width:900px){
.sf-home .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.sf-home .cat-img{height:210px !important}
.sf-home .oc{flex-wrap:wrap !important;padding:44px 40px !important}
.sf-home .oc-text,.sf-home .pv{flex:1 1 100% !important}
.sf-home .oc-h2{font-size:38px !important}
.sf-home .pv{max-width:600px;margin:0 auto;padding:22px 24px !important;gap:14px !important}
.sf-home .pv-stage{zoom:1}
.sf-home .rv{flex-wrap:wrap !important;padding:36px 36px 36px 40px !important}
.sf-home .rv-head{flex:1 1 100% !important}
.sf-home .rv-h{font-size:38px !important}
.sf-home .oc-steps{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 32px !important;margin-top:32px !important}
}
@media (max-width:640px){
.sf-home .h-wrap{flex-wrap:wrap !important;gap:20px !important;padding:104px 20px 36px !important}
.sf-home .h-text{flex:1 1 100% !important}
.sf-home .h-h1{font-size:clamp(42px,13vw,54px) !important;letter-spacing:-2.4px !important;margin-top:12px !important}
.sf-home .h-h1 .sg{letter-spacing:-2.2px !important}
.sf-home .h-eyebrow{font-size:15px !important}
.sf-home .h-p{font-size:16px !important;margin-top:18px !important}
.sf-home .h-cta{margin-top:24px !important}
.sf-home .h-img{flex:1 1 100% !important;margin:0 -20px !important}
.sf-home .h-tag-hide{display:none !important}
.sf-home .h-tag-c{right:6% !important;top:80% !important}
.sf-home .sec-h2{font-size:36px !important;letter-spacing:-1.6px !important}
.sf-home .cat-sec{padding-top:56px !important;padding-bottom:32px !important}
.sf-home .cat-head{margin-bottom:22px !important}
.sf-home .cat-grid{gap:12px !important}
.sf-home .cat-img{height:124px !important}
.sf-home .cat-txt{padding:12px 14px 14px !important}
.sf-home .cat-name{font-size:15px !important;letter-spacing:-0.3px !important;line-height:1.3}
.sf-home .cat-sub{display:none !important}
.sf-home .oc-sec{padding-top:24px !important;padding-bottom:24px !important}
.sf-home .oc{padding:32px 20px 20px !important;border-radius:18px !important;gap:28px !important}
.sf-home .oc-h2{font-size:30px !important;letter-spacing:-1.2px !important}
.sf-home .oc-steps{grid-template-columns:1fr;gap:18px !important;margin-top:26px !important}
.sf-home .oc-n{flex-basis:40px !important;font-size:28px !important}
.sf-home .pv{padding:16px !important;border-radius:14px !important}
.sf-home .pv-badge{width:172px !important}
.sf-home .pv-badge > span{font-size:12px !important;padding:5px 11px !important}
.sf-home .pv-stage{zoom:.68}
.sf-home .bs-sec{padding-top:40px !important;padding-bottom:56px !important}
.sf-home .bs-head{margin-bottom:22px !important}
.sf-home .bs-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important}
.sf-home .bs-txt{padding:12px 12px 14px !important}
.sf-home .bs-name{font-size:14px !important}
.sf-home .bs-price{font-size:13px !important}
.sf-home .rv-sec{padding-bottom:36px !important}
.sf-home .rv{padding:30px 20px 20px !important;border-radius:18px !important;gap:22px !important}
.sf-home .rv-h{font-size:30px !important;letter-spacing:-1.2px !important}
.sf-home .et-sec{padding-top:24px !important;padding-bottom:64px !important}
.sf-home .et{flex-wrap:wrap !important;padding:34px 20px 0 !important;border-radius:18px !important;gap:8px !important}
.sf-home .et-text{flex:1 1 100% !important}
.sf-home .et-h2{font-size:34px !important;letter-spacing:-1.4px !important}
.sf-home .et-btns a{flex:1 1 100%;text-align:center}
.sf-home .et-imgw{flex:1 1 100% !important}
.sf-home .team-img{max-width:320px !important;margin:8px auto -6px !important}
.sf-home .ft-x{padding-bottom:32px !important}
.sf-home .ft-x a{padding:18px 20px !important}
.sf-home .ft-x-t{font-size:18px !important}
}

@media (prefers-reduced-motion: reduce){.sf-home *,.sf-home *::before,.sf-home *::after{animation:none !important;transition:none !important}}
/* <<< home page <<< */

/* >>> generated palette (scripts/gen_storefront_palette.py) >>> */
.sf .prose-slate{--tw-prose-body:#334155;--tw-prose-headings:#0f172a;--tw-prose-lead:#475569;--tw-prose-links:#0f172a;--tw-prose-bold:#0f172a;--tw-prose-counters:#64748b;--tw-prose-bullets:#cbd5e1;--tw-prose-hr:#e2e8f0;--tw-prose-quotes:#0f172a;--tw-prose-quote-borders:#e2e8f0;--tw-prose-captions:#64748b;--tw-prose-kbd:#0f172a;--tw-prose-kbd-shadows:15 23 42;--tw-prose-code:#0f172a;--tw-prose-pre-code:#e2e8f0;--tw-prose-pre-bg:#1e293b;--tw-prose-th-borders:#cbd5e1;--tw-prose-td-borders:#e2e8f0;--tw-prose-invert-body:#cbd5e1;--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:#6b6c70;--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:#6b6c70;--tw-prose-invert-bullets:#475569;--tw-prose-invert-hr:#334155;--tw-prose-invert-quotes:#f1f5f9;--tw-prose-invert-quote-borders:#334155;--tw-prose-invert-captions:#6b6c70;--tw-prose-invert-kbd:#fff;--tw-prose-invert-kbd-shadows:255 255 255;--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:#cbd5e1;--tw-prose-invert-pre-bg:rgba(0,0,0,.5);--tw-prose-invert-th-borders:#475569;--tw-prose-invert-td-borders:#334155}
.sf .divide-tsp-border>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(227 231 223/var(--tw-divide-opacity,1))}
.sf .\!border-tsp-border{--tw-border-opacity:1!important;border-color:rgb(227 231 223/var(--tw-border-opacity,1))!important}
.sf .\!border-tsp-green{--tw-border-opacity:1!important;border-color:rgb(147 213 0/var(--tw-border-opacity,1))!important}
.sf .border-slate-200{--tw-border-opacity:1;border-color:rgb(227 231 223/var(--tw-border-opacity,1))}
.sf .border-slate-300{--tw-border-opacity:1;border-color:rgb(205 211 201/var(--tw-border-opacity,1))}
.sf .border-tsp-border{--tw-border-opacity:1;border-color:rgb(227 231 223/var(--tw-border-opacity,1))}
.sf .border-tsp-border-strong{--tw-border-opacity:1;border-color:rgb(205 211 201/var(--tw-border-opacity,1))}
.sf .border-tsp-green{--tw-border-opacity:1;border-color:rgb(147 213 0/var(--tw-border-opacity,1))}
.sf .\!border-l-tsp-green{--tw-border-opacity:1!important;border-left-color:rgb(147 213 0/var(--tw-border-opacity,1))!important}
.sf .border-l-tsp-green{--tw-border-opacity:1;border-left-color:rgb(147 213 0/var(--tw-border-opacity,1))}
.sf .bg-slate-200{--tw-bg-opacity:1;background-color:rgb(227 231 223/var(--tw-bg-opacity,1))}
.sf .bg-slate-300{--tw-bg-opacity:1;background-color:rgb(205 211 201/var(--tw-bg-opacity,1))}
.sf .bg-slate-400{--tw-bg-opacity:1;background-color:rgb(107 108 112/var(--tw-bg-opacity,1))}
.sf .bg-slate-50{--tw-bg-opacity:1;background-color:rgb(246 247 244/var(--tw-bg-opacity,1))}
.sf .bg-tsp-border{--tw-bg-opacity:1;background-color:rgb(227 231 223/var(--tw-bg-opacity,1))}
.sf .bg-tsp-footer-bg{--tw-bg-opacity:1;background-color:rgb(46 58 67/var(--tw-bg-opacity,1))}
.sf .bg-tsp-green{--tw-bg-opacity:1;background-color:rgb(147 213 0/var(--tw-bg-opacity,1))}
.sf .bg-tsp-green-tint{--tw-bg-opacity:1;background-color:rgb(244 249 231/var(--tw-bg-opacity,1))}
.sf .bg-tsp-text{--tw-bg-opacity:1;background-color:rgb(46 58 67/var(--tw-bg-opacity,1))}
.sf .from-tsp-green-tint{--tw-gradient-from:#f4f9e7 var(--tw-gradient-from-position);--tw-gradient-to:hsla(83,72%,93%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.sf .text-slate-300{--tw-text-opacity:1;color:rgb(205 211 201/var(--tw-text-opacity,1))}
.sf .text-slate-500{--tw-text-opacity:1;color:rgb(84 85 89/var(--tw-text-opacity,1))}
.sf .text-tsp-green{--tw-text-opacity:1;color:rgb(77 122 0/var(--tw-text-opacity,1))}
.sf .text-tsp-green-dark{--tw-text-opacity:1;color:rgb(77 122 0/var(--tw-text-opacity,1))}
.sf .text-tsp-muted{--tw-text-opacity:1;color:rgb(84 85 89/var(--tw-text-opacity,1))}
.sf .text-tsp-subtle{--tw-text-opacity:1;color:rgb(107 108 112/var(--tw-text-opacity,1))}
.sf .text-tsp-text{--tw-text-opacity:1;color:rgb(46 58 67/var(--tw-text-opacity,1))}
.sf .accent-tsp-green{accent-color:#93d500}
.sf .before\:bg-tsp-border-strong:before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(205 211 201/var(--tw-bg-opacity,1))}
.sf .after\:bg-tsp-border-strong:after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(205 211 201/var(--tw-bg-opacity,1))}
.sf .after\:bg-tsp-green:after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(147 213 0/var(--tw-bg-opacity,1))}
.sf .hover\:\!border-tsp-green-dark:hover{--tw-border-opacity:1!important;border-color:rgb(77 122 0/var(--tw-border-opacity,1))!important}
.sf .hover\:border-tsp-green:hover{--tw-border-opacity:1;border-color:rgb(147 213 0/var(--tw-border-opacity,1))}
.sf .hover\:border-tsp-green-dark:hover{--tw-border-opacity:1;border-color:rgb(77 122 0/var(--tw-border-opacity,1))}
.sf .hover\:border-tsp-text:hover{--tw-border-opacity:1;border-color:rgb(46 58 67/var(--tw-border-opacity,1))}
.sf .hover\:bg-slate-50:hover{--tw-bg-opacity:1;background-color:rgb(246 247 244/var(--tw-bg-opacity,1))}
.sf .hover\:bg-tsp-green-dark:hover{--tw-bg-opacity:1;background-color:rgb(77 122 0/var(--tw-bg-opacity,1))}
.sf .hover\:bg-tsp-green-hover:hover{--tw-bg-opacity:1;background-color:rgb(166 226 26/var(--tw-bg-opacity,1))}
.sf .hover\:bg-tsp-green-tint:hover{--tw-bg-opacity:1;background-color:rgb(244 249 231/var(--tw-bg-opacity,1))}
.sf .hover\:text-tsp-green:hover{--tw-text-opacity:1;color:rgb(77 122 0/var(--tw-text-opacity,1))}
.sf .hover\:text-tsp-green-dark:hover{--tw-text-opacity:1;color:rgb(77 122 0/var(--tw-text-opacity,1))}
.sf .hover\:text-tsp-text:hover{--tw-text-opacity:1;color:rgb(46 58 67/var(--tw-text-opacity,1))}
.sf .focus\:border-tsp-green:focus{--tw-border-opacity:1;border-color:rgb(147 213 0/var(--tw-border-opacity,1))}
.sf .focus\:bg-tsp-green:focus{--tw-bg-opacity:1;background-color:rgb(147 213 0/var(--tw-bg-opacity,1))}
.sf .group:hover .group-hover\:bg-tsp-green-hover{--tw-bg-opacity:1;background-color:rgb(166 226 26/var(--tw-bg-opacity,1))}
.sf .group:hover .group-hover\:text-tsp-green-dark{--tw-text-opacity:1;color:rgb(77 122 0/var(--tw-text-opacity,1))}
.sf .prose-headings\:text-tsp-text :is(:where(h1,.sf h2,.sf h3,.sf h4,.sf h5,.sf h6,.sf th):not(:where([class~=not-prose],.sf [class~=not-prose] *))){--tw-text-opacity:1;color:rgb(46 58 67/var(--tw-text-opacity,1))}
.sf .prose-a\:text-tsp-green-dark :is(:where(a):not(:where([class~=not-prose],.sf [class~=not-prose] *))){--tw-text-opacity:1;color:rgb(77 122 0/var(--tw-text-opacity,1))}
.sf .hover\:prose-a\:text-tsp-green :is(:where(a):not(:where([class~=not-prose],.sf [class~=not-prose] *))):hover{--tw-text-opacity:1;color:rgb(77 122 0/var(--tw-text-opacity,1))}
.sf .prose-strong\:text-tsp-text :is(:where(strong):not(:where([class~=not-prose],.sf [class~=not-prose] *))){--tw-text-opacity:1;color:rgb(46 58 67/var(--tw-text-opacity,1))}
/* <<< generated palette <<< */