/*
Theme Name: Meridian Valley Lab
Theme URI: https://www.meridianvalleylab.com
Author: Planet Social Marketing
Description: Custom 2026 theme for Meridian Valley Lab. Conversion focused design system covering the main site and the WooCommerce shop subdomain. Brand tokens follow the MVL brand guide (Pantone 2603 C purple, 7482 C green, category accent colors). Logo artwork is the approved brand asset and must not be recolored or redrawn.
Version: 1.8.3
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: Proprietary
Text Domain: meridian-valley-lab
*/
  :root {
    /* Brand guide colors */
    --purple: #722282;       /* Meridian / Pantone 2603 C */
    --purple-deep: #50186a;
    --green: #009d4f;        /* Lab / Pantone 7482 C */
    --green-deep: #006937;   /* Food Sensitivity / Pantone 349 C */
    --green-darker: #024b29;
    --gold: #c0892e;         /* Campaign warm accent */
    --gold-soft: #e8c98a;
    --teal: #00afaa;         /* Allergy / Pantone 326 C */
    --red: #9c182f;          /* Cardiovascular / Pantone 7427 C */
    --blue: #3d7cc9;         /* Prediabetes / Pantone 660 C */
    --pink: #e50695;         /* Hormones / Rhodamine Red C */
    --ink: #1d2421;
    --slate: #5a635e;
    --mist: #f4f7f4;
    --line: #e4e9e5;
    --white: #fff;
    --shadow-sm: 0 2px 8px rgba(2,75,41,0.06);
    --shadow-md: 0 12px 32px rgba(2,75,41,0.10);
    --shadow-lg: 0 24px 60px rgba(2,75,41,0.16);
    --r: 16px;
    --r-lg: 24px;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--ink); background: var(--white); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  h1,h2,h3,h4 { line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
  a { color: var(--green-deep); }
  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 26px; }
  .eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; display: inline-block; color: var(--green); }
  .eyebrow.on-dark { color: var(--gold-soft); }

  /* ============ SHARED HEADER ============ */
  header.site { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.86); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); }
  .topbar { background: var(--green-deep); color: #fff; font-size: 12.5px; }
  .topbar .wrap { display: flex; justify-content: flex-end; gap: 20px; height: 34px; align-items: center; }
  .topbar a { color: rgba(255,255,255,0.88); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; transition: color .2s; }
  .topbar a:hover { color: #fff; }
  .topbar svg { width: 13px; height: 13px; }
  .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 20px; }
  .logo { display: flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
  /* Logo sizing is defensive: height is fixed and !important so a stale or
     conflicting stylesheet on the shop can't let the image render at its
     intrinsic width and blow out the header. */
  header.site .logo .mvl-logo { height: 42px !important; width: auto !important; max-width: 100%; display: block; }

  /* Nav supports BOTH structures: the hardcoded fallback (.navitem/.dropdown)
     and a dashboard menu from wp_nav_menu (li.menu-item / ul.sub-menu). */
  .mainnav { display: flex; gap: 4px; align-items: center; list-style: none; margin: 0; padding: 0; }
  .navitem, .mainnav > li { position: relative; }
  .navitem > a,
  .mainnav > li > a { text-decoration: none; color: var(--slate); font-weight: 500; font-size: 14.5px; padding: 10px 13px; border-radius: 8px; display: inline-block; cursor: pointer; transition: color .2s, background .2s; }
  .navitem > a:hover,
  .mainnav > li > a:hover { color: var(--purple); background: var(--mist); }
  /* active / current page: purple, per brand notes */
  .navitem > a.active,
  .mainnav > li.current-menu-item > a,
  .mainnav > li.current-menu-parent > a,
  .mainnav > li.current-menu-ancestor > a { color: var(--purple); font-weight: 600; }
  /* caret on items that have a submenu, in either structure */
  .navitem:has(.dropdown) > a::after,
  .mainnav > li.menu-item-has-children > a::after { content: '▾'; margin-left: 6px; font-size: 0.8em; opacity: 0.75; }

  .dropdown, .mainnav .sub-menu { position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-md); padding: 8px; min-width: 220px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .2s; z-index: 10; list-style: none; margin: 0; }
  /* the right-most menu's panel would hang past the viewport and force a
     horizontal scrollbar (even while hidden), so anchor it to its right edge */
  .mainnav > .navitem:last-of-type .dropdown,
  .mainnav > li:last-of-type .sub-menu { left: auto; right: 0; }
  .navitem:hover .dropdown,
  .mainnav > li:hover .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
  .dropdown a, .mainnav .sub-menu a { display: block; padding: 9px 12px; border-radius: 8px; text-decoration: none; color: var(--slate); font-size: 14px; font-weight: 500; transition: background .15s, color .15s; }
  .dropdown a:hover, .mainnav .sub-menu a:hover { background: var(--mist); color: var(--purple); }
  .dropdown a small { display: block; color: #9aa39d; font-size: 11.5px; font-weight: 400; margin-top: 1px; }
  /* Shop CTA: hardcoded fallback uses .nav-cta; on a dashboard menu, add the
     CSS class "nav-cta" to the Shop menu item to get the same pill. */
  .nav-cta, .mainnav > li.nav-cta > a { background: var(--green); color: #fff !important; padding: 11px 20px !important; border-radius: 100px; font-weight: 600 !important; font-size: 14px !important; box-shadow: 0 6px 16px rgba(0,157,79,0.26); transition: transform .2s, box-shadow .2s; }
  .nav-cta:hover, .mainnav > li.nav-cta > a:hover { transform: translateY(-2px); background: var(--green) !important; }
  .mainnav > li.nav-cta > a::after { content: none; }
  .menu-btn { display: none; background: none; border: 0; cursor: pointer; padding: 6px; }
  .menu-btn svg { width: 26px; height: 26px; }

  /* mobile nav drawer */
  .mobile-nav { display: none; flex-direction: column; padding: 8px 18px 18px; border-top: 1px solid var(--line); background: #fff; gap: 0; max-height: calc(100vh - 104px); overflow-y: auto; }
  .mobile-nav.open { display: flex; }
  .mobile-nav a { padding: 14px 8px; text-decoration: none; color: var(--ink); font-weight: 500; font-size: 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
  .mobile-nav a.sub { padding-left: 24px; font-size: 14.5px; color: var(--slate); font-weight: 400; }
  .mobile-nav a.grouphead { font-weight: 700; color: var(--purple); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; border-bottom: 0; padding-bottom: 6px; padding-top: 16px; }
  .mobile-nav a.shop-link { color: var(--green-deep); font-weight: 700; }

  /* ============ PAGE WRAPPER (static in WP build; router removed) ============ */
  .page { display: block; }

  /* ============ SHARED BUTTONS ============ */
  .btn { border: 0; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 15px; padding: 14px 28px; border-radius: 100px; display: inline-flex; align-items: center; gap: 9px; text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s; }
  .btn svg { width: 17px; height: 17px; }
  .btn-gold { background: var(--gold); color: #fff; box-shadow: 0 10px 26px rgba(192,137,46,0.34); }
  .btn-gold:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(192,137,46,0.44); }
  /* Primary CTA on dark-green (FoodSafe) surfaces: purple, so two greens never
     sit together. See brand notes point 4. */
  .btn-purple { background: var(--purple); color: #fff; box-shadow: 0 10px 26px rgba(114,34,130,0.34); }
  .btn-purple:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(114,34,130,0.44); background: var(--purple-deep); }
  .btn-green { background: var(--green); color: #fff; box-shadow: 0 8px 20px rgba(0,157,79,0.28); }
  .btn-green:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,157,79,0.38); }
  .btn-ghost { background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.3); }
  .btn-ghost:hover { background: rgba(255,255,255,0.2); }
  .btn-line { background: #fff; color: var(--purple); border: 2px solid var(--purple); }
  .btn-line:hover { background: var(--purple); color: #fff; }

  section.block { padding: 90px 0; }
  .section-head { max-width: 720px; margin-bottom: 50px; }
  .section-head.center { margin: 0 auto 50px; text-align: center; }
  .section-head h2 { font-size: clamp(28px, 3.6vw, 42px); margin-bottom: 14px; }
  .section-head p { font-size: 18px; color: var(--slate); }

  /* ============ HOME: HERO ============ */
  .hero { position: relative; overflow: hidden; background: radial-gradient(120% 120% at 80% 0%, #0a7d44 0%, var(--green-deep) 42%, var(--green-darker) 100%); color: #fff; padding: 100px 0 120px; }
  .hero::before { content:''; position:absolute; width:620px; height:620px; border-radius:50%; right:-180px; top:-200px; background: radial-gradient(circle, rgba(255,255,255,0.10), transparent 65%); }
  .hero::after { content:''; position:absolute; width:460px; height:460px; border-radius:50%; right:4%; bottom:-240px; background:rgba(192,137,46,0.16); filter:blur(8px); }
  .hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 50px; align-items: center; position: relative; z-index: 2; }
  .hero h1 { font-size: clamp(38px, 5.2vw, 64px); font-weight: 800; margin-bottom: 20px; }
  .hero h1 .accent { color: var(--gold-soft); display: block; }
  .hero .lede { font-size: 19px; color: rgba(255,255,255,0.86); max-width: 520px; margin-bottom: 32px; }
  .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
  .hero-trust { display: flex; gap: 22px; margin-top: 38px; flex-wrap: wrap; }
  .hero-trust span { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: rgba(255,255,255,0.84); font-weight: 500; }
  .hero-trust svg { width: 16px; height: 16px; flex: 0 0 auto; }
  .hero-card { background: rgba(255,255,255,0.97); border-radius: var(--r-lg); padding: 32px; box-shadow: var(--shadow-lg); color: var(--ink); position: relative; }
  .hero-card .badge { position: absolute; top: -13px; left: 32px; background: var(--purple); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 15px; border-radius: 100px; }
  .hero-card h3 { font-size: 20px; margin: 6px 0 6px; }
  .hero-card .price { font-size: 14.5px; color: var(--slate); margin-bottom: 20px; }
  .hero-card .steps { list-style: none; display: grid; gap: 13px; }
  .hero-card .steps li { display: flex; gap: 12px; font-size: 14.5px; color: var(--slate); }
  .hero-card .steps .n { flex: 0 0 auto; width: 25px; height: 25px; border-radius: 50%; background: var(--mist); color: var(--green-deep); font-weight: 700; font-size: 12.5px; display: grid; place-items: center; }
  .hero-card .cardbtn { margin-top: 22px; display: block; text-align: center; background: var(--green); color: #fff; text-decoration: none; padding: 13px; border-radius: 12px; font-weight: 700; font-size: 14.5px; transition: background .2s; }
  .hero-card .cardbtn:hover { background: var(--green-deep); }

  .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.in { opacity: 1; transform: none; }

  /* HOME: turn cards */
  .turn { background: var(--mist); }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .card { background: #fff; border-radius: var(--r); padding: 30px 26px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); transition: transform .25s, box-shadow .25s; }
  .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
  .card .ic { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px; }
  .card .ic svg { width: 25px; height: 25px; }
  .card h3 { font-size: 18px; margin-bottom: 8px; }
  .card p { color: var(--slate); font-size: 15px; }
  .ic-p { background: rgba(114,34,130,0.10); color: var(--purple); }
  .ic-g { background: rgba(192,137,46,0.14); color: var(--gold); }
  .ic-r { background: rgba(0,157,79,0.12); color: var(--green-deep); }

  /* HOME: trust (dark green is intentional here — the homepage IS the FoodSafe
     surface). Non-FoodSafe pages use .trust.trust-purple instead. */
  .trust { position: relative; color: #fff; overflow: hidden; background: linear-gradient(160deg, var(--green-deep), var(--green-darker)); }
  .trust.trust-purple { background: linear-gradient(160deg, var(--purple), var(--purple-deep)); }
  .trust::before { content:''; position:absolute; inset:0; background: radial-gradient(80% 60% at 90% 10%, rgba(192,137,46,0.18), transparent 60%); }
  .trust .wrap { position: relative; z-index: 2; }
  .trust .section-head h2, .trust .section-head p { color: #fff; }
  .trust .section-head p { color: rgba(255,255,255,0.82); }
  .glass { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--r); padding: 28px 24px; backdrop-filter: blur(10px); transition: transform .25s, background .25s; }
  .glass:hover { transform: translateY(-6px); background: rgba(255,255,255,0.13); }
  .glass .check { width: 44px; height: 44px; border-radius: 50%; background: var(--green); display: grid; place-items: center; margin-bottom: 16px; }
  .glass .check svg { width: 23px; height: 23px; }
  .glass h3 { color: #fff; font-size: 17px; margin-bottom: 7px; }
  .glass p { color: rgba(255,255,255,0.80); font-size: 14.5px; }
  .trust-foot { margin-top: 36px; text-align: center; font-size: 13px; letter-spacing: 0.06em; color: rgba(255,255,255,0.62); text-transform: uppercase; font-weight: 500; }
  .trust-foot b { color: var(--gold-soft); }

  /* HOME: areas of testing nav */
  .areas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .area-card { border-radius: var(--r); padding: 26px; color: #fff; cursor: pointer; transition: transform .25s; position: relative; overflow: hidden; min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; text-decoration: none; }
  .area-card:hover { transform: translateY(-5px); }
  .area-card h3 { font-size: 19px; margin-bottom: 4px; }
  .area-card p { font-size: 13.5px; opacity: 0.9; }
  .area-card .ai { position: absolute; top: 20px; left: 20px; width: 34px; height: 34px; opacity: 0.9; }
  .a-horm { background: linear-gradient(140deg, var(--pink), #b00574); }
  .a-food { background: linear-gradient(140deg, var(--green), var(--green-deep)); }
  .a-cardio { background: linear-gradient(140deg, var(--red), #6e0f22); }
  .a-pre { background: linear-gradient(140deg, var(--blue), #2c5e9e); }
  .a-allergy { background: linear-gradient(140deg, var(--teal), #058984); }
  .a-wright { background: linear-gradient(140deg, var(--purple), var(--purple-deep)); }
  .a-all { background: linear-gradient(140deg, var(--slate), var(--ink)); }

  /* HOME: FAQ */
  .faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 14px; }
  .faq-item { border: 1px solid var(--line); border-radius: var(--r); background: #fff; overflow: hidden; transition: box-shadow .25s, border-color .25s; }
  .faq-item.open { box-shadow: var(--shadow-md); border-color: transparent; }
  .faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 20px 24px; font-size: 16px; font-weight: 600; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: inherit; }
  .faq-q .chev { flex: 0 0 auto; transition: transform .3s; color: var(--green); }
  .faq-item.open .chev { transform: rotate(180deg); }
  .faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
  .faq-a-in { padding: 0 24px 22px; color: var(--slate); font-size: 15px; }

  /* HOME: decision */
  .decision { background: var(--mist); }
  .dec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 940px; margin: 0 auto; }
  .dec-card { background: #fff; border-radius: var(--r-lg); padding: 36px 32px; position: relative; border: 2px solid var(--line); transition: transform .25s, box-shadow .25s; }
  .dec-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
  .dec-card.featured { border-color: var(--green); box-shadow: var(--shadow-md); }
  .dec-badge { position: absolute; top: -14px; left: 32px; background: var(--gold); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 7px 15px; border-radius: 100px; }
  .dec-ic { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 18px; }
  .dec-ic svg { width: 27px; height: 27px; }
  .dec-ic.feat { background: rgba(0,157,79,0.12); color: var(--green-deep); }
  .dec-ic.alt { background: rgba(114,34,130,0.10); color: var(--purple); }
  .dec-card h3 { font-size: 22px; margin-bottom: 5px; }
  .dec-card .sub { font-weight: 600; font-size: 14px; margin-bottom: 14px; }
  .dec-card.featured .sub { color: var(--green-deep); }
  .dec-card.alt .sub { color: var(--purple); }
  .dec-card .desc { color: var(--slate); font-size: 15px; margin-bottom: 20px; min-height: 66px; }
  .dec-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 22px; }
  .dec-price .now { font-size: 28px; font-weight: 800; }
  .dec-price .was { font-size: 16px; color: var(--slate); text-decoration: line-through; }
  .dec-price .off { background: var(--gold); color: #fff; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 100px; }
  .dec-btn { display: block; text-align: center; padding: 14px; border-radius: 12px; font-weight: 700; font-size: 15px; text-decoration: none; transition: transform .2s, box-shadow .2s; }
  .dec-btn.solid { background: var(--green); color: #fff; box-shadow: 0 8px 20px rgba(0,157,79,0.28); }
  .dec-btn.solid:hover { transform: translateY(-2px); }
  .dec-btn.line { background: #fff; color: var(--purple); border: 2px solid var(--purple); }
  .dec-btn.line:hover { background: var(--purple); color: #fff; }

  /* ============ PRODUCT PAGE ============ */
  .crumb { font-size: 13px; color: var(--slate); padding: 22px 0 0; }
  .crumb a { color: var(--green-deep); text-decoration: none; cursor: pointer; }
  .crumb span { color: #b3bbb5; margin: 0 7px; }
  .prod-top { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; padding: 26px 0 56px; align-items: start; }
  .gallery .main-img { background: linear-gradient(150deg, #eef3ef, #e3ebe5); border-radius: var(--r-lg); aspect-ratio: 1/1; display: grid; place-items: center; position: relative; box-shadow: var(--shadow-sm); }
  .gallery .main-img .kiticon { width: 130px; height: 130px; color: var(--green-deep); opacity: 0.85; }
  .gallery .deal { position: absolute; top: 18px; left: 18px; background: var(--gold); color: #fff; font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 100px; }
  .prod-info .cat { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-deep); background: rgba(0,105,55,0.10); padding: 5px 12px; border-radius: 100px; margin-bottom: 14px; }
  .prod-info h1 { font-size: 32px; margin-bottom: 8px; }
  .prod-info .sku { font-size: 13px; color: #b3bbb5; margin-bottom: 18px; }
  .prod-info .blurb { font-size: 16px; color: var(--slate); margin-bottom: 24px; }
  .price-block { display: flex; align-items: baseline; gap: 12px; margin-bottom: 24px; }
  .price-block .now { font-size: 34px; font-weight: 800; }
  .price-block .was { font-size: 19px; color: var(--slate); text-decoration: line-through; }
  .price-block .off { background: var(--gold); color: #fff; font-size: 12.5px; font-weight: 700; padding: 4px 11px; border-radius: 100px; }
  .qty-add { display: flex; gap: 12px; margin-bottom: 24px; }
  .qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 100px; overflow: hidden; }
  .qty button { border: 0; background: #fff; width: 42px; height: 50px; cursor: pointer; font-size: 19px; color: var(--green-deep); font-family: inherit; transition: background .15s; }
  .qty button:hover { background: var(--mist); }
  .qty span { width: 44px; text-align: center; font-weight: 700; font-size: 15px; }
  .add-btn { flex: 1; background: var(--green); color: #fff; border: 0; border-radius: 100px; font-family: inherit; font-weight: 700; font-size: 16px; cursor: pointer; box-shadow: 0 10px 26px rgba(0,157,79,0.3); transition: transform .18s; display: inline-flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none; }
  .add-btn:hover { transform: translateY(-2px); }
  .add-btn svg { width: 18px; height: 18px; }
  .badges { display: flex; gap: 18px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--line); }
  .badges span { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--slate); }
  .badges svg { width: 18px; height: 18px; color: var(--green-deep); flex: 0 0 auto; }
  .tabs-section { background: var(--mist); padding: 50px 0 70px; }
  .tabnav { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 30px; overflow-x: auto; }
  .tabnav button { border: 0; background: none; font-family: inherit; font-size: 15px; font-weight: 600; color: var(--slate); padding: 16px 18px; cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; transition: color .18s, border-color .18s; }
  .tabnav button.active { color: var(--green-deep); border-bottom-color: var(--green); }
  .tabpane { display: none; } .tabpane.active { display: block; }
  .measure-intro { font-size: 16px; color: var(--slate); max-width: 720px; margin: 0 0 28px; }
  .food-groups { columns: 3; column-gap: 26px; }
  .fg { break-inside: avoid; margin-bottom: 22px; background: #fff; border-radius: 12px; padding: 18px 20px; box-shadow: var(--shadow-sm); }
  .fg h4 { font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green-deep); margin-bottom: 11px; }
  .fg ul { list-style: none; }
  .fg li { font-size: 13.5px; color: var(--slate); padding: 3px 0; }
  .box-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
  .box-card { background: #fff; border-radius: var(--r); padding: 26px; box-shadow: var(--shadow-sm); }
  .box-card h4 { font-size: 16px; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
  .box-card h4 svg { width: 20px; height: 20px; color: var(--green-deep); }
  .box-card ul { list-style: none; }
  .box-card li { font-size: 14.5px; color: var(--slate); padding: 8px 0; display: flex; gap: 10px; align-items: center; border-bottom: 1px solid var(--line); }
  .box-card li:last-child { border-bottom: 0; }
  .box-card li svg { width: 16px; height: 16px; color: var(--green); flex: 0 0 auto; }
  .pfaq { max-width: 760px; }
  .report-cta { background: linear-gradient(150deg, var(--green-deep), var(--green-darker)); border-radius: var(--r-lg); padding: 38px; color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
  .report-cta h3 { font-size: 22px; margin-bottom: 8px; }
  .report-cta p { color: rgba(255,255,255,0.85); font-size: 15px; max-width: 440px; }

  /* ============ RESOURCES PAGE ============ */
  .res-hero { background: linear-gradient(150deg, var(--purple), var(--purple-deep)); color: #fff; padding: 60px 0; position: relative; overflow: hidden; }
  .res-hero::after { content:''; position:absolute; width:400px; height:400px; border-radius:50%; right:-120px; top:-120px; background:rgba(255,255,255,0.07); }
  .res-hero .inner { position: relative; z-index: 2; max-width: 640px; }
  .res-hero h1 { font-size: 40px; margin-bottom: 14px; }
  .res-hero p { font-size: 17px; color: rgba(255,255,255,0.85); }
  .res-body { padding: 44px 0 70px; display: grid; grid-template-columns: 210px 1fr; gap: 40px; align-items: start; }
  .res-side h4 { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #aab2ac; margin: 18px 0 10px; }
  .res-side h4:first-child { margin-top: 0; }
  .res-side button { display: block; width: 100%; text-align: left; border: 0; background: none; font-family: inherit; font-size: 14.5px; color: var(--slate); padding: 8px 12px; border-radius: 8px; cursor: pointer; font-weight: 500; transition: background .15s, color .15s; }
  .res-side button:hover { background: var(--mist); color: var(--ink); }
  .res-side button.active { background: rgba(114,34,130,0.08); color: var(--purple); font-weight: 600; }
  .res-featured { background: linear-gradient(150deg, var(--green-deep), var(--green-darker)); border-radius: var(--r-lg); padding: 34px; color: #fff; margin-bottom: 30px; position: relative; overflow: hidden; }
  .res-featured::after { content:''; position:absolute; width:220px; height:220px; border-radius:50%; right:-70px; bottom:-90px; background:rgba(192,137,46,0.18); }
  .res-featured .inner { position: relative; z-index: 2; max-width: 560px; }
  .res-featured .tag { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-soft); }
  .res-featured h2 { font-size: 25px; margin: 10px 0 12px; }
  .res-featured p { color: rgba(255,255,255,0.85); font-size: 15px; margin-bottom: 18px; }
  .art-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .art-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; cursor: pointer; transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; }
  .art-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
  .art-img { aspect-ratio: 16/9; display: grid; place-items: center; }
  .art-img svg { width: 46px; height: 46px; color: #fff; opacity: 0.9; }
  .ai-food { background: linear-gradient(135deg, var(--green), var(--green-deep)); }
  .ai-horm { background: linear-gradient(135deg, var(--pink), #b00574); }
  .ai-cardio { background: linear-gradient(135deg, var(--red), #6e0f22); }
  .ai-pre { background: linear-gradient(135deg, var(--blue), #2c5e9e); }
  .ai-web { background: linear-gradient(135deg, var(--purple), var(--purple-deep)); }
  .art-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
  .art-body .cat { font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
  .cat-food { color: var(--green-deep); } .cat-horm { color: var(--pink); } .cat-cardio { color: var(--red); } .cat-pre { color: var(--blue); } .cat-web { color: var(--purple); }
  .art-body h3 { font-size: 16px; margin: 8px 0 10px; line-height: 1.25; }
  .art-body .read { margin-top: auto; font-size: 13px; color: var(--slate); display: flex; align-items: center; gap: 6px; }
  .art-body .read svg { width: 14px; height: 14px; }

  /* ============ PODCAST PAGE ============ */
  .pod-hero { background: linear-gradient(155deg, var(--purple), var(--purple-deep) 60%, #3d1052); color: #fff; padding: 64px 0; position: relative; overflow: hidden; }
  .pod-hero::before { content:''; position:absolute; width:520px; height:520px; border-radius:50%; right:-160px; top:-160px; background:radial-gradient(circle, rgba(255,255,255,0.10), transparent 65%); }
  .pod-hero-grid { display: grid; grid-template-columns: 260px 1fr; gap: 44px; align-items: center; position: relative; z-index: 2; }
  .cover { aspect-ratio: 1/1; border-radius: var(--r-lg); background: linear-gradient(150deg, var(--green-deep), var(--green-darker)); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; display: grid; place-items: center; }
  .cover .cov-in { position: relative; z-index: 2; text-align: center; padding: 24px; }
  .cover .wave { display: flex; gap: 4px; justify-content: center; align-items: flex-end; height: 42px; margin-bottom: 16px; }
  .cover .wave i { width: 5px; background: var(--gold-soft); border-radius: 3px; animation: eq 1.1s ease-in-out infinite; }
  .cover .wave i:nth-child(1){height:40%;animation-delay:0s}.cover .wave i:nth-child(2){height:75%;animation-delay:.15s}.cover .wave i:nth-child(3){height:100%;animation-delay:.3s}.cover .wave i:nth-child(4){height:60%;animation-delay:.45s}.cover .wave i:nth-child(5){height:85%;animation-delay:.6s}.cover .wave i:nth-child(6){height:45%;animation-delay:.75s}
  @keyframes eq { 0%,100%{transform:scaleY(0.5)} 50%{transform:scaleY(1)} }
  .cover .ct { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-soft); font-weight: 700; }
  .cover h3 { color: #fff; font-size: 21px; margin: 8px 0 4px; }
  .cover .since { font-size: 12px; color: rgba(255,255,255,0.7); }
  .pod-hero h1 { font-size: clamp(30px, 4.2vw, 48px); margin-bottom: 14px; }
  .pod-hero p { font-size: 16px; color: rgba(255,255,255,0.86); max-width: 600px; margin-bottom: 24px; }
  .listen-on { display: flex; gap: 12px; flex-wrap: wrap; }
  .listen-on a { display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); color: #fff; text-decoration: none; padding: 11px 18px; border-radius: 100px; font-weight: 600; font-size: 14px; transition: background .2s, transform .2s; }
  .listen-on a:hover { background: rgba(255,255,255,0.22); transform: translateY(-2px); }
  .listen-on a svg { width: 17px; height: 17px; }
  .listen-on a.primary { background: #1DB954; border-color: #1DB954; }
  .pod-strip { background: var(--mist); border-bottom: 1px solid var(--line); }
  .pod-strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
  .pod-strip-item { text-align: center; padding: 22px 16px; border-right: 1px solid var(--line); }
  .pod-strip-item:last-child { border-right: 0; }
  .pod-strip-item .v { font-size: 22px; font-weight: 800; color: var(--purple); }
  .pod-strip-item .l { font-size: 12.5px; color: var(--slate); margin-top: 2px; }
  .embed-card { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-md); overflow: hidden; border: 1px solid var(--line); }
  .embed-card iframe { display: block; width: 100%; border: 0; }
  .ep-list { display: grid; gap: 14px; }
  .ep { background: #fff; border-radius: var(--r); padding: 22px 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: center; transition: transform .2s, box-shadow .2s; }
  .ep:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .ep .num { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, var(--purple), var(--purple-deep)); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 18px; }
  .ep-meta { font-size: 12px; color: #9aa39d; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 5px; }
  .ep h3 { font-size: 17px; margin-bottom: 6px; }
  .ep p { font-size: 14px; color: var(--slate); }
  .ep .topic { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 100px; margin-top: 10px; }
  .tp-food { background: rgba(0,105,55,0.10); color: var(--green-deep); }
  .tp-horm { background: rgba(229,6,149,0.10); color: var(--pink); }
  .tp-tv { background: rgba(61,124,201,0.12); color: var(--blue); }

  /* ============ PORTAL PAGES ============ */
  .portal-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 700px; background: var(--mist); }
  .p-side { background: #fff; border-right: 1px solid var(--line); padding: 24px 14px; }
  .p-side .grp { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #aab2ac; padding: 14px 12px 8px; }
  .p-side .grp:first-child { padding-top: 0; }
  .p-link { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 10px; color: var(--slate); font-size: 14px; font-weight: 500; cursor: pointer; border: 0; background: none; width: 100%; text-align: left; font-family: inherit; transition: background .15s, color .15s; }
  .p-link svg { width: 18px; height: 18px; flex: 0 0 auto; }
  .p-link:hover { background: var(--mist); color: var(--ink); }
  .p-link.active { background: rgba(0,157,79,0.10); color: var(--green-deep); font-weight: 600; }
  .p-main { padding: 30px; }
  .p-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
  .p-top h1 { font-size: 24px; margin-bottom: 4px; }
  .p-top .sub { color: var(--slate); font-size: 14px; }
  .pstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
  .pstat { background: #fff; border-radius: 14px; padding: 18px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
  .pstat .pic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 12px; }
  .pstat .pic svg { width: 20px; height: 20px; }
  .pstat .val { font-size: 26px; font-weight: 800; }
  .pstat .lbl { font-size: 12.5px; color: var(--slate); }
  .ppanel { background: #fff; border-radius: 14px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); overflow: hidden; margin-bottom: 20px; }
  .ppanel-head { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
  .ppanel-head h2 { font-size: 16px; }
  .ptable { width: 100%; border-collapse: collapse; }
  .ptable th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #97a09a; padding: 12px 22px; border-bottom: 1px solid var(--line); background: #fbfcfb; }
  .ptable td { padding: 14px 22px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
  .ptable tr:last-child td { border-bottom: 0; }
  .ptag { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 100px; }
  .pt-fs { background: rgba(0,105,55,0.10); color: var(--green-deep); }
  .pt-h { background: rgba(229,6,149,0.10); color: var(--pink); }
  .pt-a { background: rgba(0,175,170,0.12); color: #058984; }
  .pstatus { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
  .pdot { width: 8px; height: 8px; border-radius: 50%; }
  .ps-results { color: var(--green-deep); } .ps-results .pdot { background: var(--green); }
  .ps-transit { color: var(--blue); } .ps-transit .pdot { background: var(--blue); }
  .ps-lab { color: #a06f1f; } .ps-lab .pdot { background: var(--gold); }
  .ps-shipped { color: var(--purple); } .ps-shipped .pdot { background: var(--purple); }
  .pic-g { background: rgba(0,157,79,0.12); color: var(--green-deep); }
  .pic-p { background: rgba(114,34,130,0.10); color: var(--purple); }
  .pic-gold { background: rgba(192,137,46,0.14); color: var(--gold); }
  .pic-b { background: rgba(61,124,201,0.12); color: var(--blue); }
  .demo-tag { background: var(--gold); color: #fff; text-align: center; font-size: 12.5px; font-weight: 600; padding: 8px; letter-spacing: 0.03em; }
  .rc-row { display: flex; align-items: center; gap: 12px; padding: 12px 22px; border-bottom: 1px solid var(--line); }
  .rc-row:last-child { border-bottom: 0; }
  .rc-food { font-size: 14px; font-weight: 600; flex: 0 0 130px; }
  .rc-bar { flex: 1; height: 9px; border-radius: 6px; background: var(--mist); overflow: hidden; }
  .rc-bar i { display: block; height: 100%; border-radius: 6px; }
  .rc-val { font-size: 12px; font-weight: 700; flex: 0 0 70px; text-align: right; }
  .lvl-high i { background: var(--red); } .lvl-high .rc-val { color: var(--red); }
  .lvl-mod i { background: var(--gold); } .lvl-mod .rc-val { color: #a06f1f; }
  .lvl-low i { background: var(--green); } .lvl-low .rc-val { color: var(--green-deep); }
  .portal-note { font-size: 12.5px; color: #8a6418; background: rgba(192,137,46,0.10); padding: 10px 14px; border-radius: 10px; margin: 0 22px 16px; }

  /* ============ BLOG INDEX + ARTICLE ============ */
  .blog-hero{background:linear-gradient(150deg,var(--purple),var(--purple-deep));color:#fff;padding:60px 0 52px;position:relative;overflow:hidden}
  .blog-hero::after{content:'';position:absolute;width:400px;height:400px;border-radius:50%;right:-120px;top:-140px;background:rgba(255,255,255,.07)}
  .blog-hero .inner{position:relative;z-index:2;max-width:640px}
  .blog-hero h1{font-size:40px;margin-bottom:14px}
  .blog-hero p{font-size:17px;color:rgba(255,255,255,.85)}
  .blog-filter{border-bottom:1px solid var(--line);background:#fff}
  .blog-filter .wrap{display:flex;gap:8px;padding-top:16px;padding-bottom:16px;overflow-x:auto}
  .blog-filter button{border:1px solid var(--line);background:#fff;border-radius:100px;padding:9px 18px;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--slate);cursor:pointer;white-space:nowrap;transition:all .18s}
  .blog-filter button:hover{border-color:var(--purple);color:var(--purple)}
  .blog-filter button.active{background:var(--purple);color:#fff;border-color:var(--purple)}
  .feat-post{padding:44px 0 10px}
  .feat-card{display:grid;grid-template-columns:1.1fr 1fr;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);cursor:pointer;transition:transform .25s,box-shadow .25s}
  .feat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
  .feat-img{background:linear-gradient(135deg,var(--green),var(--green-deep));position:relative;min-height:280px;display:grid;place-items:center;overflow:hidden}
  .feat-img::after{content:'';position:absolute;width:200px;height:200px;border-radius:50%;right:-50px;bottom:-50px;background:rgba(255,255,255,.1)}
  .feat-img svg{width:84px;height:84px;color:#fff;opacity:.9;position:relative;z-index:2}
  .feat-body{padding:38px;display:flex;flex-direction:column;justify-content:center;background:#fff}
  .feat-tag{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green-deep);margin-bottom:14px}
  .feat-body h2{font-size:26px;margin-bottom:14px;line-height:1.2}
  .feat-body p{color:var(--slate);font-size:15.5px;margin-bottom:20px}
  .feat-meta{display:flex;align-items:center;gap:14px;font-size:13px;color:#9aa39d}
  .feat-meta .read-link{color:var(--green-deep);font-weight:700;display:inline-flex;align-items:center;gap:6px;margin-left:auto}
  .feat-meta .read-link svg{width:15px;height:15px}
  .post-grid-sec{padding:36px 0 80px}
  .post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .post-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
  .post-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
  .post-img{aspect-ratio:16/10;display:grid;place-items:center;position:relative}
  .post-img svg{width:46px;height:46px;color:#fff;opacity:.92}
  .pi-food{background:linear-gradient(135deg,var(--green),var(--green-deep))}
  .pi-horm{background:linear-gradient(135deg,var(--pink),#b00574)}
  .pi-cardio{background:linear-gradient(135deg,var(--red),#6e0f22)}
  .pi-pre{background:linear-gradient(135deg,var(--blue),#2c5e9e)}
  .pi-web{background:linear-gradient(135deg,var(--purple),var(--purple-deep))}
  .pi-allergy{background:linear-gradient(135deg,var(--teal),#058984)}
  .post-body{padding:22px;flex:1;display:flex;flex-direction:column}
  .post-cat{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px}
  .c-food{color:var(--green-deep)}.c-horm{color:var(--pink)}.c-cardio{color:var(--red)}.c-pre{color:var(--blue)}.c-web{color:var(--purple)}.c-allergy{color:#058984}
  .post-body h3{font-size:17px;margin-bottom:10px;line-height:1.3}
  .post-body p{font-size:14px;color:var(--slate);margin-bottom:16px}
  .post-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:#9aa39d}
  .post-foot .rd{color:var(--green-deep);font-weight:600}
  .draft-badge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#a06f1f;background:rgba(192,137,46,.12);padding:3px 8px;border-radius:6px;margin-bottom:8px}
  /* article */
  .art-hero{background:linear-gradient(150deg,var(--green-deep),var(--green-darker));color:#fff;padding:54px 0 48px;position:relative;overflow:hidden}
  .art-hero::after{content:'';position:absolute;width:360px;height:360px;border-radius:50%;right:-110px;top:-130px;background:rgba(192,137,46,.16)}
  .art-hero .inner{position:relative;z-index:2;max-width:760px;margin:0 auto;padding:0 26px}
  .art-crumb{font-size:13px;color:rgba(255,255,255,.7);margin-bottom:18px}
  .art-crumb a{color:var(--gold-soft);text-decoration:none;cursor:pointer}
  .art-cat-tag{display:inline-block;background:rgba(255,255,255,.14);color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 14px;border-radius:100px;margin-bottom:18px}
  .art-hero h1{font-size:clamp(27px,4vw,40px);margin-bottom:20px;line-height:1.15}
  .art-byline{display:flex;align-items:center;gap:13px;font-size:14px;color:rgba(255,255,255,.82);flex-wrap:wrap}
  .art-byline .av{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;font-weight:700;font-size:14px;flex:0 0 auto}
  .art-byline b{color:#fff;font-weight:600}
  .art-byline .bdot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.4)}
  .art-wrap{padding:50px 0 60px}
  .art-layout{display:grid;grid-template-columns:1fr 240px;gap:48px;max-width:1040px;margin:0 auto;padding:0 26px;align-items:start}
  .art-body-c{font-size:17px;color:#2c332f;line-height:1.75}
  .art-body-c .lead{font-size:20px;line-height:1.6;color:var(--ink);margin-bottom:28px}
  .art-body-c h2{font-size:25px;margin:38px 0 16px;color:var(--ink)}
  .art-body-c h3{font-size:19px;margin:28px 0 12px;color:var(--green-deep)}
  .art-body-c p{margin-bottom:20px}
  .art-body-c ul{margin:0 0 22px;padding-left:4px;list-style:none}
  .art-body-c ul li{position:relative;padding-left:30px;margin-bottom:12px}
  .art-body-c ul li::before{content:'';position:absolute;left:0;top:8px;width:16px;height:16px;border-radius:50%;background:rgba(0,157,79,.14);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 12l4 4 8-8' stroke='%23006937' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:11px;background-repeat:no-repeat;background-position:center}
  .art-body-c strong{color:var(--ink);font-weight:700}
  .pullquote{border-left:4px solid var(--green);background:var(--mist);padding:22px 26px;border-radius:0 12px 12px 0;margin:30px 0;font-size:19px;font-style:italic;color:var(--green-darker);line-height:1.5}
  .compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:28px 0}
  .compare-card{border:1px solid var(--line);border-radius:var(--r);padding:24px;background:#fff}
  .compare-card.a{border-top:4px solid var(--green)}
  .compare-card.b{border-top:4px solid var(--purple)}
  .compare-card h4{font-size:17px;margin-bottom:6px}
  .compare-card .ct{font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px}
  .compare-card.a .ct{color:var(--green-deep)}.compare-card.b .ct{color:var(--purple)}
  .compare-card p{font-size:14.5px;color:var(--slate);margin-bottom:0}
  .art-side-c{position:sticky;top:96px}
  .toc{background:var(--mist);border-radius:var(--r);padding:22px}
  .toc h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#9aa39d;margin-bottom:14px}
  .toc a{display:block;font-size:14px;color:var(--slate);text-decoration:none;padding:7px 0;border-bottom:1px solid var(--line)}
  .toc a:last-child{border-bottom:0}
  .toc a:hover{color:var(--purple)}
  .side-cta{margin-top:20px;background:linear-gradient(150deg,var(--green-deep),var(--green-darker));border-radius:var(--r);padding:24px;color:#fff;position:relative;overflow:hidden}
  .side-cta::after{content:'';position:absolute;width:140px;height:140px;border-radius:50%;right:-50px;bottom:-50px;background:rgba(192,137,46,.18)}
  .side-cta .in{position:relative;z-index:2}
  .side-cta h4{font-size:17px;margin-bottom:8px;color:#fff}
  .side-cta p{font-size:13.5px;color:rgba(255,255,255,.85);margin-bottom:16px}
  .side-cta a{display:block;text-align:center;background:var(--gold);color:#fff;text-decoration:none;font-weight:700;font-size:14px;padding:11px;border-radius:10px;transition:transform .2s}
  .side-cta a:hover{transform:translateY(-2px)}
  .decision-cta{background:var(--mist);border-radius:var(--r-lg);padding:34px;margin:42px 0;text-align:center}
  .decision-cta h3{font-size:22px;margin-bottom:10px}
  .decision-cta p{font-size:15px;color:var(--slate);margin-bottom:22px;max-width:520px;margin-left:auto;margin-right:auto}
  .decision-cta .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  .art-disclaimer{max-width:760px;margin:0 auto;padding:24px 26px 0;font-size:12.5px;color:#9aa39d;line-height:1.6}
  .draft-note{max-width:880px;margin:0 auto 0;padding:14px 26px;}
  .draft-note .inner{background:rgba(192,137,46,.10);border-radius:12px;padding:14px 18px;font-size:13px;color:#8a6418}


  .float-cta { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(120px); background: rgba(2,75,41,0.97); backdrop-filter: blur(10px); color: #fff; border-radius: 100px; padding: 12px 12px 12px 26px; display: flex; align-items: center; gap: 20px; box-shadow: 0 18px 50px rgba(0,0,0,0.28); z-index: 80; transition: transform .4s ease; max-width: calc(100% - 32px); }
  .float-cta.show { transform: translateX(-50%) translateY(0); }
  .float-cta .ft-text { font-size: 15px; font-weight: 600; }
  .float-cta .ft-text span { display: block; font-size: 12.5px; font-weight: 400; color: rgba(255,255,255,0.7); }
  .float-cta a { background: var(--gold); color: #fff; text-decoration: none; padding: 12px 24px; border-radius: 100px; font-weight: 700; font-size: 14.5px; white-space: nowrap; cursor: pointer; }

  /* ============ FOOTER ============ */
  footer.site { background: var(--ink); color: rgba(255,255,255,0.7); padding: 56px 0 28px; }

  /* ============ NEWSLETTER SIGNUP BAND ============ */
  .news-band { background: linear-gradient(135deg, var(--purple), var(--purple-deep)); color: #fff; }
  .news-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 54px 0; }
  .news-copy .eyebrow { color: var(--gold-soft); }
  .news-copy h2 { font-size: clamp(26px, 3.2vw, 36px); margin-bottom: 12px; color: #fff; }
  .news-copy p { font-size: 16px; color: rgba(255,255,255,0.84); max-width: 440px; }
  .news-form-wrap { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--r-lg); padding: 28px; }
  /* newsletter is now a link-out CTA, no embedded form */
  .news-cta-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
  .news-cta { align-self: flex-start; }
  /* developer placeholder for the AWeber embed */
  .aweber-slot { border: 2px dashed var(--gold-soft); border-radius: var(--r); padding: 22px; text-align: center; color: var(--gold-soft); font-size: 13px; line-height: 1.6; margin-bottom: 18px; }
  .aweber-slot b { display: block; color: #fff; font-size: 13.5px; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 6px; }
  /* visual mock of the form (non-functional, for layout only) */
  .news-mock { display: grid; gap: 12px; }
  .news-mock label { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.75); }
  .news-mock input { width: 100%; padding: 14px 16px; border-radius: 10px; border: 0; font-family: inherit; font-size: 15px; background: rgba(255,255,255,0.95); color: var(--ink); }
  .news-mock input:focus { outline: 3px solid var(--gold-soft); outline-offset: 1px; }
  .news-mock .news-btn { background: var(--gold); color: #fff; border: 0; font-family: inherit; font-weight: 700; font-size: 15px; padding: 14px; border-radius: 100px; cursor: pointer; transition: transform .2s, box-shadow .2s; box-shadow: 0 10px 26px rgba(192,137,46,0.34); }
  .news-mock .news-btn:hover { transform: translateY(-2px); }
  .news-fine { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 4px; }

  /* ============ FUN HORMONE FACTS: GALLERY HUB ============ */
  .fhf-hero { background: linear-gradient(140deg, var(--purple), var(--purple-deep)); color: #fff; padding: 72px 0 60px; }
  .fhf-hero .inner { max-width: 760px; }
  .fhf-hero h1 { font-size: clamp(32px, 5vw, 50px); margin-bottom: 16px; }
  .fhf-hero p { font-size: 18px; color: rgba(255,255,255,0.86); }
  .fhf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .fhf-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; cursor: pointer; }
  .fhf-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
  /* placeholder image slot: drop the card graphic here */
  .fhf-thumb { aspect-ratio: 4/5; background: var(--mist); display: grid; place-items: center; position: relative; border-bottom: 1px solid var(--line); overflow: hidden; }
  /* card art is a full 4:5 design: show all of it, never crop the copy */
  .fhf-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .3s ease; }
  .fhf-card:hover .fhf-thumb img { transform: scale(1.03); }
  .fhf-thumb .slot-tag { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: #aeb6b0; font-size: 13px; padding: 20px; }
  .fhf-meta { padding: 20px 22px 24px; flex: 1; display: flex; flex-direction: column; }
  .fhf-meta .topic { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); margin-bottom: 8px; }
  .fhf-meta h3 { font-size: 19px; margin-bottom: 16px; }
  .fhf-meta .fhf-go { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--purple); }
  .fhf-meta .fhf-go svg { width: 16px; height: 16px; }

  /* ============ FUN HORMONE FACTS: CARD PAGE ============ */
  .fhf-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
  .fhf-display { background: var(--mist); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/5; display: grid; place-items: center; box-shadow: var(--shadow-md); }
  .fhf-display img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .fhf-display .slot-tag { text-align: center; color: #aeb6b0; font-size: 13.5px; padding: 30px; line-height: 1.6; }
  .fhf-info .topic { font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); margin-bottom: 12px; display: inline-block; }
  .fhf-info h1 { font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 18px; }
  .fhf-info p.lead { font-size: 16.5px; color: var(--slate); margin-bottom: 28px; }
  .fhf-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
  .fhf-back { font-size: 13.5px; color: var(--slate); margin-bottom: 22px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
  .fhf-back:hover { color: var(--purple); }

  @media (max-width: 940px) {
    .news-inner { grid-template-columns: 1fr; gap: 28px; }
    .fhf-grid { grid-template-columns: repeat(2, 1fr); }
    .fhf-detail { grid-template-columns: 1fr; gap: 30px; }
    .fhf-display { max-width: 420px; }
  }
  @media (max-width: 560px) { .fhf-grid { grid-template-columns: 1fr; } }
  .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 38px; }
  footer .logo.reversed { display: inline-flex; margin-bottom: 16px; }
  footer p.about { font-size: 14px; max-width: 300px; }
  footer h4 { color: #fff; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; }
  footer ul { list-style: none; display: grid; gap: 9px; }
  footer ul a { color: rgba(255,255,255,0.7); text-decoration: none; font-size: 14px; cursor: pointer; transition: color .2s; }
  footer ul a:hover { color: var(--gold-soft); }
  .foot-contact { font-size: 14px; line-height: 1.7; }
  .foot-contact a { color: rgba(255,255,255,0.7); text-decoration: none; }
  .foot-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 22px; font-size: 12.5px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
  .foot-bottom .compliance { max-width: 580px; }

  @media (max-width: 640px) {
    .wrap { padding: 0 18px; }
    .hero h1 { font-size: clamp(32px, 8vw, 42px); }
    .hero .lede { font-size: 17px; }
    .btn { padding: 13px 24px; font-size: 14.5px; width: 100%; justify-content: center; }
    .hero-actions { width: 100%; }
    .hero-actions .btn { width: 100%; }
    .section-head h2 { font-size: 26px; }
    .section-head p { font-size: 16px; }
    section.block { padding: 56px 0; }
    .prod-info h1 { font-size: 26px; }
    .price-block .now { font-size: 28px; }
    .qty-add { flex-direction: column; }
    .qty { width: 100%; justify-content: center; }
    .add-btn { width: 100%; }
    .dec-card, .glass, .card, .turn-card { padding: 24px 20px; }
    .art-hero h1 { font-size: 24px; }
    .art-body-c { font-size: 16px; }
    .art-body-c .lead { font-size: 18px; }
    .feat-body { padding: 26px; }
    .feat-body h2 { font-size: 22px; }
    .blog-hero h1, .res-hero h1, .pod-hero h1 { font-size: 30px; }
    .decision-cta .btns { flex-direction: column; }
    .decision-cta .btns .btn { width: 100%; }
    .foot-bottom { flex-direction: column; gap: 8px; }
    .demo-tag { font-size: 11px; padding: 7px 12px; }
  }

  /* Tap targets: ensure interactive elements are at least 44px on touch */
  @media (hover: none) and (pointer: coarse) {
    .navlink, .faq-q, .tab, .p-link, .dec-btn, .filterbar button, .blog-filter button { min-height: 44px; }
    .nav-cta { padding: 13px 22px !important; }
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 940px) {
    .hero-grid, .pod-hero-grid { grid-template-columns: 1fr; }
    .prod-top { grid-template-columns: 1fr; }
    .grid-3, .areas-grid { grid-template-columns: 1fr; }
    .dec-grid { grid-template-columns: 1fr; }
    .food-groups { columns: 2; }
    .box-grid { grid-template-columns: 1fr; }
    .res-body { grid-template-columns: 1fr; }
    .res-side { display: flex; gap: 8px; overflow-x: auto; }
    .res-side h4 { display: none; }
    .art-grid { grid-template-columns: 1fr; }
    /* post cards must step down too, or they squeeze to ~100px on a phone */
    .post-grid { grid-template-columns: repeat(2, 1fr); }
    .portal-shell { grid-template-columns: 1fr; }
    .p-side { display: flex; gap: 6px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
    .p-side .grp { display: none; }
    .pstats { grid-template-columns: 1fr 1fr; }
    .pod-strip-grid { grid-template-columns: 1fr 1fr; }
    .mainnav { display: none; }
    .menu-btn { display: block; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
    .cover { max-width: 220px; }
    .float-cta .ft-text { display: none; }
    .float-cta { left: auto; right: 16px; transform: translateY(120px); padding: 10px; }
    .float-cta.show { transform: translateY(0); }
  }
  @media (max-width: 560px) { .food-groups { columns: 1; } .foot-grid { grid-template-columns: 1fr; } .pstats { grid-template-columns: 1fr; } .post-grid { grid-template-columns: 1fr; } }

  /* ============ AREAS OF TESTING: HUB ============ */
  .aot-hero { background: linear-gradient(140deg, var(--green-deep), var(--green-darker)); color: #fff; padding: 76px 0 64px; }
  .aot-hero .inner { max-width: 760px; }
  .aot-hero h1 { font-size: clamp(34px, 5vw, 52px); margin-bottom: 16px; }
  .aot-hero p { font-size: 18px; color: rgba(255,255,255,0.86); }
  .aot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .aot-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 28px 26px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; position: relative; overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s; min-height: 230px; }
  .aot-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--green); }
  .aot-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
  .aot-card .ac-ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 20px; background: var(--green); }
  .aot-card .ac-ic svg { width: 28px; height: 28px; }
  .aot-card h3 { font-size: 21px; margin-bottom: 10px; }
  .aot-card p { font-size: 14.5px; color: var(--slate); flex: 1; }
  .aot-card .ac-go { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-size: 14px; font-weight: 700; color: var(--green-deep); }
  .aot-card .ac-go svg { width: 17px; height: 17px; flex: 0 0 auto; }
  /* per-category accent */
  .ac-horm::before { background: var(--pink); }   .ac-horm .ac-ic { background: var(--pink); }   .ac-horm .ac-go { color: var(--pink); }
  .ac-food::before { background: var(--green); }   .ac-food .ac-ic { background: var(--green); }
  .ac-cardio::before { background: var(--red); }   .ac-cardio .ac-ic { background: var(--red); }  .ac-cardio .ac-go { color: var(--red); }
  .ac-pre::before { background: var(--blue); }     .ac-pre .ac-ic { background: var(--blue); }    .ac-pre .ac-go { color: var(--blue); }
  .ac-wright::before { background: var(--purple); } .ac-wright .ac-ic { background: var(--purple); } .ac-wright .ac-go { color: var(--purple); }
  .ac-allergy::before { background: var(--teal); } .ac-allergy .ac-ic { background: var(--teal); } .ac-allergy .ac-go { color: var(--teal); }

  /* ============ AREAS OF TESTING: CATEGORY DETAIL ============ */
  .cat-hero { color: #fff; padding: 64px 0 56px; }
  .cat-hero .inner { max-width: 780px; }
  .cat-hero h1 { font-size: clamp(30px, 4.4vw, 46px); margin-bottom: 14px; }
  .cat-hero p { font-size: 17px; color: rgba(255,255,255,0.88); }
  .cat-crumb { font-size: 13.5px; color: rgba(255,255,255,0.8); margin-bottom: 18px; }
  .cat-crumb a { color: #fff; text-decoration: none; font-weight: 600; cursor: pointer; }
  .cat-crumb a:hover { text-decoration: underline; }
  .h-food { background: linear-gradient(140deg, var(--green), var(--green-deep)); }
  .h-horm { background: linear-gradient(140deg, var(--pink), #b00574); }
  .h-cardio { background: linear-gradient(140deg, var(--red), #6e0f22); }
  .h-pre { background: linear-gradient(140deg, var(--blue), #2c5e9e); }
  .h-allergy { background: linear-gradient(140deg, var(--teal), #058984); }
  .h-wright { background: linear-gradient(140deg, var(--purple), var(--purple-deep)); }

  .prac-banner { display: flex; align-items: center; gap: 20px; background: var(--mist); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 26px; margin-bottom: 44px; flex-wrap: wrap; }
  .prac-banner .pb-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--purple); display: grid; place-items: center; flex: 0 0 auto; }
  .prac-banner .pb-ic svg { width: 24px; height: 24px; }
  .prac-banner .pb-text { flex: 1; min-width: 240px; font-size: 14.5px; color: var(--slate); }
  .prac-banner .pb-text b { color: var(--ink); }
  .prac-banner .pb-cta { flex: 0 0 auto; }

  .test-list { display: grid; gap: 16px; max-width: 860px; margin: 0 auto; }
  .test-item { display: flex; gap: 18px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; transition: box-shadow .25s, border-color .25s; }
  .test-item:hover { box-shadow: var(--shadow-md); border-color: transparent; }
  .test-item .ti-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; background: rgba(0,157,79,0.12); color: var(--green-deep); }
  .test-item .ti-ic.ic-r { background: rgba(0,105,55,0.12); color: var(--green-deep); }
  .test-item .ti-ic svg { width: 24px; height: 24px; }
  .test-item h4 { font-size: 17px; margin-bottom: 5px; }
  .test-item p { font-size: 14.5px; color: var(--slate); }
  .retail-tag { display: inline-block; background: rgba(192,137,46,0.14); color: var(--gold); font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 100px; margin-left: 4px; white-space: nowrap; }

  .placeholder-note { background: rgba(192,137,46,0.10); border: 1px dashed var(--gold); border-radius: var(--r); padding: 16px 20px; font-size: 13.5px; color: var(--gold); margin-bottom: 30px; max-width: 860px; margin-left: auto; margin-right: auto; }
  .placeholder-slot { border: 2px dashed var(--line); border-radius: var(--r); padding: 28px 24px; text-align: center; color: #aeb6b0; font-size: 14px; background: var(--mist); }

  @media (max-width: 940px) { .aot-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 640px) {
    .aot-grid { grid-template-columns: 1fr; }
    .aot-card { min-height: 0; }
    .prac-banner .pb-cta, .prac-banner .pb-cta .btn { width: 100%; }
    .test-item { flex-direction: column; }
  }

  /* ==================================================================
     ADDITIONS FOR THE WORDPRESS BUILD
     (classes used by the approved mockup that needed production CSS,
     plus WordPress core and WooCommerce alignment)
     ================================================================== */

  /* ============ LOGO (approved brand artwork) ============
     Brand guide: scale proportionally; never recolor, stretch, outline,
     or add effects. Height is the only dimension we set; width follows. */
  .mvl-logo { display: block; height: 42px; width: auto; max-width: 100%; }
  footer.site .mvl-logo { height: 40px; }
  @media (max-width: 940px) { .mvl-logo { height: 36px; } }
  @media (max-width: 400px) { .mvl-logo { height: 30px; } }

  /* ============ CONTACT PAGE ============ */
  .contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: start; }
  .contact-info-card { background: var(--mist); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 28px; display: grid; gap: 24px; }
  /* form-free contact page: info spreads into two comfortable columns */
  .contact-info-wide { grid-template-columns: 1fr 1fr; gap: 20px 40px; }
  @media (max-width: 640px) { .contact-info-wide { grid-template-columns: 1fr; } }
  .contact-row { display: flex; gap: 16px; align-items: flex-start; }
  .contact-row .cr-ic { width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; color: var(--green-deep); flex: 0 0 auto; }
  .contact-row .cr-ic svg { width: 22px; height: 22px; }
  .contact-row h4 { font-size: 14px; margin-bottom: 3px; }
  .contact-row p, .contact-row a { font-size: 14.5px; color: var(--slate); text-decoration: none; }
  .contact-row a:hover { color: var(--green-deep); }
  .cform { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 28px; box-shadow: var(--shadow-sm); display: grid; gap: 18px; }
  .cfield { display: grid; gap: 7px; }
  .cfield label { font-size: 13px; font-weight: 600; color: var(--ink); }
  .cfield input, .cfield select, .cfield textarea { width: 100%; padding: 13px 15px; border-radius: 10px; border: 1px solid var(--line); font-family: inherit; font-size: 15px; color: var(--ink); background: #fff; }
  .cfield textarea { min-height: 130px; resize: vertical; }
  .cfield input:focus, .cfield select:focus, .cfield textarea:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
  /* Ninja Forms dropped into the contact card inherits the same look */
  /* Customizer form slots: white card wrapper for a pasted form shortcode.
     Carries .cform so Ninja Forms fields inherit the styling below. */
  .form-slot { max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 34px; box-shadow: var(--shadow-sm); }
  .form-slot input[type="text"], .form-slot input[type="email"], .form-slot input[type="tel"],
  .form-slot input[type="number"], .form-slot select, .form-slot textarea { width: 100%; padding: 13px 15px; border-radius: 10px; border: 1px solid var(--line); font-family: inherit; font-size: 15px; color: var(--ink); background: #fff; }
  .form-slot textarea { min-height: 130px; resize: vertical; }
  .resource-gate { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; margin-bottom: 26px; box-shadow: var(--shadow-sm); }
  .news-form-wrap input[type="text"], .news-form-wrap input[type="email"] { width: 100%; padding: 12px 14px; border-radius: 10px; border: 0; font-family: inherit; font-size: 15px; margin-bottom: 10px; }
  .news-form-wrap input[type="submit"], .news-form-wrap button[type="submit"] { background: var(--gold); color: #fff; border: 0; border-radius: 100px; font-family: inherit; font-weight: 700; font-size: 15px; padding: 13px 26px; cursor: pointer; }

  /* ---- AWEBER EMBED NORMALIZATION ----
     AWeber's injected form ships its own gradient header, boxed body, and
     button styling that clash inside the theme. AWeber's stylesheet targets
     the form by id, which outranks classes, so these declarations carry
     !important to win. Scoped to the three wrappers a form can land in.
     The AWeber badge link stays visible on purpose (their usage terms). */
  .news-form-wrap .af-form, .resource-gate .af-form, .form-slot .af-form,
  .news-form-wrap .af-body, .resource-gate .af-body, .form-slot .af-body,
  .news-form-wrap .af-standards, .resource-gate .af-standards, .form-slot .af-standards { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; width: 100% !important; font-family: inherit !important; }
  .news-form-wrap .af-header, .resource-gate .af-header, .form-slot .af-header,
  .news-form-wrap .af-footer, .resource-gate .af-footer, .form-slot .af-footer { display: none !important; }
  .news-form-wrap .af-body .af-element, .resource-gate .af-body .af-element, .form-slot .af-body .af-element { padding: 0 0 12px !important; margin: 0 !important; width: 100% !important; }
  .news-form-wrap .af-body .af-textWrap, .resource-gate .af-body .af-textWrap, .form-slot .af-body .af-textWrap { width: 100% !important; }
  .news-form-wrap .af-body label.previewLabel, .resource-gate .af-body label.previewLabel, .form-slot .af-body label.previewLabel { display: block !important; float: none !important; text-align: left !important; font-size: 13px !important; font-weight: 600 !important; margin: 0 0 6px !important; font-family: inherit !important; }
  .news-form-wrap .af-body input.text, .resource-gate .af-body input.text, .form-slot .af-body input.text { width: 100% !important; box-sizing: border-box !important; padding: 12px 14px !important; border: 1px solid var(--line) !important; border-radius: 10px !important; font-family: inherit !important; font-size: 15px !important; background: #fff !important; float: none !important; }
  .news-form-wrap .af-body .buttonContainer, .resource-gate .af-body .buttonContainer, .form-slot .af-body .buttonContainer { width: 100% !important; padding: 4px 0 0 !important; text-align: left !important; }
  .news-form-wrap .buttonContainer input.submit, .resource-gate .buttonContainer input.submit, .form-slot .buttonContainer input.submit { background: var(--green) !important; background-image: none !important; color: #fff !important; border: 0 !important; border-radius: 100px !important; font-family: inherit !important; font-weight: 700 !important; font-size: 15px !important; padding: 13px 28px !important; cursor: pointer !important; text-shadow: none !important; box-shadow: none !important; width: auto !important; }
  .news-form-wrap .buttonContainer input.submit { background: var(--gold) !important; width: 100% !important; }
  .news-form-wrap .af-body label.previewLabel { color: #fff !important; }
  .resource-gate .af-body label.previewLabel, .form-slot .af-body label.previewLabel { color: var(--ink) !important; }
  .news-form-wrap .poweredBy, .news-form-wrap .privacyPolicy, .resource-gate .poweredBy, .resource-gate .privacyPolicy, .form-slot .poweredBy, .form-slot .privacyPolicy { text-align: left !important; padding: 8px 0 0 !important; }
  .news-form-wrap .poweredBy a, .news-form-wrap .privacyPolicy a { color: rgba(255,255,255,0.7) !important; font-size: 12px !important; }
  .resource-gate .poweredBy a, .resource-gate .privacyPolicy a, .form-slot .poweredBy a, .form-slot .privacyPolicy a { color: var(--slate) !important; font-size: 12px !important; }
  .cform .nf-field-container { margin-bottom: 14px; }
  .cform .nf-field-label label { font-size: 13px; font-weight: 600; color: var(--ink); }
  .cform .ninja-forms-field { width: 100%; padding: 13px 15px; border-radius: 10px; border: 1px solid var(--line); font-family: inherit; font-size: 15px; }
  .cform input[type="submit"].ninja-forms-field, .cform .nf-form-content button { background: var(--green); color: #fff; border: 0; border-radius: 100px; font-weight: 700; cursor: pointer; padding: 14px 28px; }
  @media (max-width: 940px) { .contact-grid { grid-template-columns: 1fr; } }

  /* ============ CAREERS PAGE ============ */
  .culture-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .job-list { max-width: 820px; margin: 0 auto; display: grid; gap: 14px; }
  .job-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 22px 26px; display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; transition: box-shadow .25s; }
  .job-card:hover { box-shadow: var(--shadow-md); }
  .job-card h4 { font-size: 17px; margin-bottom: 4px; }
  .job-meta { font-size: 13.5px; color: var(--slate); display: flex; gap: 6px; flex-wrap: wrap; }
  @media (max-width: 940px) { .culture-grid { grid-template-columns: 1fr; } }

  /* ============ WORDPRESS CORE ============ */
  .screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; }
  .aligncenter { display: block; margin: 0 auto; }
  .alignleft { float: left; margin: 0 20px 12px 0; }
  .alignright { float: right; margin: 0 0 12px 20px; }
  img { max-width: 100%; height: auto; }
  .wp-caption { max-width: 100%; }
  .wp-caption-text { font-size: 13px; color: var(--slate); text-align: center; padding: 6px 0; }

  /* Generic interior page (default page.php) */
  /* ============ INTERIOR CONTENT PAGES ============
     Every page without a bespoke template (Returns, FAQs, Patient
     Information, Interpretive Guides, Privacy Policy, and any plugin driven
     page such as Login or Kit Request) renders through page.php. These rules
     make the page's OWN WordPress content look designed, so content stays
     editable in wp-admin instead of being hardcoded into a template. */
  /* Non-FoodSafe interior pages use purple, keeping dark green reserved for
     the FoodSafe / food-sensitivity context (brand notes point 3). */
  .generic-hero { background: linear-gradient(150deg, var(--purple), var(--purple-deep)); color: #fff; padding: 56px 0; position: relative; overflow: hidden; }
  .generic-hero::after { content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%; right: -110px; top: -130px; background: rgba(192,137,46,0.16); }
  .generic-hero .wrap { position: relative; z-index: 2; }
  .generic-hero h1 { font-size: clamp(28px, 4vw, 42px); }
  .generic-hero .crumb-line { font-size: 13.5px; color: rgba(255,255,255,0.75); margin-bottom: 12px; }
  .generic-hero .crumb-line a { color: var(--gold-soft); text-decoration: none; }
  .generic-hero .crumb-line a:hover { text-decoration: underline; }
  .generic-hero .updated { margin-top: 12px; font-size: 13px; color: rgba(255,255,255,0.72); }

  .generic-body { padding: 50px 0 76px; }
  .entry { max-width: 780px; margin: 0 auto; font-size: 16.5px; color: #2c332f; line-height: 1.75; }
  .entry > *:first-child { margin-top: 0; }
  .entry > *:last-child { margin-bottom: 0; }
  .entry p { margin-bottom: 18px; }
  .entry h2 { font-size: 26px; margin: 40px 0 14px; color: var(--ink); }
  .entry h3 { font-size: 20px; margin: 30px 0 12px; color: var(--green-deep); }
  .entry h4 { font-size: 17px; margin: 24px 0 10px; color: var(--ink); }
  .entry a { color: var(--green-deep); text-decoration: underline; text-underline-offset: 2px; }
  .entry a:hover { color: var(--purple); }
  .entry strong { color: var(--ink); font-weight: 700; }
  .entry hr { border: 0; border-top: 1px solid var(--line); margin: 36px 0; }
  .entry img { border-radius: 12px; }
  .entry figcaption, .entry .wp-caption-text { font-size: 13px; color: var(--slate); text-align: center; padding-top: 8px; }

  /* lists get the brand check/dot treatment rather than default bullets */
  .entry ul, .entry ol { margin: 0 0 20px; padding-left: 0; }
  .entry ol { padding-left: 22px; }
  .entry ol li { margin-bottom: 10px; padding-left: 4px; }
  .entry ul { list-style: none; }
  .entry ul li { position: relative; padding-left: 26px; margin-bottom: 10px; }
  .entry ul li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
  .entry li > ul, .entry li > ol { margin-top: 10px; margin-bottom: 0; }

  /* tables: the Returns summary table and any test/turnaround chart */
  .entry table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 15px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
  .entry thead th { background: var(--mist); text-align: left; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--green-deep); padding: 13px 16px; border-bottom: 1px solid var(--line); }
  .entry td, .entry tbody th { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
  .entry tbody th { text-align: left; font-weight: 600; color: var(--ink); }
  .entry tr:last-child td, .entry tr:last-child th { border-bottom: 0; }
  .entry tbody tr:hover { background: #fbfcfb; }
  /* wide tables scroll inside their own container, never the page */
  .entry .table-scroll { overflow-x: auto; margin-bottom: 24px; -webkit-overflow-scrolling: touch; }
  .entry .table-scroll table { margin-bottom: 0; min-width: 520px; }

  .entry blockquote { border-left: 4px solid var(--green); background: var(--mist); padding: 20px 24px; border-radius: 0 12px 12px 0; margin: 26px 0; font-size: 17px; color: var(--green-darker); }
  .entry blockquote p:last-child { margin-bottom: 0; }
  .entry code { background: var(--mist); padding: 2px 6px; border-radius: 5px; font-size: 14px; }
  .entry pre { background: var(--mist); padding: 18px; border-radius: 12px; overflow-x: auto; margin-bottom: 20px; }

  /* Shortcodes Ultimate accordions (su_spoiler), already used on the site */
  .entry .su-spoiler { border: 1px solid var(--line); border-radius: var(--r); background: #fff; margin-bottom: 12px; overflow: hidden; }
  .entry .su-spoiler-title { font-weight: 600; font-size: 16px; color: var(--ink); padding: 16px 20px; cursor: pointer; }
  .entry .su-spoiler-content { padding: 0 20px 18px; color: var(--slate); font-size: 15px; }

  /* plugin driven pages (Login, Kit Request, Pay Online) render their forms
     inside the same reading column; keep inputs on-brand */
  .entry input[type="text"], .entry input[type="email"], .entry input[type="password"],
  .entry input[type="tel"], .entry input[type="number"], .entry select, .entry textarea {
    width: 100%; max-width: 420px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 15px; background: #fff; color: var(--ink);
  }
  .entry textarea { max-width: 100%; }
  .entry input:focus, .entry select:focus, .entry textarea:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
  .entry input[type="submit"], .entry button[type="submit"] {
    width: auto; background: var(--green); color: #fff; border: 0; border-radius: 100px; font-weight: 700; font-size: 15px; padding: 13px 28px; cursor: pointer; transition: background .2s, transform .18s;
  }
  .entry input[type="submit"]:hover, .entry button[type="submit"]:hover { background: var(--green-deep); transform: translateY(-2px); }
  .entry label { font-weight: 600; font-size: 14px; color: var(--ink); display: inline-block; margin-bottom: 6px; }

  @media (max-width: 640px) {
    .entry { font-size: 16px; }
    .entry h2 { font-size: 22px; }
    .entry table { font-size: 14px; }
  }

  /* ============ RESOURCES: real posts + working filters ============ */
  .res-side button { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .res-count { font-size: 11.5px; font-weight: 700; color: #9aa39d; background: var(--mist); border-radius: 100px; padding: 2px 8px; flex: 0 0 auto; }
  .res-side button.active .res-count { background: rgba(114,34,130,0.12); color: var(--purple); }
  .res-empty { text-align: center; color: var(--slate); padding: 50px 0; font-size: 15px; }
  /* real featured images sit in the same slot as the generated icon tiles */
  .post-img.has-img { background: var(--mist); }
  .post-img.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .post-card[hidden] { display: none; }
  @media (max-width: 940px) {
    .res-side button { min-width: max-content; }
  }

  /* Blog index cards reuse the mockup post grid */
  .home-blog-wrap { padding: 44px 0 80px; }
  .pagination { display: flex; gap: 8px; justify-content: center; margin-top: 40px; }
  .pagination .page-numbers { padding: 10px 16px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--slate); font-weight: 600; font-size: 14px; }
  .pagination .page-numbers.current, .pagination .page-numbers:hover { background: var(--purple); color: #fff; border-color: var(--purple); }

  /* 404 */
  .err-hero { text-align: center; padding: 110px 26px; }
  .err-hero .code { font-size: 90px; font-weight: 800; color: var(--purple); letter-spacing: -0.04em; line-height: 1; }
  .err-hero h1 { font-size: 28px; margin: 14px 0 10px; }
  .err-hero p { color: var(--slate); margin-bottom: 26px; }

  /* ============ WOOCOMMERCE ALIGNMENT ============ */
  .woocommerce-shell { padding: 40px 0 80px; }
  .woocommerce-shell .woocommerce-breadcrumb { font-size: 13px; color: var(--slate); margin-bottom: 22px; }
  .woocommerce-shell .woocommerce-breadcrumb a { color: var(--green-deep); text-decoration: none; }
  .woocommerce ul.products li.product { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px; transition: transform .2s, box-shadow .2s; }
  .woocommerce ul.products li.product:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 16.5px; color: var(--ink); }
  .woocommerce ul.products li.product .price { color: var(--green-deep); font-weight: 800; font-size: 16px; }
  .woocommerce ul.products li.product .price del { color: var(--slate); font-weight: 400; }
  .woocommerce span.onsale { background: var(--gold); border-radius: 100px; padding: 4px 12px; min-height: 0; min-width: 0; line-height: 1.6; font-weight: 700; }
  .woocommerce .button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
  .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt,
  .wc-block-components-button { background: var(--green) !important; color: #fff !important; border-radius: 100px !important; font-weight: 700 !important; padding: 12px 24px !important; transition: transform .18s, background .2s !important; border: 0 !important; }
  .woocommerce .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--green-deep) !important; transform: translateY(-2px); }
  /* ---- SINGLE PRODUCT LAYOUT ----
     Woo's default floats let an oversized gallery image overflow its column
     and push the summary/footer around. A grid with minmax(0,1fr) columns
     cannot be inflated by its contents, so the image is always contained. */
  .woocommerce div.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: start; }
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary { width: 100% !important; max-width: 100% !important; float: none !important; margin: 0 !important; min-width: 0; }
  .woocommerce div.product div.images img,
  .woocommerce div.product div.images a img { width: 100% !important; height: auto !important; max-width: 100% !important; display: block; border-radius: var(--r); }
  .woocommerce div.product .woocommerce-product-gallery { max-width: 100%; min-width: 0; overflow: hidden; }
  .woocommerce div.product .flex-viewport { max-width: 100%; }
  /* thumbnails under the main image */
  .woocommerce div.product .flex-control-thumbs { display: flex; gap: 10px; flex-wrap: wrap; list-style: none; margin: 12px 0 0; padding: 0; }
  .woocommerce div.product .flex-control-thumbs li { width: 76px; margin: 0; }
  .woocommerce div.product .flex-control-thumbs img { border-radius: 8px; cursor: pointer; opacity: .65; transition: opacity .2s; }
  .woocommerce div.product .flex-control-thumbs img.flex-active,
  .woocommerce div.product .flex-control-thumbs img:hover { opacity: 1; }
  /* full-width rows below the two columns */
  .woocommerce div.product .woocommerce-tabs,
  .woocommerce div.product .related,
  .woocommerce div.product .up-sells,
  .woocommerce div.product .product_meta { grid-column: 1 / -1; }
  @media (max-width: 860px) { .woocommerce div.product { grid-template-columns: 1fr; gap: 26px; } }

  /* ---- SINGLE PRODUCT IN THE MOCK'S LAYOUT ----
     content-single-product.php lays the product out with .prod-top / .prod-info,
     so the generic two-column grid above must not ALSO apply to the wrapper it
     shares a .product class with. The gallery containment rules above still do
     their job one level down. */
  .woocommerce div.product.mvl-product { display: block; gap: 0; }
  .mvl-product .gallery { position: relative; }
  .mvl-product .gallery .deal { z-index: 3; }
  .mvl-product .prod-info .cat a { color: inherit; text-decoration: none; }
  .mvl-product .price-block .now .woocommerce-Price-amount { color: var(--ink); }
  .mvl-product .price-block .was .woocommerce-Price-amount { color: var(--slate); }
  /* Woo's real add-to-cart form, dropped into the mock's qty + button row */
  .mvl-product .qty-add form.cart { display: flex; gap: 12px; align-items: stretch; margin: 0; width: 100%; }
  .mvl-product .qty-add .quantity { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 100px; overflow: hidden; }
  .mvl-product .qty-add .quantity input.qty { width: 70px; height: 50px; border: 0; background: #fff; text-align: center; font-family: inherit; font-weight: 700; font-size: 15px; color: var(--ink); }
  .mvl-product .qty-add .single_add_to_cart_button { flex: 1; font-size: 16px !important; box-shadow: 0 10px 26px rgba(0,157,79,0.3); }
  .mvl-product .prod-tags { margin-top: 18px; font-size: 13px; color: var(--slate); }
  .mvl-product .prod-tags .tag-label { font-weight: 600; }
  .mvl-product .prod-tags a { color: var(--green-deep); text-decoration: none; }
  /* Woo's tab strip restyled as the mock's .tabnav, inside the grey band */
  .mvl-product .tabs-section .woocommerce-tabs ul.tabs { display: flex; gap: 6px; margin: 0 0 30px; padding: 0; list-style: none; border-bottom: 1px solid var(--line); overflow-x: auto; }
  .mvl-product .tabs-section .woocommerce-tabs ul.tabs::before { display: none; }
  .mvl-product .tabs-section .woocommerce-tabs ul.tabs li { background: none; border: 0; border-radius: 0; margin: 0; padding: 0; }
  .mvl-product .tabs-section .woocommerce-tabs ul.tabs li::before,
  .mvl-product .tabs-section .woocommerce-tabs ul.tabs li::after { display: none; }
  .mvl-product .tabs-section .woocommerce-tabs ul.tabs li a { display: block; padding: 16px 18px; font-size: 15px; font-weight: 600; color: var(--slate); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
  .mvl-product .tabs-section .woocommerce-tabs ul.tabs li.active a { color: var(--green-deep); border-bottom-color: var(--green); }
  .mvl-product .tabs-section .related > h2, .mvl-product .tabs-section .up-sells > h2 { font-size: 22px; margin: 44px 0 20px; }

  /* Gallery: the mock's tinted, square product card, rebuilt around Woo's real
     photo. The panel sits on each slide rather than on .woocommerce-product-gallery
     or .flex-viewport, because FlexSlider writes inline widths onto those and
     padding there throws off its slide measurements. */
  .mvl-product .gallery .woocommerce-product-gallery__image { background: linear-gradient(150deg, #eef3ef, #e3ebe5); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
  .mvl-product .gallery .woocommerce-product-gallery__image img,
  .mvl-product .gallery .woocommerce-product-gallery__image a img { aspect-ratio: 1 / 1; object-fit: contain; padding: 26px; border-radius: var(--r-lg) !important; background: transparent; }
  .mvl-product .gallery .woocommerce-product-gallery__trigger { z-index: 4; }
  /* thumbnails keep their own smaller tinted chips, below the card */
  .mvl-product .gallery .flex-control-thumbs img { background: linear-gradient(150deg, #eef3ef, #e3ebe5); aspect-ratio: 1 / 1; object-fit: contain; padding: 6px; }

  /* Tab bodies: real product copy from ACF. The stored HTML is Word-pasted and
     carries su_* accordions, so it needs the long-form .entry treatment, but not
     .entry's 780px reading measure — the food groups are a two-column layout. */
  .mvl-product .mvl-tab-body { max-width: none; margin: 0; }
  .mvl-product .su-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
  .mvl-product .su-column { min-width: 0; }
  @media (max-width: 720px) { .mvl-product .su-row { grid-template-columns: 1fr; gap: 0; } }
  /* <details> fallback accordions (used when Shortcodes Ultimate is inactive) */
  .mvl-product .su-spoiler > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .mvl-product .su-spoiler > summary::-webkit-details-marker { display: none; }
  .mvl-product .su-spoiler > summary::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--green-deep); line-height: 1; }
  .mvl-product .su-spoiler[open] > summary::after { content: "\2212"; }
  .mvl-product .su-spoiler > summary:hover { background: var(--mist); }
  .mvl-product .entry .su-spoiler-content ul { margin: 0; padding-left: 18px; }
  .mvl-product .mvl-tab-body > p:first-child { font-size: 16px; color: var(--slate); margin-bottom: 22px; }

  /* Make the stored food-group accordions read as the mock's .fg cards:
     white, rounded, soft shadow, uppercase green titles. This restyles the
     real Shortcodes Ultimate accordion content, it does not replace it. */
  .mvl-product .mvl-tab-body .su-spoiler { border: 0; border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); margin-bottom: 22px; }
  .mvl-product .mvl-tab-body .su-spoiler-title { font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green-deep); padding: 16px 20px; }
  .mvl-product .mvl-tab-body .su-spoiler-title .su-spoiler-icon { color: var(--green); }
  .mvl-product .mvl-tab-body .su-spoiler-content { padding: 0 20px 16px; }
  .mvl-product .mvl-tab-body .su-spoiler-content ul { list-style: none; padding-left: 0; }
  .mvl-product .mvl-tab-body .su-spoiler-content li { font-size: 13.5px; color: var(--slate); padding: 3px 0; }
  /* In the Box: the stored HTML is a flat sequence of bold headings and lists
     with no per-section wrapper, so it stays single column. Headings become the
     mock's green section labels; each list is a clean card of checked items.
     No grid pairing is attempted because the markup can't support it reliably. */
  .mvl-product #tab-mvl_box .mvl-tab-body { max-width: 720px; }
  .mvl-product #tab-mvl_box .mvl-tab-body b,
  .mvl-product #tab-mvl_box .mvl-tab-body strong { display: block; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green-deep); margin: 28px 0 10px; }
  .mvl-product #tab-mvl_box .mvl-tab-body ul { background: #fff; border-radius: 12px; box-shadow: var(--shadow-sm); padding: 8px 24px; list-style: none; }
  .mvl-product #tab-mvl_box .mvl-tab-body li { padding: 10px 0; border-top: 1px solid var(--line); color: var(--slate); font-size: 14.5px; }
  .mvl-product #tab-mvl_box .mvl-tab-body li:first-child { border-top: 0; }

  .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--green-deep); font-weight: 800; }
  .woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--green); }
  .woocommerce-message, .woocommerce-info { border-top-color: var(--green); }
  .woocommerce-message::before, .woocommerce-info::before { color: var(--green); }
  .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; font-family: inherit; }
  .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; display: grid; gap: 4px; }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li a { display: block; padding: 11px 14px; border-radius: 10px; text-decoration: none; color: var(--slate); font-weight: 500; }
  .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a, .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover { background: rgba(0,157,79,0.10); color: var(--green-deep); font-weight: 600; }