/* ─── Tokens ────────────────────────────────────────────────────────────────
   Editorial, single light theme. Palette lifted from the pack: the navy of
   the product name, the teal of the tube, the rose of the tagline (CTA only). */
:root{
  color-scheme: light;
  --paper:#FFFFFF;
  --paper-2:#F5F8F8;
  --paper-3:#EAF1F1;
  --line:#D9E3E3;
  --line-2:#B9CACA;

  --ink:#1B2A33;          /* 13.9:1 */
  --ink-2:#44555E;        /*  7.6:1 */
  --ink-3:#6B7B83;        /*  4.7:1, secondary only */

  --teal:#1F7F7A;         /* accent text, 4.9:1 */
  --teal-deep:#155E5A;
  --teal-wash:#E6F3F2;
  --teal-pack:#8ECFC9;    /* the tube colour, decorative only */

  --rose:#8B2660;         /* plum from the pack; CTA fills, white text 7.3:1 */
  --rose-deep:#6B1A49;
  --rose-wash:#F6E8F0;

  --measure:680px;
  --pad:clamp(20px,5vw,40px);
  --tap:48px;

  --f-head:"Fraunces",Georgia,"Times New Roman",serif;
  --f-body:"Lora",Georgia,"Times New Roman",serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:19px;line-height:1.72;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3{margin:0;font-family:var(--f-head);font-weight:700;line-height:1.12;letter-spacing:-.012em;text-wrap:balance;}
p{margin:0;}
a{color:inherit;}
.prose a{color:var(--teal);text-underline-offset:3px;text-decoration-thickness:1.5px;}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:3px;}
img,svg{display:block;max-width:100%;}
.wrap{width:100%;max-width:1100px;margin-inline:auto;padding-inline:var(--pad);}

/* Small caps labels, set in the body face so the page stays two families. */
.label{
  font-family:var(--f-body);font-size:13px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}

/* ─── Progress + top bar ──────────────────────────────────────────────────── */
.progress{position:fixed;top:0;left:0;height:4px;width:0;background:var(--teal);z-index:90;transition:width .1s linear;}
.top{
  position:sticky;top:0;z-index:70;background:var(--paper);border-bottom:1px solid var(--line);
}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;}
.brand{
  display:flex;align-items:baseline;gap:6px;text-decoration:none;min-height:var(--tap);align-items:center;
  font-family:var(--f-head);font-size:22px;color:var(--teal-deep);letter-spacing:-.01em;
}
.brand em{font-style:italic;font-weight:500;}
.disclose{
  font-family:var(--f-body);font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);border:1.5px solid var(--line-2);padding:6px 11px;border-radius:999px;white-space:nowrap;
}

