/* Heebo, hebrew + latin subsets only, straight from the variable woff2. An @import or a <link>
   to fonts.googleapis.com costs an extra render-blocking round trip before a single glyph can
   paint; these two @font-face rules are the whole stylesheet Google would return. */
@font-face{font-family:Heebo;font-style:normal;font-weight:100 900;font-display:swap;src:url(https://fonts.gstatic.com/s/heebo/v28/NGS6v5_NC0k9P9H0TbFhsqMA6aw.woff2)format('woff2');unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:Heebo;font-style:normal;font-weight:100 900;font-display:swap;src:url(https://fonts.gstatic.com/s/heebo/v28/NGS6v5_NC0k9P9H2TbFhsqMA.woff2)format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── Retinew v2 · art direction "the jar is the brand" ────────────────────────────────────
   The product itself is deep navy with one champagne rule across it, and that is the whole
   palette: navy for authority, champagne for the single accent, warm paper for reading, and
   the funnel's own action green kept for every button so the buy colour does not change
   between this page, the sales page and the checkout.

   ⛔ Nothing here is a port. The four Retinew content steps came out of three different
   Funnelish editors; this page is written from scratch and carries only their WORDS. The
   design layer (funnels/_assets/retinew-skin.css) exists to make ported markup survivable and
   must NOT load on top of this one — funnels/retinew.json sets "css": false on this step. */
:root{
  --paper:#F7F5F1;      /* warm paper, the reading surface */
  --paper-2:#FFFFFF;    /* raised card */
  --navy:#13294A;       /* the jar's own navy. 14.4:1 on paper */
  --navy-2:#1B3A63;     /* the slab's lower stop */
  --navy-soft:#E9EFF6;  /* tinted fill for quiet blocks */
  --gold:#C8A96A;       /* the one accent. 6.4:1 on navy — a label colour, never body text */
  --gold-ink:#8A6A24;   /* the same accent where it has to carry text on paper (5.1:1) */
  --ink:#101A2C;        /* body */
  --ink-2:#4E5B70;      /* secondary, 6.1:1 on paper */
  --go:#0F7A38;         /* the funnel's action colour, white on it = 5.4:1 */
  --go-2:#0B6430;
  --line:#E2DCD2;
  --line-2:#D7DFEA;
  --shadow-s:0 1px 3px rgb(16 26 44 / 8%);
  --shadow-m:0 14px 34px -20px rgb(16 26 44 / 55%);
  --shadow-cta:0 12px 26px -13px rgb(15 122 56 / 75%);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:Heebo,"Segoe UI",Arial,sans-serif;font-size:17px;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:900;line-height:1.14;letter-spacing:-.02em}
h1{font-size:clamp(28px,7.4vw,48px)}
h2{font-size:clamp(24px,6.2vw,36px)}
h3{font-size:clamp(19px,5vw,23px);font-weight:900}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
.wrap{width:100%;max-width:1100px;margin-inline:auto;padding-inline:20px}
.sec{padding-block:clamp(38px,8vw,72px)}
.sec--tight{padding-block:clamp(28px,6vw,52px)}
.col{max-width:36em}
.lead{font-size:clamp(16.5px,4.2vw,19px);color:var(--ink-2);line-height:1.72}
.center{text-align:center}
.hl{font-style:normal;background:linear-gradient(transparent 62%,rgb(200 169 106 / 42%) 0)}
/* ⛔ the marker-pen highlight is for paper. Over the navy hero the same translucent gold reads
   as a grey smudge across the headline, so on the dark slab the emphasis is the accent colour
   itself with a rule under it. */
.hero .hl{background:none;color:var(--gold);box-shadow:inset 0 -2px rgb(200 169 106 / 45%)}

/* ── award bar ── */
.abar{background:var(--navy);color:#EFE3CB;text-align:center;padding:9px 16px;
  font-size:13px;font-weight:600;line-height:1.45;letter-spacing:.01em}
.abar b{color:var(--gold);font-weight:800}

/* ── hero ──────────────────────────────────────────────────────────────────────────────
   One navy slab, ending on a straight edge. The page has exactly two dark blocks (here and
   the offer) so the eye learns: navy means "this is the product talking". */
.hero{background:linear-gradient(175deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;
  position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-40% -20% auto auto;width:70vw;height:70vw;
  background:radial-gradient(circle,rgb(200 169 106 / 16%) 0,transparent 62%);pointer-events:none}
.hero .wrap{position:relative}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-block:15px 6px;border-bottom:1px solid rgb(255 255 255 / 12%);flex-wrap:wrap}
.mark{font-size:15px;font-weight:800;letter-spacing:.3em;color:#fff}
.top .meta{font-size:12.5px;font-weight:600;color:#C3D0E2;min-width:0}
.top .meta b{color:var(--gold);font-weight:800}
.hero-in{padding-block:24px 30px}
.hero h1{margin-bottom:14px}
.hero .lead{color:#D4DEEC;max-width:33em}
.byline{display:flex;align-items:center;gap:11px;margin-top:20px;font-size:13px;color:#AFBDD1}
.byline .mono{width:40px;height:40px;flex:0 0 40px;border-radius:999px;display:grid;place-items:center;
  border:1.5px solid rgb(200 169 106 / 55%);color:var(--gold);font-size:17px;font-weight:800}
.byline b{display:block;color:#fff;font-weight:700;font-size:14px}
.tldr{margin-top:18px;padding:12px 15px;border-radius:12px;background:rgb(255 255 255 / 7%);
  border:1px solid rgb(200 169 106 / 35%);font-size:14.5px;line-height:1.55;color:#EFE3CB}
.heroshot{margin:22px 0 0;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-m)}
.heroshot img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 22%}

/* ── the three actives: the only chrome above the reasons, and it carries information ── */
.spec{display:grid;grid-template-columns:repeat(3,1fr);background:var(--paper-2);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:-28px;
  position:relative;z-index:2;box-shadow:var(--shadow-s)}
.spec div{padding:16px 8px;text-align:center}
.spec div+div{border-inline-start:1px solid var(--line)}
.spec .n{font-size:clamp(17px,4.6vw,20px);font-weight:900;letter-spacing:-.02em;line-height:1.2}
.spec .l{font-size:12.5px;line-height:1.4;color:var(--ink-2);margin-top:4px;font-weight:500}

/* ── CTA ── */
.cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:var(--go);color:#fff;text-decoration:none;text-align:center;
  font-size:clamp(16px,4.4vw,19px);font-weight:800;letter-spacing:-.01em;
  padding:16px 22px;border-radius:999px;border:0;cursor:pointer;
  box-shadow:var(--shadow-cta);transition:background .14s ease,transform .12s ease}
.cta:hover{background:var(--go-2)}
.cta:active{transform:translateY(1px)}
.cta svg{flex:0 0 auto}
.ctawrap{max-width:460px;margin-top:20px}
.center .ctawrap{margin-inline:auto}
.micro{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.hero .micro{color:#AFBDD1}

/* ── reasons ───────────────────────────────────────────────────────────────────────────
   Hairline-separated rows, never cards: ten cards in a column is ten boxes to get past. The
   numeral is the only ornament, because the content genuinely IS a numbered sequence. */
.reason{display:grid;gap:15px;padding-block:26px;border-top:1px solid var(--line)}
.reasons .reason:last-of-type{border-bottom:1px solid var(--line)}
.reason img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;background:var(--navy-soft)}
.rn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:999px;background:var(--navy);color:var(--gold);
  font-size:15px;font-weight:900;margin-bottom:9px;font-variant-numeric:tabular-nums}
.reason p{margin-top:9px;color:var(--ink-2);font-size:16.5px;line-height:1.68}
.reason strong{color:var(--ink);font-weight:700}

/* ⛔ An image whose content is TEXT may never be cropped. Four of the reason images are
   infographics (the comparison table, the skin diagram, the problem/solution panel, the signs
   list): at the row's 4/3 window object-fit:cover cut a line off every edge and the graphic
   read as a mistake. They are square, so contain at 1:1 loses nothing. */
.reason img.gfx{aspect-ratio:1;object-fit:contain;background:#fff}

/* a reviews screenshot is portrait and IS the content: cropping it to the row's 4/3 window
   throws away the comments it exists to show. */
.reason img.nat{aspect-ratio:auto;border:1px solid var(--line);background:#fff}
@media (min-width:860px){.reason img.nat{aspect-ratio:auto}}

/* ── mid-page offer break ── */
.break{background:var(--navy-soft);border-block:1px solid var(--line-2)}
.checks{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.checks li{position:relative;padding-inline-start:28px;font-size:16px;line-height:1.55}
.checks li::before{content:"";position:absolute;inset-inline-start:0;top:.44em;width:16px;height:16px;background:var(--go);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 12.6 2 8.4l1.5-1.5 2.7 2.7L12.5 3.3 14 4.8z'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 12.6 2 8.4l1.5-1.5 2.7 2.7L12.5 3.3 14 4.8z'/%3E%3C/svg%3E") no-repeat center/contain}

/* ── guarantee, reason 10: a card instead of a stock photo ── */
.guar{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  background:var(--paper-2);border:1px solid var(--line);border-radius:16px;
  padding:20px;box-shadow:var(--shadow-s)}
.guar .shield{width:48px;height:48px;flex:0 0 48px;color:var(--gold)}
.guar h3{margin-bottom:8px}
.guar p{color:var(--ink-2);font-size:16.5px;line-height:1.65}
/* ⛔ scope the link colour to the prose: a bare `.guar a` outranks `.cta` and would paint a
   button's label gold on green. */
.guar p a{color:var(--gold-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ── the offer block ── */
.offer{background:linear-gradient(185deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff}
.offer h2{margin-bottom:10px}
.kicker{font-size:13px;font-weight:800;letter-spacing:.14em;color:var(--gold-ink);margin:0 0 12px}
.offer .kicker,.hero .kicker{color:var(--gold)}
.offer .lead{color:#D4DEEC}
.offershot{border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--shadow-m)}
.offershot img{width:100%;aspect-ratio:1;object-fit:cover}
.price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:16px 0 6px}
.price .now{font-size:clamp(30px,8vw,40px);font-weight:900;letter-spacing:-.03em;line-height:1}
.price .was{font-size:17px;color:#AFBDD1;text-decoration:line-through;text-decoration-thickness:1.5px}
.price .per{font-size:14.5px;font-weight:700;color:var(--gold);background:rgb(200 169 106 / 14%);
  border:1px solid rgb(200 169 106 / 40%);border-radius:999px;padding:3px 11px}
.limit{font-size:13.5px;color:#AFBDD1;margin-top:4px}
.count{display:flex;gap:9px;margin:20px 0 0}
.count div{background:rgb(255 255 255 / 9%);border:1px solid rgb(255 255 255 / 16%);border-radius:12px;
  min-width:72px;padding:9px 6px;text-align:center}
.count .cn{font-size:26px;font-weight:900;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.count .cl{font-size:11.5px;color:#AFBDD1;margin-top:3px;font-weight:600}
.countlab{font-size:13.5px;font-weight:700;color:#D4DEEC;margin-top:22px}

/* ── trust strip ── */
.trust{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.trust li{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  font-size:15px;line-height:1.5;color:#D4DEEC}
.trust svg{width:22px;height:22px;color:var(--gold);margin-top:1px}

/* ── footer ── */
footer{background:var(--navy);color:#AFBDD1;font-size:13px;line-height:1.75;
  padding-block:26px 92px;text-align:center}
footer a{color:#E9EFF6;text-decoration:underline;text-underline-offset:3px}
/* the three footer links are the only tap targets down here, and at their natural line height
   they were 23px tall — under the 40px a thumb needs (scripts/qa-layout.mjs). The padding is
   what makes them tappable; the gap keeps them from merging into one target. */
.flinks{display:flex;gap:10px 22px;flex-wrap:wrap;justify-content:center;margin-bottom:6px}
.flinks a{display:inline-block;padding-block:9px}
.addr{unicode-bidi:isolate;direction:ltr;display:inline-block}

/* ── sticky buy bar: on a phone the CTA is never more than a thumb away ──
   z-index 1000: above every page element, and the threshold ops/browser/browse.mjs --bare
   uses to lift overlays off a design screenshot. */
.bar{position:fixed;inset-inline:0;bottom:0;z-index:1000;background:rgb(247 245 241 / 97%);
  backdrop-filter:blur(8px);border-top:1px solid var(--line);
  padding:9px 16px calc(9px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:12px;transform:translateY(105%);transition:transform .22s ease}
.bar.on{transform:translateY(0)}
.bar .bp{font-size:18px;font-weight:900;letter-spacing:-.02em;line-height:1.1;white-space:nowrap}
.bar .bp small{display:block;font-size:11.5px;font-weight:600;color:var(--ink-2);letter-spacing:0}
.bar .cta{flex:1;font-size:16px;padding:12px 16px;box-shadow:none}

:focus-visible{outline:2.5px solid var(--go);outline-offset:3px;border-radius:6px}

/* ── motion ────────────────────────────────────────────────────────────────────────────
   One gesture, used twice: the hero settles on load, and each reason fades up 12px as it
   comes into view. The hidden state is applied ONLY when the script has run (html.js-rv),
   so a page whose JS never executes shows everything. */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(14px);animation:rise .5s cubic-bezier(.2,.7,.3,1) forwards}
  .rise-2{animation-delay:.08s}.rise-3{animation-delay:.16s}
  @keyframes rise{to{opacity:1;transform:none}}
  .js-rv .rv{opacity:0;transform:translateY(12px);transition:opacity .35s ease-out,transform .35s ease-out}
  .js-rv .rv.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media (min-width:860px){
  body{font-size:18px}
  .wrap{padding-inline:32px}
  .hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-block:34px 44px}
  .heroshot{margin-top:0}
  .heroshot img{aspect-ratio:4/5}
  .spec div{padding:20px 10px}
  .reason{grid-template-columns:1fr 1fr;gap:36px;align-items:center;padding-block:34px}
  .reason:nth-of-type(even) img{order:2}
  .reason img{aspect-ratio:1}
  .guar{padding:26px 28px;gap:20px}
  .offer-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
  .offershot{order:2}
  .trust{grid-template-columns:1fr 1fr;gap:14px 28px}
  .bar{display:none}
  footer{padding-bottom:34px}
}

/* ═══ SALES PAGE ═══════════════════════════════════════════════════════════════════════════
   Everything below is used only by the sales steps (sales-v2, sales-2p2-v2). The lander's
   tokens, buttons, trust strip, footer and motion are shared as-is, so the two pages read as
   one product rather than two designs. */

/* the buy block: gallery + offer, both above the fold on desktop, gallery first on a phone */
.pdp{display:grid;gap:22px}
.rating{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink-2);margin-top:8px}
.rating .rs{color:var(--gold-ink);letter-spacing:1.5px;font-size:13px}
.rating b{color:var(--ink);font-weight:800}
.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.badges span{font-size:12.5px;font-weight:700;color:var(--navy);background:var(--navy-soft);
  border:1px solid var(--line-2);border-radius:999px;padding:5px 11px}

.image-slider{display:grid;gap:10px}
.is-image-wrapper{position:relative;border-radius:18px;overflow:hidden;background:var(--paper-2);border:1px solid var(--line)}
.is-image-wrapper img{width:100%;aspect-ratio:1;object-fit:cover}
.is-image-wrapper .prev,.is-image-wrapper .next{position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;line-height:40px;text-align:center;text-decoration:none;
  background:rgb(255 255 255 / 92%);color:var(--navy);border-radius:999px;font-size:17px;
  box-shadow:var(--shadow-s);cursor:pointer;user-select:none}
.is-image-wrapper .prev{inset-inline-start:10px}
.is-image-wrapper .next{inset-inline-end:10px}
.is-thumbs-wrapper{overflow-x:auto;scrollbar-width:none}
.is-thumbs-wrapper::-webkit-scrollbar{display:none}
/* 5 thumbs must FIT a 390px phone: 5x64 + 4x8 = 352 inside a 350px column, so they flex down. */
.is-thumbnails{display:flex;gap:8px;justify-content:center}
.is-thumbnail{flex:1 1 0;min-width:0;max-width:66px;aspect-ratio:1;border-radius:10px;overflow:hidden;
  border:1.5px solid var(--line);cursor:pointer;background:var(--paper-2);transition:border-color .15s ease}
.is-thumbnail img{width:100%;height:100%;object-fit:cover}
.is-thumbnail.selected{border-color:var(--navy)}

/* the offer ladder. Radio inputs, not buttons: it is a choice and it must survive no-JS.
   Every number is copied from funnels/retinew.json → checkout.bundles; nothing is computed. */
.tiers{display:grid;gap:10px;margin-top:16px}
.tier{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:7px 12px;align-items:center;
  background:var(--paper-2);border:1.5px solid var(--line);border-radius:14px;padding:13px 14px;cursor:pointer;
  transition:border-color .14s ease,background .14s ease}
.tier input{position:absolute;opacity:0;pointer-events:none}
.tier .dot{width:20px;height:20px;border-radius:999px;border:2px solid #C3CBD8;flex:0 0 20px;position:relative}
.tier.on{border-color:var(--navy);background:#F4F8FC}
.tier.on .dot{border-color:var(--navy)}
.tier.on .dot::after{content:"";position:absolute;inset:3px;border-radius:999px;background:var(--navy)}
.tier>span{min-width:0}
.tier .tt{display:block;font-weight:900;font-size:18px;line-height:1.15;letter-spacing:-.02em}
.tier .tt em{font-style:normal;font-size:14.5px;font-weight:800;color:var(--gold-ink)}
.tier .ts{display:block;font-size:13px;color:var(--ink-2);line-height:1.35;margin-top:3px}
.tier .tp{text-align:end;line-height:1.15}
.tier .tp s{display:block;font-size:13px;color:var(--ink-2);text-decoration-thickness:1.5px;font-weight:600}
.tier .tp b{display:block;font-size:21px;font-weight:900;letter-spacing:-.02em;margin-top:1px}
.tier .tp span{display:block;font-size:12.5px;color:var(--ink-2);font-weight:600}
.tier .chips{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:6px}
.tier .chip{font-size:12px;font-weight:800;line-height:1;padding:5px 9px;border-radius:999px;
  background:#fff;border:1px solid var(--line);color:var(--ink-2)}
.tier .chip--save{background:var(--go);border-color:var(--go);color:#fff}
.tier .rib{position:absolute;top:-10px;inset-inline-start:14px;background:var(--navy);color:var(--gold);
  font-size:11.5px;font-weight:900;border-radius:999px;padding:3px 10px;box-shadow:var(--shadow-s)}
.tier--best{border-color:#BFCEDF}
.buyline{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:18px 0 12px}
.buyline .now{font-size:32px;font-weight:900;letter-spacing:-.03em;line-height:1}
.buyline .was{font-size:17px;color:var(--ink-2);text-decoration:line-through;text-decoration-thickness:1.5px}
.buyline .save{font-size:13px;font-weight:800;color:#fff;background:var(--go);border-radius:999px;padding:3px 11px}
.paycards{margin-top:14px;max-width:280px;opacity:.85}

/* the three actives, explained */
.mech{display:grid;gap:14px;margin-top:22px}
.mech div{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:18px}
.mech h3{font-size:18px;margin-bottom:6px}
.mech p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2)}

/* how to use */
.steps{display:grid;gap:16px;margin-top:22px}
.step img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
.step .num{display:inline-block;font-size:12.5px;font-weight:900;color:var(--gold);background:var(--navy);
  border-radius:999px;padding:3px 11px;margin:12px 0 6px}
.step h3{font-size:17px}
.step p{margin-top:5px;font-size:15px;line-height:1.55;color:var(--ink-2)}

/* comparison */
/* ⛔ A 4-column table cannot shrink below its content. At 320px it painted 23px past the page
   and gave the whole sales page a sideways scroll (qa-layout, iphone-se). The wrapper scrolls
   instead — a table that pans is readable, a page that pans is broken. */
.cmpwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:20px;border-radius:16px}
.cmpwrap::-webkit-scrollbar{height:6px}
.cmp{width:100%;min-width:330px;border-collapse:collapse;font-size:14.5px;background:var(--paper-2);
  border:1px solid var(--line);border-radius:16px;overflow:hidden}
.cmp th,.cmp td{padding:12px 10px;text-align:center;border-bottom:1px solid var(--line)}
.cmp tr:last-child td{border-bottom:0}
.cmp thead th{background:var(--navy);color:#fff;font-weight:800;font-size:13.5px;line-height:1.3}
.cmp thead th:first-child{background:var(--navy);text-align:start}
.cmp tbody th{text-align:start;font-weight:600;color:var(--ink);line-height:1.4}
.cmp .yes{color:var(--go)}
.cmp .no{color:#B04A3E}
.cmp svg{width:20px;height:20px}
.cmp .mine{background:#F4F8FC}

/* ingredients */
.ing{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:18px;margin-top:20px}
.ing .inci{font-size:13px;line-height:1.7;color:var(--ink-2);direction:ltr;text-align:start;
  unicode-bidi:isolate;word-break:break-word}

/* faq */
.faq-wrapper{display:grid;gap:8px;margin-top:20px}
.faq{background:var(--paper-2);border:1px solid var(--line);border-radius:13px;overflow:hidden}
.faq-header{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  background:none;border:0;font:inherit;color:inherit;text-align:start;cursor:pointer;
  padding:15px 17px;font-weight:700;font-size:16px;line-height:1.4}
.faq-header::after{content:"+";font-size:22px;font-weight:400;color:var(--gold-ink);line-height:1;flex:0 0 auto}
.faq.active .faq-header::after{content:"\2212"}
.faq.active .faq-header{background:var(--navy-soft)}
.faq-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease}
.faq.active .faq-body{grid-template-rows:1fr}
.faq-body>div{overflow:hidden}
.faq-body p{padding:2px 17px 16px;font-size:15.5px;color:var(--ink-2);line-height:1.65;margin:0}
.faq-body a{color:var(--gold-ink);font-weight:700}

/* reviews */
.revs{display:grid;gap:14px;margin-top:20px}
.rev{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.rev img{width:100%;aspect-ratio:16/10;object-fit:cover}
.rev .rb{padding:14px 16px 16px}
.rev .rs{color:var(--gold-ink);font-size:13px;letter-spacing:1.5px}
.rev .rn2{font-weight:800;font-size:15px;margin:4px 0 6px}
.rev .rn2 small{font-weight:600;color:var(--ink-2);font-size:12.5px}
.rev p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2)}

/* a pull quote between sections */
.pull{margin:22px 0 0;padding:18px 20px;background:var(--navy-soft);border-inline-start:3px solid var(--gold);
  border-radius:0 14px 14px 0;font-size:16.5px;line-height:1.6}
.pull footer{background:none;color:var(--ink-2);font-size:13.5px;padding:8px 0 0;text-align:start}

@media (min-width:860px){
  .pdp{grid-template-columns:1fr 1fr;gap:44px;align-items:start}
  .image-slider{position:sticky;top:20px}
  .mech{grid-template-columns:repeat(3,1fr);gap:18px}
  .steps{grid-template-columns:repeat(3,1fr)}
  .revs{grid-template-columns:repeat(3,1fr);align-items:start}
  .cmp{font-size:15.5px}
  .cmp th,.cmp td{padding:15px 14px}
}

/* ── 2+2 sales page only: the blocks the holiday page carries and the main one does not ── */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:20px}
.stats div{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:16px 10px;text-align:center}
.stats .sn{font-size:clamp(24px,7vw,34px);font-weight:900;letter-spacing:-.03em;line-height:1;color:var(--navy)}
.stats .sl{font-size:12.5px;line-height:1.4;color:var(--ink-2);margin-top:7px;font-weight:500}
/* ⛔ the numbers are PRINTED, not counted up from zero. The ported page animates them, so a
   reader who lands mid-page (or whose IntersectionObserver never fires) is told "0% of women
   reported" — the worst possible sentence on a proof block. */

.tl{margin:20px 0 0;padding:0;list-style:none}
.tl li{display:grid;grid-template-columns:auto 1fr;gap:16px;padding-block:16px;border-top:1px solid var(--line)}
.tl li:last-child{border-bottom:1px solid var(--line)}
.tl .when{font-weight:900;font-size:15px;color:var(--gold-ink);white-space:nowrap;min-width:5.5em}
.tl .what b{display:block;font-size:16.5px;margin-bottom:3px}
.tl .what{font-size:15.5px;line-height:1.55;color:var(--ink-2)}

.objs{display:grid;gap:12px;margin-top:18px}
.obj{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.obj b{display:block;font-size:16.5px;margin-bottom:5px}
.obj p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2)}

.letter{background:var(--paper-2);border:1px solid var(--line);border-radius:18px;padding:22px;margin-top:20px}
.letter .who{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.letter .who .mono{width:46px;height:46px;flex:0 0 46px;border-radius:999px;display:grid;place-items:center;
  border:1.5px solid rgb(200 169 106 / 70%);color:var(--gold-ink);font-size:19px;font-weight:800}
.letter .who b{display:block;font-size:15.5px}
.letter .who small{color:var(--ink-2);font-size:13px}
.letter p{font-size:16px;line-height:1.7;color:var(--ink-2)}
.letter .sign{font-weight:800;color:var(--ink);margin-top:14px}

@media (min-width:860px){
  .stats{gap:18px}
  .objs{grid-template-columns:repeat(3,1fr)}
  .tl li{grid-template-columns:8em 1fr}
  .letter{padding:30px 34px}
}

/* ── video: the original pages carry 7 UGC clips and they are the best proof on the page ──
   Lazy by construction: `src` is empty until the IntersectionObserver fills it from data-src,
   so seven autoplaying clips never load at once on a phone. */
.vidwrap{border-radius:16px;overflow:hidden;background:var(--navy-soft);border:1px solid var(--line);position:relative}
.vidwrap video{width:100%;height:100%;display:block;object-fit:cover;aspect-ratio:1}
.vidwrap--tall video{aspect-ratio:9/16}
.vids{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
@media (min-width:860px){.vids{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* award badge + press strip, both straight off the original pages */
.award{width:104px;height:auto;flex:0 0 104px}
.press{display:flex;align-items:center;justify-content:center;gap:clamp(16px,5vw,40px);flex-wrap:wrap;
  padding-block:20px;margin-top:24px;border-block:1px solid var(--line)}
.press img{height:20px;width:auto;opacity:.55;filter:grayscale(1)}
@media (min-width:860px){.press img{height:26px}}

/* the expert / clinic images the original runs beside its science copy */
.docs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.docs img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
@media (max-width:600px){.docs{grid-template-columns:1fr 1fr}.docs img:first-child{grid-column:1/-1;aspect-ratio:16/9}}

/* studies: a citation list, never a claim block */
.cites{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px}
.cites li{padding-inline-start:16px;border-inline-start:3px solid var(--gold);font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.cites b{color:var(--ink);display:block;margin-bottom:3px;font-weight:800;font-size:16px}
.cites .src{display:block;font-size:13px;margin-top:4px}
.cites a{color:var(--gold-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.disclaim{margin-top:16px;font-size:13.5px;line-height:1.6;color:var(--ink-2)}

/* the two-question fit quiz from the 2+2 page */
.quiz{background:var(--paper-2);border:1px solid var(--line);border-radius:18px;padding:20px;margin-top:18px}
.quiz h3{font-size:18px;margin-bottom:4px}
.quiz .qsub{font-size:14.5px;color:var(--ink-2);margin-bottom:14px}
.quiz .opts{display:grid;gap:9px}
.quiz button.opt{display:block;width:100%;text-align:start;font:inherit;font-size:16px;font-weight:600;
  background:var(--paper);border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;cursor:pointer;
  transition:border-color .14s ease,background .14s ease}
.quiz button.opt:hover{border-color:var(--navy);background:#F4F8FC}
.quiz .back{background:none;border:0;font:inherit;font-size:14px;color:var(--ink-2);cursor:pointer;padding:10px 0 0}
.quiz [hidden]{display:none!important}

/* ── the brand band: Retinew is not a new product, it is one people re-order ────────────────
   Matan, 2026-09-12: "retinew is already a brand that people love, it has loyal customers that
   come back to buy, make the funnels feel that way". Every element here is something we can
   show: the award the page already carried, the rating and review count the page already
   quotes, and a verified customer who says in her own words that she is on her third order. */
.brand{display:grid;gap:16px;align-items:center;background:var(--paper-2);border:1px solid var(--line);
  border-radius:18px;padding:20px}
.brand .bfacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;text-align:center}
.brand .bfacts div{padding:6px 4px}
.brand .bn{font-size:clamp(20px,5.4vw,26px);font-weight:900;letter-spacing:-.02em;line-height:1.1}
.brand .bl{font-size:12.5px;color:var(--ink-2);margin-top:5px;line-height:1.35;font-weight:500}
.brand .bq{font-size:16px;line-height:1.65;color:var(--ink-2);border-top:1px solid var(--line);padding-top:14px}
.brand .bq b{color:var(--ink)}
.brand img.award{margin-inline:auto}
@media (min-width:860px){.brand{grid-template-columns:auto 1fr;padding:24px 28px}.brand .bfacts{grid-template-columns:repeat(3,auto);gap:28px}}