/** Shopify CDN: Minification failed

Line 340:30 Unexpected "}"

**/
/* ==== base the preview inherited from space-creation.css ================
   pdp.css was written on top of shopify/assets/space-creation.css, which is
   not loaded on the live theme. Everything it assumed from that file and was
   silently missing is here: the container, the arrow, and the tokens pdp.css
   references. Without .sc-container the product page had no max width and no
   side padding, so it ran the full width of the browser.

   --sc-act was the terracotta. That colour was rejected as off brand, so the
   accent maps to the brand brown and its hover to ink. */
:root{
  --sc-container:1320px;
  --sc-gutter:clamp(20px,4vw,32px);
  --sc-on-dark-dim:#B9AEA4;
  --sc-ease:cubic-bezier(.22,.61,.36,1);
  --sc-act:#6B5B4E;
  --sc-act-dark:#352D26;
  --sc-act-soft:rgba(107,91,78,.07);
}
.sc-container{
  max-width:var(--sc-container);
  margin-inline:auto;
  padding-inline:var(--sc-gutter);
  width:100%;
}
.sc-btn__arrow{ font-size:12px; line-height:1; }

/* ===================================================== PDP v3
   Structure modelled on Branch (gallery tabs, feature icon grid,
   bundle module, closer-look row) and Gruns (thumb rail, image
   callouts, filtered proof tabs, numbered step strip).
   Icons are the live theme's Horizon set. Payment marks are the
   real brand vectors. Nothing here is redrawn by hand.
   ------------------------------------------------------------- */

:root{
  --sc-act:#6B5B4E; --sc-act-dark:#352D26; --sc-act-soft:rgba(107,91,78,.06);
  --sc-ease:cubic-bezier(.22,.61,.36,1);
}
*{ -webkit-tap-highlight-color:transparent; }

/* ------------------------------------------------------ motion system */
.rv{ opacity:0; transform:translateY(14px); transition:opacity .45s var(--sc-ease), transform .45s var(--sc-ease); }
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.05s } .rv-d2{ transition-delay:.1s } .rv-d3{ transition-delay:.15s }
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1 !important; transform:none !important; transition:none !important; }
  *{ animation:none !important; transition-duration:.01ms !important; }
}

.i{ width:22px; height:22px; flex:none; display:block; }
.i--sm{ width:19px; height:19px; }
.i--lg{ width:30px; height:30px; }

