/* ==========================================================================
   Product Review 24 Inc. — editorial storytelling advertorial stylesheet
   Palette sampled from images/logo.png
   ========================================================================== */

:root{
  --paper:      #FBF5EE;
  --paper-warm: #F5E9DB;
  --paper-deep: #EEDFCC;
  --sand:       #F0D0B0;
  --blush:      #FFD6C4;

  --ink:        #2C2220;
  --brand:      #504040;
  --brand-deep: #403030;
  --muted:      #6B5A55;
  --rule:       #DCCBB8;

  --accent:      #E06040;
  --accent-deep: #BF4526;
  --accent-soft: #FBE3DA;

  --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --col:   680px;
  --wide:  1080px;
  --r:     14px;
  --shadow: 0 18px 44px -26px rgba(64,48,48,.55);
}

*,*::before,*::after{box-sizing:border-box}

html,body{
  overflow-x:hidden;
  max-width:100%;
}

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1.05rem,.98rem + .35vw,1.19rem);
  line-height:1.72;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{color:var(--accent)}

/* ---------- layout primitives ---------- */
.col{
  width:100%;
  max-width:var(--col);
  margin-inline:auto;
  padding-inline:22px;
}
.col--wide{max-width:var(--wide)}

.stack > * + *{margin-top:1.15em}

section{padding-block:0}

/* ---------- announcement strip ---------- */
.strip{
  background:var(--brand-deep);
  color:var(--sand);
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-align:center;
  padding:11px 18px;
  line-height:1.45;
}
.strip a{
  color:#fff;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
.strip a:hover{color:var(--blush)}

/* ---------- masthead ---------- */
.masthead{
  background:var(--paper-warm);
  border-bottom:1px solid var(--rule);
}
.masthead__inner{
  max-width:var(--wide);
  margin-inline:auto;
  padding:13px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.masthead img{height:50px;width:auto}
.masthead__tag{
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--brand);
  text-align:right;
  line-height:1.5;
}
@media (max-width:520px){ .masthead__tag{display:none} .masthead img{height:44px} }

/* ---------- article head ---------- */
.artwrap{padding-top:36px;padding-bottom:8px}

.kicker{
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent-deep);
  margin:0 0 14px;
}

h1{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(2rem,1.35rem + 3.05vw,3.15rem);
  line-height:1.1;
  letter-spacing:-.018em;
  margin:0 0 18px;
  color:var(--brand-deep);
  text-wrap:balance;
}

.deck{
  font-size:clamp(1.1rem,1.02rem + .42vw,1.3rem);
  color:var(--muted);
  margin:0 0 22px;
  line-height:1.6;
}

.byline{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  margin:22px 0 0;
}
.byline img.pfp{
  width:56px;height:56px;border-radius:50%;
  object-fit:cover;flex:0 0 56px;
  border:2px solid var(--sand);
}
.byline__name{font-weight:800;font-size:.98rem;line-height:1.3;color:var(--brand-deep)}
.byline__role{font-size:.85rem;color:var(--muted);line-height:1.4}
.byline__date{
  margin-left:auto;font-size:.78rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.09em;font-weight:700;
  text-align:right;
}
@media (max-width:520px){ .byline__date{margin-left:0;width:100%;text-align:left;order:3} .byline{flex-wrap:wrap} }

.stars{height:22px;width:auto;margin:0 0 12px}

/* ---------- figures ---------- */
figure{margin:34px 0}
figure img{border-radius:var(--r);box-shadow:var(--shadow);width:100%}
figcaption{
  font-size:.82rem;color:var(--muted);
  margin-top:10px;line-height:1.55;font-style:italic;
}
.figure--bleed{margin-inline:calc(50% - 50vw);max-width:100vw}
.figure--bleed img{border-radius:0;box-shadow:none}
@media (min-width:760px){
  .figure--bleed{margin-inline:-60px;max-width:none}
  .figure--bleed img{border-radius:var(--r);box-shadow:var(--shadow)}
}

/* ---------- body copy ---------- */
.article p{margin:0 0 1.15em}
.article strong{font-weight:800;color:var(--brand-deep)}