/* ─── Buttons ─────────────────────────────────────────────────────────────── */
.btn{
  font-family:var(--f-body);font-size:17px;font-weight:600;border-radius:999px;
  padding:13px 26px;min-height:var(--tap);border:2px solid transparent;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;white-space:nowrap;
  transition:background-color .16s ease,border-color .16s ease,transform .16s ease;
}
.btn-rose,.prose a.btn-rose{background:var(--rose);color:#FFFFFF;border-color:var(--rose);text-decoration:none;}
.btn-rose:hover,.prose a.btn-rose:hover{background:var(--rose-deep);border-color:var(--rose-deep);color:#FFFFFF;}
.btn-line{background:transparent;color:var(--teal-deep);border-color:var(--line-2);}
.btn-line:hover{background:var(--teal-wash);border-color:var(--teal);}

/* ─── Article header ──────────────────────────────────────────────────────── */
.head{padding-block:clamp(36px,6vw,64px) clamp(28px,4vw,40px);}
.head-in{max-width:var(--measure);margin-inline:auto;display:flex;flex-direction:column;gap:18px;}
.kicker{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.kicker .label{color:var(--teal);}
.kicker .sep{width:4px;height:4px;border-radius:50%;background:var(--line-2);}
.head h1{font-size:clamp(34px,5.2vw,56px);font-variation-settings:"SOFT" 50;}
.dek{font-size:clamp(19px,2.1vw,22px);color:var(--ink-2);line-height:1.55;font-style:italic;}
.byline{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:15px;color:var(--ink-3);}
.byline .ed{color:var(--ink-2);}

/* ─── Hero figure ─────────────────────────────────────────────────────────── */
.figure{
  max-width:900px;margin:clamp(20px,3vw,32px) auto 0;border-radius:18px;overflow:hidden;
  background:linear-gradient(135deg,#EAF6F5 0%,#F7FBFB 60%,#FFF3F7 100%);
  border:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.7fr);gap:20px;align-items:center;
  padding:clamp(22px,3.4vw,40px);
}
@media (max-width:640px){.figure{grid-template-columns:1fr;}}
.figure-copy{display:flex;flex-direction:column;gap:12px;}
.figure-copy .name{font-family:var(--f-head);font-size:clamp(22px,2.6vw,30px);font-weight:700;color:var(--ink);}
.figure-copy .claims{font-size:17px;color:var(--ink-2);line-height:1.5;}
.figure-copy .claims b{color:var(--teal-deep);font-weight:600;}
.slot{
  border:1px solid var(--line);border-radius:14px;padding:16px;background:#fff;
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
}
.slot .note{font-size:12.5px;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase;font-weight:600;}
.stick{width:min(230px,80%);height:auto;}
/* Photo figures */
.figure.figure-photo{display:block;max-width:none;margin:6px 0 0;padding:0;background:none;border:1px solid var(--line);}
.figure-photo img{width:100%;max-width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover;border-radius:18px;}
.inline-fig{margin:6px 0 0;}
.inline-fig img{width:100%;max-width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--line);aspect-ratio:4/3;object-fit:cover;}

/* ─── Layout: article + rail ──────────────────────────────────────────────── */
.body{display:grid;grid-template-columns:minmax(0,var(--measure)) 300px;gap:clamp(28px,5vw,72px);justify-content:center;padding-block:clamp(28px,4vw,48px) clamp(64px,8vw,96px);}
@media (max-width:980px){.body{grid-template-columns:minmax(0,var(--measure));}.rail{display:none;}}

/* Table of contents */
.toc{
  border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:var(--paper-2);
  display:flex;flex-direction:column;gap:10px;margin-bottom:clamp(28px,4vw,40px);
}
.toc .label{color:var(--ink-2);}
.toc ol{margin:0;padding:0 0 0 22px;display:flex;flex-direction:column;gap:0;font-size:16.5px;}
.toc a{text-decoration:none;color:var(--ink-2);display:inline-block;padding:7px 0;min-height:36px;}
.toc a:hover{color:var(--teal);text-decoration:underline;}

/* Prose */
.prose{display:flex;flex-direction:column;gap:22px;}
.prose h2{
  font-size:clamp(26px,3.2vw,34px);margin-top:clamp(28px,4vw,44px);padding-top:clamp(20px,3vw,28px);
  border-top:1px solid var(--line);display:flex;gap:16px;align-items:baseline;
}
.prose h2 .n{font-family:var(--f-body);font-size:15px;font-weight:600;color:var(--teal);letter-spacing:.1em;flex:none;}
.prose h3{font-size:22px;margin-top:8px;}
.prose p{color:var(--ink);}
.prose .lead{font-size:21px;line-height:1.65;}
.prose ul{margin:0;padding-left:24px;display:flex;flex-direction:column;gap:9px;}
.pull{
  font-family:var(--f-head);font-size:clamp(23px,2.8vw,29px);line-height:1.35;font-weight:500;
  color:var(--teal-deep);border-left:4px solid var(--teal-pack);padding:6px 0 6px 22px;margin:10px 0;
  font-variation-settings:"SOFT" 50;
}
.aside{
  background:var(--teal-wash);border:1px solid #CFE6E3;border-radius:14px;padding:20px 22px;
  display:flex;flex-direction:column;gap:8px;font-size:17px;color:var(--ink-2);
}
.aside .label{color:var(--teal-deep);}

/* Comparison table */
.cmp{border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:16.5px;}
.cmp table{width:100%;border-collapse:collapse;}
.cmp th,.cmp td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);}
.cmp th{background:var(--paper-2);font-family:var(--f-body);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);}
.cmp tr:last-child td{border-bottom:0;}
.cmp td:first-child{font-weight:600;color:var(--ink);width:36%;}
.cmp-scroll{overflow-x:auto;}

