/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Fraunces Fallback";src:local("Georgia");font-weight:400;size-adjust:105.95%;ascent-override:92.30%;descent-override:24.07%;line-gap-override:0.00%}
@font-face{font-family:"Fraunces Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:96.71%;ascent-override:101.13%;descent-override:26.37%;line-gap-override:0.00%}
@font-face{font-family:"Inter Fallback";src:local("Arial");font-weight:400;size-adjust:107.47%;ascent-override:90.14%;descent-override:22.44%;line-gap-override:0.00%}
@font-face{font-family:"Inter Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:102.34%;ascent-override:94.66%;descent-override:23.57%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* ==========================================================================
   JELLYFIL — jellyofil.com
   Editorial / trust-first template. Serif display + clean sans body, warm
   paper ground, hairline rules, wide readable prose column.
   Token-driven: the whole palette is derived from the JellyFil bottle —
   deep royal navy label with gold foil trim.
   ========================================================================== */

/* ---- 1. DESIGN TOKENS ---------------------------------------------------- */
:root{
  /* paper + ink */
  --paper:      #faf8f3;
  --paper-tint: #f3efe6;
  --paper-card: #fffdf9;
  --ink:        #17191d;
  --muted:      #55585f;
  --faint:      #6a6c71;
  --line:       #e4ded1;
  --line-soft:  #efe9dc;

  /* niche accent — the JellyFil label navy */
  --accent:      #143a73;
  --accent-deep: #0b2246;
  --accent-tint: #edf2f9;
  --accent-line: #ccdbec;

  /* gold foil — best-value tier and small flourishes */
  --gold:      #93702a;
  --gold-deep: #886721;
  --gold-soft: #e8d5a6;
  --gold-line: #dcc489;

  /* type */
  --serif:'Fraunces','Fraunces Fallback','Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Inter','Inter Fallback',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* metrics */
  --wrap:  1120px;
  --prose: 68ch;
  --radius: 4px;
  --radius-lg: 10px;
  --shadow: 0 1px 2px rgba(16,20,28,.05), 0 8px 30px rgba(16,20,28,.06);
  --shadow-soft: 0 1px 24px rgba(16,20,28,.05);
}

/* ---- 2. RESET / BASE ----------------------------------------------------- */
*{box-sizing:border-box;min-width:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;font-family:var(--sans);font-size:18px;line-height:1.7;
  color:var(--ink);background:var(--paper);overflow-x:clip;max-width:100%;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video,iframe,table,figure{max-width:100%}
img{height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:600;line-height:1.12;
  letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:clamp(2.2rem,5.2vw,3.7rem)}
h2{font-size:clamp(1.8rem,3.5vw,2.6rem)}
h3{font-size:1.3rem;line-height:1.25}
h4{font-size:1.05rem}
p{margin:0 0 1.1em}
strong,b{font-weight:600}
hr{border:0;border-top:1px solid var(--line);margin:0}
::selection{background:var(--gold-soft)}
table{border-collapse:collapse}
section[id]{scroll-margin-top:86px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.prose{max-width:var(--prose)}
.center{text-align:center}
.center .prose{margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:var(--accent);
  padding:10px 16px;border-radius:var(--radius);z-index:2000}
.skip:focus{left:12px;top:12px}

/* ---- 3. SHARED ATOMS ----------------------------------------------------- */
.eyebrow{display:inline-block;font-family:var(--sans);font-weight:600;font-size:0.8438rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.eyebrow--gold{color:var(--gold-deep)}
.note{font-size:0.9062rem;color:var(--faint);line-height:1.6}
.lead{font-size:1.22rem;line-height:1.6;color:var(--muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--sans);font-weight:600;font-size:1rem;padding:.85em 1.6em;
  border-radius:var(--radius);cursor:pointer;border:1px solid transparent;min-height:44px;
  transition:transform .12s ease,background .18s ease,box-shadow .18s ease;
  text-decoration:none;line-height:1;text-align:center}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn--cta{background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(20,58,115,.24)}
.btn--cta:hover{background:var(--accent-deep);color:#fff}
.btn--ghost{background:transparent;color:var(--accent);border-color:var(--accent-line)}
.btn--ghost:hover{background:var(--accent-tint);color:var(--accent-deep)}
.btn--gold{background:var(--gold);color:#fff;box-shadow:0 6px 18px rgba(181,138,52,.26)}
.btn--gold:hover{background:var(--gold-deep);color:#fff}
.btn--lg{font-size:1.08rem;padding:1em 1.9em}
.btn--block{display:flex;width:100%}

.section{padding:72px 0;border-top:1px solid var(--line)}
.section--tint{background:var(--paper-tint)}
.section--tight{padding:52px 0}
.section__head{max-width:var(--prose);margin-bottom:34px}
.section--center .section__head{margin-inline:auto;text-align:center}

/* ---- 4. TOPLINE + NAV ---------------------------------------------------- */
.topline{background:var(--accent-deep);color:#c9d7ea;font-size:.76rem;text-align:center;padding:7px 16px}
.topline b{color:#fff;font-weight:600}
.topline span{opacity:.5;margin:0 .5em}
@media(max-width:620px){.topline{font-size:.7rem;line-height:1.6}}

.nav{position:sticky;top:0;z-index:60;background:rgba(250,248,243,.94);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line);
  transition:transform .32s cubic-bezier(.4,0,.2,1),box-shadow .3s ease}
.nav--hidden{transform:translateY(-100%)}
.nav__row{display:flex;align-items:center;justify-content:space-between;gap:18px;height:66px}
/* the wordmark is two flex items (the "Jelly" text node + <span>Fil</span>), so a
   flex gap here would render it as "Jelly Fil" — the spacing lives on the mark */
.brand{font-family:var(--serif);font-weight:600;font-size:1.5rem;letter-spacing:-.02em;
  color:var(--ink);display:inline-flex;align-items:center;gap:0}
.brand:hover{text-decoration:none}
.brand span{color:var(--accent)}
.brand svg{width:26px;height:26px;flex:none;margin-right:9px}
.menu{list-style:none;display:flex;gap:24px;margin:0;padding:0}
.menu a{font-family:var(--sans);font-size:.92rem;font-weight:500;color:var(--muted)}
.menu a:hover,.menu a[aria-current="page"]{color:var(--accent);text-decoration:none}
.nav__cta{display:flex;align-items:center;gap:12px}
.burger{display:none;background:none;border:0;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
.burger span{width:22px;height:2px;background:var(--ink);display:block}
@media(max-width:1024px){
  .menu{display:none;gap:0}
  .menu.open{display:flex;position:absolute;top:66px;left:0;right:0;flex-direction:column;
    background:var(--paper);border-bottom:1px solid var(--line);padding:8px 24px;box-shadow:var(--shadow);
    max-height:78vh;overflow:auto}
  .menu.open li{border-top:1px solid var(--line-soft)}
  .menu.open a{display:block;padding:13px 0;min-height:44px}
  .burger{display:flex;min-height:44px;min-width:44px;align-items:center;justify-content:center}
}
@media(max-width:520px){.nav__cta .btn{display:none}}

/* ---- 5. STICKY BUY BAR --------------------------------------------------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--accent-deep);color:#fff;
  transform:translateY(105%);transition:transform .28s ease;box-shadow:0 -6px 24px rgba(0,0,0,.18)}
.buybar.show{transform:translateY(0)}
.buybar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:var(--wrap);margin-inline:auto;padding:11px 24px}
.buybar__t{font-size:.98rem;line-height:1.3}
.buybar__t b{font-family:var(--serif);font-size:1.06rem;display:block}
.buybar__t .from{color:var(--gold-soft);font-weight:600}
.buybar .btn{white-space:nowrap}
@media(max-width:560px){.buybar__t{font-size:.84rem}.buybar__t b{font-size:.95rem}}

/* ---- 6. HERO ------------------------------------------------------------- */
.hero{padding:56px 0 64px}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}
.hero h1{margin-top:.1em}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero__lede{font-size:1.2rem;line-height:1.62;color:var(--muted);max-width:52ch;margin-top:1.1rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:1.7rem}
.hero__sub{margin-top:1.3rem;font-size:0.9688rem;color:var(--faint);display:flex;
  flex-wrap:wrap;align-items:center;gap:.55em 1.4em}
/* The hero copy column is tall (quick answer + pills + checks + figures), so a
   statically centred pack shot ends up sitting near the bottom of it. On desktop
   the shot becomes a full-height sticky rail that keeps the bottle vertically
   centred in the viewport until the hero has finished scrolling past. */
.hero__media{position:relative}
.hero__stick{position:relative;width:100%}
/* The rail starts below the sticky header, so it is offset by the header height
   rather than the full viewport — otherwise the card overflows the fold at
   scroll 0. Gated on viewport height so a short laptop screen never clips it. */
/* Sticks at every desktop height; the shot scales rather than the effect
   switching off on short laptop screens. */
@media(min-width:921px){
  .hero__media{position:sticky;top:96px;align-self:start;
    height:calc(100vh - 96px);min-height:360px;
    display:flex;align-items:center;justify-content:center}
  .hero__stick{max-height:calc(100vh - 120px);display:flex;flex-direction:column;justify-content:center}
  .hero__media .pcard img{max-height:calc(100vh - 300px);min-height:170px;width:auto;object-fit:contain}
}
.pcard{background:linear-gradient(170deg,#f2f6fc,#e4ecf7);border:1px solid var(--accent-line);
  border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow)}
.pcard img{margin-inline:auto}
.hero__tag{position:absolute;left:-10px;bottom:22px;background:var(--paper-card);
  border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--radius);
  padding:10px 14px;box-shadow:var(--shadow);font-size:0.9062rem;line-height:1.3;max-width:190px}
.hero__tag b{font-family:var(--serif);display:block;font-size:1rem}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--paper-card);
  border:1px solid var(--accent-line);border-radius:100px;padding:8px 17px;
  font-size:0.8438rem;font-weight:600;color:var(--accent)}

/* hero AEO furniture: fact pills + figure tiles */
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 20px;padding:0}
.factpills li{background:var(--paper-card);border:1px solid var(--line);border-radius:100px;
  padding:6px 14px;font-size:0.9062rem;font-weight:600;color:var(--muted)}
.factpills li b{color:var(--accent)}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 22px}
.figures div{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:16px 10px;text-align:center}
.figures b{display:block;font-family:var(--serif);font-size:1.55rem;color:var(--ink);line-height:1.05}
.figures span{font-size:.7rem;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}

/* ---- 7. TRUST STRIP ------------------------------------------------------ */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-card)}
.trust__row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px;padding:20px 24px}
.trust__item{display:flex;align-items:center;gap:10px;font-size:0.9062rem;font-weight:500;color:var(--muted)}
.trust__item img{width:38px;height:38px;object-fit:contain}

/* ---- 8. PROSE ------------------------------------------------------------ */
.article{max-width:var(--prose);margin-inline:auto}
.article p{color:#2a2d33}
.dropcap::first-letter{float:left;font-family:var(--serif);font-weight:600;font-size:3.9em;
  line-height:.7;padding:.02em .1em 0 0;color:var(--accent)}
.pullquote{font-family:var(--serif);font-size:1.5rem;line-height:1.35;color:var(--ink);
  border-left:3px solid var(--gold);padding:.2em 0 .2em 1.1rem;margin:1.6em 0}

/* ---- 9. SPLIT ------------------------------------------------------------ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split--rev .split__media{order:2}
.split__media img{border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.chips{list-style:none;margin:1.2em 0 0;padding:0;display:grid;gap:.7em}
.chips li{position:relative;padding-left:1.8em;color:#2a2d33}
.chips .ck{position:absolute;left:0;top:.02em;color:var(--accent);font-weight:700}

/* ---- 10. STEPS ----------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:step}
.step{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 24px 28px}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--serif);font-size:2.1rem;color:var(--accent);display:block;margin-bottom:.2em;font-weight:600}
.step h3{margin-bottom:.35em}
.step p{margin:0;color:var(--muted);font-size:1.062rem}

/* ---- 11. INGREDIENTS ----------------------------------------------------- */
.ingfig{max-width:940px;margin:0 auto 34px;border-radius:var(--radius-lg);
  border:1px solid var(--line);overflow:hidden;box-shadow:var(--shadow-soft)}
.inglist{max-width:var(--prose);margin-inline:auto;display:grid;gap:0}
.ing{padding:26px 0;border-top:1px solid var(--line)}
.ing--thumb{display:grid;grid-template-columns:96px 1fr;gap:24px;align-items:start}
.ing:first-child{border-top:0}
.ing__thumb{width:96px;height:96px;border-radius:50%;object-fit:cover;
  border:2px solid var(--accent-line);background:#fff}
.ing__top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ing h3{margin:0}
.ing__dose{font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold-deep);white-space:nowrap}
.ing p{margin:.55em 0 0;color:#2a2d33}
.ing__cite{font-size:.85rem}
@media(max-width:560px){.ing{grid-template-columns:1fr;gap:14px}
  .ing__thumb{width:74px;height:74px}}

.ingthumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:820px;margin:0 auto 8px}
.ingthumb{text-align:center}
.ingthumb img{width:118px;height:118px;border-radius:50%;object-fit:cover;margin:0 auto .7em;
  border:2px solid var(--accent-line);background:#fff}
.ingthumb b{font-family:var(--serif);font-size:.98rem;display:block;color:var(--ink);line-height:1.2}
.ingthumb span{font-size:.8rem;color:var(--faint);display:block}

/* ---- 12. SUPPLEMENT FACTS ------------------------------------------------ */
.facts{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:start}
.facts__img{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  background:#fff;box-shadow:var(--shadow-soft)}
.facttab{width:100%;font-size:.95rem;margin-top:.4em}
.facttab th,.facttab td{text-align:left;padding:.62em .2em;border-bottom:1px solid var(--line)}
.facttab thead th{font-family:var(--sans);font-size:0.9062rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint)}
.facttab td:last-child,.facttab th:last-child{text-align:right;white-space:nowrap;color:var(--muted)}
.facttab .blend td{font-weight:600}

/* ---- 13. BENEFITS -------------------------------------------------------- */
.benefits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;
  gap:2px 40px;max-width:900px;margin-inline:auto}
.benefits li{display:flex;gap:.8em;padding:16px 0;border-top:1px solid var(--line);color:#2a2d33}
.benefits .ck{color:var(--accent);font-weight:700;flex:none;margin-top:.1em}
.benicons{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:960px;margin:0 auto 40px}
.benicon{text-align:center}
.benicon img{width:78px;height:78px;object-fit:contain;margin:0 auto .7em}
.benicon b{font-family:var(--serif);font-size:1rem;display:block;color:var(--ink);line-height:1.2}
.benicon span{font-size:.84rem;color:var(--muted);display:block;margin-top:.3em;line-height:1.45}

/* ---- 14. REFERENCES ------------------------------------------------------ */
.refs{max-width:var(--prose);margin-inline:auto;font-size:.92rem;color:var(--muted)}
.refs ol{margin:0;padding-left:1.4em;display:grid;gap:.6em}
.refs a{word-break:break-word}

/* ---- 15. EDITORIAL BYLINE (E-E-A-T) ------------------------------------- */
.byline{display:flex;gap:22px;align-items:center;max-width:var(--prose);margin-inline:auto;
  background:var(--paper-card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 26px}
.byline img{width:78px;height:78px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--accent-line)}
.byline b{font-family:var(--serif);font-size:1.15rem}
.byline p{margin:.3em 0 0;font-size:.92rem;color:var(--muted)}
@media(max-width:560px){.byline{flex-direction:column;text-align:center;gap:14px}}

/* ---- 16. TESTIMONIALS ---------------------------------------------------- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px}
.tcard{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 24px;position:relative}
.tcard .qm{font-family:var(--serif);font-size:3rem;line-height:.4;color:var(--gold-soft);display:block;height:.5em}
.tcard .stars{color:var(--gold);letter-spacing:2px;font-size:.9rem;margin:.4em 0}
.tcard h3{font-size:1.08rem;margin:.2em 0 .4em}
.tcard p{color:var(--muted);font-size:1.062rem;margin:0}
.tcard .who{margin-top:1em;font-size:.86rem;color:var(--ink);font-weight:600}
.tcard .who span{color:var(--faint);font-weight:500}
.tlife{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:30px}
.tlife figure{margin:0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow-soft);aspect-ratio:1/1;background:#eee}
.tlife img{width:100%;height:100%;object-fit:cover}

/* star distribution */
.dist{list-style:none;margin:0;padding:0;max-width:520px}
.dist li{display:grid;grid-template-columns:52px 1fr 46px;align-items:center;gap:12px;
  margin-bottom:9px;font-size:1.062rem;font-weight:600;color:var(--muted)}
.dist .bar{background:var(--line);border-radius:100px;height:10px;overflow:hidden}
.dist .bar i{display:block;height:100%;background:var(--gold);border-radius:100px}

/* ---- 17. PRICING LADDER -------------------------------------------------- */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:center}
.tier{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:28px 24px 30px;text-align:center;position:relative;display:flex;flex-direction:column}
.tier--pop{border-color:var(--accent-line);box-shadow:var(--shadow)}
.tier__flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:5px 14px;
  border-radius:100px;white-space:nowrap}
.tier--pop .tier__flag{background:var(--accent);color:#fff}
.tier--feature{border:2px solid var(--gold);box-shadow:0 0 0 1px var(--gold),0 20px 44px rgba(181,138,52,.2);
  transform:scale(1.05);z-index:2;padding-top:34px}
.tier--feature .tier__flag{background:var(--gold);color:#fff}
.tier--feature .tier__img{height:172px}
.tier--feature .tier__price{font-size:3.3rem}
.tier--feature .tier__ship{color:var(--gold-deep);font-weight:600}
.tier h3{margin:.2em 0 .1em;font-size:1.3rem}
.tier__supply{font-size:.84rem;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.tier__img{height:150px;width:auto;margin:16px auto 8px;object-fit:contain}
.tier__price{font-family:var(--serif);font-size:2.9rem;font-weight:600;color:var(--ink);line-height:1}
.tier__price small{font-family:var(--sans);font-size:0.9062rem;font-weight:500;color:var(--faint);
  display:block;letter-spacing:.02em}
.tier__was{font-size:.86rem;color:var(--faint);text-decoration:line-through;margin:.5em 0 0}
.tier__tot{font-weight:600;font-size:1rem;margin:.2em 0 .1em}
.tier__ship{font-size:.85rem;color:var(--muted);margin:.5em 0 1.1em}
.tier__rows{list-style:none;margin:0 0 18px;padding:0;text-align:left;font-size:.9rem;color:var(--muted);
  display:grid;gap:.5em}
.tier__rows li{position:relative;padding-left:1.5em}
.tier__rows .ck{position:absolute;left:0;color:var(--accent);font-weight:700}
.tier .btn{margin-top:auto}
.tier__ribbon{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px 0 4px}
.tier__ribbon img{width:36px;height:36px}
.tier__ribbon span{font-size:.78rem;color:var(--gold-deep);font-weight:600}

.guarantee{display:flex;align-items:center;gap:30px;flex-wrap:wrap;justify-content:center;
  max-width:860px;margin:40px auto 0;background:var(--accent-tint);border:1px solid var(--accent-line);
  border-radius:var(--radius-lg);padding:26px 30px}
.guarantee img{width:120px;height:auto;flex:none}
.guarantee h3{margin:0 0 .3em}
.guarantee p{margin:0;color:var(--muted);font-size:1.062rem}
.pay{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:28px}
.pay img{height:30px;width:auto}
.pay span{font-size:0.9062rem;color:var(--faint)}

/* ---- 18. FAQ ------------------------------------------------------------- */
.faq{max-width:var(--prose);margin-inline:auto}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 2px;font-family:var(--serif);
  font-size:1.15rem;color:var(--ink);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:var(--sans);font-size:1.5rem;color:var(--accent);font-weight:400}
.faq details[open] summary::after{content:"\2013"}
.faq__b{padding:0 2px 22px;color:var(--muted)}
.faq__b p{margin:0 0 .8em}
.faq__b p:last-child{margin:0}

/* ---- 19. QUICK ANSWER (AEO / GEO) --------------------------------------- */
/* In the hero the answer is not a card: the approved layout runs it as two
   flowing paragraphs under the H1. The wrapper stays -- it is the speakable
   selector and the AEO block -- but the card styling and the label come off.
   These rules sit above CRITICAL-END, so the inlined copy in every page head
   carries them too (pitfall 47). */
.hero .answer{background:none;border:0;box-shadow:none;padding:0;margin:18px 0 0}
.hero .answer .tag{display:none}
.hero .answer p{font-size:1.062rem;color:var(--muted);margin:0 0 .85em;max-width:56ch}
.hero .answer p:last-child{margin-bottom:0}
.hero .answer p b{color:var(--ink)}
.hero__rating{display:flex;align-items:center;gap:9px;margin:16px 0 0;
  font-size:.95rem;color:var(--muted)}
.hero__rating b{color:var(--ink)}
.hero__rating .stars{color:var(--gold);letter-spacing:2px}

/* ---- hero motif -- slow-swell ---------------------------------------- */
.hero{position:relative;overflow-x:clip;overflow-y:visible}
:where(.hero__media){position:relative}
.hero__card{position:relative;z-index:2}
.hero__card img{position:relative;z-index:3}
.hero{background:radial-gradient(115% 85% at 30% 6%,#e7e0cf,#faf8f3 64%,#faf8f3)}.hero__media::before{content:'';position:absolute;inset:4%;border-radius:44% 56% 52% 48%;background:radial-gradient(closest-side,rgba(147,112,42,0.46),transparent 78%);animation:btSwell 14s ease-in-out infinite;z-index:1}@keyframes btSwell{0%,100%{border-radius:44% 56% 52% 48%;scale:.98}50%{border-radius:54% 46% 44% 56%;scale:1.05}}
@media(prefers-reduced-motion:reduce){.hero__card,.hero__media::before,.hero__media::after{animation:none!important}}

/* --- hero responsive rules, copied into the critical block
   A phone painted the desktop hero from the inline block and then
   jumped when the async sheet arrived -- 692px on one site, CLS 0.95.
   These are COPIES: the originals stay below, so the cascade is
   unchanged and the first paint is already correct. */
@media (max-width:920px){
  .hero__grid{display:flex;flex-direction:column;gap:32px}
  .hero__media{max-width:420px;margin-inline:auto;width:100%; position:static;height:auto;display:block;order:3;margin:4px 0 18px}
  /* mobile hero order: eyebrow, H1, product shot, Quick Answer, CTA, rest. display:contents promotes the copy column's children to hero-grid items, so the shot can be placed between the H1 and the answer. */ .hero__copy{display:contents}
  .hero .pill{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:4px 0 18px}
  .hero .answer{order:4}
  .hero .hero__cta{order:5}
  /* the rating sits with the CTA. Without an explicit order display:contents would leave it at 0 and it would jump above the eyebrow. */ .hero .hero__rating{order:5}
  .hero .hero__sub{order:6}
  .hero .ticks,.hero .chips{order:7}
  .hero .pay{order:8}
  /* Promoting the copy column exposed these as grid items too. Without an order they default to 0 and jump above the eyebrow, so they are pinned below the CTA where they sat before. */ .hero .factpills{order:9}
  .hero .figures{order:11}
}
@media (max-width:560px){
  .hero{padding:36px 0 48px}
  .hero__tag{display:none}
}
@media (min-width: 981px){
  .hero__media{position: sticky; top: calc(var(--navh, 88px) + 14px); align-self: start; min-height: calc(100vh - var(--navh, 88px) - 28px); min-height: calc(100svh - var(--navh, 88px) - 28px); display: flex; flex-direction: column; align-items: center; justify-content: center;}
}
@media (prefers-reduced-motion: reduce){
  .hero__media{position: relative; top: 0; min-height: 0;}
}

/*!SITE-HOME-CRIT-START*/
/* Desktop hero reading order — layout, so it lives above the marker.
   Measured at 1440x900 the hero CTA sat at y=991, 91px below the fold,
   because the four-line checklist ran between the Quick Answer and the
   buttons. Ordering here rather than in the markup leaves the phone
   composition (.hero__copy{display:contents} under 920px) untouched. */
@media(min-width:921px){
  .hero__copy{display:flex;flex-direction:column}
  .hero__copy>.pill{order:1;align-self:flex-start}
  .hero__copy>h1{order:2}
  .hero__copy>.answer{order:3}
  .hero__copy>.hero__cta{order:4}
  .hero__copy>.hero__rating{order:5}
  .hero__copy>.hero__sub{order:6}
  .hero__copy>.chips{order:7}
  .hero__copy>.factpills{order:8}
  .hero__copy>.figures{order:9}
}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/
.qa{max-width:1000px;margin-inline:auto;background:var(--paper-card);
  border:1px solid var(--accent-line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);overflow:hidden}
.qa__head{background:var(--accent-tint);border-bottom:1px solid var(--accent-line);padding:24px 32px}
.qa__head b{font-family:var(--serif);font-size:1.55rem;line-height:1.16;color:var(--ink);display:block}
.qa__head p{margin:.5em 0 0;font-size:1.062rem;color:var(--muted)}
.qa dl{margin:0;display:grid;grid-template-columns:minmax(160px,auto) 1fr}
.qa dl>div{display:contents}
.qa dt,.qa dd{margin:0;padding:16px 32px;border-top:1px solid var(--line);font-size:1.062rem;line-height:1.6}
.qa dt{font-weight:600;color:var(--accent);white-space:nowrap;background:#fbfaf6;font-size:1.062rem}
.qa dd{color:#2a2d33}
@media(max-width:640px){
  .qa dl{grid-template-columns:1fr}
  .qa dt{white-space:normal;padding-bottom:2px}
  .qa dd{padding-top:2px;border-top:0}
  .qa__head{padding:20px 22px}
  .qa__head b{font-size:1.3rem}
  .qa dt,.qa dd{padding-inline:22px}
}

/* answer block (short definitional AEO answer) */
.answer{background:var(--paper-card);border:1px solid var(--accent-line);
  border-left:4px solid var(--accent);border-radius:var(--radius);
  padding:22px 26px;margin:0 0 22px;box-shadow:var(--shadow-soft)}
.answer .tag{display:block;font-size:0.8438rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.7em}
.answer p{margin:0 0 .8em;color:var(--muted)}
.answer p:last-child{margin:0}
.answer p.first{color:var(--ink);font-weight:600;font-size:1.062rem}

/* ---- 20. STATS / PROMO / BADGE WALL ------------------------------------- */
.stats{background:var(--accent-deep);color:#fff;border-top:1px solid var(--line)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-lg);overflow:hidden}
.stat{padding:32px 24px;text-align:center;border-right:1px solid rgba(255,255,255,.12)}
.stat:last-child{border-right:0}
.stat b{font-family:var(--serif);font-size:clamp(2.1rem,4.2vw,2.9rem);font-weight:600;
  color:#fff;display:block;line-height:1}
.stat span{display:block;margin-top:.5em;font-size:.85rem;color:#adc0d9}
.stat .gold{color:var(--gold-soft)}

.promo{background:var(--accent-deep);color:#dce6f3;border-top:1px solid var(--line)}
.promo__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:22px 40px;padding:26px 24px}
.promo__item{display:flex;align-items:center;gap:12px;font-size:.94rem;color:#c9d7ea}
.promo__item img{width:52px;height:52px;object-fit:contain;flex:none;background:#fff;border-radius:50%;padding:5px}
.promo__item b{color:#fff;font-weight:600;font-family:var(--serif);font-size:1.02rem;display:block;line-height:1.2}
.promo__item span{font-size:.8rem;color:#9db2cd}

.badgewall{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;max-width:900px;margin-inline:auto}
.badgewall figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.badgewall img{width:92px;height:92px;object-fit:contain}
.badgewall figcaption{font-size:0.8438rem;color:var(--muted);font-weight:500;line-height:1.3}

/* ---- 21. WHY / WHO-FOR / HOW-TO-USE ------------------------------------- */
.why{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.why__media img{border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.whygrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.whycard{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px 20px;display:flex;gap:14px;align-items:flex-start}
.whycard img{width:52px;height:52px;object-fit:contain;flex:none}
.whycard h3{font-size:1.02rem;margin:0 0 .25em}
.whycard p{margin:0;font-size:1.062rem;color:var(--muted);line-height:1.5}

.whofor{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.whofor__media img{border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.forlist{list-style:none;margin:1.2em 0 0;padding:0;display:grid;gap:.7em}
.forlist li{position:relative;padding-left:1.8em;color:#2a2d33}
.forlist .ck{position:absolute;left:0;top:.02em;color:var(--accent);font-weight:700}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
.gallery figure{margin:0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow-soft);aspect-ratio:1/1;background:#eee}
.gallery img{width:100%;height:100%;object-fit:cover}

.howuse{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.howuse__media img{border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:var(--shadow)}
.usesteps{list-style:none;margin:1.3em 0 0;padding:0;counter-reset:u;display:grid;gap:18px}
.usesteps li{position:relative;padding-left:3.2em;min-height:2.2em}
.usesteps li::before{counter-increment:u;content:counter(u);position:absolute;left:0;top:-.1em;
  width:2.2em;height:2.2em;border-radius:50%;background:var(--accent);color:#fff;
  font-family:var(--serif);font-weight:600;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.usesteps b{display:block;font-family:var(--serif);font-size:1.1rem;color:var(--ink)}
.usesteps p{margin:.15em 0 0;color:var(--muted);font-size:1.062rem}

.docband{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:center;
  background:var(--paper-card);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.docband__media{align-self:stretch}
.docband__media img{width:100%;height:100%;object-fit:cover}
.docband__body{padding:34px 40px 34px 8px}
.docband h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.docband p{color:var(--muted)}

/* ---- 22. BONUSES --------------------------------------------------------- */
.bonuses{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.bonus{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:24px;text-align:center;display:flex;flex-direction:column}
.bonus img{width:auto;height:190px;object-fit:contain;margin:0 auto 16px;
  filter:drop-shadow(0 10px 22px rgba(16,20,28,.18))}
.bonus .tag{font-size:0.8438rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);font-weight:700}
.bonus h3{font-size:1.1rem;margin:.3em 0 .35em}
.bonus p{font-size:1.062rem;color:var(--muted);margin:0}
.bonus__note{max-width:660px;margin:30px auto 0}

/* ---- 23. CALLOUTS -------------------------------------------------------- */
.callout{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px 26px;font-size:.95rem;color:var(--muted)}
.callout b{color:var(--ink)}
.callout p:last-child{margin:0}
.flag{background:var(--accent-tint);border:1px solid var(--accent-line);border-radius:var(--radius-lg);
  padding:22px 26px;font-size:.94rem;color:#28405f}
.flag b{color:var(--accent-deep)}
.flag p:last-child{margin:0}
.alert{background:#fcf0ec;border:1px solid #f0cec2;border-radius:var(--radius-lg);
  padding:22px 26px;font-size:.94rem;color:#7a3a26}
.alert b{color:#a83a17}
.alert p:last-child{margin:0}
.alert a{color:#a83a17}

/* ---- 24. FINAL CTA ------------------------------------------------------- */
.final{background:var(--accent-deep);color:#dce6f3;border-radius:var(--radius-lg);
  padding:56px 40px;text-align:center;position:relative;overflow:hidden}
.final::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 120% at 50% -20%,rgba(181,138,52,.22),transparent 60%);pointer-events:none}
.final h2{color:#fff;position:relative}
.final p{color:#c3d3e6;max-width:56ch;margin:0 auto 1.6em;position:relative}
.final b,.final strong{color:#fff}
.final .btn{position:relative}
.final--media{display:grid;grid-template-columns:.82fr 1.18fr;gap:44px;align-items:center;
  text-align:left;padding:52px 46px}
/* width:100% so the bottle shot shrinks to its cell instead of spilling out of
   it when the component sits in a narrow column (the mid-article CTA). */
.final--media .final__img img{width:100%;max-width:340px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 18px 36px rgba(0,0,0,.38))}
.final--media .final__body{position:relative}
.final--media .final__body h2{text-align:left}
.final--media .final__body p{margin:0 0 1.6em;max-width:54ch}
.final__price{font-family:var(--serif);font-size:2.1rem;color:var(--gold-soft);margin:.2em 0 .6em;font-weight:600}

/* ---- 25. TABLES / COMPARISON -------------------------------------------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.dtable{width:100%;font-size:1rem}
.dtable th,.dtable td{text-align:left;padding:.7em .8em;border-bottom:1px solid var(--line);vertical-align:top}
.dtable thead th{font-family:var(--sans);font-size:0.9062rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);background:var(--accent-tint)}
.dtable td b{color:var(--ink)}

/* ---- 26. FORMS ----------------------------------------------------------- */
.form{display:grid;gap:16px;max-width:600px}
.form label{display:block;font-size:.86rem;font-weight:600;color:var(--ink);margin-bottom:.4em}
.form input,.form select,.form textarea{width:100%;font-family:var(--sans);font-size:1rem;
  color:var(--ink);background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--radius);padding:.75em .9em;min-height:44px}
.form textarea{min-height:130px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--accent);
  outline-offset:1px;border-color:var(--accent)}
.form .req{color:var(--accent)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form__hint{font-size:.82rem;color:var(--faint);margin:.35em 0 0}
.form__msg{padding:14px 18px;border-radius:var(--radius);font-size:.92rem;display:none}
.form__msg.ok{display:block;background:var(--accent-tint);border:1px solid var(--accent-line);color:var(--accent-deep)}
.formcard{background:var(--paper-card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px 32px}
@media(max-width:560px){.form__row{grid-template-columns:1fr}.formcard{padding:24px 22px}}

/* ---- 27. FOOTER ---------------------------------------------------------- */
footer{background:var(--paper-card);border-top:1px solid var(--line);padding:56px 0 96px;font-size:.92rem}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.fbrand{font-family:var(--serif);font-size:1.5rem;color:var(--ink);margin-bottom:.5em;display:block}
.fbrand span{color:var(--accent)}
footer h4{font-family:var(--sans);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin:0 0 1em}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.55em}
footer ul a{color:var(--muted)}
footer ul a:hover{color:var(--accent)}
footer .fintro{color:var(--muted);max-width:38ch}
.fbadges{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.fbadges img{width:44px;height:44px;object-fit:contain}
.fnap{border-top:1px solid var(--line);margin-top:34px;padding-top:24px;color:var(--muted);line-height:1.75}
.fnap strong{color:var(--ink)}
.fpay{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--line);margin-top:24px;padding-top:22px}
.fpay img{height:28px}
.fpay span{font-size:.82rem;color:var(--faint)}
.disc{border-top:1px solid var(--line);margin-top:24px;padding-top:26px;display:grid;gap:.8em}
.disc p{margin:0;font-size:1.062rem;color:var(--faint);line-height:1.6}
.disc b{color:var(--muted)}
.disc .copy{margin-top:.6em;color:var(--muted)}

/* ---- 28. LEGAL / ARTICLE PAGES ------------------------------------------ */
.legal{max-width:var(--prose);margin-inline:auto}
.legal h1{margin-bottom:.4em}
.legal h2{font-size:1.5rem;margin-top:1.6em}
.legal h3{font-size:1.15rem;margin-top:1.3em}
.legal p,.legal li{color:#2a2d33}
.legal ul,.legal ol{padding-left:1.3em;display:grid;gap:.4em;margin:0 0 1.2em}
.crumbs{font-size:0.9062rem;color:var(--faint);margin-bottom:1.2em}
.crumbs a{color:var(--muted)}
.meta{font-size:0.9062rem;color:var(--faint);margin:-.4em 0 1.6em}

/* related cards */
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rel a{display:block;background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:20px 22px}
.rel a:hover{border-color:var(--accent-line);text-decoration:none;box-shadow:var(--shadow-soft)}
.rel b{display:block;font-family:var(--serif);font-size:1.08rem;color:var(--ink);margin-bottom:.3em}
.rel span{font-size:.88rem;color:var(--muted)}

/* ---- 29. RESPONSIVE ------------------------------------------------------ */
@media(max-width:920px){
  .hero__grid{display:flex;flex-direction:column;gap:32px}
  .hero__media{max-width:420px;margin-inline:auto;width:100%;
    position:static;height:auto;display:block;order:3;margin:4px 0 18px}
  /* mobile hero order: eyebrow, H1, product shot, Quick Answer, CTA, rest.
     display:contents promotes the copy column's children to hero-grid items,
     so the shot can be placed between the H1 and the answer. */
  .hero__copy{display:contents}
  .hero .pill{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:4px 0 18px}
  .hero .answer{order:4}
  .hero .hero__cta{order:5}
  /* the rating sits with the CTA. Without an explicit order display:contents
     would leave it at 0 and it would jump above the eyebrow. */
  .hero .hero__rating{order:5}
  .hero .hero__sub{order:6}
  .hero .ticks,.hero .chips{order:7}
  .hero .pay{order:8}
  /* Promoting the copy column exposed these as grid items too. Without an
     order they default to 0 and jump above the eyebrow, so they are pinned
     below the CTA where they sat before. */
  .hero .factpills{order:9}
  .hero .figures{order:11}

  .split,.facts,.docband,.why,.whofor,.howuse{grid-template-columns:1fr;gap:32px}
  .split--rev .split__media{order:0}
  .docband__body{padding:8px 28px 32px}
  .steps,.pricing,.tgrid,.rel{grid-template-columns:1fr}
  /* stacked pricing reorders to the way people actually choose:
     best value first, then good value, then the starter pack */
  .pricing{max-width:430px;margin-inline:auto}
  .pricing .tier:nth-child(1){order:3}
  .pricing .tier:nth-child(2){order:1}
  .pricing .tier:nth-child(3){order:2}
  .pricing .tier--feature{margin-bottom:8px}
  .benefits{grid-template-columns:1fr}
  .badgewall{grid-template-columns:repeat(3,1fr);gap:22px}
  .stats__grid{grid-template-columns:1fr 1fr}
  .stat{border-bottom:1px solid rgba(255,255,255,.12)}
  .stat:nth-child(odd){border-right:1px solid rgba(255,255,255,.12)}
  .stat:nth-child(even){border-right:0}
  .whygrid{grid-template-columns:1fr 1fr}
  .benicons{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bonuses{grid-template-columns:repeat(2,1fr)}
  .ingthumbs{grid-template-columns:repeat(4,1fr);gap:14px}
  .ingthumb img{width:88px;height:88px}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .tlife{grid-template-columns:1fr}
  .tier--feature{transform:none}
  .fgrid{grid-template-columns:1fr 1fr;gap:30px}
  .final--media{grid-template-columns:1fr;gap:26px;text-align:center;padding:40px 26px}
  .final--media .final__body h2{text-align:center}
  .final--media .final__body p{margin-inline:auto}
  .final--media .final__img img{max-width:260px}
}
@media(max-width:700px){
  .whygrid{grid-template-columns:1fr}
}
@media(max-width:560px){
  body{font-size:17px}
  .section{padding:52px 0}
  .hero{padding:36px 0 48px}
  .hero__tag{display:none}
  .fgrid{grid-template-columns:1fr}
  .badgewall,.bonuses,.gallery{grid-template-columns:1fr 1fr}
  .whygrid,.benicons{grid-template-columns:1fr}   /* icon + copy needs the full width */
  .ingthumbs{grid-template-columns:repeat(2,1fr);gap:18px}
  .ingthumb img{width:104px;height:104px}
  .gallery figure:last-child{display:none}
  .final{padding:40px 24px}
  .guarantee{padding:22px 20px;gap:18px}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important}}

/* ==========================================================================
   SHOTS — imagery paired with the content that explains it. Replaces the bare
   .gallery grid: an image on its own tells a buyer nothing.
   ========================================================================== */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:34px}
.shots figure{margin:0;background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}
.shots img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--paper-tint)}
.shots figcaption{padding:22px 24px}
.shots figcaption b{display:block;font-family:var(--serif);font-size:1.12rem;color:var(--ink);
  margin-bottom:.4em;line-height:1.25}
.shots figcaption p{margin:0;color:var(--muted);font-size:.93rem}
.shots--wide{grid-template-columns:repeat(3,minmax(0,1fr))}
.shots--wide img{aspect-ratio:4/3}
@media(max-width:900px){.shots--wide{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.shots,.shots--wide{grid-template-columns:1fr}}

/* ==========================================================================
   BLOG — post meta, table of contents, post cards.
   Everything else (tables, callouts, the mid-article CTA) reuses the
   components the rest of the site already ships, so a post reads as part of
   this website rather than a bolted-on section.
   ========================================================================== */
.postmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;
  margin:0 0 1.8em;padding:14px 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);font-size:.88rem;color:var(--muted)}
.postmeta b{color:var(--ink)}
.postmeta .sep{color:var(--line)}
.postmeta time{white-space:nowrap}

.toc{background:var(--paper-tint);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:22px 26px;margin:0 0 2.2em}
.toc h2{font-size:.78rem!important;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);margin:0 0 .8em;font-family:var(--sans)}
.toc ol{margin:0;padding-left:1.25em;display:grid;gap:.45em;font-size:.95rem}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

.article h2{scroll-margin-top:120px}
.article h3{scroll-margin-top:120px}
.article figure{margin:2em 0}
.article figure img{width:100%;border-radius:var(--radius-lg);border:1px solid var(--line)}
.article figcaption{margin-top:.7em;font-size:0.9062rem;color:var(--faint);text-align:center}
.keypoints{background:var(--accent-tint);border:1px solid var(--accent-line);
  border-left:4px solid var(--accent);border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  padding:22px 26px;margin:0 0 2em}
/* Direct child only: the leading label is the eyebrow. A <b> inside a bullet
   is ordinary emphasis and must stay inline, or every point breaks in two. */
.keypoints>b{display:block;color:var(--accent-deep);margin-bottom:.6em;
  font-family:var(--sans);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.keypoints ul{margin:0;padding-left:1.2em;display:grid;gap:.5em}
.keypoints li b{color:var(--accent-deep)}

.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.posts article{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}
.posts img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center 38%;background:var(--paper-tint)}
.posts .pbody{padding:22px 24px;display:flex;flex-direction:column;flex:1}
.posts h3{margin:0 0 .45em;font-size:1.14rem}
.posts h3 a{color:var(--ink);text-decoration:none}
.posts h3 a:hover{color:var(--accent)}
.posts p{margin:0 0 1em;color:var(--muted);font-size:1.062rem}
.posts .pmeta{margin-top:auto;font-size:.8rem;color:var(--faint)}
@media(max-width:900px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.posts{grid-template-columns:1fr}}

/* Tall or square article images: sized by their own attributes rather than
   stretched to the prose column, so a portrait bottle shot does not eat a
   whole screen of scroll. width:auto keeps the reserved box == the painted
   box, so there is no layout shift. */
.article figure.portrait img{width:100%;max-width:var(--figw,440px);margin-inline:auto}

/* The closing CTA, reused mid-article. Same component, but the prose column is
   roughly a third narrower than the page wrap, so the display heading has to
   come down a size or it wraps to four lines and the block eats a screen. */
.article .final--media{grid-template-columns:168px minmax(0,1fr);gap:24px;padding:30px 28px}
.article .final--media .final__img img{max-width:168px}
.article .final--media h2{font-size:1.68rem;line-height:1.24;margin:0 0 .5em}
.article .final--media p{margin-bottom:1.2em}
.article .final--media .final__price{font-size:1.32rem;margin:.3em 0 .7em}
@media(max-width:620px){
  .article .final--media{grid-template-columns:1fr;text-align:center;padding:30px 22px}
  .article .final--media h2{text-align:center;font-size:1.5rem}
}


/* ---- hero: sticky, centred product column ------------------------------
   The product column holds its place, vertically centred, until the hero has
   fully scrolled past.

   --navh is measured and published by site.js: nav heights run 66-99px across
   the estate and change when a bar compacts, and a hardcoded offset tucks the
   product under the bar on the taller ones.

   min-height makes the sticky box a full screen tall so the shot can be
   CENTRED inside it. Without it the box is only as tall as the image and
   `top` merely pins it under the header, which is what the old house rule did.

   Requires .hero NOT to clip on the block axis -- any non-visible overflow on
   an ancestor becomes the scrollport sticky resolves against. See pitfall 65,
   whose first fix got this wrong. */
@media (min-width: 981px) {
  .hero__grid { align-items: start; }
  .hero__media {
    position: sticky;
    top: calc(var(--navh, 88px) + 14px);
    align-self: start;
    min-height: calc(100vh - var(--navh, 88px) - 28px);
    min-height: calc(100svh - var(--navh, 88px) - 28px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
/* Cancelling the sticky column must NOT cancel the containing block. Every
   hero motif sizes its .hero__media pseudo-elements in PERCENT, so they
   resolve against the nearest positioned ancestor; `static` re-parents them to
   a box several times wider -- measured at 1800px against a 523px column --
   and the ring lands across the headline. Worse, the same query stops it
   animating, so it SITS there: ask for less motion, get the one broken hero.

   `relative` lays out identically to `static` and keeps the containing block.
   `top:0` is not decoration: the rule above sets a top offset of one nav height
   plus 14px, which a relative box would apply for real and push the plate
   ~110px down the page (pitfall 65). Written WITHOUT naming that custom
   property in the usual var() form on purpose -- preflight's undefined-variable
   check reads comments too, so a property named here is a property it believes
   the sheet uses. Measured on 7 sites before and after (pitfall 107). */
@media (prefers-reduced-motion: reduce) {
  .hero__media { position: relative; top: 0; min-height: 0; }
}

/* --- pack cards read as one repeated object ----------------------------
   A pricing row is three cards that have to share their edges, their image
   slot and their button baseline. The vendor product shots are different
   shapes (one site shipped 200x243, 200x105 and 200x65 side by side) and the
   blurbs are different lengths, so without these three rules the images
   render at three sizes and the three CTAs sit at three heights.

   The height lives here and not on the <img> attributes on purpose: those
   must keep stating each file's true ratio, or fix_img_dims.py rewrites them
   and CLS gets worse. Override per site with --pack-img. */
.card--pack{display:flex;flex-direction:column}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);
  object-fit:contain;margin-inline:auto;margin-bottom:14px}
.card--pack>.btn{margin-top:auto}

/* ==== directional chrome (fix_chrome_scroll.py) ==== */
.nav--away{transform:translateY(-100%)}
html.chrome-up .buybar{transform:translateY(105%)}
/* ==== end directional chrome ==== */
/* ==== tables never fade (reveal_skip_tables.py) ==== */
/* A comparison table is reference content the reader scrolled to on
   purpose. Fading it in leaves it illegible for half a second at exactly
   that moment, which reads as broken text rather than as motion. The
   reveal stays on cards and callouts, which are decorative arrivals. */
.tablewrap[data-reveal],.tablewrap.reveal{opacity:1;transform:none;transition:none}
/* ==== end tables never fade ==== */
/*!SITE-HOME-PAINT-START*/
/* ===== jellyofil home surface — slot: bloom / card 14 / control 8 / three-stop depth =====

   Paint only: radius, shadow, background, colour, transform, transition and
   animation. Nothing in this block moves a box, so it belongs below the
   critical marker and needs a restamp, not a rebuild.

   Scope: `.hero` is on index.html and nowhere else on this site, so
   `body:has(.hero)` is a home-only gate for the things that also exist on the
   other 29 pages — the header, the pricing row, the panels and the footer.
   The two-compound form also outranks modern_surface.py's single-class rules,
   so this survives that script re-appending itself after this block.

   Not attempted, and why: .lineup carries border-radius in a style="" on the
   element, which no stylesheet rule can beat without !important. Left alone
   rather than shipping a rule that matches and does nothing. */

body:has(.hero){
  --jf-rc:14px;                 /* cards and panels */
  --jf-rk:8px;                  /* buttons, chips, inputs */
  /* Three stops — contact, mid, wide — tinted with the label navy this whole
     palette is derived from (20,58,115), never neutral black. */
  --jf-d:0 1px 2px rgba(20,58,115,.10),0 6px 14px rgba(20,58,115,.10),0 20px 44px rgba(20,58,115,.13);
  --jf-d-sm:0 1px 2px rgba(20,58,115,.09),0 6px 14px rgba(20,58,115,.09);
  --jf-d-lift:0 1px 2px rgba(20,58,115,.12),0 10px 22px rgba(20,58,115,.14),0 28px 60px rgba(20,58,115,.17);
  --jf-d-gold:0 1px 2px rgba(147,112,42,.16),0 6px 14px rgba(147,112,42,.16),0 22px 48px rgba(147,112,42,.22);
}

/* ---- curve ------------------------------------------------------------- */
body:has(.hero) .qa,
body:has(.hero) .step,
body:has(.hero) .tcard,
body:has(.hero) .tier,
body:has(.hero) .whycard,
body:has(.hero) .callout,
body:has(.hero) .flag,
body:has(.hero) .alert,
body:has(.hero) .bonus,
body:has(.hero) .byline,
body:has(.hero) .faq,
body:has(.hero) .final,
body:has(.hero) .guarantee,
body:has(.hero) .pcard,
body:has(.hero) .ingfig,
body:has(.hero) .facts__img,
body:has(.hero) .tablewrap,
body:has(.hero) .figures div,
body:has(.hero) .split__media img,
body:has(.hero) .howuse__media img{border-radius:var(--jf-rc)}

body:has(.hero) .btn,
body:has(.hero) .hero__tag{border-radius:var(--jf-rk)}

/* ---- shade ------------------------------------------------------------- */
body:has(.hero) .pcard,
body:has(.hero) .qa,
body:has(.hero) .final,
body:has(.hero) .guarantee,
body:has(.hero) .tier{box-shadow:var(--jf-d)}

body:has(.hero) .step,
body:has(.hero) .tcard,
body:has(.hero) .whycard,
body:has(.hero) .bonus,
body:has(.hero) .byline,
body:has(.hero) .callout,
body:has(.hero) .flag,
body:has(.hero) .alert,
body:has(.hero) .faq,
body:has(.hero) .hero__tag,
body:has(.hero) .ingfig,
body:has(.hero) .facts__img,
body:has(.hero) .figures div,
body:has(.hero) .split__media img,
body:has(.hero) .howuse__media img{box-shadow:var(--jf-d-sm)}

/* ---- controls: the buying CTA is the only gradient ---------------------- */
/* Written as background-image so the colour set by each button's `background`
   shorthand stays underneath as the fallback ground. */
body:has(.hero) .btn{
  transition:transform .18s cubic-bezier(.22,.61,.36,1),
             box-shadow .22s ease,background-color .22s ease,border-color .22s ease}
body:has(.hero) .btn--cta{
  background-image:linear-gradient(180deg,#1d4e93 0%,#143a73 52%,#10305e 100%);
  box-shadow:0 1px 2px rgba(11,34,70,.20),0 6px 14px rgba(11,34,70,.22),0 16px 34px rgba(11,34,70,.20)}
body:has(.hero) .btn--cta:hover{
  background-image:linear-gradient(180deg,#24589f 0%,#17407d 52%,#0b2246 100%)}
body:has(.hero) .btn--gold{
  background-image:linear-gradient(180deg,#a87f31 0%,#93702a 52%,#7d5d1f 100%);
  box-shadow:0 1px 2px rgba(125,93,31,.22),0 6px 14px rgba(125,93,31,.24),0 16px 34px rgba(125,93,31,.22)}
body:has(.hero) .btn--gold:hover{
  background-image:linear-gradient(180deg,#b98d38 0%,#886721 52%,#6d5019 100%)}
/* the secondary stays flat, so the pair reads as two weights, not two colours */
body:has(.hero) .btn--ghost{
  background-image:none;box-shadow:0 1px 2px rgba(20,58,115,.06)}
body:has(.hero) .btn:hover{transform:translateY(-2px)}
body:has(.hero) .btn--cta:hover,
body:has(.hero) .btn--gold:hover{
  box-shadow:0 1px 2px rgba(11,34,70,.22),0 10px 22px rgba(11,34,70,.26),0 22px 48px rgba(11,34,70,.24)}
body:has(.hero) .btn:active{transform:translateY(0)}
/* offset 3px puts the ring on the paper, so one colour is legible against the
   navy button, the gold button and the ghost alike */
body:has(.hero) .btn:focus-visible,
body:has(.hero) a:focus-visible,
body:has(.hero) summary:focus-visible{outline:3px solid var(--accent-deep);outline-offset:3px}

/* ---- hero: product card above the motif -------------------------------- */
/* .pcard was unpositioned, so the motif's z-index:1 pseudo-element painted
   over the bottle. position:relative with no offsets lays out identically. */
body:has(.hero) .pcard{position:relative;z-index:2;
  background-image:linear-gradient(168deg,#f7fafd 0%,#e9f0fa 58%,#dfe9f6 100%);
  border-color:rgba(20,58,115,.16)}
body:has(.hero) .hero__tag{z-index:3}

/* ---- hero motif: bloom -------------------------------------------------- */
/* A radial bloom opening from behind the bottle and easing back. It lives on
   the media column's pseudo-elements, never on the <img> — that is the LCP
   element and it is preloaded. Sized at 152% and 116% of the column so it
   reads OUTSIDE the product card instead of disappearing behind its opaque
   face. 26s and 34s: this is a gummy taken daily for weeks.
   Keyframe names are new; btSwell is already in this sheet. */
@media(min-width:921px){
  body:has(.hero) .hero__media::before{
    content:'';position:absolute;inset:auto;left:50%;top:47%;
    width:152%;aspect-ratio:1/1;translate:-50% -50%;
    border-radius:50%;z-index:0;pointer-events:none;
    background:radial-gradient(closest-side,
        rgba(20,58,115,.22),rgba(20,58,115,.10) 46%,rgba(20,58,115,0) 72%);
    animation:jfBloomOpen 26s ease-in-out infinite}
  body:has(.hero) .hero__media::after{
    content:'';position:absolute;inset:auto;left:50%;top:47%;
    width:116%;aspect-ratio:1/1;translate:-50% -50%;
    border-radius:50%;z-index:0;pointer-events:none;
    border:1px solid rgba(147,112,42,.30);
    background:radial-gradient(closest-side,
        rgba(232,213,166,.26),rgba(232,213,166,0) 70%);
    animation:jfBloomRing 34s ease-in-out infinite}
}
/* Under 920px .hero__media is position:static, so a percentage-sized
   pseudo-element resolves against .hero instead — measured 390x2416, a gold
   wash over the whole phone hero including the H1. The motif is a desktop
   figure; below that breakpoint it is switched off rather than rescaled. */
@media(max-width:920px){
  body:has(.hero) .hero__media::before,
  body:has(.hero) .hero__media::after{content:none}
}
@keyframes jfBloomOpen{0%,100%{scale:.86;opacity:.5}50%{scale:1.06;opacity:1}}
@keyframes jfBloomRing{0%,100%{scale:1.03;opacity:.45}50%{scale:.9;opacity:.9}}

/* ---- pricing: the flag reads as a pill inset on the card's top rule ----- */
/* Paint only. The row's geometry — .pricing{align-items:center}, the fixed
   .tier__img box, .tier .btn{margin-top:auto} and .tier--feature's
   scale(1.05) — is left exactly as it was. */
body:has(.hero) .tier__flag{
  border-radius:999px;color:var(--accent);
  background-image:linear-gradient(180deg,#ffffff,#f3efe6);
  box-shadow:0 0 0 5px var(--paper),inset 0 0 0 1px var(--accent-line),
             0 2px 4px rgba(20,58,115,.14)}
body:has(.hero) .tier--pop .tier__flag{
  color:#fff;background-image:linear-gradient(180deg,#1d4e93,#143a73);
  box-shadow:0 0 0 5px var(--paper),inset 0 1px 0 rgba(255,255,255,.28),
             0 2px 5px rgba(20,58,115,.26)}
body:has(.hero) .tier--feature .tier__flag{
  color:#fff;background-image:linear-gradient(180deg,#a87f31,#8a6620);
  box-shadow:0 0 0 5px var(--paper),inset 0 1px 0 rgba(255,255,255,.32),
             0 2px 6px rgba(147,112,42,.30)}

/* the recommended tier: raised already by scale(1.05), now also a different
   ground and a gold-tinted depth rather than the navy one */
body:has(.hero) .tier--feature{
  background-image:linear-gradient(180deg,#fffdf6 0%,#fbf4e3 100%);
  border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold),var(--jf-d-gold)}
body:has(.hero) .tier--pop{border-color:var(--accent-line);box-shadow:var(--jf-d)}

/* Dashed separators drawn as a 1px background stripe on the row's top edge,
   NOT as border-top: a border would add 4px to every card and move the Add To
   Cart buttons. This adds nothing. */
body:has(.hero) .tier__rows li+li{
  background-image:repeating-linear-gradient(90deg,
      var(--accent-line) 0 6px,transparent 6px 12px);
  background-repeat:no-repeat;background-size:100% 1px;background-position:0 0}

/* modern_surface's .tier:hover{transform:translateY(-2px)} outranks
   .tier--feature{transform:scale(1.05)}, so hovering the recommended card
   dropped it back to full size. Both, in one transform — and only above
   920px, because the stacked phone row cancels the scale on purpose. */
body:has(.hero) .tier:hover{box-shadow:var(--jf-d-lift)}
@media(min-width:921px){
  body:has(.hero) .tier--feature:hover{
    transform:scale(1.05) translateY(-2px);
    box-shadow:0 0 0 1px var(--gold),0 1px 2px rgba(147,112,42,.18),
               0 10px 22px rgba(147,112,42,.20),0 28px 60px rgba(147,112,42,.26)}
}

/* ---- motion off on request --------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  body:has(.hero) .btn,
  body:has(.hero) .tier{transition:none}
  body:has(.hero) .btn:hover,
  body:has(.hero) .tier:hover{transform:none}
  body:has(.hero) .hero__media::before,
  body:has(.hero) .hero__media::after{animation:none}
}
@media(min-width:921px) and (prefers-reduced-motion:reduce){
  body:has(.hero) .tier--feature,
  body:has(.hero) .tier--feature:hover{transform:scale(1.05)}
}
/*!SITE-HOME-PAINT-END*/
/* ==== footer type floor (footer_type.py) ==== */
/* The footer carried the smallest text on the page -- the legal pages,
   the guarantee and the contact routes, set as fine print. Running text
   and links sit at 16px, column headings at 15px (uppercase and
   letter-spaced, so they read larger than the number). Last in the file
   on purpose: it outranks the phone breakpoints that shrank them. */
footer{font-size:16px}
footer h4{font-size:15px}
footer .fpay span{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 33 box-shadow declaration(s)
   and 6 of them layered, so every panel read flat however generous
   the radius was. Two stops -- a tight contact shadow and a wide
   ambient one -- is what makes a surface look raised. The tint is
   this site's own ink (23,25,29), not neutral black.

   Paint only: border-radius, box-shadow and transform change no
   geometry, so this is safe below the critical marker and needs a
   restamp rather than a rebuild. */
:root{
  --radius:16px;
  --shadow:0 1px 2px rgba(23,25,29,.06), 0 6px 18px rgba(23,25,29,.07);
  --lift:0 2px 6px rgba(23,25,29,.09), 0 16px 34px rgba(23,25,29,.14);
}

/* These panels declared no radius of their own, so raising
   the token alone left them square. House rule 11 is a
   floor: it outranks a slot that chose square corners. */
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.final,
.whycard,
.tier,
.article figure{border-radius:var(--radius)}

/* A surface a reader can click answers the pointer. 2px
   registers without reflowing the row beside it. */
.rel a,
.posts article,
.shots figure,
.card--pack,
.badgewall figure,
.tier,
.posts h3 a{transition:box-shadow .2s ease, transform .2s ease}
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure:hover,
.tier:hover,
.posts h3 a:hover{box-shadow:var(--lift);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure:hover,
.tier:hover,
.posts h3 a:hover{transform:none}
}
/* ==== end modern surface ==== */
.review-foot{margin:0;padding:.6rem 0;font-size:.92rem}.review-foot a{font-weight:600}