.anno{ background:var(--sc-ink); color:#EDE8E2; font-size:13px; text-align:center; padding:11px 16px; }
.anno b{ color:#fff; font-weight:500; }

.crumb{ padding:18px 0 0; font-size:12.5px; color:var(--sc-body-dim); }
.crumb a{ color:var(--sc-body-dim); text-decoration:none; }
.crumb a:hover{ color:var(--sc-brown); text-decoration:underline; }
.crumb span{ margin:0 7px; opacity:.5; }

/* ============================================================== hero */
.pdp>*{ min-width:0; }
.pdp{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:64px; align-items:start; padding:28px 0 90px; }

.gal{ display:grid; grid-template-columns:82px minmax(0,1fr); gap:16px; }
@media (min-width:1001px){
  .pdp>div:first-child{ position:sticky; top:32px; align-self:start; }
}
.rail{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.rail button{
  display:block;
  position:relative; border:0; padding:0; cursor:pointer; background:var(--sc-cream);
  border-radius:var(--sc-r-sm); overflow:hidden; aspect-ratio:1/1;
  outline:2px solid transparent; outline-offset:2px;
  transition:outline-color .2s var(--sc-ease), transform .2s var(--sc-ease);
}
.rail button:hover{ transform:translateY(-2px); }
.rail button img{ width:100%; height:100%; object-fit:cover; display:block; }
.rail button[aria-current="true"]{ outline-color:var(--sc-ink); }
.rail__vid::after{ content:""; position:absolute; inset:0; background:rgba(53,45,38,.45); }
.rail__vid::before{
  content:""; position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%);
  border-style:solid; border-width:6px 0 6px 10px; border-color:transparent transparent transparent #fff;
}
.stage{ position:relative; border-radius:var(--sc-r-lg); overflow:hidden; background:var(--sc-cream); aspect-ratio:1/1; }
.stage img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .45s var(--sc-ease); }
.stage img.on{ opacity:1; }


.galtabs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.galtabs::-webkit-scrollbar{ display:none; }
.galtabs button{
  flex:none; border:1px solid var(--sc-line); background:var(--sc-white); cursor:pointer;
  font-family:var(--sc-display); font-size:11.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--sc-body-dim); padding:9px 15px; border-radius:var(--sc-r-pill);
  transition:all .22s var(--sc-ease);
}
.galtabs button:hover{ border-color:var(--sc-taupe); color:var(--sc-brown); }
.galtabs button[aria-selected="true"]{ background:var(--sc-ink); border-color:var(--sc-ink); color:#fff; }

/* -------------------------------------------------------- buy box */
.badge{
  display:inline-block; background:var(--sc-ink); color:#fff; font-family:var(--sc-display);
  font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; padding:6px 12px;
  border-radius:4px; margin-bottom:14px;
}
.buy h1{ font-family:var(--sc-display); font-weight:400; font-size:clamp(34px,3.9vw,52px);
  line-height:1.04; color:var(--sc-ink); margin:0 0 16px; letter-spacing:-.022em; }
.buy h1 b{ font-weight:500; }

.trustline{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none; background:var(--sc-cream);
  border:1px solid var(--sc-line); color:var(--sc-ink); border-radius:var(--sc-r-pill);
  padding:8px 16px 8px 12px; font-size:13px; font-weight:500; margin-bottom:20px;
  transition:border-color .2s var(--sc-ease), transform .2s var(--sc-ease);
}
.trustline .i{ color:var(--sc-act); }
.trustline:hover{ border-color:var(--sc-taupe); transform:translateY(-1px); }

.price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:12px; margin-bottom:5px; }
.price__now{ font-family:var(--sc-display); font-weight:400; font-size:38px; color:var(--sc-ink); line-height:1; }
.price__was{ font-size:17px; color:var(--sc-body-dim); text-decoration:line-through; }
.price__save{ background:var(--sc-act); color:#fff; font-size:12px; font-weight:600; letter-spacing:.03em; padding:5px 11px; border-radius:var(--sc-r-pill); }
.gst{ font-size:12.5px; color:var(--sc-body-dim); margin:0 0 20px; }

.sub{ font-size:16.5px; line-height:1.62; color:var(--sc-body); margin:0 0 22px; max-width:47ch; }
.sub strong{ color:var(--sc-ink); font-weight:600; }

.ticks{ list-style:none; margin:0 0 24px; padding:0; display:grid; gap:11px; }
.ticks li{ display:grid; grid-template-columns:20px 1fr; gap:12px; align-items:start; font-size:14.5px; line-height:22px; }
.ticks .i{ color:var(--sc-act); width:20px; height:20px; margin-top:1px; }
.ticks b{ color:var(--sc-ink); font-weight:600; }

.bundle{ border:1px solid var(--sc-line); border-radius:var(--sc-r-md); margin-bottom:22px; overflow:hidden; }
.bundle__h{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; background:var(--sc-cream); border-bottom:1px solid var(--sc-line); }
.bundle__h em{ font-style:normal; font-family:var(--sc-display); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--sc-ink); }
.bundle__save{ background:var(--sc-act); color:#fff; font-size:11px; font-weight:600; padding:4px 10px; border-radius:3px; letter-spacing:.04em; }
.bundle__b{ padding:6px 18px 16px; }
.brow{ display:grid; grid-template-columns:46px 1fr auto; gap:13px; align-items:center; padding:11px 0; border-bottom:1px solid var(--sc-line); }
.brow:last-of-type{ border-bottom:0; }
.brow img{ width:46px; height:46px; object-fit:cover; border-radius:var(--sc-r-sm); display:block; }
.brow__n{ font-size:14px; color:var(--sc-ink); }
.brow__n small{ display:block; font-size:12.5px; color:var(--sc-body-dim); margin-top:2px; }
.brow__p{ font-size:14px; color:var(--sc-body-dim); }
.bsum{ display:flex; justify-content:space-between; align-items:baseline; margin-top:13px; padding-top:13px; border-top:1px dashed var(--sc-line); font-size:14px; }
.bsum b{ font-family:var(--sc-display); font-size:20px; color:var(--sc-ink); font-weight:500; }

.opts{ display:grid; gap:10px; margin-bottom:24px; }
.opt{
  position:relative; display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center;
  border:1px solid var(--sc-line); border-radius:var(--sc-r-md); padding:18px 20px;
  cursor:pointer; background:var(--sc-white); transition:border-color .2s var(--sc-ease), background .2s var(--sc-ease);
}
.opt:hover{ border-color:var(--sc-taupe); }
.opt input{ position:absolute; opacity:0; pointer-events:none; }
.opt__main{ display:grid; gap:4px; }
.opt__t{ font-family:var(--sc-display); font-size:16px; color:var(--sc-ink); display:flex; align-items:center; gap:9px; }
.opt__t::before{
  content:""; width:17px; height:17px; border-radius:50%; flex:none;
  border:1px solid var(--sc-taupe); transition:all .2s var(--sc-ease);
}
.opt__d{ font-size:13px; line-height:1.55; color:var(--sc-body-dim); padding-left:26px; }
.opt__p{ font-family:var(--sc-display); font-size:19px; color:var(--sc-ink); white-space:nowrap; }
.opt__p s{ font-size:14px; color:var(--sc-body-dim); font-family:var(--sc-text); margin-left:5px; }
.opt--best{ border-color:var(--sc-taupe); padding-top:26px; }
.opt__flag{
  position:absolute; top:-1px; left:-1px; background:var(--sc-act); color:#fff;
  font-family:var(--sc-display); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 12px; border-radius:var(--sc-r-md) 0 var(--sc-r-md) 0;
}
.opt:has(input:checked){ border-color:var(--sc-ink); background:var(--sc-act-soft); }
.opt:has(input:checked) .opt__t::before{ border-color:var(--sc-act); border-width:5px; }
.opt input:focus-visible ~ .opt__main .opt__t{ outline:2px solid var(--sc-act); outline-offset:3px; }

.act{ display:flex; gap:12px; margin-bottom:16px; }
.step{ display:flex; align-items:center; border:1px solid var(--sc-line); border-radius:var(--sc-r-pill); overflow:hidden; flex:none; }
.step button{ width:44px; height:58px; border:0; background:none; cursor:pointer; font-size:18px; color:var(--sc-brown); line-height:1; transition:background .18s; }
.step button:hover{ background:var(--sc-cream); }
.step input{ width:42px; height:58px; border:0; text-align:center; font-size:15px; font-family:var(--sc-text); color:var(--sc-ink); background:none; -moz-appearance:textfield; }
.step input::-webkit-outer-spin-button,.step input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.atc .sc-btn__arrow{ font-size:.85em; margin-left:2px; }
.atc{
  flex:1; height:58px; border:0; border-radius:var(--sc-r-pill); cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:9px; text-decoration:none; box-sizing:border-box;
  background:var(--sc-act); color:#fff; font-family:var(--sc-display); font-size:14.5px; font-weight:500;
  letter-spacing:.07em; text-transform:uppercase;
  transition:background .2s var(--sc-ease), transform .12s var(--sc-ease), box-shadow .25s var(--sc-ease);
  box-shadow:0 2px 0 rgba(53,45,38,.45);
}
.atc:hover{ background:var(--sc-act-dark); transform:translateY(-2px); box-shadow:0 6px 18px rgba(107,91,78,.32); }
.atc:active{ transform:translateY(1px); box-shadow:0 1px 0 rgba(53,45,38,.45); }
.atc.done{ background:#4F6B52; box-shadow:none; }

.after{ display:grid; gap:9px; margin-bottom:18px; }
.after div{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--sc-body); }
.after .i{ color:var(--sc-brown); }

.pay-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:16px 0; border-top:1px solid var(--sc-line); border-bottom:1px solid var(--sc-line); }
.pay{ width:58px; height:auto; display:block; border-radius:5px; background:#fff; box-shadow:0 0 0 1px rgba(53,45,38,.10); }

.feat{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px 18px; padding:26px 0 8px; }
.feat div{ display:grid; grid-template-columns:21px 1fr; gap:11px; align-items:start; font-size:13px; line-height:1.45; color:var(--sc-body); }
.feat .i{ color:var(--sc-brown); width:21px; height:21px; }
.feat b{ display:block; color:var(--sc-ink); font-weight:500; line-height:21px; }

.acc{ margin-top:28px; border-top:1px solid var(--sc-line); }
.acc details{ border-bottom:1px solid var(--sc-line); }
.acc summary{ cursor:pointer; list-style:none; padding:17px 0; font-size:14.5px; color:var(--sc-ink); display:flex; align-items:center; gap:11px; font-weight:500; }
.acc summary::-webkit-details-marker{ display:none; }
.acc summary .i{ color:var(--sc-act); }
.acc summary span{ flex:1; }
.acc summary::after{ content:"+"; font-size:19px; color:var(--sc-taupe); font-weight:300; line-height:1; }
.acc details[open] summary::after{ content:"\2013"; }
.accw{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .34s var(--sc-ease); }
details[open] .accw{ grid-template-rows:1fr; }
.accw>div{ overflow:hidden; }
.accb{ padding:0 0 20px; font-size:14px; line-height:1.72; }
.accb p{ margin:0 0 12px } .accb p:last-child{ margin:0 }
.accb ul{ margin:0 0 12px; padding-left:18px } .accb li{ margin-bottom:6px }
.accb strong{ color:var(--sc-ink); font-weight:500; }
.spec{ width:100%; border-collapse:collapse; margin:0 0 12px; }
.spec td{ padding:9px 0; border-bottom:1px solid var(--sc-line); font-size:13.5px; vertical-align:top; }
.spec td:first-child{ color:var(--sc-ink); width:46%; padding-right:14px; }
.spec tr:last-child td{ border-bottom:0; }


/* ============================================================ section */
.sec{ padding:104px 0; }
@media (max-width:1000px){ .sec{ padding:72px 0 } }
@media (max-width:640px){ .sec{ padding:56px 0 } }
.sec--cream{ background:var(--sc-cream); }
.head{ max-width:720px; margin:0 0 48px; }
.head--mid{ margin-inline:auto; text-align:center; }
.eyebrow{ font-family:var(--sc-display); font-size:13px; font-weight:400; letter-spacing:.02em;
  text-transform:none; color:var(--sc-body-dim); margin:0 0 10px; }
.h2{ font-family:var(--sc-display); font-weight:400; font-size:clamp(30px,3.9vw,50px);
  line-height:1.1; color:var(--sc-ink); margin:0 0 18px; letter-spacing:-.02em; }
.h2 em{ font-style:normal; color:var(--sc-taupe); }
.lead{ font-size:16.5px; line-height:1.7; margin:0; font-weight:400; color:var(--sc-body); }
.lead strong{ color:var(--sc-ink); font-weight:600; }

/* ============================================================= videos */
.vids{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.vid{ border:0; padding:0; background:none; cursor:pointer; text-align:left; font:inherit;
  color:inherit; display:grid; grid-template-rows:auto auto 1fr; align-content:start;
  justify-items:stretch; }
.vid__f{ position:relative; border-radius:var(--sc-r-md); overflow:hidden; aspect-ratio:9/14; background:var(--sc-cream); transition:transform .4s var(--sc-ease), box-shadow .4s var(--sc-ease); }
.vid:hover .vid__f{ transform:translateY(-6px); box-shadow:0 14px 34px rgba(53,45,38,.18); }
.vid__f img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s var(--sc-ease); }
.vid:hover .vid__f img{ transform:scale(1.06); }
.vid__f::after{ content:""; position:absolute; inset:0; background:
  linear-gradient(180deg,rgba(53,45,38,.34) 0%,rgba(53,45,38,0) 22%,rgba(53,45,38,0) 40%,rgba(53,45,38,.80) 100%); }
.vid__p{ position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%); width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.94); display:grid; place-items:center; transition:transform .3s var(--sc-ease); }
.vid:hover .vid__p{ transform:translate(-50%,-50%) scale(1.12); }
.vid__p::before{ content:""; border-style:solid; border-width:8px 0 8px 13px; border-color:transparent transparent transparent var(--sc-ink); margin-left:4px; }
.vid__len{ position:absolute; z-index:2; top:12px; right:12px; background:rgba(53,45,38,.8); color:#fff; font-size:11px; padding:4px 9px; border-radius:var(--sc-r-pill); }
.vid__c{ position:absolute; z-index:2; left:15px; right:15px; bottom:15px; color:#fff; }
.vid__c b{ display:block; font-family:var(--sc-display); font-weight:400; font-size:16px; }
.vid__q{ margin:12px 2px 0; font-size:13px; line-height:1.55; color:var(--sc-body-dim); }
.vnote{ margin:26px 0 0; font-size:12.5px; color:var(--sc-body-dim); }

/* ======================================================= versus table */


.vs th,.vs td{ padding:0; text-align:left; }














.vnote2{ font-size:13px; color:var(--sc-body-dim); margin:20px auto 0; max-width:1080px; text-align:center; }

/* ============================================================ 4 steps */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.st{ text-align:center; }
.st__i{ border-radius:var(--sc-r-md); overflow:hidden; aspect-ratio:4/3; background:var(--sc-cream); margin-bottom:18px; }
.st__i img{ width:100%; height:100%; object-fit:cover; display:block; }

.sec--cream 
.st__n{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px;
  border-radius:50%; border:1px solid var(--sc-line); color:var(--sc-brown);
  font-family:var(--sc-display); font-size:13px; margin:0 0 12px; }
.st h3{ font-family:var(--sc-display); font-weight:500; font-size:17px; color:var(--sc-ink); margin:0 0 8px; }
.st p{ font-size:13.5px; line-height:1.6; margin:0; }

/* ============================================================ honesty */
.honest{ display:grid; grid-template-columns:56px 1fr; gap:22px; align-items:start; background:var(--sc-white); border:1px solid var(--sc-line); border-left:3px solid var(--sc-act); border-radius:var(--sc-r-md); padding:38px 44px; }
.honest__i{ width:56px; height:56px; border-radius:50%; background:var(--sc-act-soft); display:grid; place-items:center; }
.honest__i .i{ color:var(--sc-act); }
.honest h3{ font-family:var(--sc-display); font-weight:400; font-size:21px; color:var(--sc-ink); margin:0 0 13px; line-height:1.3; }
.honest p{ font-size:14.5px; line-height:1.75; margin:0 0 12px } .honest p:last-child{ margin:0 }

/* ========================================================== guarantee */
.gtee{ background:var(--sc-ink); color:var(--sc-on-dark); text-align:center; position:relative; overflow:hidden; }
.gtee::before{
  content:""; position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  width:min(900px,120vw); aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(107,91,78,.42) 0%, rgba(107,91,78,.16) 38%, rgba(107,91,78,0) 68%);
}
.gtee__in{ position:relative; z-index:1; }
.gtee__in{ max-width:730px; margin:0 auto; padding:104px 0; }
.gtee__b{
  width:88px; height:88px; margin:0 auto 28px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(231,222,213,.4); background:rgba(107,91,78,.18);
  box-shadow:0 0 0 10px rgba(107,91,78,.10), 0 0 46px 6px rgba(107,91,78,.45), inset 0 0 22px rgba(107,91,78,.28);
  animation:gteePulse 3.6s ease-in-out infinite;
}
@keyframes gteePulse{
  0%,100%{ box-shadow:0 0 0 10px rgba(107,91,78,.10), 0 0 40px 4px rgba(107,91,78,.38), inset 0 0 22px rgba(107,91,78,.26); }
  50%{ box-shadow:0 0 0 16px rgba(107,91,78,.07), 0 0 64px 10px rgba(107,91,78,.58), inset 0 0 26px rgba(107,91,78,.34); }
}
@media (prefers-reduced-motion:reduce){ .gtee__b{ animation:none } }
.gtee__b .i{ width:36px; height:36px; color:#E7DED5; }
.gtee h2{ text-shadow:0 0 38px rgba(107,91,78,.45); font-family:var(--sc-display); font-weight:400; font-size:clamp(30px,3.6vw,46px); color:#fff; margin:0 0 18px; line-height:1.2; }
.gtee p{ font-size:15.5px; line-height:1.78; margin:0 0 14px } .gtee p:last-child{ margin:0 }
.gtee strong{ color:#fff; font-weight:500; }

/* =============================================== proof, filtered tabs */




 .ppanel.on{ display:block; animation:fade .4s var(--sc-ease) }
 to{opacity:1;transform:none} }


















@media (max-width:1000px){  }
.slot 

/* ================================================================ faq */
.faq{ max-width:830px; margin:0 auto; }
.faq details{ background:var(--sc-white); border:1px solid var(--sc-line); border-radius:var(--sc-r-md); margin-bottom:10px; transition:border-color .22s var(--sc-ease); }
.faq details[open]{ border-color:var(--sc-taupe); }
.faq summary{ cursor:pointer; list-style:none; padding:19px 24px; font-size:15px; color:var(--sc-ink); font-weight:500; display:flex; justify-content:space-between; gap:18px; align-items:center; }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; font-size:20px; color:var(--sc-taupe); font-weight:300; line-height:1; flex:none }
.faq details[open] summary::after{ content:"\2013" }
.faq__a{ padding:0 24px 22px; font-size:14.5px; line-height:1.75 }
.faq__a p{ margin:0 0 12px } .faq__a p:last-child{ margin:0 }

/* ============================================================ closing */
.close{ background:var(--sc-cream) }
.close__in{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:104px 0 }
.close__m{ border-radius:var(--sc-r-lg); overflow:hidden; aspect-ratio:5/4 }
.close__m img{ width:100%; height:100%; object-fit:cover; display:block }
.close h2{ font-family:var(--sc-display); font-weight:400; font-size:clamp(30px,3.6vw,46px); color:var(--sc-ink); margin:0 0 16px; line-height:1.16 }
.close p{ font-size:15.5px; line-height:1.75; margin:0 0 26px }
.close__r{ display:flex; gap:14px; align-items:center; flex-wrap:wrap }
.close__p{ font-family:var(--sc-display); font-size:27px; color:var(--sc-ink) }
.close__p s{ font-size:16px; color:var(--sc-body-dim); margin-left:8px; font-family:var(--sc-text) }

/* ========================================================= sticky bar */
.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:60; display:none;
  background:rgba(255,255,255,.97); border-top:1px solid var(--sc-line);
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 22px rgba(53,45,38,.10);
  transform:translateY(120%); transition:transform .34s var(--sc-ease);
}
.sticky.show{ transform:none }
.sticky__in{ display:flex; align-items:center; gap:13px }
.sticky__t{ flex:1; min-width:0 }
.sticky__t b{ display:block; font-family:var(--sc-display); font-size:15px; color:var(--sc-ink); font-weight:500 }
.sticky__t span{ font-size:12px; color:var(--sc-body-dim) }
.sticky .atc{ flex:none; width:auto; padding:0 26px; height:48px }

@media (max-width:1000px){
  .pdp{ grid-template-columns:1fr; gap:32px; padding-bottom:48px }
  .vids{ grid-template-columns:repeat(2,1fr) }
  .steps{ grid-template-columns:repeat(2,1fr); gap:38px 24px }
  
  .close__in{ grid-template-columns:1fr; gap:34px }
  .close__m{ order:-1; aspect-ratio:16/10 }
  .band__in{ grid-template-columns:repeat(2,1fr); gap:16px }
  .band__i{ justify-content:flex-start }
}
@media (max-width:760px){
  .galtabs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none }
  .galtabs::-webkit-scrollbar{ display:none }
  .gal{ grid-template-columns:1fr; gap:0 }
  .gal{ display:flex; flex-direction:column; min-width:0 }
  .gal>*{ min-width:0; width:100% }
  .rail{ order:2; flex-direction:row; overflow-x:auto; gap:9px; margin-top:10px; scrollbar-width:none; scroll-snap-type:x mandatory }
  .gal>.galcol{ order:1 }
  .rail::-webkit-scrollbar{ display:none }
  .rail button{ flex:0 0 21%; scroll-snap-align:start }
  .stage{ border-radius:var(--sc-r-md) }
    .vids{ grid-template-columns:repeat(2,1fr); gap:12px }
  .vid__c b{ font-size:14px }
  .honest{ grid-template-columns:1fr; gap:18px; padding:26px 22px }
  .feat{ grid-template-columns:repeat(2,1fr); gap:18px 14px }
  .sticky{ display:block }
  body{ padding-bottom:78px }
  .buy h1{ font-size:29px }
  .vth,
  
  
  .pay{ width:52px }
  .price__now{ font-size:33px }
}
@media (max-width:460px){
  .band__in{ grid-template-columns:1fr }
  .vth,
  
  .steps{ grid-template-columns:1fr; max-width:320px; margin-inline:auto }
}


