/* OSSO conversion layer — additive. Palette: neutrals #2A2F2E–#F6F7F7, AM #FF7548, PM #BA9CD2. */

/* 1. announcement bar: rotating true lines, fixed height (no layout shift) */
.announce{position:relative;height:34px;white-space:nowrap}
.announce-rot{position:relative;height:34px;max-width:var(--maxw);margin:0 auto}
.announce-line{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;color:var(--ink);opacity:0;transform:translate3d(0,6px,0);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.announce-line.on{opacity:1;transform:none;pointer-events:auto}
.announce-line .dot{width:7px;height:7px;vertical-align:0}
.announce-line .dot-pm{margin-left:-3px}
.announce-line:hover span:last-child{text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.announce-line{transition:opacity .2s;transform:none}}

/* 4. CTA rows after major sections */
.cta-row{display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px var(--pad) 48px;text-align:center}
.cta-row .btn{min-width:220px}
.cta-sub{margin:0;font-size:13px;color:var(--mute);letter-spacing:.01em;text-wrap:balance;max-width:520px}
.o3-sec + .cta-row{padding-top:28px}
.faq + .cta-row{padding-top:0}

/* 6. subscribe-and-save framing */
.sub-perks{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px;font-size:13.5px;color:var(--ink2)}
.sub-perks li{display:flex;align-items:center;gap:9px}
.sub-perks li::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.upsell-line{display:flex;align-items:center;gap:6px;width:100%;margin:14px 0 0;padding:12px 14px;min-height:44px;border:1px dashed rgba(42,47,46,.35);border-radius:12px;background:rgba(246,247,247,.6);font:600 13.5px/1.35 var(--body);color:var(--ink);text-align:left;cursor:pointer}
.upsell-line:hover{background:var(--paper);border-style:solid}
.g-save{display:inline-block;margin-top:6px;padding:4px 9px;border-radius:999px;background:var(--ink);color:#fff;font:700 10.5px/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;animation:pop-in .6s cubic-bezier(.2,.9,.3,1.3) both;animation-delay:.3s;animation-play-state:paused}
.gallery a.in .g-save,.gallery .g-full .g-save{animation-play-state:running}
@keyframes pop-in{from{opacity:0;transform:scale(.7) translateY(4px)}to{opacity:1;transform:none}}

/* 5. how it works strip + guarantee block */
.hiw{max-width:900px;margin:44px auto 0;text-align:center}
.hiw-h{font-family:var(--head);font-stretch:66%;font-weight:800;font-size:clamp(34px,8vw,56px);line-height:.95;margin:0;color:var(--ink)}
.hiw-steps{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px;text-align:left}
.hiw-steps li{display:grid;grid-template-columns:44px 1fr;column-gap:12px;align-items:baseline;padding:16px 18px;border-radius:var(--r);background:rgba(246,247,247,.72);border:1px solid rgba(255,255,255,.8)}
.hiw-n{grid-row:span 2;font:800 22px/1 var(--head);font-stretch:100%;color:var(--am)}
.hiw-steps li:nth-child(2) .hiw-n{color:var(--pm)}
.hiw-steps li:nth-child(3) .hiw-n{color:var(--ink)}
.hiw-steps b{font:800 18px/1.1 var(--head);font-stretch:110%;text-transform:uppercase;letter-spacing:.02em;color:var(--ink)}
.hiw-steps span:last-child{font-size:14px;color:var(--ink2);line-height:1.45;margin-top:4px}
.guar{display:grid;grid-template-columns:76px 1fr;gap:16px;align-items:center;max-width:900px;margin:22px auto 0;padding:20px;border-radius:var(--r);background:var(--ink);color:#e9ecec}
.guar .kicker{color:#aab1b0;margin-bottom:6px}
.guar-seal{width:76px;height:76px;border-radius:50%;display:grid;place-content:center;text-align:center;background:conic-gradient(var(--am) 0 50%,var(--pm) 50% 100%);position:relative}
.guar-seal::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--ink)}
.guar-seal span,.guar-seal small{position:relative;color:#fff;line-height:1}
.guar-seal span{font:800 28px/1 var(--head);font-stretch:100%}
.guar-seal small{font:700 9px/1.4 var(--body);letter-spacing:.16em;text-transform:uppercase}
.guar-h{font-family:var(--head);font-stretch:110%;font-weight:800;text-transform:uppercase;font-size:20px;line-height:1.05;margin:0;color:#fff}
.guar-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px;font-size:13.5px}
.guar-list li::before{content:"· ";color:var(--am)}
.guar-fine{margin:8px 0 0;font-size:11.5px;color:#9aa1a0}
.guar-cta{grid-column:1/-1;background:#f6f7f7;color:var(--ink)}
.guar-cta:hover{background:#fff}
@media (min-width:760px){
  .hiw-steps{grid-template-columns:repeat(3,1fr);gap:14px}
  .hiw-steps li{grid-template-columns:1fr;padding:22px}
  .hiw-n{grid-row:auto;margin-bottom:14px}
  .guar{grid-template-columns:96px 1fr auto;gap:26px;padding:26px 30px}
  .guar-seal{width:96px;height:96px}
  .guar-seal span{font-size:34px}
  .guar-h{font-size:24px}
  .guar-cta{grid-column:auto}
}

/* 2. sticky shop bar */
.sticky-cta{padding:7px 7px 7px 7px;gap:10px}
.sticky-cta .sc-prod{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none;color:var(--ink);min-height:44px}
.sticky-cta .sc-prod img{width:46px;height:auto;border-radius:10px;flex:none;background:var(--paper)}
.sticky-cta .sc-txt{display:block;min-width:0}
.sticky-cta .sc-txt b{display:block;font-size:13.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-cta .sc-txt span{display:block;font-size:12px;line-height:1.3;color:var(--mute);white-space:nowrap}
.sticky-cta .sc-perk,.sticky-cta .sc-shop{display:none}
.sticky-cta .sc-main{min-height:46px;padding:0 18px;font-size:14px;white-space:nowrap;flex:none}
body.cro-slide-open .sticky-cta{transform:translate3d(0,140%,0)}
@media (min-width:760px){
  .sticky-cta{display:flex;left:50%;right:auto;width:min(760px,calc(100% - 40px));transform:translate3d(-50%,160%,0);bottom:calc(16px + env(safe-area-inset-bottom));padding:8px 8px 8px 10px}
  .sticky-cta.show{transform:translate3d(-50%,0,0)}
  body.cro-slide-open .sticky-cta{transform:translate3d(-50%,160%,0)}
  .sticky-cta .sc-perk{display:block;flex:1;font-size:12.5px;color:var(--ink2);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sticky-cta .sc-shop{display:inline-flex;min-height:44px;padding:0 18px;font-size:13.5px;white-space:nowrap}
  .sticky-cta .sc-shop[hidden]{display:none}
  .sticky-cta .sc-main{min-height:44px;font-size:13.5px}
}
@media (max-width:759px){
  /* bottom bar must never hide the last content above the footer */
  .footer{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
}

/* 3. slide-in card */
.slidein{position:fixed;z-index:50;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:min(380px,calc(100% - 24px));padding:22px 22px 14px;border-radius:22px;background:var(--paper);border:1px solid rgba(255,255,255,.9);box-shadow:0 30px 70px -24px rgba(42,47,46,.5),0 2px 8px rgba(42,47,46,.08);transform:translate3d(0,24px,0);opacity:0;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.slidein.on{transform:none;opacity:1}
.slidein .kicker{display:flex;align-items:center;gap:6px;margin:0 0 8px}
.slidein .kicker .dot{width:9px;height:9px}
.slidein-h{font-family:var(--head);font-stretch:70%;font-weight:800;font-size:32px;line-height:.95;margin:0;color:var(--ink);padding-right:28px}
.slidein-sub{margin:8px 0 0;font-size:14px;color:var(--ink2)}
.slidein .join-form{margin-top:14px}
.slidein .join-form .btn{padding:0 18px;white-space:nowrap}
.slidein .join-form input{flex:1 1 auto;height:50px;min-height:50px}
.slidein .form-msg{min-height:18px;margin-top:8px}
.slidein-x{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;font-size:24px;line-height:1;color:var(--mute);cursor:pointer}
.slidein-x:hover{background:rgba(42,47,46,.06);color:var(--ink)}
@media (max-width:759px){
  .slidein{left:10px;right:10px;width:auto;bottom:calc(10px + env(safe-area-inset-bottom));padding:18px 16px 10px;border-radius:20px}
  .slidein-h{font-size:28px}
  .slidein .join-form{flex-direction:column}
  .slidein .join-form input{flex:none;width:100%}
  .slidein .join-form .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.slidein{transition:opacity .2s;transform:none}}

/* toasts */
.toasts{position:fixed;z-index:45;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));display:grid;gap:8px;pointer-events:none;max-width:calc(100% - 32px)}
.toast{display:flex;align-items:center;gap:6px;padding:6px 6px 6px 16px;border-radius:999px;background:rgba(42,47,46,.92);color:#f6f7f7;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 14px 34px -14px rgba(42,47,46,.55);font-size:13.5px;line-height:1.3;pointer-events:auto;opacity:0;transform:translate3d(-12px,0,0) scale(.98);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.toast.on{opacity:1;transform:none}
.toast p{margin:0}
.toast b{font-weight:700}
.toast .dot{width:9px;height:9px;vertical-align:0}
.toast button{flex:none;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:#c9cbc9;font-size:20px;line-height:1;cursor:pointer}
.toast button:hover{background:rgba(255,255,255,.1);color:#fff}
@media (max-width:759px){.toasts{left:10px;right:10px;bottom:calc(12px + env(safe-area-inset-bottom));max-width:none;justify-items:center}.toast{font-size:13px}}
@media (prefers-reduced-motion:reduce){.toast{transition:opacity .2s;transform:none}}

/* Subscribe / one-time choice (prices from PRODUCTS) */
.pd .plans{margin-top:18px}
.pd .plan-box{min-height:56px}
.plan-price .per{font-size:13px;font-weight:500;color:var(--mute);margin-left:1px}
.plan-price s:empty{display:none}
.shop-sns{text-align:center;margin:10px auto 0;font:600 14px/1.4 var(--body);letter-spacing:.02em;color:var(--ink2)}
.g-meta .g-once{display:block;color:var(--mute);font-size:12px;margin-top:1px}