.article h2{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(1.55rem,1.25rem + 1.35vw,2.2rem);
  line-height:1.18;
  letter-spacing:-.015em;
  color:var(--brand-deep);
  margin:48px 0 18px;
  text-wrap:balance;
}
.article h2::after{
  content:"";
  display:block;
  width:64px;height:4px;
  background:var(--accent);
  border-radius:3px;
  margin-top:14px;
}
.article h3{
  font-family:var(--sans);
  font-weight:800;
  font-size:1.12rem;
  margin:30px 0 8px;
  color:var(--brand-deep);
}

.lede{font-size:1.14em;line-height:1.62}

/* inline mid-article link line */
.linkline{
  background:var(--accent-soft);
  border-left:5px solid var(--accent);
  border-radius:0 10px 10px 0;
  padding:14px 18px;
  font-weight:700;
  font-size:1rem;
  margin:28px 0;
  color:var(--brand-deep);
}
.linkline a{font-weight:800}

/* ---------- icon bullet list (replaces the reference dot bullets) ---------- */
.reasons{list-style:none;margin:26px 0;padding:0}
.reasons li{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:14px 0;
  border-bottom:1px dashed var(--rule);
}
.reasons li:last-child{border-bottom:0}
.reasons svg{
  flex:0 0 26px;width:26px;height:26px;
  color:var(--accent);
  margin-top:2px;
}
.reasons span{line-height:1.6}

/* ---------- pull quote ---------- */
.pull{
  margin:38px 0;
  padding:26px 26px 26px 30px;
  background:var(--paper-warm);
  border-left:6px solid var(--brand);
  border-radius:0 var(--r) var(--r) 0;
  font-family:var(--serif);
  font-size:clamp(1.15rem,1.03rem + .55vw,1.42rem);
  line-height:1.45;
  font-style:italic;
  color:var(--brand-deep);
}
.pull cite{
  display:block;
  margin-top:14px;
  font-family:var(--sans);
  font-style:normal;
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--accent-deep);
}