/* ------------------------------------------------ real brand logo */
.sc-logo__img{ height:42px; width:auto; display:block; }
@media (max-width:760px){ .sc-logo__img{ height:34px } }

/* ------------------------------------------------- header CTA */
.navcta{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  background:var(--sc-ink); color:#fff; border-radius:var(--sc-r-pill);
  font-family:var(--sc-display); font-size:12px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; padding:14px 26px;
  transition:background .2s var(--sc-ease), transform .2s var(--sc-ease), box-shadow .25s var(--sc-ease);
  box-shadow:0 2px 0 rgba(53,45,38,.35);
}
.navcta:hover{ background:var(--sc-brown); transform:translateY(-2px); box-shadow:0 8px 20px rgba(53,45,38,.26); }
.navcta:active{ transform:translateY(1px); box-shadow:0 1px 0 rgba(53,45,38,.35); }
.navcta .sc-btn__arrow{ font-size:.9em }
@media (max-width:760px){ .navcta{ padding:11px 18px; font-size:11px; letter-spacing:.1em } }


/* ============================================ google-style review summary */
.gsum{
  display:grid; grid-template-columns:auto 1fr 1.05fr; gap:38px; align-items:center;
  background:var(--sc-white); border:1px solid var(--sc-line); border-radius:var(--sc-r-lg);
  padding:34px 38px; max-width:1080px; margin:0 auto 38px;
}
.gsum__score{ text-align:center; padding-right:36px; border-right:1px solid var(--sc-line); }
.gsum__n{ display:block; font-family:var(--sc-display); font-size:52px; line-height:1; color:var(--sc-ink); }
.gsum__stars{ display:flex; gap:3px; justify-content:center; margin:10px 0 8px; }
.gsum__stars .i{ color:#D8D2CA; width:18px; height:18px; }
.gsum__c{ display:block; font-size:13px; color:var(--sc-body-dim); white-space:nowrap; }
.gsum__bars{ display:grid; gap:7px; }
.gbar{ display:grid; grid-template-columns:14px 1fr 22px; gap:10px; align-items:center;
  font-size:12.5px; color:var(--sc-body-dim); }
.gbar i{ display:block; height:7px; border-radius:var(--sc-r-pill); background:var(--sc-cream); overflow:hidden; }
.gbar i b{ display:block; height:100%; width:0; background:var(--sc-taupe); }
.gbar__c{ text-align:right }
.gsum__note p{ margin:0 0 10px; font-size:13.5px; line-height:1.7; }
.gsum__note p:last-child{ margin:0 }
.gsum__note strong{ color:var(--sc-ink); font-weight:600 }

/* ------------------------------------------------------- ugc video row */
.ugc{ max-width:1080px; margin:44px auto 0; }
.ugc__h{ font-family:var(--sc-display); font-size:13px; color:var(--sc-body-dim); margin:0 0 16px; text-align:center; }
.ugc__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }




