/* StackRx storefront — homepage sections */
/* hero */
.sf-hero{padding:clamp(28px,4vw,56px) 0 clamp(48px,6vw,88px)}
.sf-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.sf-rating{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--sf-ink2);margin-bottom:22px}
.sf-rating b{color:var(--sf-ink)}
.sf-h1{font-family:var(--font-display);font-weight:600;font-size:clamp(46px,6.4vw,88px);line-height:.98;letter-spacing:-.025em;margin:0;text-wrap:balance}
.sf-h1 em{font-style:italic;font-weight:500;color:var(--sf-eyebrow)}
.sf-hero .sf-lead{margin:26px 0 34px;max-width:50ch}
.sf-concern-label{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sf-eyebrow);margin-bottom:14px}
.sf-hero-foot{display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;margin-top:22px;font-size:14px;font-weight:600;color:var(--sf-ink2)}
.sf-hero-foot a{color:var(--sf-ink)}

/* hero still life */
.sf-stage{position:relative;aspect-ratio:25/27;border-radius:36px;background:var(--sf-leaf);overflow:hidden;isolation:isolate}
.sf-stage::before{content:"";position:absolute;left:0;right:0;bottom:0;height:27%;background:linear-gradient(#EEF4E6,#E6EEDB);box-shadow:0 -1px 0 rgba(255,255,255,.8)}
.sf-stage .obj{position:absolute;filter:drop-shadow(0 26px 22px rgba(52,56,48,.22));max-width:none}
.sf-stage .cs{position:absolute;height:4%;border-radius:50%;background:radial-gradient(closest-side,rgba(52,56,48,.30),rgba(52,56,48,0));z-index:0}
.sf-stage .o-serm{height:41%;left:9%;bottom:17%;z-index:1}
.sf-stage .o-spray{height:62%;right:11%;bottom:17%;z-index:1}
.sf-stage .o-vial{height:47%;left:35%;bottom:7%;z-index:2}
.sf-stage .o-sachet{width:33%;right:3%;bottom:3%;transform:rotate(9deg);z-index:3}
.sf-stage .cs-serm{left:8%;width:26%;bottom:15.5%}
.sf-stage .cs-spray{right:8%;width:22%;bottom:15.5%}
.sf-stage .cs-vial{left:33%;width:29%;bottom:5.5%}
.sf-tagchip{white-space:nowrap;position:absolute;z-index:4;display:inline-flex;align-items:center;gap:10px;background:#fff;border-radius:999px;padding:10px 16px 10px 12px;font-size:13.5px;font-weight:700;box-shadow:var(--shadow-md)}
.sf-tagchip img{width:18px;height:18px}
.sf-tagchip span{font-weight:500;color:var(--sf-ink2)}
.sf-tagchip.t1{left:6%;top:7%}
.sf-tagchip.t2{right:6%;top:18%}
.sf-tagchip .ok{width:22px;height:22px;border-radius:50%;background:var(--sf-leaf);display:grid;place-items:center}
.sf-tagchip .ok svg{width:13px;height:13px}

/* trust strip */
.sf-trust{background:#fff;border-block:1px solid var(--sf-line)}
.sf-trust .sf-wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.sf-trust-item{display:flex;align-items:center;gap:14px;padding:22px 20px;border-left:1px solid var(--sf-line);font-size:14.5px;font-weight:700;line-height:1.3}
.sf-trust-item:first-child{border-left:0;padding-left:0}
.sf-trust-item .ic{width:42px;height:42px;border-radius:50%;background:var(--sf-mist);display:grid;place-items:center;flex:none}
.sf-trust-item svg{width:20px;height:20px}
.sf-trust-item small{display:block;font-size:13px;font-weight:500;color:var(--sf-ink2);margin-top:2px}

/* shop by concern bento */
.sf-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.sf-tile{position:relative;grid-column:span 7;min-height:420px;border-radius:30px;background:var(--tint);overflow:hidden;text-decoration:none;color:var(--sf-ink);display:flex;isolation:isolate}
.sf-tile.narrow{grid-column:span 5}
.sf-tile:hover{color:var(--sf-ink)}
.sf-tile-copy{position:relative;z-index:2;padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;align-items:flex-start;gap:10px;max-width:360px}
.sf-tile-count{white-space:nowrap;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sf-eyebrow)}
.sf-tile h3{font-family:var(--font-display);font-size:clamp(32px,3vw,44px);font-weight:600;letter-spacing:-.02em;line-height:1;margin:0}
.sf-tile p{margin:0;color:var(--sf-ink2);font-size:15.5px;max-width:28ch;text-wrap:pretty}
.sf-tile-go{margin-top:auto;display:inline-flex;align-items:center;gap:12px;font-weight:700;font-size:15px;background:#fff;border-radius:999px;padding:6px 6px 6px 18px;box-shadow:var(--shadow-xs)}
.sf-tile-go .ar{width:36px;height:36px;border-radius:50%;background:var(--sf-ink);color:#F4F7EE;display:grid;place-items:center;transition:transform .2s ease}
.sf-tile-go .ar svg{width:16px;height:16px}
.sf-tile:hover .sf-tile-go .ar{transform:translateX(3px)}
.sf-tile-art{position:absolute;inset:0;z-index:1;pointer-events:none}
.sf-tile-art img{position:absolute;max-width:none;transform:rotate(var(--r,0deg));filter:drop-shadow(0 22px 22px rgba(52,56,48,.2));transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.sf-tile:hover .sf-tile-art img{transform:translateY(-8px) rotate(var(--r,0deg))}
.sf-tile:hover .sf-tile-art img:nth-child(2){transition-delay:.04s}
.sf-tile:hover .sf-tile-art img:nth-child(3){transition-delay:.08s}
.sf-tile-art .photo{height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:22px}
@media(max-width:560px){.sf-tile-art .sm-hide{display:none}}
/* category tile loops: a square video on the right, rendered on the tile's own colour, faded in at its inner edges */
.sf-tile-vid video{position:absolute;top:0;right:0;height:100%;width:auto;aspect-ratio:1/1;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24%);mask-image:linear-gradient(90deg,transparent,#000 24%)}
@media(max-width:1100px){.sf-tile:not(.narrow) .sf-tile-vid video{top:auto;bottom:0;height:78%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24%),linear-gradient(180deg,transparent,#000 22%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 24%),linear-gradient(180deg,transparent,#000 22%);mask-composite:intersect}}
@media(max-width:720px){.sf-tile-vid video{top:auto;bottom:0;height:76%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24%),linear-gradient(180deg,transparent,#000 22%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 24%),linear-gradient(180deg,transparent,#000 22%);mask-composite:intersect}.sf-tile:not(.narrow) .sf-tile-vid video{height:59%}}

/* how it works */
.sf-how{background:var(--sf-mist)}
.sf-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:st}
.sf-step{background:#fff;border:1px solid var(--sf-line);border-radius:30px;padding:12px;display:flex;flex-direction:column}
.sf-step-vis{background:var(--sf-paper);border:1px solid var(--sf-line);border-radius:22px;min-height:300px;display:grid;place-items:center;padding:24px;overflow:hidden}
.sf-step-body{padding:22px 16px 14px}
.sf-step-n{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sf-eyebrow)}
.sf-step h3{font-family:var(--font-display);font-size:26px;font-weight:600;letter-spacing:-.01em;margin:8px 0 8px;line-height:1.1}
.sf-step p{margin:0;color:var(--sf-ink2);font-size:15.5px;text-wrap:pretty}
.vg-card{width:100%;max-width:300px;background:#fff;border:1px solid var(--sf-line);border-radius:18px;box-shadow:var(--shadow-md);padding:18px}
.vg-meta{display:flex;justify-content:space-between;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sf-ink2);margin-bottom:8px}
.vg-prog{height:4px;border-radius:4px;background:var(--sf-mist);overflow:hidden;margin-bottom:14px}
.vg-prog i{display:block;height:100%;width:42%;background:var(--sf-sage);border-radius:4px}
.vg-q{font-family:var(--font-display);font-size:18px;font-weight:600;margin:0 0 6px;line-height:1.25}
.vg-opt{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--sf-line);border-radius:12px;font-size:13.5px;font-weight:600;margin-top:8px}
.vg-opt .r{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--sf-line2);flex:none}
.vg-opt.on{border-color:var(--sf-ink);background:#F7FAF2}
.vg-opt.on .r{border:5px solid var(--sf-ink)}
.vg-chat{width:100%;max-width:310px;display:flex;flex-direction:column;gap:10px}
.vg-who{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;margin-bottom:2px}
.vg-who small{display:block;font-size:12px;font-weight:500;color:var(--sf-ink2)}
.vg-av{width:36px;height:36px;border-radius:50%;background:var(--sf-leaf);display:grid;place-items:center;overflow:hidden;flex:none}
.vg-av img{width:20px;height:20px}
.vg-bub{background:#fff;border:1px solid var(--sf-line);border-radius:18px 18px 18px 6px;padding:12px 14px;font-size:13.5px;line-height:1.45;box-shadow:var(--shadow-sm);max-width:92%}
.vg-bub.me{align-self:flex-end;background:var(--sf-ink);border-color:var(--sf-ink);color:#F4F7EE;border-radius:18px 18px 6px 18px;max-width:70%}
.vg-ship{display:flex;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:10px;border-bottom:1px solid var(--sf-line)}
.vg-ship .sf-st{width:52px;height:52px;border-radius:12px;flex:none}
.vg-ship b{display:block;font-size:14px}
.vg-ship span{font-size:12.5px;color:var(--sf-ink2)}
.vg-steps{list-style:none;margin:0;padding:0}
.vg-steps li{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;font-size:13px;font-weight:700}
.vg-steps li span{font-size:12px;font-weight:500;color:var(--sf-ink2)}
.vg-steps .d{width:12px;height:12px;border-radius:50%;background:var(--sf-sage);justify-self:center;position:relative;z-index:1}
.vg-steps li:not(:last-child)::after{content:"";position:absolute;left:8.5px;top:calc(50% + 6px);height:100%;width:1px;background:var(--sf-line2)}
.vg-steps .now .d{background:var(--sf-ink);box-shadow:0 0 0 4px var(--sf-leaf)}
.vg-steps .todo{color:var(--sf-ink2)}
.vg-steps .todo .d{background:#fff;border:1.5px solid var(--sf-line2)}

/* made for one (compounding) */
.sf-made{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,6vw,96px);align-items:center}
.sf-made .sf-lead{margin-top:20px;max-width:50ch}
.sf-made-list{list-style:none;margin:36px 0 0;padding:0;border-top:1.5px solid var(--sf-ink)}
.sf-made-list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:20px 0;border-bottom:1px solid var(--sf-line2);cursor:default;outline:none}
.sf-made-list .n{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--sf-ink);display:grid;place-items:center;font-size:13px;font-weight:800;transition:background .2s ease,color .2s ease}
.sf-made-list li.hot .n{background:var(--sf-ink);color:#fff}
.sf-made-list h3{font-size:17px;font-weight:700;margin:3px 0 4px}
.sf-made-list p{margin:0;color:var(--sf-ink2);font-size:15px;text-wrap:pretty}
.sf-anno{position:relative;border-radius:36px;background:var(--sf-leaf);aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden}
.sf-anno::before{content:"";position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(#EEF4E6,#E6EEDB)}
.sf-anno-label{position:absolute;inset:0}
.sf-anno-label img{display:block;width:100%;height:100%;object-fit:cover}
.sf-pin{position:absolute;width:32px;height:32px;margin:-16px 0 0 -16px;border-radius:50%;background:var(--sf-ink);color:#fff;font-size:13px;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 6px rgba(221,235,203,.9);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}
.sf-pin.hot{transform:scale(1.2);box-shadow:0 0 0 10px rgba(149,159,137,.45)}
@media(max-width:560px){.sf-pin{width:24px;height:24px;margin:-12px 0 0 -12px;font-size:11px;box-shadow:0 0 0 4px rgba(221,235,203,.9)}.sf-pin.hot{box-shadow:0 0 0 7px rgba(149,159,137,.45)}}
.sf-anno-cap{display:block;margin-top:14px;font-size:12.5px;font-weight:600;color:var(--sf-ink2)}

/* reviews */
.sf-score{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--sf-line);border-radius:22px;padding:16px 22px}
.sf-score .big{font-family:var(--font-display);font-size:44px;font-weight:600;line-height:1}
.sf-score .stars{font-size:18px}
.sf-score small{display:block;font-size:13px;color:var(--sf-ink2);font-weight:600}
.sf-revgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sf-rev{background:#fff;border:1px solid var(--sf-line);border-radius:26px;padding:28px;display:flex;flex-direction:column;gap:18px}
.sf-rev blockquote{margin:0;font-family:var(--font-display);font-size:21px;line-height:1.4;font-weight:500;letter-spacing:-.005em;text-wrap:pretty}
.sf-rev-who{margin-top:auto;display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--sf-line);text-decoration:none}
.sf-rev-who .sf-st{width:46px;height:46px;border-radius:12px;flex:none}
.sf-rev-who b{display:block;font-size:14.5px}
.sf-rev-who span span{font-size:13px;color:var(--sf-ink2)}

/* faq + cta */
.sf-faqwrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.sf-faqwrap .sf-lead{margin:18px 0 26px}
.sf-faqwrap>div:first-child{position:sticky;top:calc(var(--sf-head) + 32px)}
.sf-cta{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:center;background:var(--sf-ink);color:#F4F7EE;border-radius:36px;padding:clamp(36px,6vw,80px);position:relative;overflow:hidden}
.sf-cta .sf-h2{color:#fff}
.sf-cta .sf-lead{color:#D3DAC8;margin-top:18px;max-width:46ch}
.sf-cta .sf-eyebrow{color:#C9D3BC;margin-bottom:16px}
.sf-cta-mark{width:44px;height:auto;margin-bottom:26px}
.sf-cta .sf-check{background:rgba(244,247,238,.07);border:1px solid rgba(244,247,238,.16);border-radius:26px;padding:26px}
/* "Ready when you are" on a photo: on wide screens the silhouette fills the panel and the copy and state check sit on
   frosted glass over the sky; below 1240px the photo sits on top and fades into the panel */
.sf-cta-photo{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;background:#1B2317;min-height:clamp(560px,50vw,680px)}
.sf-cta-art{position:absolute;inset:0}
/* a man walking down a grassy slope and out of frame: a clip that plays once over its first frame, on the grass's dark green */
.sf-cta-art picture{display:block;width:100%;height:100%}
.sf-cta-art img,.sf-cta-art video{width:100%;height:100%;object-fit:cover;object-position:40% 45%}
.sf-cta-art video{position:absolute;inset:0;opacity:0;transition:opacity .25s ease}   /* he's walking: a long fade would show him twice */
.sf-cta-art video.is-on{opacity:1}
.sf-cta-body{grid-column:2;position:relative;display:grid;gap:26px;background:rgba(20,27,17,.7);-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);border:1px solid rgba(221,234,210,.18);border-radius:28px;padding:clamp(26px,3vw,40px)}
.sf-cta-photo .sf-eyebrow{color:#CFE0C2}
.sf-cta-photo .sf-lead{color:#DCE6D4}
.sf-cta-photo .sf-cta-mark{margin-bottom:20px}
.sf-cta-photo .sf-check{background:rgba(236,244,230,.08);border-color:rgba(221,234,210,.2)}
.sf-cta-photo .sf-check label{color:#CFE0C2}
.sf-cta-photo .sf-check-msg{color:#DCE6D4}

.sf-cta-photo :focus-visible{outline-color:#F4F7EE}

@media(max-width:1100px){.sf-trust .sf-wrap{grid-template-columns:repeat(2,minmax(0,1fr))}.sf-trust-item:nth-child(3){border-left:0;padding-left:0}.sf-trust-item:nth-child(n+3){border-top:1px solid var(--sf-line)}.sf-tile,.sf-tile.narrow{grid-column:span 6}}
@media(max-width:960px){.sf-hero-grid,.sf-made,.sf-faqwrap,.sf-cta{grid-template-columns:minmax(0,1fr)}.sf-stage{max-width:620px;width:100%;margin:0 auto}.sf-steps,.sf-revgrid{grid-template-columns:minmax(0,1fr);max-width:620px}.sf-faqwrap>div:first-child{position:static}.sf-anno{max-width:620px;width:100%;margin:0 auto}}
@media(max-width:720px){.sf-tile,.sf-tile.narrow{grid-column:1/-1;min-height:380px}}
@media(max-width:520px){.sf-trust .sf-wrap{grid-template-columns:minmax(0,1fr)}.sf-trust-item{border-left:0!important;padding-left:0!important;border-top:1px solid var(--sf-line)}.sf-trust-item:first-child{border-top:0}.sf-tagchip.t2{display:none}}

/* hero: looping product video on a sage ground sampled from the video's edges */
.sf-hero{--hero-bg:#9EAD89;background:var(--hero-bg)}
.sf-hero .sf-rating,.sf-hero .sf-lead,.sf-hero .sf-hero-foot{color:#2B3025}
.sf-hero .sf-rating .stars{color:#5B4410}
.sf-hero .sf-h1 em,.sf-hero .sf-concern-label{color:#2F4226}
.sf-stage.is-video{background:var(--hero-bg);aspect-ratio:4/5;border-radius:0;overflow:visible}
.sf-stage.is-video::before{content:none}
.sf-stage.is-video .sf-tagchip.t2{top:auto;right:auto;left:3%;bottom:5%}
.sf-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent);
  mask-composite:intersect}

/* hero media column: stage + disclaimer */
.sf-hero-media{min-width:0}
.sf-hero-media .sf-imgnote{margin-top:10px}
.sf-anno-wrap{min-width:0}
@media(max-width:960px){.sf-hero-media,.sf-anno-wrap{max-width:620px;width:100%;margin:0 auto}}

/* category tiles sit on the deeper, muted category ground: charcoal type throughout */
.sf-tile p,.sf-tile .sf-tile-count{color:var(--sf-ink)}

/* the photo band and the photo panel on narrower screens: the band gives the photo less width, then both stack with
   the photo on top, fading into the background, and the copy below it */
@media(max-width:1240px){.sf-cta-photo{grid-template-columns:minmax(0,1fr);padding:0;gap:0;min-height:0}.sf-cta-art{position:relative;display:block;aspect-ratio:16/9}.sf-cta-art img,.sf-cta-art video{-webkit-mask-image:linear-gradient(180deg,#000 68%,transparent);mask-image:linear-gradient(180deg,#000 68%,transparent)}.sf-cta-body{grid-column:auto;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:center;margin-top:-6%;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;border-radius:0;padding:0 clamp(28px,5vw,64px) 56px}.sf-cta-photo .sf-check{background:rgba(20,27,17,.5)}}
@media(max-width:960px){.sf-cta-art{aspect-ratio:4/3}.sf-cta-body{grid-template-columns:minmax(0,1fr);gap:26px;margin-top:-10%;padding:0 clamp(22px,5vw,40px) 48px}}

/* Homepage hero: the glow portrait in brand colours (charcoal-green room, cream sun) runs full-bleed up under a
   see-through top bar and header; one message, one button, and a pill per category under it.
   store.js sizes --glowhero-top to the top bar and header, and turns the header back into the normal paper header
   (.is-solid) once you scroll; an open menu does the same. */
:root{--glowhero-top:calc(var(--sf-util) + var(--sf-head) + 2px)}   /* + the 1px borders under the top bar and the header */
.sf-glowhero{--gh-bg:#2B2F27;--gh-shade:rgba(22,25,19,.5)}
.sf-glowhero-page .sf-util{position:relative;z-index:61;background:transparent;border-bottom:1px solid rgba(244,247,238,.14)}
.sf-glowhero-page .sf-util span+span::before{background:rgba(244,247,238,.45)}
.sf-glowhero-page .sf-head{transition:background-color .3s ease,border-color .3s ease}
.sf-glowhero-page .sf-head:not(.is-solid):not(:has(.sf-nav-item.open)){background:transparent;border-bottom-color:rgba(244,247,238,.14);-webkit-backdrop-filter:none;backdrop-filter:none}
.sf-glowhero-page .sf-head:not(.is-solid):not(:has(.sf-nav-item.open)) .sf-nav-link,
.sf-glowhero-page .sf-head:not(.is-solid):not(:has(.sf-nav-item.open)) .sf-signin{color:#fff}
.sf-glowhero-page .sf-head:not(.is-solid):not(:has(.sf-nav-item.open)) .sf-nav-link:hover,
.sf-glowhero-page .sf-head:not(.is-solid):not(:has(.sf-nav-item.open)) .sf-signin:hover{background:rgba(255,255,255,.12)}
.sf-glowhero-page .sf-head:not(.is-solid):not(:has(.sf-nav-item.open)) .sf-logo svg [fill="#343830"]{fill:#FBFCF9}
.sf-glowhero-page .sf-head:not(.is-solid):not(:has(.sf-nav-item.open)) .sf-logo img{filter:brightness(0) invert(1)}
.sf-glowhero-page .sf-head:not(.is-solid):not(:has(.sf-nav-item.open)) .sf-btn-dark{background:#FBFCF9;color:var(--sf-ink)}
.sf-glowhero-page .sf-head:not(.is-solid):not(:has(.sf-nav-item.open)) .sf-burger{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.sf-glowhero-page .sf-head:not(.is-solid):not(:has(.sf-nav-item.open)) :focus-visible,.sf-glowhero-page .sf-util :focus-visible{outline-color:#fff}
.sf-glowhero{position:relative;overflow:hidden;display:flex;align-items:center;min-height:clamp(660px,94vh,920px);margin-top:calc(-1 * var(--glowhero-top));padding-top:var(--glowhero-top);background:var(--gh-bg);color:#fff}
.sf-glowhero-art{position:absolute;top:0;right:0;bottom:0;width:74%}
.sf-glowhero-art picture{display:block;width:100%;height:100%}
.sf-glowhero-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 30%;-webkit-mask-image:linear-gradient(90deg,transparent 4%,#000 38%);mask-image:linear-gradient(90deg,transparent 4%,#000 38%)}
.sf-glowhero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--gh-bg) 2%,transparent 30%);pointer-events:none}
.sf-glowhero::before{content:"";position:absolute;z-index:1;top:0;left:0;right:0;height:calc(var(--glowhero-top) + 140px);background:linear-gradient(180deg,var(--gh-shade),transparent);pointer-events:none}   /* so white links read on the bright glow */
.sf-glowhero-inner{position:relative;z-index:2;width:100%;padding-top:40px;padding-bottom:88px}
.sf-glowhero-copy{max-width:35rem}
.sf-glowhero-h1{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(46px,5.6vw,80px);line-height:.97;letter-spacing:-.025em;color:#fff;text-wrap:balance}
.sf-glowhero-h1 em{font-style:italic;font-weight:500;color:var(--stack-lightest,#DDEBCB)}
.sf-glowhero-lead{margin:28px 0 36px;max-width:40ch;font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:var(--on-dark,#F4F7EE);text-wrap:pretty}
.sf-glowhero-cta{display:flex;align-items:center;flex-wrap:wrap;gap:14px 28px}
.sf-glowhero-btn{min-height:56px;padding:0 28px;font-size:16px;background:var(--stack-lightest,#DDEBCB);color:var(--sf-ink)}
.sf-glowhero-btn:hover{background:#E9F1DF;color:var(--sf-ink)}
.sf-glowhero-link{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:6px}
.sf-glowhero-link:hover{color:#fff;text-decoration-color:#fff}
.sf-glowhero :focus-visible{outline-color:#fff}
/* "Or start with a concern": a pill per category page, over the photo (one row that scrolls sideways on phones) */
.sf-glowhero-concerns{margin-top:40px}
.sf-glowhero-or{margin:0 0 14px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#C3CBB8}
.sf-pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.sf-pill{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px 0 6px;border-radius:999px;background:rgba(244,247,238,.1);border:1px solid rgba(244,247,238,.24);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .2s ease,border-color .2s ease}
.sf-pill:hover{background:rgba(244,247,238,.18);border-color:rgba(244,247,238,.45);color:#fff}
.sf-pill img,.sf-pill-ic{width:36px;height:36px;border-radius:50%;object-fit:cover}
.sf-pill-ic{display:grid;place-items:center;background:#DDEBCB;color:#2B2F27}
.sf-pill-ic svg{width:20px;height:20px}
@media(max-width:1100px){.sf-glowhero{min-height:clamp(620px,78vh,820px)}.sf-glowhero-lead{max-width:33ch}.sf-glowhero-art{width:78%}.sf-glowhero-copy{max-width:27rem}}
/* tablets and phones: the photo sits on top, full width under the bar and header, and fades into the copy below it */
@media(max-width:960px){
  .sf-glowhero{display:block;min-height:0;padding-top:0}
  .sf-glowhero-art{position:relative;width:100%;aspect-ratio:16/11}
  .sf-glowhero-art img{object-position:50% 30%;-webkit-mask-image:none;mask-image:none}
  .sf-glowhero-art::after{background:linear-gradient(0deg,var(--gh-bg) 3%,transparent 40%)}
  .sf-glowhero::before{height:calc(var(--glowhero-top) + 90px)}
  .sf-glowhero-inner{margin-top:-9%;padding-top:0;padding-bottom:72px}
  .sf-glowhero-copy{max-width:34rem}
}
@media(max-width:720px){
  .sf-glowhero-art{aspect-ratio:4/5}
  .sf-glowhero-art img{object-position:50% 20%}
  .sf-glowhero-art::after{background:linear-gradient(0deg,var(--gh-bg) 4%,transparent 42%)}
  .sf-glowhero-inner{margin-top:-30%;padding-bottom:56px}
  .sf-glowhero-h1{font-size:clamp(42px,12vw,56px)}
  .sf-glowhero-lead{margin:18px 0 26px}
  .sf-glowhero-cta{flex-direction:column;align-items:stretch;gap:18px}
  .sf-glowhero-btn{width:100%}
  .sf-glowhero-link{justify-content:center}
  .sf-glowhero-concerns{margin-top:30px}
  .sf-glowhero-or{text-align:center}
  .sf-pills{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(-1 * var(--sf-gut));padding:0 var(--sf-gut) 4px;scrollbar-width:none}
  .sf-pills::-webkit-scrollbar{display:none}
  .sf-pills li{flex:none}
}

/* "Shop by concern" panels (build.py concern_panels, store.js initPanels). Wide screens: a row of six; the open one
   widens in its category's deep colour, with a product loop in a window, its summary and every treatment with its
   price (pointing at one plays its loop); the others fold to tabs with the name on its side. Narrower: a list that
   opens one at a time. Without JavaScript every panel shows open, one under another. */
.sf-pns{display:flex;flex-direction:column;gap:10px}
.sf-pn{--pn-fg:#fff;--pn-sub:#EEF0EA;--pn-line:rgba(255,255,255,.24);position:relative;border-radius:24px;overflow:hidden;background:var(--pn-tint);color:var(--sf-ink)}
.sf-pn.is-open,html:not(.js) .sf-pn{background:var(--pn-deep);color:var(--pn-fg)}
.sf-pn-tab{display:grid;grid-template-columns:52px minmax(0,1fr) auto;grid-template-areas:"chip name chev" "chip count chev";align-items:center;column-gap:14px;row-gap:2px;width:100%;min-height:76px;padding:12px 18px 12px 12px;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.sf-pn-chip{grid-area:chip;flex:none;width:52px;height:52px;border-radius:50%;object-fit:cover;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.sf-pn-tab:hover .sf-pn-chip{transform:scale(1.07)}
.sf-pn-ic{display:grid;place-items:center;background:#FBFCF9;color:#2B2F27}
.sf-pn-ic svg{width:24px;height:24px}
.sf-pn-name{grid-area:name;align-self:end;font-family:var(--font-display);font-weight:500;font-size:23px;line-height:1.15;letter-spacing:-.01em}
.sf-pn-tcount{grid-area:count;align-self:start;font-size:13px;font-weight:600;white-space:nowrap}
.sf-pn-chev{grid-area:chev;flex:none;width:20px;height:20px;transition:transform .3s ease}
.sf-pn.is-open .sf-pn-chev{transform:rotate(180deg)}
.js .sf-pn:not(.is-open) .sf-pn-body{display:none}
.js .sf-pn.is-open .sf-pn-body{animation:sf-pn-in .5s .12s both}
@keyframes sf-pn-in{from{opacity:0}to{opacity:1}}
.sf-pn-body{padding:0 14px 18px}
.sf-pn-win{position:relative;display:block;aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:var(--pn-tint)}
.sf-pn-win img,.sf-pn-win video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.sf-pn-win video{opacity:0;transition:opacity .4s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.sf-pn-win video.is-on{opacity:1}
.sf-pn-win:hover img,.sf-pn-win:hover video{transform:scale(1.04)}
.sf-pn-cap{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;padding:8px 14px;border-radius:999px;background:rgba(251,252,249,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:13.5px;color:var(--sf-ink2);white-space:nowrap}
.sf-pn-cap b{font-weight:700;color:var(--sf-ink)}
/* Labs: the window shows what's tested instead of a product */
.sf-pn-labwin{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:clamp(24px,3.4vw,44px);background:#F1EBDB;color:var(--sf-ink);text-decoration:none}
.sf-pn-labwin:hover{color:var(--sf-ink)}
.sf-pn-lab-n{font-family:var(--font-display);font-weight:600;font-size:clamp(76px,8vw,112px);line-height:.9;letter-spacing:-.03em}
.sf-pn-lab-k{font-size:17px;font-weight:600;color:var(--sf-ink2)}
.sf-pn-lab-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.sf-pn-lab-tags span{padding:7px 12px;border-radius:999px;background:#FBFCF9;border:1px solid rgba(52,56,48,.12);font-size:13px;font-weight:600}
.sf-pn-copy{display:flex;flex-direction:column;gap:12px;padding:16px 4px 0}
.sf-pn-count{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pn-sub)}
.sf-pn-title{margin:0;font-family:var(--font-display);font-weight:500;font-size:44px;line-height:1.02;letter-spacing:-.015em;outline:0}
.sf-pn-blurb{margin:0;font-size:16px;line-height:1.5;color:var(--pn-sub)}
.sf-pn-list{list-style:none;margin:4px 0 0;padding:0;border-top:1px solid var(--pn-line)}
.sf-pn-list a{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 0;border-bottom:1px solid var(--pn-line);color:var(--pn-fg);text-decoration:none;font-size:14.5px}
.sf-pn-list a:hover{color:var(--pn-fg)}
.sf-pn-list a:hover .sf-pn-pname{text-decoration:underline;text-underline-offset:4px}
.sf-pn-thumb{flex:none;width:40px;height:40px;border-radius:10px;object-fit:cover}
.sf-pn-pname{flex:1;font-weight:600}
.sf-pn-price{white-space:nowrap;color:var(--pn-sub)}
.sf-pn-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;min-height:48px;margin-top:6px;padding:0 22px;border-radius:999px;background:#fff;color:var(--sf-ink);font-size:15px;font-weight:700;text-decoration:none;transition:transform .15s ease}
.sf-pn-cta:hover{color:var(--sf-ink);transform:translateX(2px)}
.sf-pn-cta svg{width:16px;height:16px}
.sf-pn :focus-visible{outline-color:currentColor}
/* the tab already names the category and counts its treatments, so the list doesn't repeat them (screen readers still get the heading) */
@media(max-width:1239px){.js .sf-pn-title,.js .sf-pn-count{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.sf-pn-cta{align-self:stretch;justify-content:center}}
@media(min-width:720px) and (max-width:1239px){
  .js .sf-pn.is-open .sf-pn-body,html:not(.js) .sf-pn-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start;padding:0 18px 22px}
  .sf-pn-copy{padding-top:0}
}
@media(min-width:1240px){
  .js .sf-pns{flex-direction:row;gap:12px;height:620px}
  .js .sf-pn{flex:1 1 0;min-width:0;border-radius:28px;transition:flex-grow .6s cubic-bezier(.2,.7,.2,1),background-color .4s ease}
  .js .sf-pn.is-open{flex-grow:11}
  .js .sf-pn:not(.is-open):hover{background:color-mix(in srgb,var(--pn-tint) 82%,var(--pn-deep))}
  .js .sf-pn-tab{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:0;min-height:0;padding:22px 0 30px}
  .js .sf-pn-name{writing-mode:vertical-rl;transform:rotate(180deg);font-size:28px;line-height:1;white-space:nowrap}
  .js .sf-pn-tcount,.js .sf-pn-chev{display:none}
  .js .sf-pn.is-open .sf-pn-tab{visibility:hidden}
  .js .sf-pn-body{position:absolute;inset:0;padding:0}
  .js .sf-pn-win{position:absolute;top:20px;right:20px;bottom:20px;width:min(464px,calc(100% - 342px));aspect-ratio:auto;border-radius:20px}
  .js .sf-pn-copy{position:absolute;top:0;left:0;bottom:0;width:322px;box-sizing:border-box;padding:38px 30px 34px 38px;gap:14px}
  .js .sf-pn-list{margin-top:auto}
  .js .sf-pn-thumb{display:none}
  .js .sf-pn-list a{min-height:40px;padding:4px 0;gap:10px;font-size:14px}
  .js .sf-pn-list a::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:transparent;transition:background .2s ease}
  .js .sf-pn-list a.on::before{background:currentColor}
}
/* the example question in "How it works" is live: each answer opens the finder on that goal */
button.vg-opt{width:100%;background:#fff;font:inherit;font-size:13.5px;font-weight:600;color:var(--sf-ink);text-align:left;cursor:pointer;transition:border-color .15s ease,background .15s ease}
button.vg-opt:hover{border-color:var(--sf-ink);background:var(--sf-mist)}
button.vg-opt.on:hover{background:#F7FAF2}
.vg-try{margin:12px 0 0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sf-ink3)}
.sf-made-more{margin-top:22px}
/* the Learn row (build.py learn_band) uses the Learn cards from pages.css */
.sf-learn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:18px}
.sf-learn-card{display:flex;flex-direction:column;gap:10px;padding:26px 26px 22px;border:1px solid var(--sf-line);border-radius:24px;background:#fff;color:var(--sf-ink);text-decoration:none;transition:border-color .15s ease,box-shadow .2s ease,transform .2s ease}
.sf-learn-card:hover{border-color:var(--sf-line2);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.sf-learn-card h2,.sf-learn-card h3{font-family:var(--font-display);font-size:25px;font-weight:600;line-height:1.15;letter-spacing:-.01em;margin:4px 0 0;text-wrap:balance}
.sf-learn-card p{margin:0;font-size:15px;line-height:1.55;color:var(--sf-ink2)}
.sf-learn-min{margin-top:auto;padding-top:8px;font-size:13px;font-weight:700;color:var(--sf-ink3)}
@media(prefers-reduced-motion:reduce){.sf-learn-card,.sf-learn-card:hover{transition:none;transform:none}}

/* Labs membership band (links to /labs): the brand hero's charcoal green and cream sun, with an example results card */
.sf-labs{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:center;position:relative;overflow:hidden;isolation:isolate;border-radius:36px;padding:clamp(32px,5.5vw,76px);background:#2B2F27;color:#F4F7EE}
.sf-labs::before{content:"";position:absolute;z-index:-1;right:-6%;top:50%;width:min(620px,62%);aspect-ratio:1;border-radius:50%;transform:translateY(-50%);background:radial-gradient(closest-side,#F3EBD3 0,#E9DFC0 58%,rgba(233,223,192,0) 100%);opacity:.9}
.sf-labs .sf-eyebrow{color:#C9D3BC;margin-bottom:16px}
.sf-labs .sf-h2{color:#fff}
.sf-labs .sf-h2 em{font-style:italic;font-weight:500;color:#DDEBCB}
.sf-labs .sf-lead{color:#D3DAC8;margin:18px 0 28px;max-width:46ch}
.sf-labs-card{justify-self:center;width:min(340px,100%);padding:18px 18px 14px;border-radius:24px;background:#FBFCF9;color:var(--sf-ink);box-shadow:0 30px 60px -24px rgba(10,12,8,.55)}
.sf-labs-top{display:flex;justify-content:space-between;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sf-eyebrow);margin-bottom:6px}
.sf-labs-top span+span{letter-spacing:0;text-transform:none;font-weight:600;color:var(--sf-ink2)}
.sf-labs-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:2px 10px;align-items:center;padding:9px 0;border-top:1px solid var(--sf-line)}
.sf-labs-row:first-of-type{border-top:0}
.sf-labs-row b{font-size:14px}
.sf-labs-row .v{font-size:14px;font-weight:700;white-space:nowrap}
.sf-labs-row .v small{font-size:11px;font-weight:600;color:var(--sf-ink2)}
.sf-labs-row .t{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap}
.sf-labs-row .t.ok{background:var(--sf-leaf);color:#2F4226}
.sf-labs-row .t.watch{background:#F4E6C6;color:#6B5217}
.sf-labs-row .t.low{background:#F1D9CF;color:#7A3E2E}
.sf-labs-row .bar{grid-column:1/-1;position:relative;height:6px;border-radius:99px;background:linear-gradient(90deg,#F1D9CF 0 22%,#DDEBCB 22% 70%,#F4E6C6 70%)}
.sf-labs-row .bar i{position:absolute;top:50%;left:calc(var(--x) * 100%);width:12px;height:12px;border-radius:50%;background:var(--sf-ink);border:2px solid #fff;transform:translate(-50%,-50%)}
.sf-labs-note{display:flex;align-items:center;gap:10px;margin:10px 0 0;padding-top:12px;border-top:1px solid var(--sf-line);font-size:13.5px;font-weight:700}
.sf-labs-note .av{width:30px;height:30px;border-radius:50%;background:var(--sf-leaf);display:grid;place-items:center;flex:none}
.sf-labs-note .av img{width:14px;height:auto}
@media(max-width:960px){.sf-labs{grid-template-columns:minmax(0,1fr)}.sf-labs::before{right:-30%;top:auto;bottom:-24%;transform:none;width:120%}}