/** Shopify CDN: Minification failed
Line 1092:84 Expected ":"
**/
.sc-placeholder{background:color-mix(in srgb,currentColor 8%,transparent);
border:1px solid color-mix(in srgb,currentColor 50%,transparent);
border-radius:2px;box-sizing:border-box;overflow:hidden}
@keyframes sc-shine{0%{background-position:100% 50%}100%{background-position:0% 50%}}
html.sc-dc-streaming .sc-placeholder,
html.sc-dc-streaming .sc-interp.sc-missing{position:relative;
background:color-mix(in srgb,currentColor 5%,transparent);
border-color:transparent}
html.sc-dc-streaming .sc-placeholder::before,
html.sc-dc-streaming .sc-interp.sc-missing::before{content:'';
position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,rgba(217,119,87,0) 25%,rgba(247,225,211,.95) 37%,rgba(217,119,87,0) 63%);
background-size:400% 100%;animation:sc-shine 1.4s ease infinite}
html.sc-dc-streaming .sc-placeholder:nth-child(n+9 of .sc-placeholder)::before,
html.sc-dc-streaming .sc-interp.sc-missing:nth-child(n+9 of .sc-interp.sc-missing)::before{animation:none;
background:color-mix(in srgb,currentColor 8%,transparent)}
.sc-placeholder-error{padding:4px 8px;font:11px/1.4 ui-monospace,monospace;
color:color-mix(in srgb,currentColor 70%,transparent);word-break:break-word}
.sc-interp.sc-missing{display:inline-block;width:2em;height:1em;overflow:hidden;
vertical-align:text-bottom;background:rgba(255,255,255,.3);border:1px solid rgba(0,0,0,.5);
border-radius:2px;box-sizing:border-box;color:transparent;
user-select:none}
.sc-interp.sc-unresolved{font-family:ui-monospace,monospace;font-size:.85em;
color:color-mix(in srgb,currentColor 50%,transparent);
background:color-mix(in srgb,currentColor 10%,transparent);border-radius:3px;
padding:0 3px}
.sc-host.sc-has-error{position:relative}
.sc-logic-error{position:absolute;top:8px;left:8px;z-index:2147483647;max-width:60ch;
padding:6px 10px;background:#b00020;color:#fff;font:12px/1.4 ui-monospace,monospace;
border-radius:4px;white-space:pre-wrap;pointer-events:none}
/* Mirrors PRINT_BASELINE_CSS in apps/web deck-stage-export.ts — keep both
in sync until dc-runtime regains a build step. */
@media print {
@page { margin: 0.5cm; }
figure, table { break-inside: avoid; }
#dc-root, #dc-root > .sc-host { height: auto; }
*, *::before, *::after {
print-color-adjust: exact; -webkit-print-color-adjust: exact;
backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
animation-delay: -99s !important; animation-duration: .001s !important;
animation-iteration-count: 1 !important; animation-fill-mode: both !important;
animation-play-state: running !important; transition-duration: 0s !important;
}
}
html,body{background:transparent}
x-dc{display:none!important}
.fx{display:flex}.col{display:flex;flex-direction:column}.grid{display:grid}.ac{align-items:center}.jc{justify-content:center}.jb{justify-content:space-between}.f1{flex:1}.noshrink{flex-shrink:0}.wrap{flex-wrap:wrap}.fw5{font-weight:500}.fw6{font-weight:600}.fw7{font-weight:700}.fw8{font-weight:800}.fs11{font-size:11px}.fs12{font-size:12px}.fs13{font-size:13px}.fs14{font-size:14px}.fs15{font-size:15px}.fs16{font-size:16px}.fs20{font-size:20px}.fs22{font-size:22px}.upper{text-transform:uppercase}.tc{text-align:center}.nowrap{white-space:nowrap}.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}.gap16{gap:16px}.gap24{gap:24px}.m0{margin:0}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.posrel{position:relative}.posabs{position:absolute}.round{border-radius:50%}.ohide{overflow:hidden}.bbox{box-sizing:border-box}.pointer{cursor:pointer}.w100{width:100%}.b0{border:none}
html,body{height:100%;margin:0}#dc-root,#dc-root>.sc-host{height:100%}
/* JusSpray PDP - exact rebuild of Figma node 6:1276 (360 x 10007).
Sections are child DCs built from get_design_context: real hex,
real geometry, real exported assets, CSS masks wherever Figma uses
a mask (an there renders the wrong colour - the v1 defect).
ORDER AND SPACING ARE MEASURED, not assumed. The Figma children are
absolutely positioned, so document order and visual order disagree:
reviews (12:117) is genuinely last despite sitting before the
closer in the document. Measured tops/heights:
nav 16 h46 / hero 78 h316 / buy 418 h815 / problem 1272 h945 /
compare 2265 h1070 / made 3383 h2218 / 6:1667 5649 h571 /
6:1700 6268 h655 / 6:1775 6971 h652 / guarantee 7671 h556 /
closer 8032 h189 (overlaps by design) / reviews 8393 h1545.
Stacking flush lost ~1185px of intended breathing room, so these
gaps are applied explicitly.
The hero gallery no longer matches the Figma: the source was a 4-up
swipe rail with empty placeholder slides, and it is now a main image
plus thumbnails plus arrows. That component owns its own responsive
rules - nothing about .hg belongs in this file.
The footer is also not from the Figma - it is rebuilt from the live
site and sits outside .page so it runs full bleed. */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff}
.page{width:360px;margin:0 auto;background:#fff;overflow-x:hidden;
font-family:-apple-system,'SF Pro Display','Helvetica Neue',Helvetica,sans-serif;
-webkit-font-smoothing:antialiased}
.pad{padding-left:12px;padding-right:12px}
.sec{width:100%}
.g16{margin-top:16px}.g24{margin-top:24px}.g39{margin-top:39px}.g48{margin-top:48px}
html{scroll-behavior:smooth}
#buy{scroll-margin-top:24px}
/* ================= RESPONSIVE LAYER =================
The Figma source is a 360px mobile frame, so there is no wide-screen
design to convert - it is designed here. Everything below 768px is
the mobile build untouched: every rule below sits inside a min-width
query, so the phone layout cannot regress.
Selectors are doubled (.page.page) on purpose. The section files are
imported AFTER this stylesheet, so at equal specificity they win;
doubling the class outranks them without reaching for !important.
!important appears only where a rule fights an inline style
attribute the section writes per item, which specificity cannot beat.
THREE failure modes recur, all from converting absolutely-positioned
Figma frames, and all invisible at 360px:
1. Anything pinned to a fixed left or width lands wrong once the
container is wider - a chevron at left:303px sits mid-sentence,
a 250px inner block inside a 301px card pushes its text 14px past
the card edge. Re-anchor or make it fluid.
2. Photos are hand-placed px crops sized against a 141px, 153px or
222px card. At any other width the crop stops covering and the
card's own fill shows through, or the image stretches because its
width and height percentages were tuned for one exact box. Make
the image cover instead - on the WRAPPER as well as the image,
since the wrapper carries its own inline px size.
3. Content that flows must stay POSITIONED. These cards put their
artwork and photo panels in absolutely positioned siblings, and a
positioned element paints above a static one - so the moment copy
drops to static it disappears behind its own background. */
/* ---------- TABLET: 768px and up ---------- */
@media (min-width:768px){
.page.page{width:100%;max-width:1280px;padding:0 24px}
.page.page > .sec{max-width:900px;margin-left:auto;margin-right:auto}
.page.page .pad{padding-left:0;padding-right:0}
/* nav spans the full content width and gains height to match */
.page.page .navbar{height:64px;padding:0 20px;border-radius:14px}
.page.page .navlogo{width:158px;height:25.7px;
-webkit-mask-size:158px 25.7px;mask-size:158px 25.7px}
.page.page .navpill{height:38px;width:92px;border-radius:8px;padding-left:12px}
.page.page .navcarttx{font-size:15px}
/* the recurring 328px content column, everywhere it appears */
.page.page .s3card,.page.page .s3cardbg,.page.page .s3cta,
.page.page .s4card,.page.page .s4cta,
.page.page .s7btn,.page.page .s8btn,.page.page .s9btn,
.page.page .gcard,.page.page .gart,.page.page .gbtn,
.page.page .rwrap,.page.page .rfaqRow,.page.page .rbtn,
.page.page .rcard,.page.page .rcardArt,
.page.page .him-row,.page.page .him-tiles,.page.page .him-cta,
.page.page .cmp-cta,.page.page .navbar{width:100%;max-width:none}
/* copy measured to a phone line length */
.page.page .s3copy{width:calc(100% - 32px)}
.page.page .s3feat{width:calc(100% - 12px)}
.page.page .s3featin{width:calc(100% - 32px)}
.page.page .s3h1,.page.page .s3sub,.page.page .s4h1,.page.page .s4lede,
.page.page .s8body,.page.page .s8head,.page.page .s8sub,
.page.page .s9sub,.page.page .rhead,.page.page .cmp-h2,
.page.page .clist,.page.page .him-body,.page.page .him-head,
.page.page .s7h,.page.page .s8h,.page.page .s9h{width:100%;max-width:100%}
/* FAILURE MODE 1: pinned to a fixed left edge */
.page.page .him-chev,.page.page .rfaqC,
.page.page .gbtnAr,.page.page .rbtnAr{left:auto;right:16px}
.page.page .him-rowtx,.page.page .rfaqQ{width:calc(100% - 56px)}
/* tier cards share the row evenly instead of holding a phone width */
.page.page .s3tiers,.page.page .s9tiles{gap:16px}
.page.page .s3tier,.page.page .s9tile{flex:1 1 0;width:auto}
/* the shipping / clock / refund reassurances read as a row */
.page.page .s9perks{display:grid;grid-template-columns:repeat(3,1fr);
gap:24px;width:100%;align-items:start}
.page.page .s9perk{width:100%}
/* rails stop being swipe rails. Column counts are per rail so no
row ends in an orphan. */
.page.page .s7rail,.page.page .him-rail,.page.page .s8rail,
.page.page .ugcRow{
display:grid;overflow:visible;scroll-snap-type:none;gap:16px;width:100%}
.page.page .him-rail,.page.page .ugcRow,
.page.page .s8rail{grid-template-columns:repeat(3,1fr)}
.page.page .s7rail{grid-template-columns:repeat(2,1fr)}
.page.page .s7card,.page.page .him-card,.page.page .s8rev,
.page.page .ugcCard,.page.page .him-tile{width:100%;flex:1 1 auto}
/* FAILURE MODE 2: hand-placed photo crops */
.page.page .ugcCard,.page.page .him-tile{height:auto;aspect-ratio:141/169}
.page.page .ugcInner,
.page.page .him-tileinner,.page.page .him-tileclip,
.page.page .him-shotinner,.page.page .him-shotclip,.page.page .him-shotveil{
position:absolute!important;left:0!important;top:0!important;
width:100%!important;height:100%!important;transform:none!important}
.page.page .ugcInner img,.page.page .him-tile img,
.page.page .him-shot img,.page.page .s4shot img{
position:absolute!important;left:0!important;top:0!important;
width:100%!important;height:100%!important;object-fit:cover;
transform:none!important}
/* the pagination dots belong to a swipe rail; a grid has no pages */
.page.page .s7dots,.page.page .him-dots,.page.page .s8dots,
.page.page .cmp-progress{display:none}
/* comparison table is a fixed 720px composition, so centre it */
.page.page .cmp-tablewrap{overflow:visible}
.page.page .cmp-table{margin-left:auto;margin-right:auto}
/* PROBLEM CARD. The card is one exported 328x827 SVG with a folder
tab cut into its top-left corner. Stretched to 1000px the tab
becomes a wide slab with the red label stranded beside it, so on
wide screens the art is dropped and the card is drawn in CSS.
The tab is rebuilt as a real bordered box the label sits inside,
which is where the red "The Problem" text belongs. */
.page.page .s4cardbg{display:none}
.page.page .s4card{background:#ffffff;border:1px solid #eeeeee;
border-radius:0 12px 12px 12px;margin-top:34px}
.page.page .s4kicker{position:absolute;left:-1px;top:-35px;
min-width:0;width:auto;padding:8px 20px;background:#ffffff;
border:1px solid #eeeeee;border-bottom:0;border-radius:12px 12px 0 0}
.page.page .s4copy{padding-top:4px}
/* REVIEWS. FAILURE MODE 3 first: the panel body must stay positioned
or the two absolutely positioned photo layers paint over the
heading. Then the card art: those layers are 705x356 boxes
rotated 90deg to fill a 296px-wide phone panel, which at 1000px
covers a fraction of it. One un-rotated covering layer instead,
and the mirrored second layer is dropped - it only ever existed to
fill the bottom of a 537px phone card. */
.page.page .s8body{position:relative;z-index:1}
.page.page .s8card > .s8bg:first-of-type{
left:0;right:0;top:0!important;bottom:0;width:auto;height:auto}
.page.page .s8card > .s8bg:nth-of-type(2){display:none}
.page.page .s8bgin{width:100%!important;height:100%!important;
transform:none!important}
/* review cards: a 250px inner block absolutely placed at left 15.5
inside a card that is now 301px wide, so every quote ran 14px past
the right edge. Flow it with real padding instead. */
.page.page .s8rev{height:auto;min-height:259px}
.page.page .s8revin{position:relative;left:auto;top:auto;
width:100%;padding:16px}
.page.page .s8quote,.page.page .s8pn{width:100%}
/* guarantee card: bottle re-anchored right, copy given the left half */
.page.page .gbottle{left:auto;right:8px}
.page.page .gcopy{width:calc(100% - 300px);min-width:260px}
.page.page .gbody{width:100%}
.page.page .ghead p{white-space:normal}
/* closer card: photo pinned left across the copy */
.page.page .rcardPhoto{left:auto;right:0}
.page.page .rcardCopy{width:calc(100% - 400px);min-width:280px}
/* type scales with the container */
.page.page .s3h1{font-size:40px;line-height:1.1}
.page.page .s4h1,.page.page .cmp-h2,.page.page .him-h2,
.page.page .s7h,.page.page .s8h,.page.page .s9h,
.page.page .rhead,.page.page .ghead{font-size:40px;line-height:1.12}
.page.page .s3sub,.page.page .s4lede,.page.page .him-body,
.page.page .cmp-sub,.page.page .s8sub{font-size:18px}
}
/* ---------- DESKTOP: 1024px and up ----------
Two-column PDP: gallery left and sticky, buy box right. */
@media (min-width:1024px){
.page.page > .sec{max-width:1000px}
.heroSplit{display:flex;gap:56px;align-items:flex-start;
max-width:1280px;margin:32px auto 0}
.heroSplit > .sec{margin-top:0;max-width:none}
.heroSplit .heroGallery{flex:1 1 54%;min-width:0}
.heroSplit .heroBuy{flex:1 1 46%;min-width:0}
/* the buy column is NARROWER here than the stacked tablet layout, so
the tablet type bump comes back down or the intro runs into the
feature box below it, which sits at a fixed top:266px. */
.page.page .s3h1{font-size:36px}
.page.page .s3sub{font-size:16px}
.page.page .s4h1,.page.page .cmp-h2,.page.page .him-h2,
.page.page .s7h,.page.page .s8h,.page.page .s9h,
.page.page .rhead,.page.page .ghead{font-size:46px}
}
/* Footer. Not in the Figma - rebuilt to match the live site at
tryjusspray.com so the landing page does not end in a dead stop and
so the policy links a paid-traffic page needs are present.
Ground #367663 and white text are taken from the live footer.
The wordmark is the same masked SVG the nav uses, on a white chip,
matching the site.
LINKS: only ones that actually resolve. The live site's footer also
carries How It Works / Reviews / FAQ, which are in-page anchors to
sections of ITS homepage and land nowhere from here - and because
the checkout wiring repoints every href="#buy", they were silently
turning into checkout links. Contact Us is dropped too: /pages/contact
is a 404 on this store. The three policy URLs are verified live. */
.ft{background:#367663;color:#ffffff;margin-top:56px;
font-family:-apple-system,'SF Pro Display','Helvetica Neue',Helvetica,sans-serif;
-webkit-font-smoothing:antialiased}
.ftin{max-width:1120px;margin:0 auto;padding:40px 24px 28px}
.ftcols{display:flex;flex-direction:column;gap:32px}
.ftbrand{display:flex;flex-direction:column;gap:16px;max-width:280px}
.ftchip{background:#ffffff;border-radius:10px;width:88px;height:56px;
display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ftlogo{width:62px;height:10.1px;background:#005652;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-size:62px 10.1px;mask-size:62px 10.1px;
-webkit-mask-position:center;mask-position:center}
.ftblurb{margin:0;font-size:15px;line-height:1.5;color:rgba(255,255,255,0.88)}
.ftcol{display:flex;flex-direction:column;gap:12px}
.fth{margin:0;font-size:16px;font-weight:600;line-height:1.3;color:#ffffff}
.ftlink{color:rgba(255,255,255,0.88);font-size:15px;line-height:1.4;
text-decoration:none}
.ftlink:hover{color:#ffffff;text-decoration:underline}
.ftbadges{display:flex;flex-wrap:wrap;gap:10px}
.ftbadge{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,0.14);
border-radius:8px;padding:8px 12px;font-size:14px;line-height:1.2;
color:#ffffff;white-space:nowrap}
.ftbadge svg{width:14px;height:14px;flex:0 0 auto;display:block}
.ftrule{height:1px;background:rgba(255,255,255,0.22);margin:28px 0 20px}
.ftcopy{margin:0;text-align:center;font-size:14px;line-height:1.4;
color:rgba(255,255,255,0.8)}
@media (min-width:768px){
.ftin{padding:48px 32px 32px}
.ftcols{flex-direction:row;justify-content:space-between;gap:40px}
.ftbrand{flex:0 1 300px}
.ftcol{flex:0 1 auto}
}
/* Figma node 6:1321 - buy block. All hex / px / radii / tracking verbatim.
The 328x416 card "Union" is an exported SVG that already bakes in the
white fill AND the 1px #EEEEEE stroke AND the notch cut out of the
top-right corner (path steps down to y=38 from x=228). It is NOT a
mask - drawing it as a plain img behind absolutely-placed children is
the faithful translation.
Every child of the card is absolutely placed at the exact ml/mt from
Figma, so the copy block (top 54) and the #fafaf5 feature box
(top 266) sit exactly where the source puts them.
The bottle tiles are one 16x64 window per bottle over a 241.71%-wide
image pushed left -139.72% - that is Figma's crop, not a guess. The
per-tier horizontal offsets live in the .s3st1/3/6 nth-child rules,
in source DOM order (the 6-pack is authored right-to-left).
The CTA arrow asset is an UP arrow (10.276 x 10.3332) rotated 90deg.
NO PAGER DOTS. The source put five progress dots in the card's top
notch at (242,14) as the hero carousel's position indicator. The
hero is now a thumbnail gallery, which shows position directly on
the thumbnails, so a second indicator sitting in a different section
could only ever be decorative - and it was, since it never tracked
anything. Removed rather than hidden.
HERO CTA reads SECURE CHECKOUT with a padlock, because unlike every
other CTA on the page this one sits inside the buy box next to the
price and the payment marks - it is the button someone presses to
pay, so it says so. The padlock is an inline SVG, never an emoji:
emoji render as a different glyph on every platform and as a colour
image next to white type. */
.s3{width:100%;display:flex;flex-direction:column;gap:32px;align-items:flex-start;
font-family:-apple-system,'SF Pro Display','Helvetica Neue',Helvetica,sans-serif;
-webkit-font-smoothing:antialiased}
.s3 p{margin:0}
.s3card{position:relative;width:328px;max-width:100%;height:416px;flex:0 0 auto}
.s3cardbg{position:absolute;left:0;top:0;width:328px;height:416px;display:block}
.s3rate{position:absolute;left:16px;top:12px;display:flex;align-items:center;gap:6px}
.s3rate .num{color:#1c3a13;font-size:14px;line-height:1.3;letter-spacing:-0.07px;text-align:center;white-space:nowrap}
.s3rate .stars{width:70px;height:14px;display:block;flex:0 0 auto}
.s3rate .rev{color:#1c3a13;font-size:14px;line-height:1.3;letter-spacing:-0.07px;text-align:center;white-space:nowrap;text-decoration:underline;text-decoration-style:solid}
.s3copy{position:absolute;left:16px;top:54px;width:296px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.s3eyebrow{color:#6c8b17;font-size:14px;line-height:1.3;width:100%}
.s3head{display:flex;flex-direction:column;gap:16px;align-items:flex-start;width:100%}
.s3h1{text-transform:capitalize;font-weight:500;font-size:32px;line-height:1.15;letter-spacing:-0.64px;color:#1c3a13;width:100%}
.s3sub{font-size:15px;line-height:1.3;color:#666;width:100%}
.s3feat{position:absolute;left:6px;top:266px;width:316px;height:144px;background:#fafaf5;border-radius:12px;overflow:hidden}
.s3featin{position:absolute;left:16px;top:16px;width:285px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.s3featrow{display:flex;align-items:center;gap:5px}
.s3featrow img{width:14px;height:14px;display:block;flex:0 0 auto}
.s3featrow span{color:#1c3a13;font-size:15px;line-height:1.3;white-space:nowrap}
.s3lower{display:flex;flex-direction:column;gap:28px;align-items:flex-start;width:100%}
.s3tiers{display:flex;gap:8px;align-items:flex-start;width:100%}
.s3tier{position:relative;width:104px;flex:0 0 auto;box-sizing:border-box;border:1px solid #e6e6e6;border-radius:5px;
padding:14px 8px;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center}
.s3tier--pop{background:#e8ffef;border-color:#005652}
.s3tier--best{border-color:#e6e6e6}
.s3shelf{position:relative;height:64px;overflow:hidden;flex:0 0 auto}
.s3shelf.s3st1{width:67.325px}
.s3shelf.s3st3,.s3shelf.s3st6{width:70.4px}
.s3bot{position:absolute;top:50%;transform:translate(-50%,-50%);width:16px;height:64px;overflow:hidden}
.s3bot img{position:absolute;top:0;left:-139.72%;width:241.71%;height:100%;max-width:none;display:block}
.s3st1 .s3bot:nth-child(1){left:50%}
.s3st1 .s3bot:nth-child(n+2){display:none}
.s3st3 .s3bot:nth-child(1){left:calc(50% - 10px)}
.s3st3 .s3bot:nth-child(2){left:calc(50% + 1px)}
.s3st3 .s3bot:nth-child(3){left:calc(50% + 10px)}
.s3st3 .s3bot:nth-child(n+4){display:none}
.s3st6 .s3bot:nth-child(1){left:calc(50% + 16.8px)}
.s3st6 .s3bot:nth-child(2){left:calc(50% + 11.8px)}
.s3st6 .s3bot:nth-child(3){left:calc(50% + 5.8px)}
.s3st6 .s3bot:nth-child(4){left:calc(50% - 0.2px)}
.s3st6 .s3bot:nth-child(5){left:calc(50% - 7.2px)}
.s3st6 .s3bot:nth-child(6){left:calc(50% - 16px)}
.s3tiertx{display:flex;flex-direction:column;gap:8px;align-items:center;width:100%}
.s3tiername{text-transform:capitalize;font-weight:500;font-size:16px;line-height:1.2;letter-spacing:0.16px;color:#005652;text-align:center;width:100%}
.s3tierprice{font-weight:500;font-size:14px;line-height:18px;color:#d00000;text-align:center;white-space:nowrap}
.s3badge{position:absolute;left:7px;top:-10px;width:90px;height:18px;border-radius:12px;padding:2px 4px;box-sizing:border-box;
display:flex;align-items:center;justify-content:center;background:#6c8b17}
.s3badge span{text-transform:capitalize;font-weight:500;font-size:12px;line-height:14px;color:#ffffff;text-align:center;white-space:nowrap}
.s3badge--best{background:#005652}
.s3badge--none{display:none}
.s3buy{display:flex;flex-direction:column;gap:16px;align-items:flex-start;width:100%}
.s3stock{display:flex;align-items:center;gap:6px}
.s3stock img{width:8px;height:8px;display:block;flex:0 0 auto}
.s3stock p{color:#005652;font-size:16px;line-height:1.3;letter-spacing:-0.08px;white-space:nowrap}
.s3stock .lead{font-weight:500}
.s3cta{position:relative;width:328px;max-width:100%;height:56px;background:#005652;border-radius:12px;overflow:hidden;flex:0 0 auto}
.s3cta p{position:absolute;left:16px;right:48px;top:calc(50% - 0.5px);transform:translateY(-50%);
display:flex;align-items:center;gap:9px;
font-weight:500;font-size:16px;line-height:1.3;letter-spacing:0.4px;
color:#ffffff;white-space:nowrap}
.s3lock{width:15px;height:15px;flex:0 0 auto;display:block}
.s3ctaico{position:absolute;left:91.77%;right:5.08%;top:calc(50% - 0.86px);transform:translateY(-50%);
height:10.276px;display:flex;align-items:center;justify-content:center}
.s3ctaico img{width:10.276px;height:10.3332px;display:block;transform:rotate(90deg)}
.s3pay{display:flex;align-items:center;gap:5px}
.s3pm{position:relative;width:30.845px;height:21.151px;border-radius:4px;flex:0 0 auto}
.s3pm span{position:absolute;display:block}
.s3pm img{position:absolute;left:0;top:0;width:100%;height:100%;display:block;max-width:none}
.s3assure{display:flex;flex-direction:column;gap:12px;align-items:flex-start;width:100%}
.s3assurerow{display:flex;align-items:center;gap:6px}
.s3assurerow img{display:block;flex:0 0 auto}
.s3assurerow p{color:#333;font-size:14px;line-height:1.3;white-space:nowrap}
/* Figma node 6:1450 (price comparison). Every value below is verbatim
from get_design_context.
The table (13:424 / 13:425) is 720px wide inside a 336px viewport,
so it becomes a horizontal scroller. Ground is #30341d with the
bubble photo (rotated 180, 25% opacity) under a rgba(0,86,82,0.65)
tint layer, exactly as the source stacks them. The photo must stay
visible, so the tint is translucent, not a flood fill.
The JusSpray column is a white 86x331 card at left 140 / top 104,
with the bottle crop (13:427) overhanging its top edge.
Icon assets are the exported Figma SVGs: red circle-x for a miss,
white circle-check for a competitor hit, #1C3A13 circle-check
inside the white JusSpray card. None are hand drawn.
COMPETITOR NAMES are masked consistently here, which the Figma is
not: the source masked "T*wer 28" in the table, wrote "Tower 28"
unmasked twice in body copy, "Tow*r 28" once, and left the other
four brands unmasked entirely. Masking some mentions and not others
defeats the point of masking any of them, so every competitor is
masked the same way the table already did it - one vowel replaced. */
.cmp{width:100%;display:flex;flex-direction:column;gap:28px;align-items:center;
font-family:-apple-system,'SF Pro Display','Helvetica Neue',Helvetica,sans-serif}
.cmp-head{display:flex;flex-direction:column;gap:16px;align-items:flex-start;width:100%;word-break:break-word}
.cmp-h2{margin:0;text-transform:capitalize;font-weight:500;line-height:1.15;color:#1c3a13;font-size:32px;letter-spacing:-0.64px;width:281px}
.cmp-sub{margin:0;font-weight:400;color:#666;font-size:16px;line-height:1.3;width:100%}
.cmp-tablewrap{background:#ffffff;height:452px;border-radius:13px;width:100%;
overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cmp-tablewrap::-webkit-scrollbar{display:none}
.cmp-table{position:relative;width:720px;height:452px;background:#30341d;border-radius:12px;overflow:hidden}
.cmp-bgwrap{position:absolute;left:calc(50% - 79px);top:0;width:1182.043px;height:566px;
transform:translateX(-50%);display:flex;align-items:center;justify-content:center;pointer-events:none}
.cmp-bgrot{position:relative;flex:0 0 auto;width:1182.043px;height:566px;border-radius:12px;transform:rotate(180deg)}
.cmp-bgclip{position:absolute;inset:0;overflow:hidden;border-radius:12px;opacity:0.25}
.cmp-bgclip img{position:absolute;height:108.72%;left:-2.34%;top:-4.36%;width:102.92%;max-width:none}
.cmp-bgtint{position:absolute;inset:0;border-radius:12px;background:rgba(0,86,82,0.65)}
.cmp-bottle{position:absolute;left:calc(50% - 177.5px);top:calc(50% - 150px);transform:translate(-50%,-50%);
width:27px;height:106px;overflow:hidden}
.cmp-bottle img{position:absolute;height:100%;left:-139.72%;top:0;width:241.71%;max-width:none}
.cmp-labels{position:absolute;left:16px;top:120px;width:109px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.cmp-label{margin:0;flex:0 0 auto;font-weight:500;line-height:1.3;font-size:14px;color:#ffffff;letter-spacing:-0.07px;word-break:break-word}
.cmp-line{display:block;flex:0 0 auto;width:680px;height:0.5px;max-width:none}
.cmp-card{position:absolute;background:#ffffff;left:140px;top:104px;width:86px;height:331px;border-radius:8px}
.cmp-cardprice{position:absolute;margin:0;left:183.5px;top:123px;transform:translateX(-50%);
font-weight:400;line-height:1.3;color:#1c3a13;font-size:12px;text-align:center;letter-spacing:-0.06px;white-space:nowrap}
.cmp-cols{position:absolute;left:239px;top:77px;display:flex;gap:16px;align-items:center}
.cmp-col{display:flex;flex-direction:column;gap:25px;align-items:center;flex:0 0 auto}
.cmp-colname{margin:0;flex:0 0 auto;font-weight:400;line-height:1.3;font-size:16px;text-align:center;color:#ffffff;letter-spacing:-0.08px;white-space:nowrap}
.cmp-colinner{display:flex;flex-direction:column;gap:41px;align-items:center;flex:0 0 auto}
.cmp-colprice{margin:0;flex:0 0 auto;font-weight:400;line-height:1.3;font-size:12px;text-align:center;color:#ffffff;letter-spacing:-0.06px}
.cmp-icons{display:flex;flex-direction:column;gap:51px;align-items:flex-start;flex:0 0 auto;width:17px}
.cmp-icon{display:block;flex:0 0 auto;width:17px;height:17px}
.cmp-conc{position:absolute;left:164px;top:169px;width:38px;display:flex;flex-direction:column;gap:4px;align-items:center}
.cmp-conc img{display:block;flex:0 0 auto;width:17px;height:17px}
.cmp-conc p{margin:0;flex:0 0 auto;font-weight:400;line-height:1.3;color:#1c3a13;font-size:12px;text-align:center;letter-spacing:-0.06px;width:100%}
.cmp-tick{position:absolute;display:block;width:17px;height:17px}
.cmp-progress{display:block;width:199px;height:2px}
.cmp-foot{margin:0;width:100%;font-weight:400;color:#666;font-size:16px;line-height:1.3;word-break:break-word}
.cmp-ctawrap{display:flex;flex-direction:column;gap:16px;align-items:center;width:100%}
.cmp-cta{position:relative;display:block;flex:0 0 auto;background:#005652;height:56px;width:328px;border-radius:12px;overflow:hidden;text-decoration:none}
.cmp-ctatx{position:absolute;left:16px;right:48px;top:calc(50% - 0.5px);transform:translateY(-50%);
font-weight:500;font-size:16px;line-height:1.3;color:#ffffff;white-space:nowrap}
.cmp-ctaarrow{position:absolute;left:91.77%;right:5.08%;top:calc(50% - 0.86px);transform:translateY(-50%);
height:10.276px;display:flex;align-items:center;justify-content:center}
.cmp-ctaarrow img{display:block;width:10.276px;height:10.3332px;max-width:none;transform:rotate(90deg)}
.cmp-guar{display:flex;gap:6px;align-items:center;justify-content:center;flex:0 0 auto}
.cmp-guar img{display:block;flex:0 0 auto;width:14px;height:14px}
.cmp-guar span{font-weight:400;line-height:1.3;color:#333;font-size:14px;white-space:nowrap}
/* Figma node 6:1667 - "Why you can trust this before the reviews roll
in." Values verbatim from get_design_context.
Heading #1c3a13 / 32px / lh 1.15 / tracking -0.64px / capitalize.
Cards 222px wide, gap 12px, tile 177px tall, radius 12, ground
#fafaf5. Icon chip 36px, radius 4, #dae2c5, icon centred
(18px, or 21px for the Tampa card, which the source also
nudges +0.5px on both axes).
Tile copy #005652 / 24px / lh 1.15 / tracking -0.48px, absolutely
placed at left 16px, top 105px (77px on card 4).
Caption rgba(0,0,0,0.6) / 16px / lh 1.3.
Dots active #6c8b17 38x9 r125, rest rgba(108,139,23,0.25) 9px.
CTA #005652 / 56px / radius 12 / w 328; label left 16 right 48,
Medium 16 white. The Union asset is an UP arrow that the
source rotates 90deg, so it is rotated here rather than
replaced with a hand-drawn chevron. */
.s7{display:flex;flex-direction:column;gap:28px;align-items:flex-start;width:100%;font-family:-apple-system,'SF Pro Display','Helvetica Neue',Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
.s7 *{box-sizing:border-box}
.s7h{margin:0;width:100%;font-weight:500;font-size:32px;line-height:1.15;letter-spacing:-0.64px;color:#1c3a13;text-transform:capitalize;overflow-wrap:break-word}
.s7rail{display:flex;gap:12px;align-items:center;width:100%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:0px;scrollbar-width:none;-ms-overflow-style:none}
.s7rail::-webkit-scrollbar{display:none}
.s7card{display:flex;flex-direction:column;gap:16px;align-items:flex-start;width:222px;flex:0 0 auto;scroll-snap-align:start}
.s7tile{position:relative;background:#fafaf5;height:177px;overflow:hidden;border-radius:12px;width:100%}
.s7ico{position:absolute;left:16px;top:16px;width:36px;height:36px;background:#dae2c5;border-radius:4px;overflow:hidden}
.s7ico img{position:absolute;display:block;transform:translate(-50%,-50%)}
.s7tt{position:absolute;left:16px;margin:0;font-weight:500;font-size:24px;line-height:1.15;letter-spacing:-0.48px;color:#005652;text-transform:capitalize;overflow-wrap:break-word}
.s7cap{margin:0;width:100%;font-size:16px;line-height:1.3;color:rgba(0,0,0,0.6);overflow-wrap:break-word}
.s7dots{display:flex;gap:3px;align-items:center}
.s7dota{width:38px;height:9px;border-radius:125px;background:#6c8b17;flex:0 0 auto}
.s7dot{width:9px;height:9px;border-radius:125px;background:rgba(108,139,23,0.25);flex:0 0 auto}
.s7cta{display:flex;flex-direction:column;gap:16px;align-items:center;width:100%}
.s7btn{position:relative;background:#005652;height:56px;overflow:hidden;border-radius:12px;width:328px;max-width:100%;flex:0 0 auto}
.s7btnt{position:absolute;left:16px;right:48px;top:calc(50% - 0.5px);transform:translateY(-50%);margin:0;font-weight:500;font-size:16px;line-height:1.3;color:#ffffff;white-space:nowrap}
.s7arrow{position:absolute;left:91.77%;right:5.08%;height:10.276px;top:calc(50% - 0.86px);transform:translateY(-50%);display:flex;align-items:center;justify-content:center}
.s7arrow img{width:10.276px;height:10.3332px;transform:rotate(90deg);display:block;flex:0 0 auto}
.s7gr{display:flex;gap:6px;align-items:center;justify-content:center}
.s7gr img{width:14px;height:14px;display:block;flex:0 0 auto}
.s7grt{margin:0;font-size:14px;line-height:1.3;color:#333333;white-space:nowrap}
/* Figma node 6:1277, values verbatim from get_design_context.
The logo is a MASK in the source, not an image: bg-white +
maskImage. Dropping it in as a plain renders it in the file's
own colour - a faded wordmark, which is exactly what happened on
the first pass. Mask + background-color is the faithful translation.
CART AND MENU REMOVED. The source nav carried a cart pill and a
hamburger, but this is a standalone landing page: there is no menu
to open, and the cart pill went to a cart the page never adds to,
since every CTA uses a cart permalink that goes straight to
checkout. Both were controls that looked live and did nothing, so
the bar is now the wordmark alone. */
.navbar{background:#005652;border-radius:12px;height:46px;display:flex;align-items:center;padding:0 12px;position:relative}
.navlogo{width:129px;height:20.97px;background:#ffffff;flex:0 0 auto;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-size:129px 20.97px;mask-size:129px 20.97px;
-webkit-mask-position:center;mask-position:center}
/* Hero gallery. Figma node 6:1293 shipped a 4-up swipe rail of 316px
squares with a hardcoded 5-dot pager; slides 2-4 were empty #005652
placeholders. This is rebuilt as a real PDP gallery: one large main
image, a thumbnail strip under it, and prev/next arrows.
NO JAVASCRIPT. Selection is four hidden radio inputs plus sibling
selectors - the thumbnails are