.ugc__n{ margin:18px 0 0; font-size:12.5px; color:var(--sc-body-dim); text-align:center; }

/* ==================================================================== footer */
.scf{ background:var(--sc-ink); color:var(--sc-on-dark); padding:70px 0 0; }
.scf__top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:40px; padding-bottom:52px; }
.scf__logo{ height:40px; width:auto; display:block; margin-bottom:18px; filter:brightness(0) invert(1); opacity:.92; }
.scf__brand p{ font-size:13.5px; line-height:1.7; margin:0 0 20px; max-width:30ch; color:var(--sc-on-dark-dim); }
.scf__social{ display:flex; gap:12px }
.scf__social a{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  display:grid; place-items:center; color:#fff; transition:background .2s var(--sc-ease); }
.scf__social a:hover{ background:rgba(255,255,255,.12) }
.scf__social svg{ width:15px; height:15px }
.scf__col h4{ font-family:var(--sc-display); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; font-weight:500; margin:0 0 16px; }
.scf__col a{ display:block; font-size:13.5px; color:var(--sc-on-dark-dim); text-decoration:none;
  margin-bottom:10px; transition:color .18s var(--sc-ease); }
.scf__col a:hover{ color:#fff }
.scf__bar{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.12); padding:22px 0 26px; }
.scf__bar p{ margin:0; font-size:12.5px; color:var(--sc-on-dark-dim) }
.scf__pay{ display:flex; gap:7px; align-items:center }
.scf__pay .pay{ width:46px }

@media (max-width:1000px){
  .gsum{ grid-template-columns:1fr; gap:24px; padding:28px 24px; text-align:center }
  .gsum__score{ padding:0 0 22px; border-right:0; border-bottom:1px solid var(--sc-line) }
  .ugc__grid{ grid-template-columns:repeat(2,1fr) }
  .scf__top{ grid-template-columns:1fr 1fr; gap:34px }
  .scf__brand{ grid-column:1 / -1 }
}
@media (max-width:560px){
  .scf__top{ grid-template-columns:1fr }
  .scf__bar{ justify-content:center; text-align:center }
}


/* ===================================================== comparison table
   Same treatment as the homepage: one cream header row, hairline rows,
   the winning column carried by weight rather than a dark block. */
.vs{
  border:1px solid var(--sc-line); border-radius:var(--sc-r-md); overflow:hidden;
  background:var(--sc-white); max-width:960px; margin-inline:auto;
}
.vs table{ width:100%; border-collapse:collapse; }
.vth{
  padding:15px 22px; text-align:left; background:var(--sc-cream);
  font-family:var(--sc-display); font-size:12px; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--sc-ink); border-bottom:1px solid var(--sc-line);
}
.vth--t{ color:var(--sc-body-dim); font-weight:400; }
.vth--u{ color:var(--sc-ink); }
.vrow td{ padding:15px 22px; font-size:13.5px; border-bottom:1px solid var(--sc-line); vertical-align:middle; }
.vrow:last-child td{ border-bottom:0; }
.vlbl{ color:var(--sc-ink); width:28%; }
.vthem{ color:var(--sc-body-dim); width:36%; }
.vus{ width:36%; background:var(--sc-act-soft); border-left:1px solid var(--sc-line); }
.vus span{ display:flex; align-items:center; gap:9px; color:var(--sc-ink); font-weight:600; }
.vus .i{ color:var(--sc-brown); width:16px; height:16px; flex:none; }
@media (max-width:640px){
  .vth, .vrow td{ padding:12px 13px; font-size:12.5px }
  .vth{ font-size:10.5px; letter-spacing:.04em }
  .vlbl{ width:30% }
  .vus .i{ display:none }
}

