/* index-dr.html only (loads after primal.css). Bold headings, plus the honest "Why 3 bags?" box in Primal's low-stock slot. */
h1.pt,h2.h,.trust h2,.icard h3,.sh h3,.s1 .ttl{font-weight:700}
.tsts h2.h,.faq h2.h{font-weight:700}

/* Why 3 bags? (Primal: "WARNING: Low Stock Notice" box between the refill box and Add to cart) */
.why3{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:8px;background:#fff;padding:12px 12px 12px 10px;margin-top:14px}
.why3 > svg{font-size:24px;color:var(--green);margin-top:1px}
.why3 b{display:block;font-size:19px;line-height:1.3;color:#151515}
.why3 p{margin:2px 0 0;font-size:18px;line-height:1.45;color:#333}

/* sticky: Primal's all-caps offer line */
.sticky a{text-transform:uppercase;letter-spacing:.01em}

/* UGC carousel (replaces the 2x2 testimonial grid): 9:16 phone-video cards, swipe + endless auto-advance */
.ugc-sw{text-align:center;font-size:18px;color:#5a5a5a;margin:-6px 0 14px}
.ugcr{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:11px;padding:0 15px 6px;margin:0 -15px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ugcr::-webkit-scrollbar{display:none}
.ugcv{flex:0 0 66%;max-width:270px;scroll-snap-align:start;position:relative;border-radius:14px;overflow:hidden;aspect-ratio:9/16;background:#1d3327;box-shadow:0 2px 10px rgba(0,0,0,.15);cursor:pointer}
.ugcv img,.ugcv video{width:100%;height:100%;object-fit:cover;display:block}
.ugcv .tag{position:absolute;top:10px;left:10px;background:rgba(255,255,255,.93);color:#1d3327;font-size:14px;font-weight:700;border-radius:100px;padding:4px 11px}
.ugcv .play{display:none;position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.92);color:#1d3327;align-items:center;justify-content:center}
.ugcv .play svg{width:28px;height:28px;margin-left:4px}
.ugcv[data-video] .play{display:flex}
.ugcv.playing .play,.ugcv.playing .ov,.ugcv.playing .tag{display:none}
.ugcv .ov{position:absolute;left:0;right:0;bottom:0;padding:64px 14px 14px;background:linear-gradient(transparent,rgba(0,0,0,.85));color:#fff}
.ugcv .ov .st{display:block;color:#d9a441;font-size:16px;letter-spacing:2px}
.ugcv .ov b{display:block;font-size:19px;line-height:1.3;font-weight:700;margin:5px 0 8px}
.ugcv .ov span:last-child{font-size:15px;color:#e8efe9}
.ugc-disc{font-size:15px;color:#666;text-align:center;margin:12px 0 0}
@media (min-width:900px){.ugcr{margin:0;padding:0 0 6px;scroll-padding-inline:0}.ugcv{flex:0 0 250px}}
/* UGC position dots (one per real video, built by dr.js) */
.ugc-dots{display:flex;justify-content:center;margin:6px 0 0}
.ugc-dots button{border:0;background:none;padding:18px 6px;cursor:pointer;line-height:0}
.ugc-dots button::before{content:"";display:block;width:8px;height:8px;border-radius:50%;background:#cfc8bc;transition:background .2s}
.ugc-dots button.on::before{background:var(--forest)}


/* Review wall (Daylia / Forgeway pattern) */
.rw2{padding:36px 15px 30px;background:var(--cream)}
.rw2 h2.h{margin-bottom:14px}
.rsum{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;background:#fff;border-radius:16px;padding:16px;margin:0 0 16px;border:1px solid #e6e6e6}
.rsum .big{text-align:center}
.rsum .big b{display:block;font-size:48px;font-weight:800;color:var(--forest);line-height:1}
.rsum .big .stars{font-size:16px;color:var(--gold)}
.rsum .big small{display:block;font-size:15px;color:#5a5a5a;margin-top:2px}
.rsum .bars div{display:flex;align-items:center;gap:8px;font-size:15px;color:#5a5a5a;margin:3px 0}
.rsum .bars i{flex:1;height:7px;background:#e0dcd3;border-radius:4px;overflow:hidden;display:block}
.rsum .bars i b{display:block;height:100%;background:var(--gold);border-radius:4px}
.phstrip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 0 14px}
.phstrip::-webkit-scrollbar{display:none}
.phstrip img{flex:0 0 84px;height:84px;border-radius:12px;object-fit:cover}
.rchips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 0 14px;padding-bottom:2px}
.rchips::-webkit-scrollbar{display:none}
.rchips button{flex:0 0 auto;border:1.5px solid var(--forest);background:#fff;color:var(--forest);font-weight:700;font-size:15px;border-radius:100px;padding:8px 14px;font-family:inherit;cursor:pointer;min-height:40px}
.rchips button.on{background:var(--forest);color:#fff}
.rlist2{display:grid;gap:12px}
.rv2{border:1px solid #e6e6e6;border-radius:16px;padding:14px;background:#fff}
.rv2 .hd{display:flex;gap:10px;align-items:center;margin-bottom:8px;position:static;z-index:auto;box-shadow:none} /* .hd is also the sticky site header in primal.css; undo that here so reviewer names don't pin to the top on scroll */
.rv2 .av{width:40px;height:40px;border-radius:50%;background:#e3ecde;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--forest);font-size:16px;flex:0 0 40px}
.rv2 .who{font-weight:800;font-size:16px;color:#1e1e1e;line-height:1.2}
.rv2 .who small{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:3px 8px 3px 4px;border:1px solid #cfe3d3;border-radius:100px;background:#eef6ef;font-weight:700;font-size:10px;line-height:1;color:#2f7a3d;white-space:nowrap;vertical-align:2px}
.rv2 .who small i{display:inline-flex;align-items:center;justify-content:center;width:12px;height:12px;border-radius:50%;background:#2f7a3d;color:#fff;font-style:normal;font-size:8px;font-weight:800;line-height:1}
.rv2 .stars{display:block;font-size:15px;color:var(--gold);letter-spacing:1px;border-top:1px solid #ececec;margin:10px -14px 0;padding:10px 14px 0}
.rv2 h4{font-size:18px;margin:4px 0 4px;color:#1e1e1e;font-family:var(--jost);font-weight:700}
.rv2 p{font-size:18px;line-height:1.5;margin:0;color:#2b2b2b;white-space:pre-line}
.rv2 .ph{width:96px;height:96px;object-fit:cover;border-radius:10px;margin-top:10px;display:block}
.rv2 .tg2{display:inline-block;margin:10px 0 0;font-size:13px;font-weight:700;color:var(--forest);background:#e3ecde;border-radius:6px;padding:4px 9px}
.rmore{display:block;width:100%;margin:14px 0 0;border:2px solid var(--forest);background:#fff;color:var(--forest);font-weight:800;font-size:17px;border-radius:100px;padding:14px;font-family:inherit;cursor:pointer}
.rw2 .btn-line{margin-top:10px}
.rw2 .disc{font-size:15px;color:#666;text-align:center;margin:12px 0 0}
@media (min-width:900px){.rw2 .wrap{max-width:1100px}.rlist2{grid-template-columns:1fr 1fr}}

/* ===== Mobile digestibility pass (Jason 2026-10-07) ===== */

/* 5. Why Trust panel: 2x2 badge tiles on mobile (icon left, label right), 4 across on desktop */
.tb4{grid-template-columns:1fr 1fr;gap:8px}
.tb4 div{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 10px;border-radius:12px;font-family:var(--jost);font-weight:600;font-size:15px;line-height:1.2;letter-spacing:.04em;text-transform:uppercase}
.tb4 svg{display:block;margin:0;font-size:28px;flex:none}
@media (min-width:900px){.tb4{grid-template-columns:repeat(4,1fr)}}
/* >=960 the panel is half the row (~570px): icon above a centered label so no word wraps to 3 lines */
@media (min-width:960px) and (max-width:1099px){.tb4{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.tb4{grid-template-columns:repeat(4,minmax(0,1fr))}.tb4 div{flex-direction:column;justify-content:center;text-align:center;gap:6px;padding:10px 6px}.tb4 svg{font-size:30px}}

/* 6. sticky bar: smaller guarantee line, tighter bar (button size unchanged) */
.sticky{padding:5px 16px calc(5px + env(safe-area-inset-bottom))}
.sticky .sk-sub{margin-top:3px;font-size:13px;font-weight:600;letter-spacing:.04em;line-height:1.1}
.sticky .sk-sub svg{font-size:14px}
@media (min-width:960px){.sticky{padding:8px 24px}}

/* Problem -> Asia -> Solution: one story (12px cards, same spacing, white / cream / white) */
.sol{background:#fff}
.sec .cbody{margin-bottom:16px}
/* Problem: pain rows with an icon */
.pains{grid-template-columns:1fr;gap:10px;margin-top:16px}
.pain{justify-content:flex-start;text-align:left;gap:12px;padding:12px 14px;border-radius:12px;font-size:18px;line-height:1.3}
.pain svg{font-size:28px;flex:none;color:var(--red)}
.pain span{display:block}
@media (min-width:900px){.pains{grid-template-columns:repeat(3,1fr);gap:12px}.pain{align-items:flex-start;padding:14px}}

/* Asia: three-step strip. Mobile: image left, label + line right, chevron between. Desktop: 3 across. */
.asia .hsub{margin:-6px 0 18px}
.steps3{display:grid;gap:4px}
.st3{display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:center;background:#fff;border-radius:12px;padding:10px;box-shadow:0 2px 10px rgba(0,0,0,.07)}
.st3 img{width:92px;height:92px;aspect-ratio:1;object-fit:cover;border-radius:10px}
.st3 b{display:block;font-family:var(--jost);font-weight:700;font-size:19px;line-height:1.2;color:var(--forest);margin-bottom:3px}
.st3 p{margin:0;font-size:18px;line-height:1.4;color:#222}
.st3-arw{display:flex;justify-content:center;align-items:center;color:var(--kick-g);font-size:22px;line-height:1;height:22px}
.st3-arw svg{transform:rotate(90deg)}
@media (min-width:900px){
  .steps3{grid-template-columns:1fr 28px 1fr 28px 1fr;gap:0;align-items:stretch}
  .st3{grid-template-columns:1fr;align-content:start;padding:12px;gap:10px}
  .st3 img{width:100%;height:auto}
  .st3-arw{height:auto;align-self:center}
  .st3-arw svg{transform:none}
}

/* Solution: three numbered steps */
.steps{display:grid;gap:12px;margin:0 0 4px;text-align:left}
.stp{display:grid;grid-template-columns:44px 1fr;gap:8px 12px;align-items:center;background:var(--cream);border-radius:12px;padding:12px 14px 14px 12px}
.stp > div{display:contents}
.stp b{grid-column:2}
.stp p{grid-column:1/-1}
.stp .num{width:44px;height:44px;border-radius:50%;background:var(--gold);color:var(--forest);font-family:var(--jost);font-weight:700;font-size:22px;display:flex;align-items:center;justify-content:center;line-height:1}
.stp b{display:block;font-family:var(--jost);font-weight:700;font-size:19px;line-height:1.25;color:var(--forest);margin:0}
.stp p{margin:0;font-size:18px;line-height:1.4;color:#222}
.sol .chips{margin-top:18px}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,1fr);gap:16px}.stp{grid-template-columns:1fr;gap:8px;padding:18px;align-content:start}.stp b,.stp p{grid-column:auto}.stp b{margin-top:4px}}

/* Science: four point cards, 2x2 on mobile, 4 across on desktop */
.sci4{display:grid;grid-template-columns:1fr;gap:12px;max-width:560px;margin:0 auto}
.scard{display:grid;grid-template-columns:116px 1fr;gap:14px;align-items:center;background:var(--cream);color:#151515;border-radius:14px;padding:12px;box-shadow:0 4px 14px rgba(0,0,0,.18);text-align:left}
.scard img{width:116px;height:116px;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block}
.scard h3{font-family:var(--jost);font-weight:700;font-size:19px;line-height:1.2;color:var(--forest);margin:0 0 4px}
.scard p{margin:0;font-size:18px;line-height:1.35}
.scard > div{min-width:0}
@media (min-width:900px){.sci4{grid-template-columns:repeat(3,1fr);gap:16px;max-width:1100px;margin:0 auto}.scard{grid-template-columns:1fr;text-align:center;padding:14px}.scard img{width:100%;height:auto;margin:0 auto 10px}}

/* 90-day emblem (symbol #g-emblem): embossed look = drop shadow + the faint inner rings in the symbol */
svg.emblem{filter:drop-shadow(0 3px 5px rgba(0,0,0,.22))}
.gblock .gemb{display:block;width:150px;height:150px;margin:0 auto 14px}
@media (min-width:960px){.gblock .gemb{margin:0 0 14px}}
/* 3-bag product shot: full 4:3 render, never cropped (Jason 2026-10-08) */
/* Solution photo = the woman holding one capsule, same crop she had in the 90-day block (Jason 2026-10-08) */
.prodshot{width:100%;max-width:420px;margin:0 auto;aspect-ratio:338/282;overflow:hidden;border-radius:12px}
.prodshot img{width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block}

/* Shopify-style footer (Jason 2026-10-08: fill the empty space, add policies) */
footer{padding:28px 20px 120px}
.foot-brand{margin-bottom:6px}
.foot-tag{font-size:15.5px;line-height:1.45;color:#dfe7e1;margin:10px 0 6px;max-width:420px}
.foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
footer h3{font-size:17px;letter-spacing:.02em;margin:0 0 4px}
footer .fl{margin:0}
footer .fl a,footer .fl button{font-size:15.5px;padding:8px 0;line-height:1.35;color:#eef3ef}
footer p{font-size:15.5px;line-height:1.45;margin:0 0 6px;color:#eef3ef}
footer p a[data-email]{color:#fff;padding:8px 0;margin:-8px 0}
footer hr{margin:16px 0}
.foot-news h3{margin-bottom:2px}
.signup{margin-top:10px}
.signup input,.signup button{min-height:46px;font-size:17px}
.legal{font-size:13.5px;line-height:1.45;color:#c9d3cc}
.copy{font-size:13.5px;color:#c9d3cc;margin-top:0}
.copy img{display:block;height:22px;margin:0 auto 12px}
.copy-links{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 18px;margin:0 0 10px}
.copy-links a{color:#eef3ef;text-decoration:none;padding:6px 0}
@media (min-width:768px){
  footer{padding:50px 24px 140px}
  .foot-in{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr 1fr;gap:0 32px;align-items:start}
  .foot-brand{grid-column:1;padding-right:12px}
  .foot-cols{display:contents}
  .foot-in>hr:nth-of-type(1){display:none}
  .foot-in>hr,.legal,.copy{grid-column:1 / -1}
  .foot-news{grid-column:1 / -1;max-width:520px}
  footer h3{font-size:18px}
}
}
/* timeline photo: 4:3 render, she looks into the camera (Jason 2026-10-08) */
.tl-img{aspect-ratio:4/3;overflow:hidden;border-radius:12px}
.tl-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
@media (min-width:768px){ .exp .tl-img{aspect-ratio:4/3} }

/* hero slide: award laurel row under the photo (Jason 2026-10-08, replaces the "Just One a Day" ribbon) */
.s1{grid-template-rows:minmax(0,1fr) calc(46 * var(--u))}
.s1 .ph{min-height:0}
.s1 .tiles{min-height:0}
.s1 .tile{font-size:calc(14.5 * var(--u));padding:calc(3 * var(--u));line-height:1.15}
.s1 .tile svg{font-size:calc(25 * var(--u));margin-bottom:calc(4 * var(--u))}
.awards{grid-column:1 / -1;display:grid;grid-template-columns:auto auto auto;justify-content:space-between;align-items:center;background:var(--forest);border-radius:calc(6 * var(--u));padding:calc(4 * var(--u)) calc(8 * var(--u))}
.laurel{display:flex;align-items:center;justify-content:center;gap:calc(2 * var(--u));color:#fff;min-width:0}
.laurel svg{width:calc(9 * var(--u));height:calc(22 * var(--u));color:var(--gold);flex:none;font-size:inherit}
.laurel svg.r{transform:scaleX(-1)}
.laurel span{display:block;text-align:center;min-width:0}
.laurel b{display:block;font-family:var(--jost);font-weight:700;font-size:calc(9.6 * var(--u));line-height:1.05;letter-spacing:0;white-space:nowrap}
.laurel small{display:block;font-size:calc(7 * var(--u));line-height:1.15;letter-spacing:.04em;text-transform:uppercase;color:#f1e4c4;margin-top:calc(2 * var(--u));white-space:nowrap}
.ribbon{display:none}

/* no sideways drift on phones: nothing may be wider than the screen (Jason 2026-10-08) */
html,body{overflow-x:clip}
.foot-cols>div{min-width:0}
.foot-cols .fl a,.foot-cols .fl button{width:auto;max-width:100%;white-space:normal}
/* bundle bars: the Save pill always sits on its own line under the title, on every bar (Jason 2026-10-09) */
.bar .b1{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.bar .bt{display:block}
/* section rhythm: Asia is a cream band between the white Problem and Solution sections (Jason 2026-10-09) */
.sec.asia{background:var(--cream2);padding:36px 15px 40px}
.sec.sol{padding-top:44px}