/* ---------- numbered feature blocks ---------- */
.trio{margin:34px 0}
.trio__item{
  margin:0 0 40px;
  background:#fff;
  border:1px solid var(--rule);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.trio__item img{width:100%;display:block;background:var(--paper-warm)}
.trio__body{padding:24px 24px 28px}
.trio__num{
  display:inline-flex;
  align-items:center;justify-content:center;
  width:42px;height:42px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-family:var(--serif);
  font-size:1.3rem;
  font-weight:700;
  margin-bottom:12px;
}
.trio__body h3{margin:0 0 10px;font-size:1.3rem;font-family:var(--serif);font-weight:700;line-height:1.22}
.trio__body p{margin:0 0 .9em;font-size:1rem;line-height:1.65}
.trio__body p:last-child{margin-bottom:0}

/* ---------- authority quote card ---------- */
.authority{
  margin:40px 0;
  background:var(--brand-deep);
  color:var(--paper-warm);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.authority img.wide{width:100%;display:block}
.authority__body{padding:26px 24px 28px}
.authority__body p{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.1rem;
  line-height:1.55;
  margin:0 0 16px;
  color:#F7ECE0;
}
.authority__who{
  display:flex;align-items:center;gap:12px;
  border-top:1px solid rgba(240,208,176,.28);
  padding-top:16px;
}
.authority__who img{width:46px;height:46px;border-radius:50%;flex:0 0 46px;object-fit:cover}
.authority__who b{display:block;font-size:.95rem;color:#fff}
.authority__who span{font-size:.8rem;color:var(--sand);letter-spacing:.06em;text-transform:uppercase;font-weight:700}

/* ---------- morning timeline ---------- */
.timeline{margin:32px 0;padding:0;list-style:none;position:relative}
.timeline::before{
  content:"";position:absolute;left:9px;top:8px;bottom:8px;
  width:2px;background:var(--rule);
}
.timeline li{position:relative;padding:0 0 26px 40px}
.timeline li::before{
  content:"";position:absolute;left:2px;top:8px;
  width:16px;height:16px;border-radius:50%;
  background:var(--accent);
  border:3px solid var(--paper);
}
.timeline b{
  display:block;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-deep);font-weight:800;margin-bottom:4px;
}
.timeline p{margin:0;font-size:1rem;line-height:1.65}

/* ---------- offer band ---------- */
.offer{
  margin:48px 0;
  background:var(--brand-deep);
  color:var(--paper-warm);
  border-radius:var(--r);
  padding:32px 24px 34px;
  text-align:center;
  box-shadow:var(--shadow);
}
.offer h2{
  font-family:var(--serif);
  color:#fff;
  font-size:clamp(1.5rem,1.2rem + 1.3vw,2.05rem);
  line-height:1.2;
  margin:0 0 14px;
}
.offer h2::after{display:none}
.offer p{margin:0 auto 20px;max-width:44ch;color:#F0DFCD;font-size:1.02rem}
.offer img.ba{
  max-width:440px;margin:0 auto 24px;border-radius:10px;width:100%;
}
.pricebar{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin:0 0 22px;
}
.pricebar div{
  background:rgba(240,208,176,.12);
  border:1px solid rgba(240,208,176,.3);
  border-radius:10px;
  padding:10px 16px;
  min-width:132px;
  text-align:center;
}
.pricebar b{display:block;color:#fff;font-size:1.16rem;font-family:var(--serif)}
.pricebar span{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sand);font-weight:700}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  background:var(--accent);
  color:#fff !important;
  font-family:var(--sans);
  font-weight:800;
  font-size:clamp(1rem,.95rem + .3vw,1.12rem);
  letter-spacing:.03em;
  text-decoration:none;
  padding:17px 34px;
  border-radius:999px;
  border:0;
  box-shadow:0 10px 26px -12px rgba(191,69,38,.85);
  transition:transform .16s ease, background .16s ease;
  text-align:center;
  line-height:1.25;
  max-width:100%;
}
.btn:hover{background:var(--accent-deep);color:#fff !important;transform:translateY(-2px)}
.btn--block{display:block;width:100%;max-width:460px;margin-inline:auto}
.btn--ghost{
  background:transparent;
  color:var(--accent-deep) !important;
  border:2px solid var(--accent);
  box-shadow:none;
}
.btn--ghost:hover{background:var(--accent);color:#fff !important}

.btn-note{
  font-size:.82rem;color:var(--muted);
  margin-top:12px;text-align:center;line-height:1.5;
}
.offer .btn-note{color:var(--sand)}

.cta-center{text-align:center;margin:36px 0}

/* ---------- trust row ---------- */
.trust{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  margin:26px 0 0;padding:0;list-style:none;
}
.trust li{
  display:flex;align-items:center;gap:8px;
  font-size:.82rem;font-weight:700;letter-spacing:.04em;
  color:var(--brand-deep);
  background:var(--paper-warm);
  border:1px solid var(--rule);
  border-radius:999px;
  padding:8px 16px;
}
.trust svg{width:17px;height:17px;color:var(--accent);flex:0 0 17px}
.offer .trust li{background:rgba(240,208,176,.12);border-color:rgba(240,208,176,.3);color:#F7ECE0}

/* ---------- featured single review ---------- */
.spotlight{
  margin:36px 0;
  background:var(--paper-warm);
  border:1px solid var(--rule);
  border-radius:var(--r);
  padding:24px;
  display:flex;gap:16px;align-items:flex-start;
}
.spotlight img.av{width:58px;height:58px;border-radius:50%;flex:0 0 58px;object-fit:cover}
.spotlight .stars{height:18px;margin:6px 0 10px}
.spotlight b{display:block;font-size:.95rem;color:var(--brand-deep)}
.spotlight p{margin:0;font-size:.98rem;line-height:1.62}

/* ---------- review list ---------- */
.reviews{display:grid;gap:18px;margin:30px 0}
@media (min-width:820px){ .reviews--two{grid-template-columns:1fr 1fr} }
.review{
  background:#fff;
  border:1px solid var(--rule);
  border-radius:var(--r);
  padding:20px 22px;
}
.review__head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.review__head img{width:46px;height:46px;border-radius:50%;flex:0 0 46px;object-fit:cover}
.review__head b{display:block;font-size:.92rem;color:var(--brand-deep)}
.review__head time{font-size:.76rem;color:var(--muted)}
.review .stars{height:15px;margin:4px 0 0}
.review p{margin:0;font-size:.96rem;line-height:1.62}

/* ---------- ingredients ---------- */
.ing{display:grid;gap:18px;margin:30px 0}
@media (min-width:700px){ .ing{grid-template-columns:repeat(3,1fr)} }
.ing figure{
  margin:0;background:#fff;border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden;
}
.ing figure img{border-radius:0;box-shadow:none}
.ing figcaption{padding:16px 18px 20px;font-style:normal;color:var(--ink);margin:0}
.ing figcaption b{display:block;font-family:var(--serif);font-size:1.1rem;margin-bottom:5px;color:var(--brand-deep)}
.ing figcaption span{font-size:.9rem;color:var(--muted);line-height:1.55;display:block}

/* ---------- stat strip ---------- */
.stats{display:grid;gap:14px;margin:30px 0}
@media (min-width:600px){ .stats{grid-template-columns:1fr 1fr} }
.stat{
  background:var(--paper-warm);
  border:1px solid var(--rule);
  border-left:5px solid var(--accent);
  border-radius:0 10px 10px 0;
  padding:18px 20px;
}
.stat b{
  display:block;font-family:var(--serif);font-size:2rem;line-height:1;
  color:var(--accent-deep);margin-bottom:8px;
}
.stat span{font-size:.92rem;line-height:1.55;color:var(--ink);display:block}

/* ---------- how to use steps ---------- */
.steps{counter-reset:s;list-style:none;margin:28px 0;padding:0}
.steps li{
  counter-increment:s;
  position:relative;
  padding:0 0 20px 56px;
}
.steps li::before{
  content:counter(s);
  position:absolute;left:0;top:0;
  width:38px;height:38px;border-radius:50%;
  background:var(--brand);color:var(--sand);
  font-family:var(--serif);font-weight:700;font-size:1.05rem;
  display:flex;align-items:center;justify-content:center;
}
.steps b{display:block;color:var(--brand-deep);font-weight:800;margin-bottom:3px}
.steps p{margin:0;font-size:.98rem;line-height:1.62}

/* ---------- author bio ---------- */
.bio{
  margin:44px 0;
  background:var(--paper-warm);
  border:1px solid var(--rule);
  border-radius:var(--r);
  padding:26px 24px;
  display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;
}
.bio img{width:78px;height:78px;border-radius:50%;flex:0 0 78px;object-fit:cover;border:3px solid var(--sand)}
.bio__t{flex:1 1 260px}
.bio h3{margin:0 0 8px;font-family:var(--serif);font-size:1.28rem;color:var(--brand-deep)}
.bio p{margin:0;font-size:.96rem;line-height:1.65;color:var(--muted)}

/* ---------- FAQ ---------- */
.faq{margin:32px 0}
.faq details{
  background:#fff;
  border:1px solid var(--rule);
  border-radius:12px;
  margin-bottom:12px;
  overflow:hidden;
}
.faq details[open]{border-color:var(--accent);box-shadow:var(--shadow)}
.faq summary{
  cursor:pointer;
  list-style:none;
  padding:18px 52px 18px 20px;
  font-weight:800;
  font-size:1.02rem;
  color:var(--brand-deep);
  position:relative;
  line-height:1.45;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";
  position:absolute;right:20px;top:50%;
  width:12px;height:12px;
  border-right:2.5px solid var(--accent);
  border-bottom:2.5px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .2s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .faq__a{padding:0 20px 20px;font-size:.98rem;line-height:1.68;color:var(--ink)}
.faq .faq__a p{margin:0 0 .8em}
.faq .faq__a p:last-child{margin-bottom:0}

/* ---------- sticky bar ---------- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--brand-deep);
  border-top:3px solid var(--accent);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:center;gap:16px;
  transform:translateY(115%);
  transition:transform .28s ease;
  box-shadow:0 -10px 30px -18px rgba(0,0,0,.7);
}
.sticky.on{transform:translateY(0)}
.sticky__t{color:var(--paper-warm);font-size:.88rem;font-weight:700;line-height:1.35}
.sticky__t b{color:#fff;display:block;font-size:.96rem}
.sticky .btn{padding:13px 26px;font-size:.95rem;white-space:nowrap}
@media (max-width:600px){
  .sticky__t{display:none}
  .sticky .btn{width:100%;max-width:420px}
}

/* ---------- disclosure / footer ---------- */
.disclosure{
  max-width:var(--col);
  margin:44px auto 0;
  padding:22px;
  font-size:.8rem;
  line-height:1.65;
  color:var(--muted);
  border-top:1px solid var(--rule);
}

.sitefoot{
  background:var(--paper-deep);
  border-top:4px solid var(--brand);
  margin-top:40px;
  padding:38px 22px calc(96px + env(safe-area-inset-bottom));
}
.sitefoot__inner{max-width:var(--wide);margin-inline:auto}
.sitefoot__top{
  display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-start;
}
.sitefoot img.mark{height:52px;width:auto;margin-bottom:14px}
.sitefoot__id{flex:1 1 300px;font-size:.9rem;line-height:1.7;color:var(--brand-deep)}
.sitefoot__id b{display:block;font-size:1rem;margin-bottom:4px}
.sitefoot__id a{color:var(--accent-deep)}
.sitefoot nav{flex:0 1 auto}
.sitefoot nav h4{
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  margin:0 0 12px;color:var(--brand);font-weight:800;
}
.sitefoot nav ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sitefoot nav a{
  color:var(--brand-deep);text-decoration:none;font-size:.92rem;font-weight:600;
}
.sitefoot nav a:hover{color:var(--accent-deep);text-decoration:underline}
.sitefoot__bottom{
  margin-top:30px;padding-top:20px;border-top:1px solid var(--rule);
  font-size:.8rem;color:var(--muted);line-height:1.7;
}

/* ---------- subpage shell ---------- */
.page{padding:44px 0 20px}
.page h1{font-size:clamp(1.9rem,1.4rem + 2.2vw,2.7rem);margin-bottom:10px}
.page .updated{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 26px}
.page h2{
  font-family:var(--serif);font-size:clamp(1.35rem,1.15rem + .8vw,1.7rem);
  color:var(--brand-deep);margin:36px 0 12px;line-height:1.25;
}
.page h3{font-size:1.05rem;font-weight:800;color:var(--brand-deep);margin:24px 0 8px}
.page p{margin:0 0 1.05em;font-size:1.02rem;line-height:1.75}
.page ul{margin:0 0 1.2em;padding-left:1.25em}
.page li{margin-bottom:.5em;line-height:1.7}
.page .card{
  background:var(--paper-warm);border:1px solid var(--rule);
  border-radius:var(--r);padding:22px 24px;margin:26px 0;
}
.page .card p:last-child{margin-bottom:0}
.contact-grid{display:grid;gap:16px;margin:24px 0}
@media (min-width:640px){ .contact-grid{grid-template-columns:1fr 1fr} }
.contact-grid .card{margin:0}
.contact-grid .card b{display:block;color:var(--brand-deep);margin-bottom:4px;font-size:.98rem}
.contact-grid .card svg{width:22px;height:22px;color:var(--accent);margin-bottom:8px}
.sitefoot--plain{padding-bottom:38px}

/* ---------- form ---------- */
.form{display:grid;gap:14px;margin:24px 0}
.form label{font-weight:700;font-size:.9rem;color:var(--brand-deep);display:block;margin-bottom:5px}
.form input,.form textarea,.form select{
  width:100%;padding:12px 14px;font:inherit;font-size:.98rem;
  border:1px solid var(--rule);border-radius:10px;background:#fff;color:var(--ink);
}
.form input:focus,.form textarea:focus,.form select:focus{
  outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);
}
.form textarea{min-height:150px;resize:vertical}
.form-status{font-size:.92rem;font-weight:700;color:var(--accent-deep);margin:0}

/* ---------- misc ---------- */
.skip{
  position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;
  padding:10px 18px;z-index:200;border-radius:0 0 8px 0;
}
.skip:focus{left:0}

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

/* ---- Advertorial topbar ---------------------------------------------- */
.ad-topbar{background:var(--brand);color:var(--paper);text-align:center;padding:.5rem 1rem}
.ad-topbar span{font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--sand)}