/* ---- customer video tiles: same object as the demo cards above ---- */








/* ---- customer video row: identical card to the demo videos above ---- */
.ugct{ position:relative; border-radius:var(--sc-r-md); overflow:hidden; aspect-ratio:9/14;
  background:var(--sc-cream); transition:transform .4s var(--sc-ease), box-shadow .4s var(--sc-ease); }
.ugct:hover{ transform:translateY(-6px); box-shadow:0 14px 34px rgba(53,45,38,.18); }
.ugct img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(.12); }
.ugct::after{ content:""; position:absolute; inset:0; background:
  linear-gradient(180deg,rgba(53,45,38,.34) 0%,rgba(53,45,38,0) 22%,rgba(53,45,38,0) 40%,rgba(53,45,38,.80) 100%); }
.ugct__p{ position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%);
  width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.94);
  display:grid; place-items:center; transition:transform .3s var(--sc-ease); }
.ugct:hover .ugct__p{ transform:translate(-50%,-50%) scale(1.12); }
.ugct__p::before{ content:""; border-style:solid; border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent var(--sc-ink); margin-left:4px; }
.ugct__tag{ position:absolute; z-index:2; top:12px; right:12px; background:rgba(53,45,38,.8);
  color:#fff; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 9px; border-radius:var(--sc-r-pill); }
.ugct__c{ position:absolute; z-index:2; left:15px; right:15px; bottom:15px; color:#fff; }
.ugct__c b{ display:block; font-family:var(--sc-display); font-weight:500; font-size:15px; }
.ugct__c span{ font-size:12px; opacity:.85 }

/* ==== the product page is the authority inside itself ==================
   sc-branch.css carries a few global !important rules so it can beat the
   theme's inline Satoshi block. Those rules would also flatten this page's
   own type scale, so the page re-asserts its own sizes here. Same tokens,
   same palette, nothing new. */
.buy h1{
  font-family:var(--sc-display)!important; font-weight:300!important;
  font-size:clamp(34px,3.9vw,52px)!important; line-height:1.04!important;
  letter-spacing:-.022em!important; text-transform:none!important;
  color:var(--sc-ink)!important;
}
.buy h1 b{ font-weight:600!important; }
.sec .h2, .close h2, .gtee h2{
  font-family:var(--sc-display)!important; font-weight:300!important;
  line-height:1.1!important; letter-spacing:-.02em!important;
  text-transform:none!important;
}
.sec .h2{ font-size:clamp(30px,3.9vw,50px)!important; }
.gtee h2{ font-size:clamp(26px,3.1vw,40px)!important; color:#fff!important; }
.close h2{ font-size:clamp(28px,3.2vw,44px)!important; }
.st h3, .faq summary, .acc summary span{
  font-family:var(--sc-display)!important; text-transform:none!important;
}
.st h3{ font-size:17px!important; font-weight:500!important; letter-spacing:0!important; }
.atc, .galtabs button, .badge, .opt__t, .opt__flag, .price__now, .close__p{
  font-family:var(--sc-display)!important;
}
.trustline, .vid__q, .sub, .lead, .ticks span, .opt__d, .faq__a, .accb{
  font-family:var(--sc-text)!important;
}
.atc{
  border-radius:var(--sc-r-pill)!important; text-transform:uppercase!important;
  letter-spacing:.07em!important; font-weight:500!important; font-size:14.5px!important;
  min-height:58px!important; padding:0 28px!important;
}
.pdp .step button, .pdp .step input{
  padding:0!important; border-radius:0!important; min-height:0!important;
  text-transform:none!important; letter-spacing:normal!important;
}
.pdp .step{ border-radius:var(--sc-r-pill)!important; }
/* the page sets its own rhythm. The earlier version of this rule zeroed
   padding on every direct child section, which flattened .sec, .gtee and
   .close to nothing. Only the bare wrapper is neutralised now. */
.shopify-section:has(.pdp) > div:not([class]){ padding-block:0!important; }

/* ==== the video cards that actually have a video =======================
   A card with no video loses the play circle and the duration chip, so a
   still is never dressed up as a clip. */
.vid__v{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; background:#000; z-index:4; border:0;
}
.vid--still{ cursor:default; }
.vid--still .vid__f::after{ display:none; }

/* ==== gutters that went missing ========================================
   .close__in carries .sc-container but its own rule zeroed padding-inline,
   so the closing heading, the paragraph, the price and the button all ran
   to both edges of a phone. Every container keeps the gutter. */
.close__in{
  padding-inline:var(--sc-gutter) !important;
  box-sizing:border-box;
}
@media (max-width:749px){
  .close__in{ padding-block:clamp(32px,7vw,56px) !important; }
  .close__m{ margin-inline:calc(var(--sc-gutter) * -1); }
  .close__r{ flex-wrap:wrap; gap:14px; }
  .close__r .atc{ flex:1 1 100% !important; }
  /* the step column was inset 50px against a 20px page gutter */
  .steps{ padding-inline:0 !important; }
  .vid__q{ padding-inline:0 !important; }
}

/* ==== the sticky buy bar ===============================================
   Phones only. On a desktop the buy box is a short scroll away and a fixed
   bar across the foot of a 1320px page is just a bar in the way.

   It slides rather than appears: the resting state is already translated
   down and faded out, so the transition has two real states to move between.
   The earlier version toggled the hidden attribute, which has no in-between
   for the browser to animate. */
.stickybuy{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:#fff; border-top:1px solid var(--sc-line);
  padding:10px clamp(16px,4vw,32px) calc(10px + env(safe-area-inset-bottom));
  transform:translateY(112%);
  opacity:0;
  visibility:hidden;
  box-shadow:0 -6px 24px rgba(28,22,18,0);
  will-change:transform;
}
.stickybuy.is-shown{
  transform:translateY(0);
  opacity:1;
  visibility:visible;
  box-shadow:0 -6px 24px rgba(28,22,18,.12);
}
@media (prefers-reduced-motion:no-preference){
  .stickybuy{
    transition:
      transform .34s cubic-bezier(.22,.61,.36,1),
      opacity .22s ease,
      box-shadow .34s ease,
      visibility 0s linear .34s;
  }
  .stickybuy.is-shown{
    transition:
      transform .34s cubic-bezier(.22,.61,.36,1),
      opacity .18s ease,
      box-shadow .34s ease,
      visibility 0s;
  }
  /* the contents drift up a touch behind the bar, so it reads as one move */
  .stickybuy__in > *{ transform:translateY(5px); opacity:.6;
    transition:transform .34s cubic-bezier(.22,.61,.36,1) .04s, opacity .24s ease .04s; }
  .stickybuy.is-shown .stickybuy__in > *{ transform:translateY(0); opacity:1; }
}
@media (min-width:750px){
  .stickybuy{ display:none !important; }
}
.stickybuy__in{
  max-width:1320px; margin-inline:auto;
  display:flex; align-items:center; gap:12px;
}
.stickybuy__img{
  width:44px; height:44px; object-fit:cover; border-radius:6px;
  background:var(--sc-cream); flex:none;
}
.stickybuy__txt{ display:none; }
.stickybuy__cart{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  text-decoration:none; color:var(--sc-ink);
  border:1px solid var(--sc-line); border-radius:999px;
  padding:11px 14px; font-family:var(--sc-display); font-size:13px;
}
.stickybuy__cart[hidden]{ display:none !important; }
.stickybuy__cart svg{ width:17px; height:17px; }
.stickybuy__btn{
  flex:1 1 auto; border:0; cursor:pointer;
  background:var(--sc-brown); color:#fff;
  border-radius:999px; min-height:48px; padding:0 18px;
  font-family:var(--sc-display); font-weight:500; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase;
  transition:background .2s ease, transform .12s ease;
}
.stickybuy__btn:active{ transform:translateY(1px); }
.stickybuy__btn:hover{ background:var(--sc-ink); }
.stickybuy__btn[disabled]{ opacity:.75; cursor:default; }

/* the bar would otherwise sit on top of the last section */
.shopify-section:has(.stickybuy) + *{ scroll-margin-bottom:80px; }
body:has(.stickybuy:not([hidden])){ padding-bottom:0; }