/* ============================================================
   MEMOHONEY.INFO — DESIGN SYSTEM
   Direction: "Field Notes" — an independent, investigative
   review-hub aesthetic. Not a sales page: reads like a consumer
   research publication (Wirecutter/Consumer-Reports register),
   not a product landing page.
   Palette: --ink #24211D (warm near-black), --paper #F7F4EC (aged
            paper cream), --rust #B4502A (editorial accent — NOT
            gold/honey, NOT teal/navy), --sage #5C6B4F (secondary,
            verification-green), --line #DDD5C0
   Type: 'Lora' (serif, editorial headlines) + 'Work Sans' (clean
         grotesque body) — a wholly different pairing from Fraunces/
         Inter and Fraunces/Manrope used in prior builds.
   Signature motifs: numbered verdict badge, underline-highlight
         annotations, comparison-table-first layout, sidebar TOC on
         articles, "Quick Answer" callout boxes (AEO-first pattern),
         torn-edge / stamped rating marks instead of card-grid icons.
   ============================================================ */

:root{
  --ink:#24211D;
  --ink-soft:#5B5648;
  --paper:#F7F4EC;
  --paper-deep:#EDE6D4;
  --card:#FFFFFF;
  --rust:#B4502A;
  --rust-deep:#8A3B1D;
  --sage:#5C6B4F;
  --sage-deep:#3E4936;
  --line:#DDD5C0;
  --radius:4px;
  --radius-lg:8px;
  --shadow:0 1px 3px rgba(36,33,29,0.12), 0 1px 2px rgba(36,33,29,0.08);
  --shadow-lg:0 10px 28px -12px rgba(36,33,29,0.28);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Work Sans',system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Lora',Georgia,serif;
  font-weight:600;
  color:var(--ink);
  line-height:1.25;
}
a{color:var(--rust-deep);text-decoration-color:var(--rust);text-underline-offset:3px}
a:hover{color:var(--rust)}
:focus-visible{outline:3px solid var(--sage);outline-offset:2px}
.container{max-width:1140px}
mark{background:linear-gradient(180deg,transparent 60%,#F0D9BE 60%);color:var(--ink);padding:0 .1em}

/* ---------- MASTHEAD (not a hero — a publication masthead) ---------- */
#topNav{background:var(--paper);border-bottom:3px solid var(--ink);padding:0}
.masthead-strip{background:var(--ink);color:var(--paper);font-size:.78rem;text-align:center;padding:.35rem 0;letter-spacing:.04em}
#topNav .brand-text{font-family:'Lora',serif;font-weight:700;font-size:1.55rem;color:var(--ink);letter-spacing:-.01em}
#topNav .brand-text span{color:var(--rust)}
#topNav .brand-tagline{font-size:.68rem;color:var(--ink-soft);letter-spacing:.12em;text-transform:uppercase;display:block;margin-top:-2px}
#topNav .nav-link{color:var(--ink-soft);font-weight:600;font-size:.9rem;padding:1rem .9rem !important;border-bottom:3px solid transparent}
#topNav .nav-link:hover{color:var(--rust-deep);border-bottom-color:var(--rust)}
.btn-cta{background:var(--rust);color:#fff !important;border:none;border-radius:var(--radius);font-weight:700;padding:.6rem 1.4rem;transition:background .15s}
.btn-cta:hover{background:var(--rust-deep);color:#fff !important}
.btn-outline-primary{border:2px solid var(--ink);color:var(--ink);border-radius:var(--radius);font-weight:700;padding:.55rem 1.3rem;background:transparent}
.btn-outline-primary:hover{background:var(--ink);color:var(--paper)}

/* ---------- HOME: EDITOR'S VERDICT HERO (not a sales hero) ---------- */
.hero-section{background:var(--paper);padding:2.4rem 0 1rem;border-bottom:1px solid var(--line)}
.verdict-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.8rem;box-shadow:var(--shadow)}
.verdict-eyebrow{font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--rust-deep);margin-bottom:.5rem}
.verdict-score{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.4rem}
.verdict-score .num{font-family:'Lora',serif;font-size:3rem;font-weight:700;color:var(--ink)}
.verdict-score .denom{color:var(--ink-soft);font-size:1.1rem}
.verdict-stars{color:var(--rust-deep);letter-spacing:.1em}
.hero-title{font-size:2.3rem;margin-bottom:.8rem}
.hero-text{font-size:1.08rem;color:var(--ink-soft)}
.quick-answer{background:var(--paper-deep);border-left:4px solid var(--sage);border-radius:0 var(--radius) var(--radius) 0;padding:1.1rem 1.4rem;margin:1.2rem 0}
.quick-answer .qa-label{font-weight:800;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--sage-deep);margin-bottom:.3rem}
.hero-bullets div{display:flex;gap:.6rem;font-size:.94rem;margin-bottom:.5rem;color:var(--ink)}
.hero-bullets i{color:var(--sage-deep);margin-top:.15rem}

/* ---------- TITLE BAND ---------- */
.title-band{padding:2rem 0 1rem}
.title-band-text{font-family:'Lora',serif;font-size:1.65rem;font-weight:700;margin:0;border-bottom:3px solid var(--ink);display:inline-block;padding-bottom:.3rem}

/* ---------- COMPARISON TABLE (signature pattern) ---------- */
.compare-wrap{overflow-x:auto;margin:1.4rem 0;border:1px solid var(--line);border-radius:var(--radius-lg)}
.compare-table{width:100%;border-collapse:collapse;font-size:.92rem;background:var(--card)}
.compare-table th{background:var(--ink);color:var(--paper);padding:.8rem 1rem;text-align:left;font-family:'Lora',serif;font-weight:600}
.compare-table td{padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.compare-table tr:last-child td{border-bottom:none}
.compare-table .yes{color:var(--sage-deep);font-weight:700}
.compare-table .no{color:var(--rust-deep);font-weight:700}

/* ---------- RATING CARDS (stamped badge, not icon cards) ---------- */
.trust-section{padding:1.2rem 0 2rem}
.trust-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.4rem;height:100%}
.trust-badge{width:52px;height:52px;border:2px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Lora',serif;font-weight:700;font-size:1.3rem;color:var(--ink);margin-bottom:.7rem}
.trust-card h3{font-size:1rem;margin-bottom:.35rem}
.trust-card p{color:var(--ink-soft);font-size:.9rem;margin:0}

/* ---------- CONTENT ---------- */
.content-section{padding:2rem 0}
.lead-text{font-size:1.14rem;color:var(--ink-soft)}
.speakable-summary{color:var(--ink)}
.pullquote{border-left:4px solid var(--rust);padding:.3rem 1.4rem;font-family:'Lora',serif;font-size:1.2rem;font-style:italic;color:var(--ink);margin:1.5rem 0}

/* ---------- METHODOLOGY / CRITERIA LIST ---------- */
.method-section{padding:2rem 0;background:var(--ink);color:var(--paper);border-radius:var(--radius-lg);margin:1rem auto;max-width:1140px}
.method-section .method-eyebrow{color:var(--rust);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;margin-bottom:.4rem}
.method-section h2{color:var(--paper);font-size:1.8rem;margin-bottom:.7rem}
.method-section p.intro{color:#C9C2AC;margin-bottom:1.2rem}
.method-list{list-style:none;margin:0;padding:0}
.method-list li{display:flex;gap:.9rem;padding:.85rem 0;border-top:1px solid #3D392F}
.method-list li:first-child{border-top:none}
.method-num{flex:none;font-family:'Lora',serif;font-weight:700;color:var(--rust);font-size:1.1rem;width:28px}
.method-list p{margin:0;color:#D9D3BE;font-size:.94rem}
.method-list strong{color:#fff}

/* ---------- INGREDIENT DOSSIER CARDS ---------- */
.ingredient-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.4rem;height:100%;border-top:3px solid var(--sage)}
.ingredient-num{display:inline-block;font-family:'Lora',serif;font-weight:700;color:var(--rust-deep);font-size:.85rem;margin-bottom:.3rem}
.ingredient-card h3{font-size:1.02rem;margin-bottom:.35rem}
.ingredient-card p{color:var(--ink-soft);font-size:.9rem;margin:0}

/* ---------- PRICING (data table, not glossy cards) ---------- */
.pricing-section{padding:2rem 0}
.price-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem;text-align:center;height:100%;position:relative}
.price-card.popular{border:2px solid var(--rust)}
.price-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--rust);color:#fff;font-weight:800;font-size:.72rem;padding:.3rem .9rem;border-radius:999px;white-space:nowrap}
.price-card img{max-width:130px;margin-bottom:.9rem}
.price-title{font-family:'Lora',serif;font-size:1.2rem;font-weight:700}
.price-supply{color:var(--ink-soft);font-size:.85rem;margin-bottom:.5rem}
.price-old{text-decoration:line-through;color:var(--ink-soft);margin-right:.5rem;font-size:.92rem}
.price-amt{font-family:'Lora',serif;font-size:1.65rem;font-weight:700;color:var(--rust-deep)}
.price-per{color:var(--ink-soft);font-size:.82rem;margin-bottom:.9rem}
.price-feat{list-style:none;padding:0;margin:0 0 1.1rem;text-align:left;font-size:.86rem}
.price-feat li{margin-bottom:.35rem;color:var(--ink-soft)}
.price-feat i{color:var(--sage-deep);margin-right:.4rem}
.pay-cards{max-width:260px;margin-top:1.3rem;opacity:.8}
.warning-text{color:var(--ink-soft);font-size:.83rem}

/* ---------- FAQ (Q&A editorial format for AEO) ---------- */
.faq-section{padding:1.4rem 0 2.2rem}
.accordion-item{border:1px solid var(--line);border-radius:var(--radius) !important;margin-bottom:.6rem;background:var(--card);overflow:hidden}
.accordion-button{background:var(--card);font-family:'Lora',serif;font-weight:600;color:var(--ink);font-size:1rem;padding:1rem 1.1rem;box-shadow:none !important}
.accordion-button:not(.collapsed){color:var(--rust-deep);background:var(--paper-deep)}
.accordion-body{color:var(--ink-soft);padding:0 1.1rem 1.1rem}

/* ---------- BLOG GRID (list-first, not card-grid) ---------- */
.blog-grid{padding:1.6rem 0}
.blog-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);height:100%;padding:0}
.blog-thumb{height:5px;background:var(--sage)}
.blog-thumb.navy{background:var(--rust)}
.blog-card-body{padding:1.3rem}
.blog-cat{display:inline-block;background:var(--paper-deep);color:var(--rust-deep);font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:.22rem .65rem;border-radius:2px;margin-bottom:.55rem}
.blog-cat.info{background:#E5E9DE;color:var(--sage-deep)}
.blog-card h3{font-size:1.05rem;margin-bottom:.35rem;font-family:'Lora',serif}
.blog-card h3 a{color:var(--ink)}
.blog-meta{color:var(--ink-soft);font-size:.78rem;margin-bottom:.55rem}
.blog-readmore{font-weight:800;color:var(--rust-deep);font-size:.85rem}

/* ---------- PAGE HERO ---------- */
.page-hero{padding:2.2rem 0 1.4rem;border-bottom:1px solid var(--line)}
.page-hero h1{font-size:2rem;margin-bottom:.5rem}
.page-hero p{color:var(--ink-soft);font-size:1.02rem;margin:0}
.breadcrumb-bar{background:transparent;padding:.9rem 0 0;font-size:.82rem;color:var(--ink-soft)}
.breadcrumb-bar a{color:var(--ink-soft);text-decoration:none}
.breadcrumb-bar a:hover{color:var(--rust-deep)}

/* ---------- ARTICLE (with sidebar TOC feel via quick-answer + method list) ---------- */
.article-hero{padding:1.8rem 0 1rem}
.article-title{font-size:1.85rem;margin-bottom:.6rem}
.article-meta{color:var(--ink-soft);font-size:.85rem}
.author-line{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;color:var(--ink-soft);font-size:.83rem;padding:.9rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:1.1rem 0 1.6rem}
.article-body{font-size:1.03rem;max-width:740px}
.article-body h2{font-size:1.35rem;margin:1.7rem 0 .75rem;font-family:'Lora',serif}
.article-body p{margin-bottom:1.05rem;color:var(--ink)}
.article-body ol,.article-body ul{margin-bottom:1.05rem;padding-left:1.3rem}
.verdict-box{background:var(--paper-deep);border-left:4px solid var(--rust);border-radius:0 var(--radius) var(--radius) 0;padding:1.2rem 1.4rem;margin:1.5rem 0}
.verdict-box h3{font-size:1rem;margin-bottom:.4rem;color:var(--rust-deep);font-family:'Lora',serif}
.verdict-box p{margin:0}
.article-cta{background:var(--ink);color:var(--paper);border-radius:var(--radius-lg);padding:1.7rem;text-align:center;margin:1.8rem 0}
.article-cta h3{color:#fff;font-size:1.15rem;margin-bottom:.5rem;font-family:'Lora',serif}
.article-cta p{color:#C9C2AC;margin-bottom:1rem}
.related-box{background:var(--paper-deep);border-radius:var(--radius-lg);padding:1.5rem;max-width:740px}
.related-box h3{font-size:1rem;margin-bottom:.75rem;font-family:'Lora',serif}
.related-box ul{list-style:none;padding:0;margin:0}
.related-box li{margin-bottom:.55rem}
.related-box a{font-weight:700}

/* ---------- FINAL CTA ---------- */
.final-cta-section{background:var(--paper-deep);border:1px solid var(--line);text-align:center;padding:2.6rem 0;border-radius:var(--radius-lg);margin:2rem auto;max-width:1140px}
.final-cta-section .final-cover{max-width:190px;border-radius:var(--radius-lg);margin-bottom:1.1rem}
.final-price{color:var(--ink-soft);font-size:.98rem}
.final-price .strike{text-decoration:line-through}
.final-price-now{font-family:'Lora',serif;font-size:1.9rem;color:var(--rust-deep);margin-bottom:1rem}
.cta-foot{color:var(--ink-soft);font-size:.83rem;margin-top:1rem}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--ink);color:#C9C2AC;padding:2.4rem 0 1.5rem;margin-top:2rem}
.footer-nav{list-style:none;display:flex;flex-wrap:wrap;gap:1.1rem;padding:0;margin:0 0 1rem;justify-content:center}
.footer-nav a{color:#C9C2AC;font-size:.9rem}
.footer-nav a:hover{color:var(--rust)}
.footer-nav.legal{margin-bottom:1.3rem}
.footer-disclaimer{font-size:.76rem;color:#8F886F;max-width:880px;margin:0 auto 1.3rem;text-align:center}
.footer-copy{text-align:center;font-size:.83rem;color:#8F886F}

/* ---------- MOBILE STICKY CTA ---------- */
.mobile-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:1000;background:var(--card);padding:.7rem 1rem;box-shadow:0 -6px 18px -6px rgba(36,33,29,.2);text-align:center;border-top:1px solid var(--line)}
.mobile-cta small{display:block;color:var(--ink-soft);font-size:.7rem;margin-top:.3rem}
@media (max-width:767px){
  .mobile-cta{display:block}
  body{padding-bottom:74px}
  .hero-title{font-size:1.85rem}
  .method-section h2{font-size:1.5rem}
}

/* ALWAYS-CENTRED IMAGERY */
img.mx-auto{display:block;margin-left:auto;margin-right:auto}
.text-center img{margin-left:auto;margin-right:auto;display:block}