/* Steps */
.steps{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));counter-reset:st;}
.step{border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:8px;background:#fff;}
.step::before{
  counter-increment:st;content:counter(st);
  width:34px;height:34px;border-radius:50%;background:var(--teal-wash);color:var(--teal-deep);
  display:grid;place-items:center;font-family:var(--f-body);font-weight:600;font-size:15px;
}
.step b{font-family:var(--f-head);font-size:19px;font-weight:700;}
.step p{font-size:16px;color:var(--ink-2);line-height:1.5;}

/* Honest section */
.honest{
  border:2px solid var(--ink);border-radius:16px;padding:clamp(22px,3vw,32px);
  display:flex;flex-direction:column;gap:14px;background:#fff;
}
.honest h3{font-size:24px;}
.honest ul{padding-left:22px;}
.honest li{color:var(--ink-2);font-size:17.5px;}

/* Inline CTA card */
.cta{
  background:var(--rose-wash);border:1px solid #F1C9D9;border-radius:16px;padding:clamp(22px,3vw,30px);
  display:flex;flex-direction:column;gap:14px;align-items:flex-start;
}
.cta .label{color:var(--rose-deep);}
.cta h3{font-size:24px;}
.cta p{font-size:17px;color:var(--ink-2);}
.cta .fine{font-size:14px;color:var(--ink-3);}

/* Review + before/after slots */
.reviews{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.review{
  border:2px dashed var(--line-2);border-radius:14px;padding:18px;background:var(--paper-2);
  display:flex;flex-direction:column;gap:8px;min-height:150px;
}
.review .stars{color:#E3A008;letter-spacing:2px;font-size:16px;}
.review .who{font-size:14px;color:var(--ink-3);}
.review .txt{font-size:16px;color:var(--ink-2);font-style:italic;}
.slot-note{
  font-size:14px;color:var(--rose-deep);background:var(--rose-wash);border:1px solid #F1C9D9;
  border-radius:10px;padding:10px 14px;line-height:1.5;
}

/* FAQ */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;min-height:var(--tap);font-family:var(--f-head);font-size:20px;font-weight:700;display:flex;justify-content:space-between;gap:20px;align-items:center;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .pm{flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;font-family:var(--f-body);font-size:19px;color:var(--teal);transition:transform .2s ease;}
.faq details[open] summary .pm{transform:rotate(45deg);background:var(--teal-wash);border-color:var(--teal);}
.faq .ans{padding:0 0 20px;color:var(--ink-2);font-size:17.5px;}

/* ─── Rail (desktop) ──────────────────────────────────────────────────────── */
.rail{position:sticky;top:84px;align-self:start;display:flex;flex-direction:column;gap:14px;}
.rail-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 20px 40px -32px rgba(27,42,51,.35);}
.rail-img{background:linear-gradient(160deg,#EAF6F5,#FFF3F7);padding:22px;display:grid;place-items:center;}
.rail-body{padding:18px;display:flex;flex-direction:column;gap:10px;}
.rail-body .name{font-family:var(--f-head);font-size:19px;font-weight:700;}
.rail-body .sub{font-size:15px;color:var(--ink-2);line-height:1.45;}
.rail-body .price{font-size:15px;color:var(--ink-3);}
.rail-body .btn{width:100%;}
.rail-fine{font-size:13px;color:var(--ink-3);line-height:1.5;padding:0 4px;}

/* ─── Sticky bottom bar (mobile + after scroll) ───────────────────────────── */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -12px 30px -20px rgba(27,42,51,.4);transform:translateY(110%);transition:transform .25s ease;
  padding:10px var(--pad);padding-bottom:max(10px,env(safe-area-inset-bottom));
}
.bar[data-on=true]{transform:translateY(0);}
.bar-in{max-width:1100px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;}
.bar .name{font-family:var(--f-head);font-weight:700;font-size:17px;line-height:1.2;}
.bar .sub{font-size:13.5px;color:var(--ink-3);}
.bar .btn{padding-inline:20px;font-size:16px;}
@media (min-width:981px){.bar{background:transparent;border-top:0;box-shadow:none;padding:0 0 14px;}.bar-in{max-width:760px;border:1px solid var(--line);border-radius:999px;background:#fff;box-shadow:0 10px 24px -14px rgba(27,42,51,.35);padding:8px 8px 8px 20px;}}
body[data-bar=on]{padding-bottom:84px;}

/* ─── Footer ──────────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);background:var(--paper-2);padding-block:36px 48px;}
.foot-in{max-width:var(--measure);margin-inline:auto;display:flex;flex-direction:column;gap:14px;font-size:14.5px;color:var(--ink-3);line-height:1.6;}
.foot strong{color:var(--ink-2);}

/* ── Additions for the product-free version ─────────────────────────────── */
.body{grid-template-columns:minmax(0,var(--measure));}
.cases{display:flex;flex-direction:column;gap:16px;}
.case{
  border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr);
}
.case-head{
  padding:16px 22px;background:var(--paper-2);border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.case-head .label{color:var(--teal);}
.case-head .who{font-family:var(--f-head);font-size:21px;font-weight:700;}
.case-body{padding:20px 22px;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.beat{display:flex;flex-direction:column;gap:6px;}
.beat .label{font-size:12px;}
.beat p{font-size:16.5px;color:var(--ink-2);line-height:1.55;}
.beat.is-turn p{color:var(--ink);}
.illus{font-size:14px;color:var(--ink-3);font-style:italic;}
.learn{
  border:1px solid var(--line);border-radius:18px;padding:clamp(26px,3.6vw,40px);
  background:linear-gradient(135deg,#EAF6F5 0%,#FFFFFF 55%,#FFF3F7 100%);
  display:flex;flex-direction:column;gap:16px;align-items:flex-start;
}
.learn h3{font-size:clamp(24px,3vw,30px);}
.learn p{font-size:17.5px;color:var(--ink-2);max-width:56ch;}
.learn .fine{font-size:14px;color:var(--ink-3);}
/* Checklist that leads into the product */
.lookfor{border:1px solid var(--line);border-radius:16px;padding:clamp(22px,3vw,30px);background:var(--paper-2);display:flex;flex-direction:column;gap:12px;}
.lookfor h3{font-size:clamp(22px,2.8vw,27px);}
.lookfor p{font-size:17.5px;color:var(--ink-2);}
.lookfor ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px;}
.lookfor li{font-size:17.5px;color:var(--ink-2);}
/* The product box */
.product{
  border:2px solid var(--rose);border-radius:20px;background:#fff;overflow:hidden;
  display:grid;grid-template-columns:minmax(180px,.55fr) minmax(0,1fr);
  box-shadow:0 26px 50px -36px rgba(217,66,122,.45);
}
@media (max-width:640px){.product{grid-template-columns:1fr;}}
.product-img{
  background:#FFFFFF;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:clamp(16px,2.4vw,26px);border-right:1px solid var(--line);
}
@media (max-width:640px){.product-img{border-right:0;border-bottom:1px solid var(--line);}}
.product-img img{width:auto;max-width:100%;height:300px;object-fit:contain;}
@media (max-width:640px){.product-img img{height:240px;}}
.product-img .note{font-size:12px;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;font-weight:600;}
.product-body{padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:12px;align-items:flex-start;}
.product-body h3{font-size:clamp(24px,3vw,30px);}
.brand-line{font-size:16px;color:var(--ink-3);margin-top:-6px;}
.product-desc{font-size:17.5px;color:var(--ink-2);}
.product-points{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px;}
.product-points li{font-size:17px;color:var(--ink);}
.price-line{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.price-line .price{font-family:var(--f-head);font-size:34px;font-weight:700;color:var(--rose-deep);line-height:1;}
.price-line .price-fine{font-size:13.5px;color:var(--ink-3);line-height:1.4;max-width:34ch;}
.retailers{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;width:100%;}
.retailers .btn{width:100%;}
.learn-ctas{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:4px;}
.learn-ctas .btn{width:100%;}
.product-body .btn{margin-top:6px;}
.product-body .fine{font-size:13.5px;color:var(--ink-3);line-height:1.5;}
.proof{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;color:var(--ink-2);line-height:1.5;background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:10px 14px;}
.proof .stars{color:#E3A008;letter-spacing:1px;flex:none;font-size:15px;}

/* ---- legal pages ---- */
.legal{grid-template-columns:minmax(0,var(--measure));}
.contact-card{border:1px solid var(--line);border-radius:16px;background:var(--paper-2);padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:4px;font-size:18px;color:var(--ink-2);line-height:1.7;}
.contact-card .label{color:var(--teal);margin-bottom:8px;}
.contact-card b{color:var(--ink);}
.contact-card a{color:var(--teal-deep);}
.cookie-table{border:1px solid var(--line);border-radius:14px;overflow-x:auto;font-size:16px;}
.cookie-table table{width:100%;border-collapse:collapse;min-width:560px;}
.cookie-table th,.cookie-table td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);}
.cookie-table th{background:var(--paper-2);font-family:var(--f-body);font-weight:600;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);}
.cookie-table tr:last-child td{border-bottom:0;}
.cookie-table td:first-child{font-weight:600;color:var(--ink);white-space:nowrap;}
.foot-nav{display:flex;gap:10px 22px;flex-wrap:wrap;font-size:15px;}
.foot-nav a{color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px;}
.foot-nav a:hover{color:var(--teal);}

/* masthead brand fit on small screens */
@media (max-width:520px){.brand{font-size:19px;}.disclose{font-size:11px;padding:5px 9px;}}

/* demoted alternate-retailer links */
.retailers .ret-alt{font-size:15px;}
.retailers .ret-alt a{color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px;}
.retailers .ret-alt a:hover{color:var(--teal);}
.ret-alt-line{font-size:15px;color:var(--ink-2);margin:0;}
.ret-alt-line a{color:var(--teal-deep);text-decoration:underline;text-underline-offset:3px;}

/* full-bleed editorial figures (uncropped, with caption) */
.figfull{max-width:560px;margin:22px auto 0;text-align:center;}
.figfull img{width:100%;max-width:100%;height:auto;border:1px solid var(--line);border-radius:14px;}
.figfull figcaption{font-size:14px;color:var(--ink-3);margin-top:10px;line-height:1.55;text-align:left;font-style:italic;}