/* ==========================================================================
   Welavie v7 — product pages (ProstaVive, VisiFlora, Java Burn, ProDentim)
   Loaded AFTER main-v19.css, only by the four v7 pages. Home and Yu Sleep
   never load this file, so nothing here can move them.
   Every rule is scoped to body.x-page or to an x- prefixed component.
   ========================================================================== */

/* ---------- shared: numbered section header (ProstaVive "lab report") ---- */
.x-hd{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,1.6vw,24px);
  align-items:start;margin-bottom:clamp(18px,2.4vh,30px);max-width:880px}
.x-hd .x-idx{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,3.4vw,3.1rem);line-height:.9;
  letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--accent) 80%,transparent);
  padding-right:clamp(12px,1.4vw,20px);border-right:1px solid color-mix(in srgb,var(--accent) 38%,transparent);
  min-width:2.6ch;padding-top:.18rem}
.x-hd h2{max-width:22ch;margin:0}
.x-hd .eyebrow{margin-bottom:.45rem}
.x-hd .lead{margin-top:.7rem;max-width:62ch}
.x-hd--in{margin-bottom:clamp(14px,1.8vh,22px)}
.x-hd--wide{max-width:none}
.x-hd--wide h2{max-width:none}
.x-hd--wide .lead{max-width:84ch}
.band--dark .x-hd .x-idx{-webkit-text-stroke-color:color-mix(in srgb,var(--accent) 85%,transparent)}
body.x-page .band--white .eyebrow,body.x-page .band--cream .eyebrow,body.x-page .band--soft .eyebrow{color:#A2570A}
@media (min-width:901px) and (min-height:501px){
  body.x-page .sec .x-hd h2{font-size:clamp(1.62rem,2.35vw,2.3rem);line-height:1.16}
}
@media (min-width:901px) and (max-height:820px) and (min-height:501px){
  body.x-page .sec .x-hd h2{font-size:clamp(1.45rem,2vw,1.8rem)}
  body.x-page .sec .x-hd .lead{font-size:.92rem;line-height:1.5}
  .x-hd .x-idx{font-size:2.1rem}
}
@media (max-width:760px){
  .x-hd{grid-template-columns:1fr;gap:6px}
  .x-hd .x-idx{border-right:0;padding-right:0;font-size:2rem;min-width:0}
}

/* ---------- shared: images never escape, text never clips ---------------- */
body.x-page img{max-width:100%}
body.x-page figure{margin:0}

/* ==========================================================================
   PROSTAVIVE
   ========================================================================== */

/* --- hero: the panel sits LEFT, copy RIGHT (Yu Sleep is the reverse) ---- */
@media (min-width:901px) and (min-height:501px){
  body.t-prostavive .x-pv-hero .hero-grid{grid-template-columns:.96fr 1.04fr}
  body.t-prostavive .x-pv-hero .hero-media{order:0}
  body.t-prostavive .x-pv-hero .hero-copy{order:1}
}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){
  body.t-prostavive .x-pv-hero .hero-copy{order:1}
  body.t-prostavive .x-pv-hero .hero-media{order:2}
}
body.t-prostavive .x-pv-hero .hero-model>img.model{object-position:44% 30%}
body.t-prostavive .x-pv-hero .hero-model .hm-prod{width:34%;right:4%;bottom:4%}
body.t-prostavive .x-pv-hero .hm-cap b,body.t-prostavive .x-pv-hero .hm-cap span{max-width:min(58%,30ch)}
.x-pv-ticks{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.45rem 1.15rem;font-size:.9rem;line-height:1.4;color:rgba(233,240,242,.9)}
.x-pv-ticks li{display:inline-flex;align-items:center;gap:.5em}
.x-pv-ticks .dot{width:1.3em;height:1.3em;border-radius:50%;display:grid;place-items:center;font-size:.7em;font-weight:900;
  background:color-mix(in srgb,var(--accent-2) 30%,transparent);color:#fff;flex:none}
.x-pv-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:1rem;
  border:1px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(255,255,255,.05)}
.x-pv-stats>div{padding:.7rem .8rem;display:flex;flex-direction:column;gap:.1rem;border-left:1px solid rgba(255,255,255,.12)}
.x-pv-stats>div:first-child{border-left:0}
.x-pv-stats b{font-family:var(--display);font-weight:800;font-size:clamp(1.35rem,1.9vw,1.75rem);line-height:1.05;color:#fff;letter-spacing:-.03em}
.x-pv-stats span{font-size:.72rem;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:rgba(233,240,242,.66);font-weight:700}
body.t-prostavive .x-pv-hero .hero-copy .hero-actions{margin-top:1.05rem}
@media (min-width:901px) and (max-height:820px) and (min-height:501px){
  .x-pv-stats{margin-top:.7rem}
  .x-pv-stats>div{padding:.5rem .7rem}
  .x-pv-stats b{font-size:1.3rem}
  .x-pv-ticks{font-size:.84rem}
}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){
  .x-pv-ticks{justify-content:center}
  body.t-prostavive .x-pv-hero .hero-model{max-width:460px}
}
@media (max-width:520px){
  .x-pv-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .x-pv-stats>div:nth-child(3){border-left:0}
  .x-pv-stats>div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}
}

/* --- 01 the pattern: tick-list self check -------------------------------- */
.x-signs{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(18px,2.2vw,32px);align-items:stretch}
.x-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.x-chk{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:26px 40px minmax(0,1fr);
  grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-items:center;
  padding:16px 18px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);
  transition:border-color .2s,box-shadow .2s,transform .2s;min-height:88px}
.x-chk:hover{border-color:color-mix(in srgb,var(--b400) 45%,var(--line));box-shadow:var(--sh-2)}
.x-chk:focus-visible{outline:3px solid color-mix(in srgb,var(--b400) 55%,transparent);outline-offset:2px}
.x-chk .bx{grid-row:1/3;width:22px;height:22px;border-radius:7px;border:2px solid #B9C4BF;display:grid;place-items:center;transition:.2s;background:#fff}
.x-chk .ic{grid-row:1/3;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:1.1rem;
  background:color-mix(in srgb,var(--accent) 16%,#fff)}
.x-chk b{font-family:var(--display);font-size:.98rem;letter-spacing:-.015em;line-height:1.3;color:var(--ink);align-self:end}
.x-chk .d{font-size:.84rem;line-height:1.45;color:var(--muted);align-self:start}
.x-chk[aria-pressed="true"]{border-color:var(--b600);background:color-mix(in srgb,var(--b400) 7%,#fff)}
.x-chk[aria-pressed="true"] .bx{background:var(--b600);border-color:var(--b600)}
.x-chk[aria-pressed="true"] .bx::after{content:"";width:10px;height:6px;border:2.5px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.x-meter{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:clamp(20px,2vw,28px);color:#EAF4F0;
  background:radial-gradient(420px 260px at 88% 0%,color-mix(in srgb,var(--b400) 36%,transparent),transparent 70%),linear-gradient(155deg,var(--b700),var(--b900));
  box-shadow:var(--sh-2);display:flex;flex-direction:column;gap:.7rem}
.x-meter-top{display:flex;align-items:center;gap:14px}
.x-meter-n{display:flex;align-items:baseline;gap:.3rem;flex:none}
.x-meter-n b{font-family:var(--display);font-size:2.6rem;line-height:1;color:var(--accent);letter-spacing:-.04em}
.x-meter-n span{font-size:.9rem;color:rgba(234,244,240,.7);font-weight:700}
.x-meter-msg{font-size:.9rem;line-height:1.45;color:#fff;font-weight:600;margin:0}
.x-meter-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.x-meter-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--b400),var(--accent));transition:width .45s cubic-bezier(.22,.9,.3,1)}
.x-meter h4{color:#fff;margin-top:.4rem}
.x-meter p{font-size:.86rem;line-height:1.6;color:rgba(234,244,240,.76);margin:0}
.x-meter .btn{align-self:flex-start;margin-top:auto}
@media (max-width:1024px){.x-signs{grid-template-columns:1fr}}
@media (max-width:640px){.x-checks{grid-template-columns:1fr}.x-chk{min-height:0}}

/* --- 02 the science: three-step pathway --------------------------------- */
.x-path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);position:relative;counter-reset:none}
.x-path::before{content:"";position:absolute;left:12%;right:12%;top:66px;height:2px;z-index:0;
  background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--accent) 80%,transparent) 0 10px,transparent 10px 20px);
  animation:xFlow 1.4s linear infinite}
@keyframes xFlow{to{background-position:20px 0}}
.x-path li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.4rem;
  padding:0 clamp(6px,1vw,14px)}
.x-path-fig{width:132px;height:132px;border-radius:50%;overflow:hidden;flex:none;margin-bottom:.5rem;
  border:3px solid color-mix(in srgb,var(--accent) 70%,transparent);box-shadow:0 18px 40px -18px rgba(0,0,0,.7),0 0 0 8px rgba(255,255,255,.05);background:#fff}
.x-path-fig img{width:100%;height:100%;object-fit:cover;display:block}
.x-path-fig--mol{background:radial-gradient(circle at 50% 40%,#fff,#E8F1EE)}
.x-path-fig--mol img{object-fit:contain;padding:14px}
.x-path-fig--tub img{object-fit:cover;object-position:40% 50%}
.x-path .k{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--accent)}
.x-path h3{color:#fff;font-size:1.15rem}
.x-path p{font-size:.9rem;line-height:1.6;color:rgba(233,240,242,.74);max-width:34ch}
.x-study{margin-top:clamp(20px,3vh,34px);display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(14px,1.8vw,26px);align-items:center;
  padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,28px);border-radius:var(--r-lg);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06)}
.x-study-tag{font-size:.78rem;font-weight:800;color:var(--accent-ink);background:var(--accent);padding:.5em .9em;border-radius:999px;white-space:normal;text-align:center}
.x-study p{margin:0;font-size:.92rem;line-height:1.6;color:rgba(233,240,242,.86)}
.x-study .fine{max-width:22ch;color:rgba(233,240,242,.5)}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){
  .x-path{grid-template-columns:1fr;gap:26px}
  .x-path::before{left:65px;right:auto;top:0;bottom:0;width:2px;height:auto;
    background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--accent) 80%,transparent) 0 10px,transparent 10px 20px)}
  .x-path li{display:grid;grid-template-columns:132px minmax(0,1fr);text-align:left;align-items:center;column-gap:18px;row-gap:.2rem;padding:0}
  .x-path li>.x-path-fig{grid-row:1/4;margin:0}
  .x-study{grid-template-columns:1fr;text-align:left}
  .x-study .fine{max-width:none}
}
@media (max-width:480px){
  .x-path li{grid-template-columns:96px minmax(0,1fr)}
  .x-path-fig{width:96px;height:96px}
  .x-path::before{left:47px}
}

/* --- 03 ingredients: hexagon cards -------------------------------------- */
.x-hexgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 16px}
.x-hex{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  background:linear-gradient(180deg,var(--tint) 0,#fff 58%);border:1px solid var(--line);border-radius:22px;padding:14px 16px 16px}
.x-hex:nth-child(even){background:linear-gradient(180deg,var(--w1) 0,#fff 58%)}
.x-hex .hx{width:86px;height:96px;flex:none;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:linear-gradient(160deg,var(--b400),var(--b700));display:grid;place-items:center;margin-bottom:.55rem}
.x-hex .hx img{width:82px;height:92px;object-fit:cover;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.x-hex-b{display:flex;flex-direction:column;align-items:center;gap:.25rem;width:100%}
.x-hex-t{display:flex;align-items:center;justify-content:center;gap:.4rem;flex-wrap:wrap}
.x-hex .ing-kind{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;padding:.32em .7em;border-radius:99px;
  background:color-mix(in srgb,var(--accent) 18%,#fff);color:#8A4B06}
.x-hex .amt{font-size:.68rem;font-weight:800;padding:.32em .6em;border-radius:99px;background:var(--b700);color:#fff;letter-spacing:.02em}
.x-hex h3{font-size:1.02rem;line-height:1.3;margin:.1rem 0 0}
.x-hex p{font-size:.8rem;line-height:1.5;color:var(--ink-2);margin:0}
.x-essentials{display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;margin-top:16px;
  padding:12px;border-radius:22px;background:linear-gradient(90deg,color-mix(in srgb,var(--b400) 10%,#fff),#fff);border:1px dashed color-mix(in srgb,var(--b400) 50%,var(--line))}
.x-es-lbl{align-self:center;font-family:var(--display);font-weight:800;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--b700);padding:0 8px}
.x-es{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px 14px 8px 8px}
.x-es img{width:52px;height:52px;object-fit:contain;flex:none}
.x-es div{display:flex;flex-direction:column;min-width:0}
.x-es b{font-family:var(--display);font-size:.94rem;line-height:1.3}
.x-es b em{font-style:normal;font-size:.72rem;font-weight:800;color:#fff;background:var(--b700);padding:.12em .5em;border-radius:99px;margin-left:.3em;vertical-align:1px}
.x-es span{font-size:.8rem;line-height:1.4;color:var(--muted)}
@media (min-width:901px) and (min-height:501px){
  .x-hexgrid{gap:14px}
  .x-hex{display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:14px;align-items:center;text-align:left;padding:14px 16px 16px}
  .x-hex .hx{grid-column:1;grid-row:1/3;margin:0;width:72px;height:80px}
  .x-hex .hx img{width:68px;height:76px}
  .x-hex-b{display:contents}
  .x-hex-t{grid-column:2;grid-row:1;justify-content:flex-start;align-self:end}
  .x-hex h3{grid-column:2;grid-row:2;align-self:start;margin:.3rem 0 0}
  .x-hex p{grid-column:1/-1;grid-row:3;align-self:start;margin-top:.7rem}
}
@media (min-width:901px) and (max-height:820px) and (min-height:501px){
  .x-hexgrid{gap:12px}
  .x-hex{padding:10px 12px 12px}
  .x-hex{grid-template-columns:60px minmax(0,1fr)}
  .x-hex .hx{width:60px;height:67px;margin:0}
  .x-hex .hx img{width:56px;height:63px}
  .x-hex p{margin-top:.5rem}
  .x-hex p{font-size:.76rem;line-height:1.42}
  .x-essentials{margin-top:12px;padding:8px}
  .x-es img{width:42px;height:42px}
}
@media (max-width:1100px){.x-hexgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.x-essentials{grid-template-columns:1fr 1fr}.x-es-lbl{grid-column:1/-1;padding:4px 6px 0}}
@media (max-width:560px){.x-essentials{grid-template-columns:1fr}}
@media (max-width:560px){
  .x-hexgrid{grid-template-columns:1fr;gap:10px}
  .x-hex{flex-direction:row;align-items:flex-start;text-align:left;gap:14px;padding:12px 14px}
  .x-hex .hx{margin:0;width:64px;height:72px}
  .x-hex .hx img{width:60px;height:68px}
  .x-hex-b{align-items:flex-start}
  .x-hex-t{justify-content:flex-start}
}

/* --- 04 the routine ------------------------------------------------------- */
.x-ritual{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(22px,3vw,52px);align-items:stretch}
.x-ritual-copy{display:flex;flex-direction:column;justify-content:center}
.x-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;position:relative}
.x-steps li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:start;padding:14px 0;position:relative}
.x-steps li+li{border-top:1px solid rgba(255,255,255,.1)}
.x-steps .n{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.2rem;
  color:var(--accent-ink);background:var(--accent);box-shadow:0 10px 24px -12px color-mix(in srgb,var(--accent) 90%,transparent)}
.x-steps b{display:block;font-family:var(--display);font-size:1.12rem;color:#fff;margin-bottom:.15rem}
.x-steps span:not(.n){font-size:.92rem;line-height:1.55;color:rgba(233,240,242,.76)}
.x-specs{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.1rem}
.x-specs span{font-size:.8rem;font-weight:700;padding:.55em 1em;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff}
.x-ritual-fig{position:relative;border-radius:var(--r-xl);overflow:hidden;min-height:0;box-shadow:var(--sh-3);border:1px solid rgba(255,255,255,.12)}
.x-ritual-fig img{width:100%;height:100%;object-fit:cover;object-position:60% 30%;display:block}
.x-ritual-fig figcaption{position:absolute;left:16px;bottom:16px;right:16px;display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:16px;background:rgba(3,26,20,.78);color:#fff;font-size:.88rem}
.x-ritual-fig figcaption b{font-family:var(--display);color:var(--accent);flex:none}
@media (min-width:901px) and (min-height:501px){.x-ritual-fig{height:min(64vh,560px)}}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){.x-ritual{grid-template-columns:1fr}.x-ritual-fig{height:420px}}
@media (max-width:480px){.x-ritual-fig{height:340px}}

/* --- 05 the label ----------------------------------------------------------- */
.x-label{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(22px,3vw,50px);align-items:center}
.x-label-sheet{position:relative;display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;box-shadow:var(--sh-2)}
.x-label-sheet img{width:100%;height:auto;display:block;border-radius:10px}
.x-zoom{position:absolute;right:18px;bottom:18px;font-size:.76rem;font-weight:800;padding:.55em 1em;border-radius:99px;background:var(--b700);color:#fff;box-shadow:var(--sh-1)}
.x-label-copy .lead{margin:0 0 .8rem}
.x-ltab{width:100%;border-collapse:collapse;font-size:.9rem}
.x-ltab th,.x-ltab td{padding:.62rem .5rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.x-ltab thead th{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800;border-bottom:2px solid var(--ink)}
.x-ltab tbody th{font-weight:700;color:var(--ink)}
.x-ltab tbody th small{display:block;font-weight:500;color:var(--muted);font-size:.78rem;line-height:1.4;margin-top:.1rem}
.x-ltab td{white-space:nowrap;font-weight:700;color:var(--ink-2)}
.x-ltab td:last-child{text-align:right}
.x-label-meta{display:flex;flex-direction:column;gap:.2rem;margin:.9rem 0 .5rem;font-size:.84rem;color:var(--ink-2)}
.x-label-meta span::before{content:"— ";color:var(--b600)}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){.x-label{grid-template-columns:1fr}}

/* --- 06 comparison table --------------------------------------------------- */
.x-cmp-wrap{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-2);background:#fff}
.x-cmp{width:100%;border-collapse:collapse;font-size:.94rem;table-layout:auto}
.x-cmp th,.x-cmp td{padding:.85rem 1.1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.x-cmp thead th{font-family:var(--display);font-size:.86rem;letter-spacing:-.01em;background:#F7F8F6;color:var(--ink)}
.x-cmp thead th.own{background:var(--b700);color:#fff;font-size:1rem}
.x-cmp thead th.own img{display:inline-block;width:34px;height:44px;object-fit:contain;vertical-align:middle;margin-right:.55rem}
.x-cmp tbody th{font-weight:700;color:var(--ink);width:24%}
.x-cmp td.own{background:color-mix(in srgb,var(--b400) 9%,#fff);color:var(--ink);font-weight:600;width:40%}
.x-cmp td.own .ok{display:inline-grid;place-items:center;width:1.35em;height:1.35em;border-radius:50%;background:var(--b600);color:#fff;font-size:.72em;font-weight:900;margin-right:.6em;vertical-align:1px}
.x-cmp td:last-child{color:var(--muted)}
.x-cmp tbody tr:last-child th,.x-cmp tbody tr:last-child td{border-bottom:0}
@media (max-width:700px){
  .x-cmp thead{display:none}
  .x-cmp,.x-cmp tbody,.x-cmp tr,.x-cmp th,.x-cmp td{display:block;width:auto!important}
  .x-cmp tr{padding:.8rem 1rem;border-bottom:1px solid var(--line)}
  .x-cmp th,.x-cmp td{border:0;padding:.2rem 0}
  .x-cmp td.own{background:none}
  .x-cmp td:last-child::before{content:"Typical capsule formulas: ";font-weight:700}
}

/* --- 07 the payoff ---------------------------------------------------------- */
.x-life{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(22px,3vw,54px);align-items:stretch}
.x-life-fig{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3);border:1px solid rgba(255,255,255,.12)}
.x-life-fig img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.x-life-fig figcaption{position:absolute;left:14px;right:14px;bottom:14px;padding:11px 14px;border-radius:14px;background:rgba(255,255,255,.93);color:var(--ink);font-size:.84rem;font-weight:600;display:flex;gap:.55rem;align-items:center}
.x-life-copy{display:flex;flex-direction:column;justify-content:center}
.x-life-copy .lead{margin:0 0 1rem}
.x-contrast{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.14)}
.x-contrast li{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);gap:10px;align-items:center;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.1)}
.x-contrast .from{color:rgba(233,240,242,.58);text-decoration:line-through;text-decoration-color:rgba(233,240,242,.35);font-size:.94rem}
.x-contrast .arrow{color:var(--accent);font-size:1.2rem;text-align:center}
.x-contrast .to{color:#fff;font-family:var(--display);font-size:1rem;letter-spacing:-.01em}
.x-contrast-h{padding:.5rem 0!important}
.x-contrast-h span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:rgba(233,240,242,.5)}
.x-contrast-h span:last-child{color:var(--accent)}
.x-life-copy .hero-actions{margin-top:1.2rem}
.x-life-copy .fine{margin-top:.8rem}
@media (min-width:901px) and (min-height:501px){.x-life-fig{height:min(66vh,580px)}}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){.x-life{grid-template-columns:1fr}.x-life-fig{height:420px}}
@media (max-width:480px){.x-contrast li{grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);gap:6px}.x-contrast .from,.x-contrast .to{font-size:.88rem}}

/* --- 08 bonuses: two wide guide cards ------------------------------------ */
.x-bonus2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.x-bn{display:grid;grid-template-columns:170px minmax(0,1fr);gap:clamp(16px,2vw,26px);align-items:center;padding:clamp(16px,1.8vw,22px);
  border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(135deg,var(--w1),#fff 62%);box-shadow:var(--sh-1)}
.x-bn:nth-child(2){background:linear-gradient(135deg,var(--w2),#fff 62%)}
.x-bn .cover{height:230px;display:grid;place-items:center}
.x-bn .cover img{max-height:230px;max-width:170px;width:auto;height:auto;filter:drop-shadow(0 18px 24px rgba(20,24,30,.25))}
.x-bn-k{display:inline-block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:#A2570A;margin-bottom:.35rem}
.x-bn h3{font-size:1.2rem;margin-bottom:.4rem}
.x-bn p{font-size:.9rem;line-height:1.6;color:var(--ink-2);margin-bottom:.7rem}
.x-bn-f{display:inline-block;font-size:.78rem;font-weight:800;color:var(--b700);background:color-mix(in srgb,var(--b400) 14%,#fff);padding:.45em .9em;border-radius:99px}
@media (max-width:1000px){.x-bonus2{grid-template-columns:1fr}}
@media (max-width:520px){.x-bn{grid-template-columns:110px minmax(0,1fr)}.x-bn .cover{height:160px}.x-bn .cover img{max-height:160px;max-width:110px}}

/* --- 09 pricing: three cards, featured centre ---------------------------- */
.x-price3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);align-items:stretch}
.x-pc{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(18px,1.8vw,24px);
  border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.x-pc-badge{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;padding:.4em .9em;border-radius:99px;background:var(--tint);color:var(--b700)}
.x-pc-sup{font-family:var(--display);font-weight:800;font-size:1rem;margin:.55rem 0 .2rem;color:var(--ink)}
.x-pc-pic{height:118px;width:100%;display:grid;place-items:center;margin:.3rem 0}
.x-pc-pic img{max-height:110px;max-width:min(88%,260px);width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 16px 22px rgba(20,24,30,.2))}
.x-pc-amt{display:flex;align-items:flex-start;justify-content:center;gap:.1rem;line-height:1;color:var(--ink)}
.x-pc-amt .cur{font-size:1.2rem;font-weight:800;margin-top:.35rem}
.x-pc-amt b{font-family:var(--display);font-size:3rem;letter-spacing:-.05em}
.x-pc-amt .per{align-self:flex-end;font-size:.86rem;color:var(--muted);margin-bottom:.35rem;font-weight:600}
.x-pc-tot{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem .6rem;font-size:.86rem;color:var(--ink-2);margin:.35rem 0 .7rem;min-height:1.5em;align-items:center}
.x-pc-tot .save{font-size:.74rem;font-weight:800;padding:.3em .7em;border-radius:99px;background:color-mix(in srgb,var(--accent-2) 18%,#fff);color:#17683A}
.x-pc ul{list-style:none;padding:0;margin:0 0 1rem;display:flex;flex-direction:column;gap:.35rem;font-size:.86rem;color:var(--ink-2);width:100%}
.x-pc ul li::before{content:"✓ ";color:var(--b600);font-weight:900}
.x-pc .btn{margin-top:auto;width:100%;padding:.9em 1.2em}
.x-pc.feat{background:radial-gradient(420px 240px at 50% 0%,color-mix(in srgb,var(--b400) 40%,transparent),transparent 70%),linear-gradient(165deg,var(--b700),var(--b900));
  border-color:transparent;color:#fff;box-shadow:var(--sh-3),0 0 0 3px color-mix(in srgb,var(--accent) 55%,transparent)}
.x-pc.feat .x-pc-badge{background:var(--accent);color:var(--accent-ink)}
.x-pc.feat .x-pc-sup,.x-pc.feat .x-pc-amt{color:#fff}
.x-pc.feat .x-pc-amt .per,.x-pc.feat .x-pc-tot,.x-pc.feat ul{color:rgba(234,244,240,.8)}
.x-pc.feat ul li::before{color:var(--accent)}
.x-pc.feat .x-pc-pic img{filter:drop-shadow(0 20px 30px rgba(0,0,0,.45))}
body.t-prostavive #packages .cta-assure{justify-content:center;margin-top:clamp(16px,2vh,24px)}
body.t-prostavive #packages .fine{margin-top:.6rem}
@media (min-width:901px) and (max-height:820px) and (min-height:501px){
  .x-pc{padding:16px 18px}
  .x-pc-pic{height:96px}.x-pc-pic img{max-height:90px}
  .x-pc-amt b{font-size:2.5rem}
  .x-pc ul{gap:.2rem;margin-bottom:.7rem}
}
@media (min-width:901px) and (max-height:760px) and (min-height:501px){
  .x-pc{padding:12px 16px}
  .x-pc-sup{margin:.35rem 0 .1rem}
  .x-pc-pic{height:78px;margin:.15rem 0}.x-pc-pic img{max-height:74px}
  .x-pc-amt b{font-size:2.2rem}
  .x-pc-tot{margin:.2rem 0 .45rem}
  .x-pc ul{gap:.1rem;margin-bottom:.55rem;font-size:.84rem}
  .x-pc .btn{padding:.72em 1.1em}
  body.t-prostavive #packages .x-hd{margin-bottom:12px}
  body.t-prostavive #packages .cta-assure{margin-top:10px}
  body.t-prostavive #packages .fine{margin-top:.35rem}
}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){
  .x-price3{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .x-pc.feat{transform:none;order:-1}
}

/* --- guarantee: the seal ------------------------------------------------------ */
.x-seal-wrap{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,.78fr);gap:clamp(20px,2.8vw,44px);align-items:center;
  padding:clamp(20px,2.4vw,34px);border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2)}
.x-seal{position:relative;width:clamp(170px,15vw,210px);aspect-ratio:1;flex:none}
.x-seal-ring{position:absolute;inset:0;width:100%;height:100%;animation:xSpin 38s linear infinite}
.x-seal-ring text{font-family:var(--display);font-weight:800;font-size:12.2px;letter-spacing:2.1px;fill:var(--b700)}
@keyframes xSpin{to{transform:rotate(360deg)}}
.x-seal-core{position:absolute;inset:18%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--accent) 70%,#fff),var(--accent) 60%,#C77A0A);
  box-shadow:0 18px 40px -16px color-mix(in srgb,var(--accent) 90%,transparent),inset 0 0 0 5px rgba(255,255,255,.35)}
.x-seal-core b{font-family:var(--display);font-size:clamp(2.3rem,3.4vw,3rem);line-height:.95;color:var(--accent-ink);letter-spacing:-.05em}
.x-seal-core span{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;font-weight:800;color:var(--accent-ink)}
.x-seal-copy h2{margin:.2rem 0 .6rem;font-size:clamp(1.5rem,2.2vw,2.1rem);line-height:1.18}
.x-seal-copy p{font-size:.94rem;line-height:1.6;color:var(--ink-2);margin-bottom:.7rem}
.x-refund{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-direction:column;gap:.45rem}
.x-refund li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:.6rem;align-items:start;font-size:.88rem;line-height:1.5;color:var(--ink-2)}
.x-refund li b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.78rem;background:var(--tint);color:var(--b700);border:1px solid color-mix(in srgb,var(--b400) 40%,transparent)}
.x-seal-fig{height:100%;min-height:240px;border-radius:var(--r-lg);overflow:hidden}
.x-seal-fig img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block}
body.t-prostavive #guarantee .howorder{margin-top:clamp(16px,2.2vh,26px)}
@media (min-width:901px) and (max-height:820px) and (min-height:501px){.x-seal{width:150px}.x-seal-fig{min-height:200px}}
@media (min-width:901px) and (max-height:760px) and (min-height:501px){
  .x-seal-wrap{padding:18px 26px}
  .x-seal-copy h2{font-size:1.45rem;margin-bottom:.45rem}
  .x-seal-copy p{font-size:.88rem;margin-bottom:.5rem}
  .x-refund{gap:.3rem;margin-bottom:.8rem}
  .x-refund li{font-size:.84rem}
  body.x-page #guarantee .howorder .step{padding:14px 18px;gap:.35rem}
  body.x-page #guarantee .howorder{margin-top:14px}
}
@media (max-width:1100px){.x-seal-wrap{grid-template-columns:auto minmax(0,1fr)}.x-seal-fig{display:none}}
@media (max-width:640px){.x-seal-wrap{grid-template-columns:1fr;justify-items:center;text-align:left}.x-seal{width:170px}}

/* --- final CTA ------------------------------------------------------------------ */
.x-cta-pv{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(20px,3vw,50px);align-items:center;
  padding:clamp(24px,3.4vw,52px);border-radius:var(--r-xl);position:relative;overflow:hidden;
  background:radial-gradient(640px 360px at 18% 50%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),linear-gradient(135deg,var(--cream),#fff 70%);
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));box-shadow:var(--sh-2)}
.x-cta-pv-pic{display:grid;place-items:center;height:clamp(220px,26vw,320px)}
.x-cta-pv-pic img{max-height:clamp(200px,24vw,300px);max-width:100%;width:auto;height:auto;filter:drop-shadow(0 30px 40px rgba(20,24,30,.28))}
.x-cta-pv-copy h2{margin:.2rem 0 .7rem}
.x-cta-pv-copy p{color:var(--ink-2);margin-bottom:1.2rem;max-width:46ch}
.x-cta-ticks{list-style:none;padding:0;margin:1.1rem 0 0;display:flex;flex-wrap:wrap;gap:.45rem 1.1rem;font-size:.86rem;color:var(--ink-2)}
.x-cta-ticks li::before{content:"✓ ";color:var(--b600);font-weight:900}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){.x-cta-pv{grid-template-columns:1fr;text-align:center}.x-cta-pv-copy p{margin-inline:auto}.x-cta-ticks{justify-content:center}}

/* ==========================================================================
   VISIFLORA — "the lens": circles, rings and a four-colour code
   Defend = amber · Seal = teal · Deliver = rose · Protect = violet
   (the same four colours run from the hero orbit to the ingredient cards)
   ========================================================================== */
body.t-visiflora{--vf-def:#F2A516;--vf-gut:#14C6B4;--vf-perf:#EF5B84;--vf-mac:#7C5CFF;
  --vf-def-ink:#8F4E00;--vf-gut-ink:#0A6F66;--vf-perf-ink:#A3244C;--vf-mac-ink:#4A2CAB}

/* --- split header: title left, lead right, one accent rule ---------------- */
.x-sh{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(14px,3vw,56px);align-items:end;
  margin-bottom:clamp(18px,2.6vh,32px);padding-bottom:clamp(14px,1.8vh,20px);border-bottom:1px solid var(--line);position:relative}
.x-sh::after{content:"";position:absolute;left:0;bottom:-2px;width:72px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--b400))}
.x-sh .eyebrow{margin-bottom:.5rem}
.x-sh h2{margin:0;max-width:21ch}
.x-sh .lead{margin:0;max-width:54ch;justify-self:end}
.band--dark .x-sh{border-bottom-color:rgba(255,255,255,.14)}
.x-sh--stack{grid-template-columns:1fr;border-bottom:0;padding-bottom:16px;margin-bottom:16px}
.x-sh--stack::after{bottom:0}
@media (min-width:901px) and (min-height:501px){body.x-page .sec .x-sh h2{font-size:clamp(1.62rem,2.35vw,2.3rem);line-height:1.16}}
@media (min-width:901px) and (max-height:820px) and (min-height:501px){
  body.x-page .sec .x-sh h2{font-size:clamp(1.45rem,2vw,1.8rem)}
  body.x-page .sec .x-sh .lead{font-size:.92rem;line-height:1.5}
  .x-sh{margin-bottom:16px;padding-bottom:12px}
  .x-sh--stack{margin-bottom:12px}
}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){.x-sh{grid-template-columns:1fr;gap:10px}.x-sh .lead{justify-self:start}}

/* --- hero: the orbit ------------------------------------------------------------ */
@media (min-width:901px) and (min-height:501px){body.t-visiflora .x-vf-hero .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
body.t-visiflora .x-orbit-media{background:none;border:0;border-radius:0;overflow:visible;min-height:0}
body.t-visiflora .x-vf-hero .tick .dot{background:color-mix(in srgb,var(--accent) 30%,transparent)}
.x-orbit{position:relative;container-type:inline-size;margin-inline:auto}
@media (min-width:901px) and (min-height:501px){
  body.t-visiflora .x-orbit-media{display:grid;place-items:center;container-type:size}
  .x-orbit{width:min(100cqw,100cqh);height:min(100cqw,100cqh)}
}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){
  body.t-visiflora .x-orbit-media{display:block;max-height:none}
  .x-orbit{width:min(100%,460px);aspect-ratio:1/1}
}
.x-orbit::before{content:"";position:absolute;inset:9%;border-radius:50%;z-index:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--b400) 55%,transparent) 0,transparent 68%);filter:blur(14px)}
.x-orbit-ring{position:absolute;inset:6%;border-radius:50%;z-index:1;border:1.5px dashed color-mix(in srgb,var(--accent) 62%,transparent);
  animation:xSpin 140s linear infinite}
.x-orbit-ring::after{content:"";position:absolute;inset:-5.4%;border-radius:50%;border:1px solid rgba(255,255,255,.08)}
.x-orbit-photo{position:absolute;inset:16%;z-index:2;border-radius:50%;overflow:hidden;background:#ECECEC;
  box-shadow:0 0 0 4px rgba(255,255,255,.94),0 0 0 13px color-mix(in srgb,var(--b400) 24%,transparent),0 44px 70px -30px rgba(0,0,0,.8)}
.x-orbit-photo img{width:100%;height:100%;object-fit:cover;display:block}
.x-orb{position:absolute;z-index:3;width:11cqw;aspect-ratio:1/1;transform:translate(-50%,-50%);border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px var(--c),0 14px 26px -10px rgba(0,0,0,.7)}
.x-orb img{width:100%;height:100%;border-radius:50%;display:block;border:2px solid #fff;object-fit:cover}
.x-orb b{position:absolute;left:50%;top:100%;transform:translate(-50%,-28%);white-space:nowrap;
  font-family:var(--display);font-weight:800;font-size:.6rem;line-height:1;letter-spacing:.12em;text-transform:uppercase;
  padding:.5em .85em;border-radius:99px;background:var(--c);color:#150A30;box-shadow:0 6px 14px -6px rgba(0,0,0,.6)}
.x-orb--1{left:68.6%;top:10.1%;--c:var(--vf-def)}
.x-orb--2{left:89.9%;top:31.4%;--c:var(--vf-gut)}
.x-orb--3{left:10.1%;top:68.6%;--c:var(--vf-perf)}
.x-orb--4{left:10.1%;top:31.4%;--c:var(--vf-mac)}
.x-orb--4 b{color:#fff}
.x-orbit-badge{position:absolute;top:0;left:0;z-index:5;display:inline-flex;align-items:center;gap:.45em;padding:.5em .9em;border-radius:99px;
  background:rgba(255,255,255,.95);color:#12171C;font-size:.73rem;font-weight:800;line-height:1.2;letter-spacing:.01em;white-space:nowrap;
  box-shadow:0 8px 22px -10px rgba(0,0,0,.6)}
.x-orbit-badge i,.x-orbit-cap i{font-style:normal}
.x-orbit-prod{position:absolute;right:-1%;bottom:-1%;width:27%;z-index:4;filter:drop-shadow(0 22px 28px rgba(0,0,0,.55));
  animation:hmfloat 6.4s ease-in-out infinite}
.x-orbit-prod img{width:100%;height:auto;display:block}
.x-orbit-cap{position:absolute;left:0;bottom:1.5%;z-index:5;display:inline-flex;align-items:center;gap:.5em;padding:.55em 1em;border-radius:99px;
  background:rgba(21,10,48,.8);border:1px solid rgba(255,255,255,.16);color:#fff;font-family:var(--display);font-weight:700;font-size:.8rem;
  line-height:1.2;white-space:nowrap;backdrop-filter:blur(8px);box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){
  .x-orb b{font-size:.56rem;padding:.48em .75em}
  .x-orbit-badge{font-size:.68rem}
  .x-orbit-cap{font-size:.74rem}
}

/* --- 1 the gut-eye axis ------------------------------------------------------- */
.x-axis{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,2.2vw,32px);align-items:stretch}
.x-axis-line{--p:clamp(18px,2vw,26px);list-style:none;margin:0;padding:var(--p) calc(var(--p) + 4px);position:relative;overflow:hidden;
  display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:0;
  border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.x-axis-line::before{content:"";position:absolute;left:calc(var(--p) + 4px + 35px);width:2px;border-radius:2px;
  top:calc(16.667% + var(--p) * .6667);bottom:calc(16.667% + var(--p) * .6667);
  background:linear-gradient(180deg,var(--vf-gut),var(--vf-perf) 50%,var(--vf-mac))}
.x-axis-line::after{content:"";position:absolute;left:calc(var(--p) + 4px + 31px);width:10px;height:10px;border-radius:50%;z-index:0;opacity:0;
  top:calc(16.667% + var(--p) * .6667);background:#fff;border:2.5px solid var(--vf-perf);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--vf-perf) 20%,transparent);animation:xTravel 4s cubic-bezier(.45,0,.55,1) infinite}
@keyframes xTravel{
  0%{top:calc(16.667% + var(--p) * .6667);opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{top:calc(83.333% - var(--p) * .6667 - 10px);opacity:0}}
.x-axis-line li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:18px;align-items:center;position:relative;z-index:1;padding:6px 0}
.x-node{width:72px;height:72px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font-size:1.75rem;line-height:1;background:#fff;
  box-shadow:0 0 0 5px #fff,0 0 0 7px var(--nc,var(--line))}
.x-node img{width:100%;height:100%;object-fit:cover;display:block}
.x-node--ic{background:color-mix(in srgb,var(--nc) 13%,#fff)}
.x-axis-line li:nth-child(1){--nc:var(--vf-gut);--nk:var(--vf-gut-ink)}
.x-axis-line li:nth-child(2){--nc:var(--vf-perf);--nk:var(--vf-perf-ink)}
.x-axis-line li:nth-child(3){--nc:var(--vf-mac);--nk:var(--vf-mac-ink)}
.x-axis-line .k{display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--nk)}
.x-axis-line b{display:block;font-family:var(--display);font-size:1.06rem;line-height:1.3;color:var(--ink);margin:.15rem 0 .1rem}
.x-axis-line .d{display:block;font-size:.88rem;line-height:1.5;color:var(--ink-2)}
.x-axis-cards{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:12px}
.x-ac{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:center;padding:clamp(14px,1.6vw,22px) clamp(16px,1.8vw,24px);
  border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.x-ac-n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.05rem;color:#fff;background:var(--b600)}
.x-ac--seal .x-ac-n{background:var(--vf-gut-ink)}
.x-ac--feed .x-ac-n{background:var(--vf-mac)}
.x-ac h3{font-size:1.06rem;line-height:1.3;margin:0 0 .2rem}
.x-ac p{font-size:.88rem;line-height:1.55;color:var(--ink-2);margin:0}
.x-ac--note{border-color:transparent;
  background:radial-gradient(380px 220px at 100% 0,color-mix(in srgb,var(--b400) 42%,transparent),transparent 70%),linear-gradient(150deg,var(--b700),var(--b900))}
.x-ac--note h3{color:#fff}
.x-ac--note p{color:rgba(236,232,255,.8)}
.x-ac--note .x-ac-n{background:var(--accent);color:var(--accent-ink)}
@media (min-width:901px) and (max-height:820px) and (min-height:501px){
  .x-node{width:60px;height:60px;font-size:1.45rem}
  .x-axis-line li{grid-template-columns:60px minmax(0,1fr)}
  .x-axis-line::before{left:calc(var(--p) + 4px + 29px)}
  .x-axis-line::after{left:calc(var(--p) + 4px + 25px)}
  .x-axis-line .d,.x-ac p{font-size:.84rem;line-height:1.45}
}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){.x-axis{grid-template-columns:1fr}.x-axis-cards{grid-template-rows:none}}
@media (max-width:480px){
  .x-axis-line li{grid-template-columns:56px minmax(0,1fr);gap:14px}
  .x-node{width:56px;height:56px;font-size:1.35rem}
  .x-axis-line::before{left:calc(var(--p) + 4px + 27px)}
  .x-axis-line::after{left:calc(var(--p) + 4px + 23px)}
}

/* --- 2 the day timeline ----------------------------------------------------------- */
.x-day{list-style:none;margin:0;padding:30px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);position:relative}
.x-day::before{content:"";position:absolute;left:0;right:0;top:8px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,#FFC24B 0%,#FFE7A3 32%,#FF9A62 64%,#9F88FF 100%)}
.x-day li{position:relative;display:flex;flex-direction:column;gap:.3rem;padding:20px 20px 22px;border-radius:22px;
  background:linear-gradient(180deg,var(--sky) 0,transparent 128px),rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12)}
.x-day li::before{content:"";position:absolute;top:-27px;left:20px;width:13px;height:13px;border-radius:50%;background:var(--c);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 24%,transparent),0 0 16px var(--c)}
.x-day li::after{content:"";position:absolute;top:-14px;left:26px;width:1px;height:14px;background:linear-gradient(var(--c),transparent)}
.x-day li:nth-child(1){--c:#FFC24B;--sky:rgba(255,194,75,.2)}
.x-day li:nth-child(2){--c:#FFE7A3;--sky:rgba(255,231,163,.14)}
.x-day li:nth-child(3){--c:#FF9A62;--sky:rgba(255,154,98,.2)}
.x-day li:nth-child(4){--c:#A994FF;--sky:rgba(124,92,255,.3)}
.x-day .t{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.025em;line-height:1.1;color:var(--c)}
.x-day .ic{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.15rem;line-height:1;background:rgba(255,255,255,.08)}
.x-day b{font-family:var(--display);font-size:1.06rem;line-height:1.3;color:#fff;margin-top:auto;padding-top:1rem;min-height:calc(2.6em + 1rem);display:flex;align-items:flex-end}
.x-day .d{font-size:.88rem;line-height:1.55;color:rgba(233,240,242,.72)}
.x-day-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:clamp(16px,2.4vh,26px);
  padding:12px 12px 12px 24px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.x-day-foot p{margin:0;color:rgba(233,240,242,.88);font-size:.95rem;line-height:1.5}
.x-day-foot .btn{flex:none}
@media (min-width:1001px) and (min-height:501px){.x-day li{min-height:188px}}
@media (max-width:1000px){.x-day{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:0}.x-day b{min-height:0;padding-top:.7rem}.x-day::before,.x-day li::before,.x-day li::after{display:none}}
@media (max-width:640px){.x-day-foot{flex-direction:column;align-items:flex-start;border-radius:20px;padding:16px 18px}}
@media (max-width:480px){.x-day{grid-template-columns:1fr}}

/* --- 3 the four systems ------------------------------------------------------------ */
.x-sys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"def gut mac" "perf perf mac";gap:14px}
.x-sys--def{grid-area:def;--c:var(--vf-def)}
.x-sys--gut{grid-area:gut;--c:var(--vf-gut)}
.x-sys--perf{grid-area:perf;--c:var(--vf-perf)}
.x-sys--mac{grid-area:mac;--c:var(--vf-mac)}
.x-sys-col{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);overflow:hidden}
.x-sys-col::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--c)}
.x-sys-col header{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center;padding:16px 18px 12px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 12%,#fff),#fff);border-bottom:1px solid var(--line)}
.x-sys-col .job{grid-row:1/3;font-family:var(--display);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;line-height:1;
  padding:.62em .9em;border-radius:99px;background:var(--c);color:#150A30}
.x-sys--mac .job{color:#fff}
.x-sys-col h3{font-size:1rem;line-height:1.3;margin:0}
.x-sys-col header p{font-size:.78rem;line-height:1.4;color:var(--muted);margin:.1rem 0 0}
.x-sys-col ul{list-style:none;margin:0;padding:2px 16px 8px;display:flex;flex-direction:column;flex:1}
.x-sys-col li{flex:1;display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center;padding:8px 0;border-top:1px dashed var(--line)}
.x-sys-col li:first-child{border-top:0}
.x-sys-col li>img,.x-sys-col li>.x-sys-ic{width:44px;height:44px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 3.5px color-mix(in srgb,var(--c) 60%,transparent)}
.x-sys-col li>img{display:block;object-fit:cover}
.x-sys-col li>.x-sys-ic{display:grid;place-items:center;background:var(--c)}
.x-sys-ic svg{width:34px;height:34px;display:block}
.x-sys-col li b{display:block;font-family:var(--display);font-size:.9rem;line-height:1.3;color:var(--ink)}
.x-sys-col li div>span{display:block;font-size:.78rem;line-height:1.45;color:var(--ink-2)}
.x-sys--perf ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px}
.x-sys--perf li{border-top:0}
.x-sys-note{margin-top:.8rem;text-align:center}
@media (min-width:901px) and (max-height:820px) and (min-height:501px){
  .x-sys{gap:12px}
  .x-sys-col header{padding:12px 16px 9px}
  .x-sys-col ul{padding:0 14px 4px}
  .x-sys-col li{padding:5px 0;grid-template-columns:38px minmax(0,1fr);gap:11px}
  .x-sys-col li>img,.x-sys-col li>.x-sys-ic{width:38px;height:38px}
  .x-sys-ic svg{width:30px;height:30px}
  .x-sys-col li b{font-size:.86rem}
  .x-sys-col li div>span{font-size:.74rem;line-height:1.4}
  .x-sys-note{margin-top:.5rem}
}
@media (max-width:1100px){
  .x-sys{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"def gut" "perf perf" "mac mac"}
  .x-sys--mac ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px}
  .x-sys--mac li{border-top:0}
}
@media (max-width:700px){
  .x-sys{grid-template-columns:1fr;grid-template-areas:"def" "gut" "perf" "mac"}
  .x-sys--perf ul,.x-sys--mac ul{display:flex;flex-direction:column}
  .x-sys--perf li,.x-sys--mac li{border-top:1px dashed var(--line)}
  .x-sys--perf li:first-child,.x-sys--mac li:first-child{border-top:0}
}

/* --- 4 the routine: a month of capsules -------------------------------------------- */
.x-take{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.96fr);gap:clamp(22px,4vw,64px);align-items:center}
.x-take-copy .lead{margin:0 0 1rem}
.x-take-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.x-take-steps li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:center;padding:12px 18px 12px 12px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.x-take-steps .ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:1.3rem;line-height:1;background:var(--tint)}
.x-take-steps b{display:block;font-family:var(--display);font-size:1rem;line-height:1.3;color:var(--ink)}
.x-take-steps li div>span{display:block;font-size:.86rem;line-height:1.5;color:var(--ink-2)}
.x-cal{position:relative;border-radius:var(--r-xl);padding:clamp(20px,2.2vw,30px);color:#fff;overflow:hidden;box-shadow:var(--sh-3);
  background:radial-gradient(420px 260px at 100% 0,color-mix(in srgb,var(--b400) 45%,transparent),transparent 70%),linear-gradient(155deg,var(--b700),var(--b900))}
.x-cal-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.x-cal-n{display:flex;align-items:center;gap:14px}
.x-cal-n b{font-family:var(--display);font-weight:800;font-size:clamp(3rem,5vw,4.2rem);line-height:.9;letter-spacing:-.05em;color:var(--accent)}
.x-cal-n span{font-size:.9rem;line-height:1.45;color:rgba(236,232,255,.76)}
.x-cal-n em{display:block;font-style:normal;font-family:var(--display);font-weight:800;font-size:1.06rem;color:#fff;letter-spacing:-.01em}
.x-cal-top img{height:clamp(86px,9vw,116px);width:auto;flex:none;margin:-6px -4px -10px 0;filter:drop-shadow(0 16px 20px rgba(0,0,0,.45))}
.x-cal-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:12px 9px;padding:16px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.x-cal-grid i,.x-cal-key i{display:block;aspect-ratio:2.3/1;border-radius:99px;border:1.5px dashed rgba(255,255,255,.3);box-sizing:border-box}
.x-cal-grid i.on,.x-cal-key i.on{border:0;background:linear-gradient(90deg,var(--b400) 0 50%,#EDE8FF 50% 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 6px -2px rgba(0,0,0,.5)}
.x-cal-grid i.today,.x-cal-key i.today{border:0;background:linear-gradient(90deg,var(--accent) 0 50%,#fff 50% 100%);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 38%,transparent)}
.x-cal-grid i.today{animation:xPulse 2.2s ease-in-out infinite}
@keyframes xPulse{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 0%,transparent)}}
.x-cal-key{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;font-size:.8rem;color:rgba(236,232,255,.78)}
.x-cal-key span{display:inline-flex;align-items:center;gap:8px}
.x-cal-key i{width:26px}
@media (min-width:901px) and (max-height:820px) and (min-height:501px){
  .x-take-steps li{padding:9px 16px 9px 10px}
  .x-take-steps .ic{width:42px;height:42px;font-size:1.15rem}
  .x-take-steps li{grid-template-columns:42px minmax(0,1fr)}
  .x-cal-grid{gap:9px 8px;padding:13px}
}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){.x-take{grid-template-columns:1fr}}
@media (max-width:480px){.x-cal-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:11px 10px}.x-cal-n b{font-size:2.8rem}
  .x-cal-top img{display:none}.x-cal-n em{font-size:1rem}}

/* --- 5 what customers report ----------------------------------------------------------- */
.x-quotes{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px}
.x-q{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(18px,2vw,26px);border-radius:var(--r-lg);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.x-q--feat{grid-row:1/3;padding:clamp(24px,2.8vw,40px);border-color:rgba(255,255,255,.18);overflow:hidden;
  background:linear-gradient(180deg,rgba(21,10,48,.12) 0%,rgba(21,10,48,.5) 40%,rgba(21,10,48,.94) 74%),url(/assets/img/s-vf-night.webp) 50% 30%/cover no-repeat,var(--b900)}
.x-q--feat .x-q-tag{background:rgba(21,10,48,.62);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14)}
.x-q--feat::before{content:"\201C";position:absolute;right:clamp(18px,2.4vw,34px);top:.05em;font-family:Georgia,'Times New Roman',serif;font-size:8rem;line-height:1;
  color:color-mix(in srgb,var(--accent) 34%,transparent);pointer-events:none}
.x-q-tag{align-self:flex-start;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;line-height:1;padding:.55em .9em;border-radius:99px;
  background:rgba(255,255,255,.1);color:var(--accent)}
.x-q blockquote{margin:0;font-family:var(--display);font-weight:700;font-size:1.04rem;line-height:1.5;letter-spacing:-.01em;color:#fff}
.x-q--feat blockquote{font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.36;letter-spacing:-.02em;margin-top:auto;max-width:26ch}
.x-q figcaption{display:flex;align-items:center;gap:12px;margin-top:auto}
.x-q--feat figcaption{margin-top:0}
.x-q-face{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px var(--b800),0 0 0 4px color-mix(in srgb,var(--accent) 70%,transparent)}
.x-q--feat .x-q-face{width:72px;height:72px}
.x-q figcaption>span{display:flex;flex-direction:column;gap:.15rem}
.x-q figcaption b{font-family:var(--display);color:#fff;font-size:.98rem;line-height:1.2}
.x-q figcaption>span>span{font-size:.8rem;line-height:1.3;color:rgba(233,240,242,.66)}
.x-stars{font-style:normal;color:#FFB020;letter-spacing:.08em}
.x-quotes-note{text-align:center;margin-top:1rem}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){.x-quotes{grid-template-columns:1fr}.x-q--feat{grid-row:auto}.x-q--feat blockquote{margin-top:0}}

/* --- 6 the payoff: up close and further out -------------------------------------------- */
.x-after{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(24px,4.4vw,72px);align-items:center}
.x-after-fig{position:relative;padding-left:12%}
.x-after-main{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3);aspect-ratio:9/8;background:#DAD4CC}
.x-after-main img{width:100%;height:100%;object-fit:cover;object-position:62% 40%;display:block}
.x-after-mini{position:absolute;left:0;top:6%;width:44%;aspect-ratio:4/3;border-radius:20px;overflow:hidden;border:5px solid #fff;box-shadow:var(--sh-2);background:#CFD8C4}
.x-after-mini img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
.x-chip{position:absolute;left:10px;bottom:10px;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;line-height:1;padding:.6em .95em;border-radius:99px;
  background:rgba(255,255,255,.95);color:var(--ink);box-shadow:var(--sh-1)}
.x-after-main .x-chip{left:auto;right:16px;bottom:16px;background:var(--b700);color:#fff}
.x-after-copy .lead{margin:0 0 1rem}
.x-after-list{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:9px}
.x-after-list li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;font-size:.96rem;line-height:1.45;color:var(--ink);font-weight:600}
.x-after-list li span{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--tint);font-size:1.1rem;line-height:1}
.x-after-copy .hero-actions{margin-bottom:.8rem}
@media (min-width:901px) and (min-height:501px){.x-after-main{max-height:min(64vh,560px);width:100%}}
@media (min-width:901px) and (max-height:820px) and (min-height:501px){.x-after-list{gap:6px}.x-after-list li span{width:36px;height:36px}.x-after-list li{grid-template-columns:36px minmax(0,1fr);font-size:.92rem}}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){.x-after{grid-template-columns:1fr}.x-after-copy{order:-1}.x-after-fig{max-width:560px;width:100%;justify-self:center}}
@media (max-width:480px){.x-after-fig{padding-left:8%}.x-after-mini{width:48%;border-width:4px;border-radius:14px}}

/* --- 7 bonuses: three guides on one shelf -------------------------------------------------- */
.x-shelf{--ch:clamp(180px,26vh,250px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.6vw,44px);position:relative}
.x-shelf::before{content:"";position:absolute;left:-1.5%;right:-1.5%;top:calc(var(--ch) - 4px);height:14px;border-radius:7px;z-index:0;
  background:linear-gradient(180deg,#fff 0,color-mix(in srgb,var(--b400) 20%,#fff) 100%);
  box-shadow:0 16px 26px -14px rgba(52,28,119,.5),inset 0 -2px 0 color-mix(in srgb,var(--b400) 28%,#fff)}
.x-book{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.x-book-c{height:var(--ch);display:flex;align-items:flex-end;justify-content:center;position:relative;z-index:1}
.x-book-c img{height:calc(var(--ch) - 2px);width:auto;max-width:100%;filter:drop-shadow(0 14px 16px rgba(21,10,48,.3))}
.x-book-b{padding-top:28px;max-width:38ch}
.x-book-v{display:inline-flex;align-items:center;gap:.6em;font-size:.72rem;font-weight:800;margin-bottom:.55rem;line-height:1}
.x-book-v>span{letter-spacing:.14em;text-transform:uppercase;color:#A2570A}
.x-book-v s{color:var(--muted);font-weight:700}
.x-book-v b{padding:.45em .75em;border-radius:99px;background:var(--vf-gut-ink);color:#fff;letter-spacing:.08em;text-transform:uppercase;font-size:.64rem}
.x-book h3{font-size:1.06rem;line-height:1.3;margin:0 0 .35rem}
.x-book p{font-size:.86rem;line-height:1.55;color:var(--ink-2);margin:0}
@media (min-width:901px) and (max-height:820px) and (min-height:501px){.x-book-b{padding-top:22px}.x-book p{font-size:.84rem;line-height:1.5}}
@media (max-width:760px){
  .x-shelf{grid-template-columns:1fr;gap:18px}
  .x-shelf::before{display:none}
  .x-book{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;align-items:center;text-align:left;padding:14px;border-radius:20px;background:#fff;border:1px solid var(--line)}
  .x-book-c{height:auto}
  .x-book-c img{height:auto;width:104px}
  .x-book-b{padding-top:0}
}

/* --- 8 packages: the comparison table ------------------------------------------------------ */
.x-ptab-wrap{border-radius:var(--r-xl);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);padding:clamp(6px,.9vw,12px) clamp(6px,.9vw,12px) clamp(10px,1vw,14px)}
.x-ptab{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.x-ptab th,.x-ptab td{padding:.62rem .9rem;text-align:center;vertical-align:middle;border-bottom:1px solid var(--line);font-size:.92rem;line-height:1.35;color:var(--ink-2)}
.x-ptab .x-ptab-corner{width:25%;text-align:left;border-bottom:0}
.x-ptab tbody th{text-align:left;font-family:var(--display);font-weight:700;font-size:.9rem;color:var(--ink)}
.x-ptab thead th{padding:14px 12px 12px;vertical-align:bottom;border-bottom:2px solid var(--ink)}
.x-ptab thead .tag{display:inline-block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;line-height:1;padding:.55em .9em;border-radius:99px;background:var(--tint);color:var(--b600)}
.x-ptab thead .pic{display:grid;place-items:center;height:118px;margin:.45rem 0 .35rem}
.x-ptab thead .pic img{max-height:114px;max-width:82%;width:auto;height:auto}
.x-ptab thead b{display:block;font-family:var(--display);font-size:1.12rem;line-height:1.2;color:var(--ink)}
.x-ptab thead .sup{display:block;font-size:.76rem;line-height:1.3;color:var(--muted);font-weight:600;margin-top:.15rem}
.x-ptab .mid{background:color-mix(in srgb,var(--b400) 5%,#fff)}
.x-ptab .best{background:color-mix(in srgb,var(--accent) 9%,#fff)}
.x-ptab thead .mid .tag{background:var(--b600);color:#fff}
.x-ptab thead .best .tag{background:var(--accent);color:var(--accent-ink)}
.x-ptab thead .mid,.x-ptab thead .best{border-radius:18px 18px 0 0}
.x-ptab tfoot .mid,.x-ptab tfoot .best{border-radius:0 0 18px 18px}
.x-ptab td s{color:var(--muted);font-size:.8rem;margin-right:.35rem;font-weight:600}
.x-ptab .p{font-family:var(--display);font-size:1.6rem;letter-spacing:-.03em;line-height:1.1;color:var(--ink)}
.x-ptab .per{display:block;font-size:.72rem;color:var(--muted);font-weight:600}
.x-ptab .save{display:inline-block;font-size:.84rem;font-weight:800;line-height:1.2;padding:.28em .75em;border-radius:99px;background:color-mix(in srgb,var(--accent) 16%,#fff);color:var(--vf-gut-ink)}
.x-ptab .free{color:var(--vf-gut-ink);font-weight:800}
.x-ptab .ok{display:inline-grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;background:var(--vf-gut-ink);color:#fff;font-size:.74rem;font-weight:900;line-height:1}
.x-ptab tbody tr:last-child th,.x-ptab tbody tr:last-child td{border-bottom:0}
.x-ptab tfoot td{border-bottom:0;padding:.7rem .7rem .9rem}
.x-ptab tfoot .btn{width:100%;max-width:240px;padding:.8em 1em}
.x-ptab-seal{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:84px;height:84px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--accent) 55%,#fff),var(--accent) 62%,#0E9C8E);color:var(--accent-ink);
  box-shadow:0 12px 26px -12px color-mix(in srgb,var(--accent) 90%,transparent),inset 0 0 0 4px rgba(255,255,255,.4)}
.x-ptab-seal::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--accent) 60%,transparent)}
.x-ptab-seal b{font-family:var(--display);font-size:1.9rem;line-height:.9;letter-spacing:-.04em}
.x-ptab-seal span{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800}
.x-ptab-corner .cap{display:block;margin-top:14px;font-family:var(--display);font-weight:700;font-size:.92rem;line-height:1.35;color:var(--ink);max-width:18ch}
.x-ptab-note{margin-top:.9rem}

@media (min-width:901px) and (max-height:820px) and (min-height:501px){
  .x-ptab thead .pic{height:80px}.x-ptab thead .pic img{max-height:76px}
  .x-ptab thead th{padding:10px 10px 9px}
  .x-ptab th,.x-ptab td{padding:.46rem .8rem}
  .x-ptab .p{font-size:1.4rem}
  .x-ptab-seal{width:70px;height:70px}.x-ptab-seal b{font-size:1.6rem}
}
@media (min-width:901px) and (max-height:760px) and (min-height:501px){
  .x-ptab thead .pic{height:68px;margin:.35rem 0 .25rem}.x-ptab thead .pic img{max-height:66px}
  .x-ptab th,.x-ptab td{padding:.36rem .75rem}
  .x-ptab tfoot td{padding:.5rem .7rem .6rem}
  .x-ptab-note{margin-top:.5rem}
}@media (max-width:760px){
  .x-ptab-wrap{padding:4px 4px 8px;border-radius:22px}
  .x-ptab .x-ptab-corner{width:24%}
  .x-ptab th,.x-ptab td{padding:.5rem .28rem;font-size:.76rem}
  .x-ptab tbody th{font-size:.74rem;line-height:1.3;padding-left:.5rem}
  .x-ptab thead th{padding:10px 4px 8px}
  .x-ptab thead .tag{font-size:.52rem;letter-spacing:.08em;padding:.55em .6em}
  .x-ptab thead .pic{height:66px}.x-ptab thead .pic img{max-height:62px;max-width:92%}
  .x-ptab thead b{font-size:.84rem}
  .x-ptab thead .sup{font-size:.64rem}
  .x-ptab .p{font-size:1.14rem}
  .x-ptab td s{display:block;margin:0 0 .1rem;font-size:.66rem}
  .x-ptab .per{font-size:.6rem}
  .x-ptab .save{font-size:.72rem;padding:.25em .5em}
  .x-ptab-seal{width:58px;height:58px}.x-ptab-seal b{font-size:1.25rem}.x-ptab-seal span{font-size:.48rem;letter-spacing:.12em}
  .x-ptab-seal::before{inset:-5px}
  .x-ptab-corner .cap{font-size:.66rem;margin-top:10px}
  .x-ptab tfoot td{padding:.6rem .2rem .7rem}
  .x-ptab tfoot .btn{font-size:.78rem;padding:.7em .4em;min-height:44px}
  .x-ptab tfoot .ar{display:none}
}

/* --- 9 guarantee ------------------------------------------------------------------------------ */
.x-gsplit{display:grid;grid-template-columns:auto minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(22px,3.2vw,52px);align-items:center;
  padding:clamp(20px,2.6vw,36px) clamp(22px,3.2vw,48px);border-radius:var(--r-xl);border:1px solid var(--line);box-shadow:var(--sh-2);
  background:radial-gradient(520px 320px at 8% 50%,color-mix(in srgb,var(--b400) 15%,transparent),transparent 70%),#fff}
.x-gsplit-seal{position:relative;width:clamp(170px,16vw,224px);aspect-ratio:1/1;display:grid;place-items:center}
.x-gsplit-seal::before{content:"";position:absolute;inset:-9%;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--b400) 15%,transparent) 0 6deg,transparent 6deg 12deg);
  -webkit-mask:radial-gradient(circle,transparent 42%,#000 43%);mask:radial-gradient(circle,transparent 42%,#000 43%);animation:xSpin 70s linear infinite}
.x-gsplit-seal img{position:relative;width:100%;height:auto;filter:drop-shadow(0 18px 22px rgba(21,10,48,.28))}
.x-gsplit-copy h2{margin:.2rem 0 .7rem;font-size:clamp(1.5rem,2.3vw,2.2rem);line-height:1.18;max-width:24ch}
.x-gsplit-copy p{font-size:.96rem;line-height:1.65;color:var(--ink-2);margin:0 0 1.1rem;max-width:62ch}
.x-gsteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;align-self:stretch;justify-content:center}
.x-gsteps li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;border-radius:16px;
  background:color-mix(in srgb,var(--b400) 6%,#fff);border:1px solid color-mix(in srgb,var(--b400) 16%,var(--line))}
.x-gsteps b{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:.95rem;background:var(--b600);color:#fff}
.x-gsteps li:last-child b{background:var(--vf-gut-ink)}
.x-gsteps span{font-size:.84rem;line-height:1.4;color:var(--ink-2)}
.x-gsteps em{display:block;font-style:normal;font-family:var(--display);font-weight:800;font-size:.95rem;color:var(--ink);margin-bottom:.1rem}
body.t-visiflora #guarantee .howorder{margin-top:clamp(16px,2.2vh,26px)}
@media (min-width:901px) and (max-height:820px) and (min-height:501px){.x-gsplit-seal{width:150px}.x-gsplit-copy p{font-size:.9rem;line-height:1.55}}
@media (max-width:1100px){.x-gsplit{grid-template-columns:auto minmax(0,1fr)}.x-gsteps{grid-column:1/-1;flex-direction:row}.x-gsteps li{flex:1}}
@media (max-width:760px){.x-gsplit{grid-template-columns:1fr;justify-items:center;text-align:center}.x-gsplit-copy h2,.x-gsplit-copy p{margin-inline:auto}.x-gsplit-copy .eyebrow{justify-content:center}
  .x-gsteps{flex-direction:column;width:100%;text-align:left}}

/* --- final CTA: the product inside the rings -------------------------------------------------- */
.x-cta-vf{position:relative;overflow:hidden;isolation:isolate;text-align:center;display:flex;flex-direction:column;align-items:center;
  padding:clamp(26px,3.4vw,54px) clamp(20px,3vw,48px);border-radius:var(--r-xl);color:#fff;box-shadow:var(--sh-3);
  background:radial-gradient(720px 400px at 50% 0,color-mix(in srgb,var(--b400) 46%,transparent),transparent 70%),linear-gradient(160deg,var(--b800),var(--b900))}
.x-cta-vf-stage{position:absolute;z-index:-1;left:50%;top:clamp(8px,1.4vw,22px);width:clamp(240px,23vw,320px);aspect-ratio:1/1;transform:translateX(-50%);pointer-events:none}
.x-cta-vf-stage .r{position:absolute;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 38%,transparent)}
.x-cta-vf-stage .r1{inset:0}
.x-cta-vf-stage .r2{inset:11%;border-style:dashed;border-color:color-mix(in srgb,var(--accent) 55%,transparent);animation:xSpin 90s linear infinite}
.x-cta-vf-stage .r3{inset:24%;border:0;background:radial-gradient(circle,color-mix(in srgb,var(--b400) 60%,transparent),transparent 70%)}
.x-cta-vf-prod{position:relative;width:clamp(200px,18vw,260px);height:auto;margin:clamp(6px,1vw,16px) 0 .5rem;filter:drop-shadow(0 30px 36px rgba(0,0,0,.5))}
body.x-page .band--white .x-cta-vf .eyebrow{justify-content:center;color:var(--accent)}
.x-cta-vf h2{color:#fff;margin:0 auto .6rem;max-width:22ch}
.x-cta-vf p{color:rgba(236,232,255,.82);margin:0 auto 1.2rem;max-width:52ch}
.x-cta-vf .x-cta-ticks{justify-content:center;color:rgba(236,232,255,.82)}
.x-cta-vf .x-cta-ticks li::before{color:var(--accent)}
@media (min-width:901px) and (max-height:820px) and (min-height:501px){.x-cta-vf-prod{width:190px}.x-cta-vf-stage{width:230px}}

/* ==========================================================================
   JAVA BURN — "the magazine review": serif headlines (Fraunces), ruled
   department headers, a verdict box, a pull quote and editorial price rows
   ========================================================================== */
body.t-javaburn{--serif:'Fraunces',Georgia,'Times New Roman',serif;--jb-green:#1E7F4F}
body.t-javaburn h1,body.t-javaburn .x-mh h2,body.t-javaburn .x-jbg h2,body.t-javaburn .x-cta-jb h2,body.t-javaburn #faq h2{
  font-family:var(--serif);font-weight:600;letter-spacing:-.018em;font-optical-sizing:auto}
body.t-javaburn h1 em,body.t-javaburn h2 em{font-style:italic;font-weight:500;color:var(--accent)}

/* --- department header: diamond kicker, a rule, then the serif headline ---- */
.x-mh{margin-bottom:clamp(18px,2.6vh,30px)}
.x-mh-k{display:flex;align-items:center;gap:14px;margin-bottom:.8rem;font-family:var(--display);font-weight:800;font-size:.7rem;line-height:1;
  letter-spacing:.2em;text-transform:uppercase;color:#A2570A}
.x-mh-k::after{content:"";flex:1;height:1px;background:currentColor;opacity:.3}
.x-mh-k span{display:inline-flex;align-items:center;gap:.7em;white-space:nowrap}
.x-mh-k span::before{content:"";width:7px;height:7px;border-radius:1px;background:var(--accent);transform:rotate(45deg);flex:none}
.band--dark .x-mh-k{color:var(--accent-2)}
.x-mh h2{margin:0;max-width:22ch;font-size:clamp(1.9rem,3vw,2.9rem);line-height:1.08}
.x-mh .lead{margin:.8rem 0 0;max-width:60ch}
.x-mh--tight{margin-bottom:clamp(12px,1.8vh,20px)}
@media (min-width:901px) and (min-height:501px){body.x-page.t-javaburn .sec .x-mh h2{font-size:clamp(1.9rem,2.8vw,2.75rem);line-height:1.08}}
@media (min-width:901px) and (max-height:820px) and (min-height:501px){
  body.x-page.t-javaburn .sec .x-mh h2{font-size:clamp(1.65rem,2.3vw,2.2rem)}
  body.x-page.t-javaburn .sec .x-mh .lead{font-size:.93rem;line-height:1.55}
  .x-mh{margin-bottom:16px}.x-mh-k{margin-bottom:.6rem}
}

/* --- hero: the cover ----------------------------------------------------------- */
body.t-javaburn .x-jb-hero{background:linear-gradient(180deg,#1A0C06 0%,var(--b900) 100%)}
.x-jb-cover{position:absolute;top:0;right:0;bottom:0;width:61%;margin:0;z-index:0;background:var(--b900)}
.x-jb-cover picture,.x-jb-cover img{display:block;width:100%;height:100%}
.x-jb-cover img{object-fit:cover;object-position:72% 42%}
.x-jb-cover::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#170B05 0%,rgba(23,11,5,.86) 12%,rgba(23,11,5,.4) 36%,rgba(23,11,5,0) 62%),
             linear-gradient(0deg,rgba(20,10,5,.6) 0%,rgba(20,10,5,0) 34%)}
.x-jb-hero-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:clamp(24px,4vw,64px)}
.x-jb-hero-copy{max-width:600px}
.x-jb-kicker{display:inline-flex;align-items:center;gap:12px;margin-bottom:1.1rem;font-family:var(--display);font-size:.72rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,241,232,.8)}
.x-jb-kicker b{padding:.5em .85em;border-radius:4px;background:var(--accent);color:#fff;letter-spacing:.2em}
.x-jb-hero h1{font-size:clamp(2.3rem,4vw,3.95rem);line-height:1.02;max-width:13ch;color:#fff;margin-bottom:1rem}
.x-jb-hero h1 em{display:block}
.x-jb-hero .lead{max-width:50ch;color:rgba(255,241,232,.82);margin-bottom:1.3rem}
.x-jb-facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.x-jb-facts li{display:flex;flex-direction:column;gap:.15rem;padding:0 22px;border-left:1px solid rgba(255,255,255,.18)}
.x-jb-facts li:first-child{padding-left:0;border-left:0}
.x-jb-facts b{font-family:var(--serif);font-weight:600;font-size:1.22rem;line-height:1.1;color:#fff}
.x-jb-facts span{font-size:.78rem;color:rgba(255,241,232,.64)}
.x-jb-hero .hero-actions{margin-top:1.4rem}
.x-jb-byline{margin:1.1rem 0 0;font-family:var(--serif);font-style:italic;font-size:.86rem;color:rgba(255,241,232,.56)}
.x-jb-hero-card{position:relative;width:364px;display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto 1fr;align-items:start;column-gap:14px;row-gap:10px;
  padding:16px 18px 18px;border-radius:22px;background:rgba(20,10,5,.66);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(12px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.x-jb-badge{grid-column:2;grid-row:1;justify-self:start;display:inline-flex;align-items:center;gap:.45em;padding:.45em .85em;border-radius:99px;
  background:rgba(255,255,255,.95);color:#12171C;font-size:.72rem;font-weight:800;line-height:1.2;white-space:nowrap}
.x-jb-badge i{font-style:normal}
.x-jb-hero-card img{grid-column:1;grid-row:1/3;align-self:end;width:96px;height:auto;margin-top:-88px;filter:drop-shadow(0 18px 22px rgba(0,0,0,.6));animation:hmfloat 6.4s ease-in-out infinite}
.x-jb-hero-card div{grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:.2rem;padding-bottom:2px}
.x-jb-hero-card b{font-family:var(--display);font-weight:800;font-size:.95rem;line-height:1.25;color:#fff}
.x-jb-hero-card div span{font-size:.78rem;line-height:1.4;color:rgba(255,241,232,.7)}
@media (min-width:901px) and (max-height:820px) and (min-height:501px){
  .x-jb-hero h1{font-size:clamp(2.1rem,3.4vw,3.1rem)}
  .x-jb-hero .lead{font-size:.95rem;margin-bottom:1rem}
  .x-jb-kicker{margin-bottom:.8rem}
  .x-jb-hero .hero-actions{margin-top:1.1rem}
  .x-jb-byline{margin-top:.8rem}
}
@media (max-width:1100px) and (min-width:901px) and (min-height:501px){.x-jb-cover{width:56%}.x-jb-hero-card{display:none}}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){
  .x-jb-hero{padding-top:0;justify-content:flex-start}
  .x-jb-cover{position:relative;width:auto;height:clamp(300px,64vw,480px);margin:0 0 -64px}
  .x-jb-cover img{object-position:50% 30%}
  .x-jb-cover::after{background:linear-gradient(0deg,var(--b900) 0%,rgba(20,10,5,.55) 26%,rgba(20,10,5,0) 58%)}
  .x-jb-hero-in{grid-template-columns:1fr;justify-items:center;text-align:center}
  .x-jb-hero-copy{margin-inline:auto}
  .x-jb-hero h1{margin-inline:auto;max-width:14ch}
  .x-jb-hero .lead{margin-inline:auto}
  .x-jb-facts{justify-content:center}
  .x-jb-hero .hero-actions{justify-content:center}
  .x-jb-hero-card{margin-top:52px;text-align:left;width:min(364px,100%)}
}
@media (max-width:520px){.x-jb-facts li{padding:0 12px}.x-jb-facts b{font-size:1.05rem}.x-jb-facts span{font-size:.72rem}}

/* --- 1 the verdict ------------------------------------------------------------------ */
.x-verdict{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(22px,3.6vw,60px);align-items:start}
.x-drop{font-size:1.04rem;line-height:1.72;color:var(--ink-2);margin:0 0 1.2rem;max-width:68ch}
.x-drop::first-letter{float:left;font-family:var(--serif);font-weight:600;font-size:3.7em;line-height:.82;padding:.06em .12em 0 0;color:var(--accent)}
.x-pc2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.x-pc2-col{padding:18px 20px 20px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.x-pc2-col h3{font-family:var(--serif);font-weight:600;font-size:1.15rem;line-height:1.2;margin:0 0 .7rem;letter-spacing:-.01em}
.x-pc2-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.x-pc2-col li{position:relative;padding-left:1.6em;font-size:.9rem;line-height:1.5;color:var(--ink-2)}
.x-pc2-col li::before{position:absolute;left:0;top:.12em;width:1.15em;height:1.15em;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:900;color:#fff}
.x-pc2--yes li::before{content:"\2713";background:var(--jb-green)}
.x-pc2--note li::before{content:"i";background:var(--b600);font-family:var(--serif);font-style:italic}
.x-glance{border-radius:var(--r-xl);padding:clamp(18px,2vw,26px);color:#fff;box-shadow:var(--sh-3);
  background:radial-gradient(420px 260px at 100% 0,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),linear-gradient(160deg,var(--b700),var(--b900))}
.x-glance-h{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.18)}
.x-glance-h span{font-family:var(--serif);font-weight:600;font-size:1.5rem;line-height:1}
.x-glance-h img{height:112px;width:auto;margin:-64px -6px -8px 0;filter:drop-shadow(0 14px 16px rgba(0,0,0,.5))}
.x-glance dl{margin:0 0 16px}
.x-glance dl div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;padding:.5rem 0;border-bottom:1px dashed rgba(255,255,255,.14)}
.x-glance dt{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--accent-2);padding-top:.25rem}
.x-glance dd{margin:0;font-size:.88rem;line-height:1.45;color:#fff}
.x-glance .btn{width:100%}
@media (min-width:901px) and (max-height:820px) and (min-height:501px){
  .x-drop{font-size:.95rem;line-height:1.6;margin-bottom:.9rem}
  .x-pc2-col{padding:14px 16px 16px}.x-pc2-col ul{gap:.35rem}.x-pc2-col li{font-size:.86rem}
  .x-glance dl div{padding:.38rem 0}.x-glance-h img{height:70px}
}
@media (max-width:1000px){.x-verdict{grid-template-columns:1fr}.x-glance{max-width:560px}}
@media (max-width:600px){.x-pc2{grid-template-columns:1fr}.x-glance dl div{grid-template-columns:92px minmax(0,1fr)}}

/* --- 2 the ritual ----------------------------------------------------------------------- */
.x-rit{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(24px,4.4vw,72px);align-items:center}
.x-rit-fig img{width:100%;aspect-ratio:4/5;max-height:min(66vh,580px);object-fit:cover;object-position:36% 50%;border-radius:var(--r-xl);box-shadow:var(--sh-3);display:block}
.x-rit-fig figcaption{display:flex;align-items:baseline;gap:.7rem;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-family:var(--serif);font-style:italic;font-size:.94rem;color:var(--muted)}
.x-rit-fig figcaption b{font-family:var(--display);font-style:normal;font-weight:800;font-size:.78rem;letter-spacing:.12em;color:var(--accent)}
.x-rit-steps{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.x-rit-steps li{display:grid;grid-template-columns:58px minmax(0,1fr);gap:14px;align-items:baseline;padding:16px 0;border-top:1px solid var(--line)}
.x-rit-steps .n{font-family:var(--serif);font-style:italic;font-weight:500;font-size:2rem;line-height:1;color:var(--accent)}
.x-rit-steps b{display:block;font-family:var(--display);font-weight:800;font-size:1.08rem;line-height:1.3;color:var(--ink);margin-bottom:.2rem}
.x-rit-steps li div>span{display:block;font-size:.94rem;line-height:1.55;color:var(--ink-2)}
@media (min-width:901px) and (max-height:820px) and (min-height:501px){.x-rit-steps li{padding:11px 0}.x-rit-fig img{max-height:60vh}}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){.x-rit{grid-template-columns:1fr}.x-rit-copy{order:-1}.x-rit-fig img{aspect-ratio:4/3}}

/* --- 3 why a serum ------------------------------------------------------------------------ */
.x-serum{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4.6vw,76px);align-items:start}
.x-serum .x-mh h2{color:#fff}
.x-serum .x-mh .lead{color:rgba(255,241,232,.78)}
.x-pull{margin:1.4rem 0 0;padding:.3rem 0 .3rem 1.4rem;border-left:3px solid var(--accent);font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(1.25rem,1.9vw,1.65rem);line-height:1.38;color:#fff}
.x-pull cite{display:block;margin-top:.8rem;font-family:var(--display);font-style:normal;font-weight:800;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2)}
.x-reasons{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.18)}
.x-reasons li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.x-reasons .n{font-family:var(--serif);font-weight:600;font-size:1.35rem;line-height:1.2;color:var(--accent)}
.x-reasons p{margin:0;font-size:.93rem;line-height:1.5;color:rgba(255,241,232,.82)}
.x-reasons b{font-family:var(--display);font-weight:800;color:#fff}
.x-reasons .p{display:block;margin-top:.2rem;font-size:.8rem;line-height:1.45;color:rgba(255,241,232,.5)}
.x-reasons .p em{font-style:normal;font-weight:700;color:rgba(255,241,232,.64)}
@media (min-width:901px) and (max-height:820px) and (min-height:501px){.x-reasons li{padding:8px 0}.x-reasons p{font-size:.88rem}.x-pull{font-size:1.25rem;margin-top:1rem}}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){.x-serum{grid-template-columns:1fr}}

/* --- 4 where it is made --------------------------------------------------------------------- */
.x-made{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:clamp(24px,4.4vw,72px);align-items:center}
.x-made .lead{margin:0}
.x-made-marks{list-style:none;margin:1.2rem 0 1rem;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.x-made-marks li{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:14px;background:#fff;border:1px solid var(--line);
  font-family:var(--display);font-weight:700;font-size:.9rem;line-height:1.3;color:var(--ink)}
.x-made-marks i{font-style:normal;font-size:1.1rem;line-height:1}
.x-made-fig img{width:100%;height:auto;aspect-ratio:1400/793;object-fit:cover;border-radius:var(--r-xl);box-shadow:var(--sh-3);display:block}
@media (min-width:901px) and (max-height:820px) and (min-height:501px){.x-made-marks li{padding:8px 12px;font-size:.86rem}.x-made-marks{margin:.9rem 0 .8rem}}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){.x-made{grid-template-columns:1fr}}
@media (max-width:520px){.x-made-marks li{padding:9px 10px;font-size:.82rem;gap:8px}}
@media (max-width:340px){.x-made-marks{grid-template-columns:1fr}}

/* --- 5 who it suits --------------------------------------------------------------------------- */
.x-fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.x-fit-col{padding:clamp(20px,2.4vw,32px);border-radius:var(--r-xl);border:1px solid var(--line)}
.x-fit--yes{background:linear-gradient(180deg,#EEF8F1 0,#fff 58%)}
.x-fit--no{background:linear-gradient(180deg,#FFF1EA 0,#fff 58%)}
.x-fit-col h3{display:flex;align-items:center;gap:.65rem;margin:0 0 .8rem;font-family:var(--serif);font-weight:600;font-size:1.4rem;letter-spacing:-.01em}
.x-fit-col h3 span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:1rem;font-weight:900;color:#fff;flex:none}
.x-fit--yes h3 span{background:var(--jb-green)}
.x-fit--no h3 span{background:var(--accent);font-size:1.3rem}
.x-fit-col ul{list-style:none;margin:0;padding:0}
.x-fit-col li{padding:.8rem 0;border-top:1px solid var(--line);font-size:.97rem;line-height:1.55;color:var(--ink-2)}
.x-fit-col li b{color:var(--ink)}
@media (min-width:901px) and (max-height:820px) and (min-height:501px){.x-fit-col li{padding:.6rem 0;font-size:.93rem}}
@media (max-width:800px){.x-fit{grid-template-columns:1fr}}

/* --- 6 pricing: editorial rows ------------------------------------------------------------------ */
.x-prows{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.x-prow{display:grid;grid-template-columns:100px minmax(0,1.25fr) minmax(0,.85fr) minmax(0,1fr) minmax(0,.8fr) minmax(170px,auto);align-items:center;
  gap:clamp(12px,2vw,30px);padding:12px clamp(16px,2vw,26px) 12px 12px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.x-prow .pic{height:100px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(160deg,var(--w2),var(--tint))}
.x-prow .pic img{max-height:88px;max-width:86%;width:auto;height:auto;filter:drop-shadow(0 10px 12px rgba(38,18,10,.3))}
.x-prow .nm b{display:block;font-family:var(--serif);font-weight:600;font-size:1.45rem;line-height:1.1;letter-spacing:-.01em;color:var(--ink)}
.x-prow .nm span{font-size:.84rem;color:var(--muted)}
.x-prow .tag{display:inline-block;margin-bottom:.4rem;padding:.42em .8em;border-radius:4px;background:var(--accent);color:#fff;font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;line-height:1}
.x-prow .per b{display:flex;align-items:flex-start;font-family:var(--serif);font-weight:600;font-size:2.3rem;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.x-prow .per sup{font-size:.45em;margin:.2em .08em 0 0;top:0}
.x-prow .per span{display:block;font-size:.74rem;color:var(--muted);margin-top:.2rem}
.x-prow .tot b{display:block;font-family:var(--display);font-weight:800;font-size:1.12rem;color:var(--ink)}
.x-prow .tot span{font-size:.84rem;color:var(--muted)}
.x-prow .tot .free{color:var(--jb-green);font-weight:800}
.x-prow .save{display:inline-block;padding:.4em .85em;border-radius:99px;background:color-mix(in srgb,var(--jb-green) 12%,#fff);color:var(--jb-green);font-size:.84rem;font-weight:800;line-height:1.2}
.x-prow .save--none{background:none}
.x-prow .btn{justify-self:end;min-width:150px}
.x-prow.best{border-color:transparent;color:#fff;box-shadow:var(--sh-3),0 0 0 3px color-mix(in srgb,var(--accent) 60%,transparent);
  background:radial-gradient(600px 200px at 0 0,color-mix(in srgb,var(--accent) 24%,transparent),transparent 70%),linear-gradient(120deg,var(--b700),var(--b900))}
.x-prow.best .pic{background:rgba(255,255,255,.08)}
.x-prow.best .nm b,.x-prow.best .per b,.x-prow.best .tot b{color:#fff}
.x-prow.best .nm span,.x-prow.best .per span,.x-prow.best .tot span{color:rgba(255,241,232,.7)}
.x-prow.best .tot .free{color:#7EE2A8}
.x-prow.best .save{background:rgba(126,226,168,.16);color:#9DF0BF}
.x-ship{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin-top:16px;padding:12px 18px;border-radius:16px;background:rgba(255,255,255,.7);border:1px solid var(--line);font-size:.86rem;color:var(--ink-2)}
.x-ship span{display:inline-block;line-height:1.5}
.x-ship i{margin-right:.4em}
.x-ship i{font-style:normal}
.x-ship b{color:var(--ink)}
.x-prows-note{margin-top:.7rem}
@media (min-width:901px) and (max-height:820px) and (min-height:501px){.x-prow{padding-block:9px}.x-prow .pic{height:82px}.x-prow .pic img{max-height:72px}.x-prow .per b{font-size:2rem}.x-ship{margin-top:12px;padding:9px 16px}}
@media (max-width:1100px){
  .x-prow{grid-template-columns:88px minmax(0,1fr) auto;grid-template-areas:"pic nm per" "pic tot sv" "btn btn btn";row-gap:10px}
  .x-prow .pic{grid-area:pic;height:100%;min-height:96px}.x-prow .nm{grid-area:nm}.x-prow .per{grid-area:per;text-align:right}
  .x-prow .per b{justify-content:flex-end}.x-prow .tot{grid-area:tot}.x-prow .sv{grid-area:sv;text-align:right}
  .x-prow .btn{grid-area:btn;justify-self:stretch}
}
@media (max-width:480px){.x-prow{grid-template-columns:72px minmax(0,1fr) auto;column-gap:12px}.x-prow .nm b{font-size:1.2rem}.x-prow .per b{font-size:1.8rem}}

/* --- 7 guarantee ------------------------------------------------------------------------------------ */
.x-jbg{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);border-radius:var(--r-xl);overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2)}
.x-jbg-fig{margin:0;position:relative;min-height:320px}
.x-jbg-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 34%}
.x-jbg-copy{padding:clamp(22px,3.2vw,52px)}
.x-jbg h2{margin:0 0 .8rem;font-size:clamp(1.7rem,2.6vw,2.5rem);line-height:1.1;max-width:20ch}
.x-jbg h2 em{display:block}
.x-jbg-copy>p{font-size:.98rem;line-height:1.65;color:var(--ink-2);margin:0;max-width:62ch}
.x-jbg-terms{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:1.2rem 0 1.4rem;padding:0}
.x-jbg-terms li{padding:14px 16px;border-radius:16px;background:var(--cream);border:1px solid var(--line)}
.x-jbg-terms b{display:block;font-family:var(--serif);font-weight:600;font-size:1.9rem;line-height:1;color:var(--accent);margin-bottom:.35rem;letter-spacing:-.02em}
.x-jbg-terms span{display:block;font-size:.82rem;line-height:1.4;color:var(--ink-2)}
body.t-javaburn #guarantee .howorder{margin-top:clamp(16px,2.2vh,26px)}
@media (min-width:901px) and (max-height:820px) and (min-height:501px){.x-jbg-copy{padding:22px 32px}.x-jbg-terms{margin:.9rem 0 1rem}.x-jbg-terms li{padding:10px 14px}.x-jbg-terms b{font-size:1.6rem}.x-jbg-copy>p{font-size:.92rem;line-height:1.55}}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){.x-jbg{grid-template-columns:1fr}.x-jbg-fig{min-height:0;aspect-ratio:16/11}.x-jbg-fig img{object-position:50% 30%}}
@media (max-width:520px){.x-jbg-terms{grid-template-columns:1fr}.x-jbg-terms li{display:flex;align-items:center;gap:14px}.x-jbg-terms b{margin:0;min-width:2.6em}}

/* --- final CTA ---------------------------------------------------------------------------------------- */
.x-cta-jb{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(20px,3vw,48px);
  padding:clamp(26px,3.6vw,56px);border-radius:var(--r-xl);color:#fff;box-shadow:var(--sh-3);
  background:radial-gradient(640px 360px at 85% 50%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),linear-gradient(135deg,var(--b700),var(--b900))}
.x-cta-jb::before{content:"";position:absolute;z-index:-1;right:12%;top:50%;width:clamp(240px,26vw,380px);aspect-ratio:1/1;transform:translateY(-50%);border-radius:50%;
  border:12px solid rgba(240,83,43,.12);box-shadow:inset 0 0 0 2px rgba(240,83,43,.1)}
.x-cta-jb .x-mh-k{color:var(--accent-2)}
.x-cta-jb h2{color:#fff;margin:0 0 .7rem;font-size:clamp(1.9rem,3vw,2.9rem);line-height:1.06;max-width:16ch}
.x-cta-jb h2 em{display:block}
.x-cta-jb p{color:rgba(255,241,232,.8);margin:0 0 1.3rem;max-width:48ch}
.x-cta-jb .x-cta-ticks{color:rgba(255,241,232,.8)}
.x-cta-jb .x-cta-ticks li::before{color:var(--accent-2)}
.x-cta-jb-pic{display:grid;place-items:center}
.x-cta-jb-pic img{max-height:clamp(220px,30vw,340px);width:auto;height:auto;max-width:100%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
@media (min-width:901px) and (max-height:820px) and (min-height:501px){.x-cta-jb-pic img{max-height:260px}}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){.x-cta-jb{grid-template-columns:1fr;text-align:center}.x-cta-jb h2,.x-cta-jb p{margin-inline:auto}.x-cta-jb .x-cta-ticks{justify-content:center}.x-cta-jb::before{right:50%;transform:translate(50%,-10%);top:auto;bottom:0}}

/* ==========================================================================
   PRODENTIM — "the bento": a light hero, and every section a grid of
   rounded tiles in mint, strawberry, butter and deep teal
   ========================================================================== */
body.t-prodentim{--pd-pink:#FFE3EA;--pd-mint:#E0F5EE;--pd-butter:#FFF4D9;--pd-sky:#E8F1FD;--pd-r:26px}
.x-bt{position:relative;overflow:hidden;border-radius:var(--pd-r);background:#fff;border:1px solid var(--line);margin:0}
.x-bt-k{display:block;font-family:var(--display);font-weight:800;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#B0294A;margin-bottom:.6rem}

/* --- chip header ---------------------------------------------------------------- */
.x-bchip{display:inline-flex;align-items:center;gap:.55em;padding:.4em .95em .4em .4em;border-radius:99px;background:#fff;border:1px solid var(--line);
  box-shadow:var(--sh-1);font-family:var(--display);font-weight:800;font-size:.74rem;line-height:1.2;color:var(--b700)}
.x-bchip i{width:1.95em;height:1.95em;border-radius:50%;display:grid;place-items:center;font-style:normal;background:color-mix(in srgb,var(--b400) 26%,#fff);font-size:.95em;line-height:1}
.x-bchip--lg i{background:var(--b600)}
.x-bchip--lg{font-size:.8rem}
.x-bh{margin-bottom:clamp(18px,2.6vh,30px)}
.x-bh h2{margin:.85rem 0 0;max-width:23ch}
.x-bh .lead{margin:.7rem 0 0;max-width:60ch}
.x-bh--in{margin-bottom:0}
@media (min-width:901px) and (min-height:501px){body.x-page.t-prodentim .sec .x-bh h2{font-size:clamp(1.62rem,2.35vw,2.3rem);line-height:1.16}}
@media (min-width:901px) and (max-height:820px) and (min-height:501px){
  body.x-page.t-prodentim .sec .x-bh h2{font-size:clamp(1.45rem,2vw,1.85rem)}
  body.x-page.t-prodentim .sec .x-bh .lead{font-size:.92rem;line-height:1.5}
  .x-bh{margin-bottom:16px}.x-bh h2{margin-top:.6rem}
}

/* --- hero: light, with a three-tile bento ------------------------------------------- */
body.t-prodentim .x-pd-hero .hero-copy .x-bchip{align-self:flex-start;margin-bottom:1rem}
body.t-prodentim .x-pd-hero .tick .dot{background:color-mix(in srgb,var(--b400) 20%,#fff);color:var(--b700)}
body.t-prodentim .x-pd-hero .tick{color:var(--ink-2)}
body.t-prodentim .x-pd-hero .proofrow{border-top-color:var(--line)}
body.t-prodentim .x-pd-hero .proofrow span{color:var(--ink-2)}
body.t-prodentim .x-pd-hero .proofrow b{color:var(--ink)}
body.t-prodentim .x-pd-hero .hl-underline{color:var(--accent)}
body.t-prodentim .x-pd-bento{display:grid;place-items:stretch;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);grid-template-rows:minmax(0,1.1fr) minmax(0,.9fr);gap:12px;
  background:none!important;border:0!important;border-radius:0!important;overflow:visible!important;min-height:0}
.x-bt--model{grid-row:1/3;background:#E9D9C2}
.x-bt--model>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:34% 30%}
.x-bt--model::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,44,38,.78) 0%,rgba(3,44,38,0) 42%);pointer-events:none}
.x-bt-badge{position:absolute;z-index:2;top:14px;left:14px;display:inline-flex;align-items:center;gap:.45em;padding:.45em .85em;border-radius:99px;
  background:rgba(255,255,255,.95);color:#12171C;font-size:.72rem;font-weight:800;line-height:1.2;white-space:nowrap;box-shadow:0 8px 22px -10px rgba(0,0,0,.5)}
.x-bt-badge i{font-style:normal}
.x-bt--model figcaption{position:absolute;z-index:2;left:18px;right:18px;bottom:16px;display:flex;flex-direction:column;gap:.2rem}
.x-bt--model figcaption b{font-family:var(--display);font-weight:800;font-size:1.05rem;line-height:1.25;color:#fff}
.x-bt--model figcaption span{font-size:.8rem;line-height:1.4;color:rgba(255,255,255,.8)}
.x-bt--prod{display:grid;place-items:center;border:0;background:radial-gradient(circle at 50% 42%,#fff 0,var(--pd-pink) 58%,#FFD0DC 100%)}
.x-bt--prod img{width:auto;height:auto;max-width:86%;max-height:74%;filter:drop-shadow(0 18px 20px rgba(120,20,50,.22));margin-bottom:14%}
.x-bt-tag{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);white-space:nowrap;padding:.42em .85em;border-radius:99px;background:#fff;
  color:#B0294A;font-family:var(--display);font-weight:800;font-size:.68rem;line-height:1.2;box-shadow:var(--sh-1)}
.x-bt--stat{display:flex;flex-direction:column;justify-content:center;padding:18px 20px;border:0;color:#fff;
  background:radial-gradient(260px 180px at 100% 0,color-mix(in srgb,var(--b400) 55%,transparent),transparent 70%),linear-gradient(150deg,var(--b700),var(--b900))}
.x-bt--stat b{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,4.2vw,3.6rem);line-height:.95;letter-spacing:-.04em}
.x-bt--stat b small{font-size:.55em;margin-left:.04em;color:var(--accent-2)}
.x-bt--stat span{font-size:.86rem;line-height:1.4;margin-top:.45rem;color:rgba(236,255,249,.86)}
.x-bt--stat em{font-style:normal;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;margin-top:.7rem;color:var(--accent-2)}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){
  body.t-prodentim .x-pd-bento{height:clamp(380px,112vw,520px)!important;max-height:none!important;width:100%;max-width:560px;margin-inline:auto}
  .x-bt--stat b{font-size:2.6rem}
}
@media (max-width:420px){.x-bt--stat{padding:14px}.x-bt--stat span{font-size:.78rem}.x-bt-badge{font-size:.64rem}.x-bt-tag{font-size:.6rem}}

/* --- shared bento grid ---------------------------------------------------------------- */
.x-bento{display:grid;gap:14px}
.x-bt--head{border:0;background:none;overflow:visible;display:flex;flex-direction:column;justify-content:center;padding:4px 8px 4px 0}

/* --- 1 why: the fossil paradox --------------------------------------------------------- */
.x-bento--why{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.95fr);grid-template-areas:"head head study straw" "doc doc flip straw"}
.x-bento--why .x-bt--head{grid-area:head}
.x-bt--study{grid-area:study;display:flex;flex-direction:column;padding:20px 22px;border:0;background:var(--pd-mint)}
.x-bt--study p,.x-bt--flip p{margin:0;font-family:var(--display);font-weight:700;font-size:1.08rem;line-height:1.42;color:var(--ink);letter-spacing:-.01em}
.x-bt-foot{margin-top:auto;padding-top:.8rem;font-size:.76rem;line-height:1.4;color:var(--muted)}
.x-bt--straw{grid-area:straw;display:flex;flex-direction:column;justify-content:flex-end;border:0;background:linear-gradient(180deg,#FFF 0,var(--pd-pink) 100%)}
.x-bt--straw img{width:100%;height:auto;flex:1;object-fit:contain;padding:14px 10px 0;min-height:0}
.x-bt--straw figcaption{padding:10px 16px 16px;font-size:.82rem;line-height:1.45;color:#7A1F37;font-weight:600}
.x-bt--doc{grid-area:doc;min-height:220px}
.x-bt--doc>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.x-bt--doc::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,44,38,.82) 0%,rgba(3,44,38,.2) 55%,rgba(3,44,38,0) 100%)}
.x-bt--doc figcaption{position:absolute;z-index:2;left:22px;bottom:20px;max-width:46%;display:flex;flex-direction:column;gap:.25rem}
.x-bt--doc figcaption b{font-family:var(--display);font-weight:800;font-size:1.15rem;color:#fff}
.x-bt--doc figcaption span{font-size:.84rem;line-height:1.45;color:rgba(255,255,255,.82)}
.x-bt--flip{grid-area:flip;display:flex;flex-direction:column;padding:20px 22px;border:0;color:#fff;background:linear-gradient(150deg,var(--b700),var(--b900))}
.x-bt--flip .x-bt-k{color:var(--accent-2)}
.x-bt--flip p{color:#fff}
.x-bt--flip p b{color:#FF9FB4}
.x-bt--flip .x-bt-foot{color:rgba(236,255,249,.7)}
@media (min-width:901px) and (max-height:820px) and (min-height:501px){.x-bt--doc{min-height:190px}.x-bt--study p,.x-bt--flip p{font-size:1rem}}
@media (max-width:1100px){.x-bento--why{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"head head" "study straw" "flip straw" "doc doc"}}
@media (max-width:600px){.x-bento--why{grid-template-columns:1fr;grid-template-areas:"head" "study" "straw" "flip" "doc"}.x-bt--straw img{max-height:260px}.x-bt--doc figcaption{max-width:70%}}

/* --- 2 the strains: three petri dishes + the blend ------------------------------------------ */
.x-dishes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.x-dish{padding:22px 22px 24px;border-radius:var(--pd-r);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);text-align:center}
.x-dish-plate{width:150px;height:150px;margin:0 auto 14px;padding:11px;border-radius:50%;
  background:radial-gradient(circle at 32% 26%,#fff 0,#EAF6F2 55%,#D5ECE5 100%);
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.9),inset 0 0 0 7px rgba(47,191,160,.18),0 20px 30px -18px rgba(3,44,38,.5)}
.x-dish-plate span{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;box-shadow:inset 0 0 0 2px rgba(255,255,255,.75)}
.x-dish-plate img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.08)}
.x-dish h3{font-size:1.1rem;line-height:1.3;margin:0 0 .6rem}
.x-dish h3 i{font-style:italic;margin-right:.1em}
.x-dish ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.x-dish li{padding:.38em .8em;border-radius:99px;background:var(--pd-mint);color:var(--b700);font-size:.78rem;font-weight:600;line-height:1.35}
.x-blend{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;margin-top:16px;padding:14px;border-radius:var(--pd-r);
  background:rgba(255,255,255,.7);border:1px dashed color-mix(in srgb,var(--b400) 50%,var(--line))}
.x-blend-l{padding:0 10px 0 8px;font-family:var(--display);font-weight:800;font-size:.8rem;line-height:1.35;letter-spacing:.06em;text-transform:uppercase;color:var(--b700)}
.x-blend ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.x-blend li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:18px}
.x-blend li img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none}
.x-blend li b{display:block;font-family:var(--display);font-size:.9rem;line-height:1.25;color:var(--ink)}
.x-blend li span{display:block;font-size:.76rem;line-height:1.35;color:var(--ink-2)}
@media (min-width:901px) and (max-height:820px) and (min-height:501px){.x-dish{padding:16px 18px 18px}.x-dish-plate{width:118px;height:118px;padding:9px;margin-bottom:10px}.x-blend{margin-top:12px;padding:10px}.x-blend li img{width:40px;height:40px}}
@media (max-width:1100px){.x-blend{grid-template-columns:1fr}.x-blend ul{grid-template-columns:repeat(2,minmax(0,1fr))}.x-blend-l br{display:none}}
@media (max-width:760px){.x-dishes{grid-template-columns:1fr}.x-dish{display:grid;grid-template-columns:110px minmax(0,1fr);gap:0 16px;text-align:left;align-items:center}
  .x-dish-plate{width:110px;height:110px;grid-row:1/3;margin:0}.x-dish ul{justify-content:flex-start}}
@media (max-width:480px){.x-blend ul{grid-template-columns:1fr}}

/* --- 3 how to take it ------------------------------------------------------------------------------ */
.x-bento--how{grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr);grid-template-areas:"mirror head head" "mirror label chips"}
.x-bt--mirror{grid-area:mirror;min-height:420px}
.x-bt--mirror>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 40%}
.x-bt--mirror figcaption{position:absolute;left:16px;bottom:16px;padding:.45em .9em;border-radius:99px;background:rgba(255,255,255,.94);font-size:.74rem;font-weight:800;color:var(--b700);box-shadow:var(--sh-1)}
.x-bento--how .x-bt--head{grid-area:head;padding:6px 0 6px 10px}
.x-hsteps{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.x-hsteps li{display:flex;flex-direction:column;gap:.5rem;padding:14px 16px;border-radius:20px;background:var(--pd-mint)}
.x-hsteps li:nth-child(2){background:var(--pd-butter)}
.x-hsteps li:nth-child(3){background:var(--pd-pink)}
.x-hsteps b{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#fff;font-family:var(--display);font-weight:800;color:var(--b700);box-shadow:var(--sh-1)}
.x-hsteps span{font-size:.84rem;line-height:1.45;color:var(--ink-2)}
.x-hsteps em{display:block;font-style:normal;font-family:var(--display);font-weight:800;font-size:.98rem;line-height:1.3;color:var(--ink);margin-bottom:.2rem}
.x-bt--label{grid-area:label;padding:20px 22px;border:0;color:#fff;background:linear-gradient(150deg,var(--b700),var(--b900))}
.x-bt--label .x-bt-k{color:var(--accent-2)}
.x-bt--label p{margin:0 0 .6rem;font-size:.86rem;color:rgba(236,255,249,.78)}
.x-bt--label ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.x-bt--label li{position:relative;padding-left:1.6em;font-family:var(--display);font-weight:700;font-size:.98rem;line-height:1.35}
.x-bt--label li::before{content:"\2713";position:absolute;left:0;top:.1em;width:1.2em;height:1.2em;border-radius:50%;display:grid;place-items:center;background:var(--b400);color:#fff;font-size:.7rem;font-weight:900}
.x-bt--chips{grid-area:chips;padding:20px 22px;border:0;background:var(--pd-butter)}
.x-bt--chips .x-bt-k{color:#8A5A00}
.x-bt--chips ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.x-bt--chips li{padding:.42em .85em;border-radius:99px;background:#fff;font-size:.82rem;font-weight:700;color:var(--ink);line-height:1.3;box-shadow:0 1px 0 rgba(0,0,0,.04)}
@media (min-width:901px) and (max-height:820px) and (min-height:501px){.x-bt--mirror{min-height:360px}.x-hsteps li{padding:11px 13px}.x-bt--label,.x-bt--chips{padding:16px 18px}}
@media (max-width:1100px){.x-bento--how{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"head head" "mirror label" "mirror chips"}.x-bento--how .x-bt--head{padding:0}}
@media (max-width:700px){.x-bento--how{grid-template-columns:1fr;grid-template-areas:"head" "mirror" "label" "chips"}.x-bt--mirror{min-height:0;aspect-ratio:4/5}.x-hsteps{grid-template-columns:1fr}}

/* --- 4 reviews ---------------------------------------------------------------------------------------- */
.x-bento--rev{grid-template-columns:minmax(0,.78fr) minmax(0,1fr) minmax(0,1fr);grid-template-areas:"count r1 r2" "count r3 r3"}
.x-bt--count{grid-area:count;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;border:0;color:#fff;
  background:radial-gradient(320px 220px at 100% 0,color-mix(in srgb,var(--accent) 38%,transparent),transparent 70%),linear-gradient(160deg,var(--b700),var(--b900))}
.x-bt--count b{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,4vw,3.6rem);line-height:.95;letter-spacing:-.04em}
.x-bt--count span{margin-top:.5rem;font-size:.9rem;line-height:1.45;color:rgba(236,255,249,.84);max-width:22ch}
.x-bt--count .x-stars{margin-top:.8rem;color:#FFC24B;letter-spacing:.14em;font-size:1.05rem}
.x-rev{display:flex;flex-direction:column;gap:12px;padding:20px 22px;box-shadow:var(--sh-1)}
.x-rev:nth-of-type(1){grid-area:r3}
.x-rev:nth-of-type(2){grid-area:r1}
.x-rev:nth-of-type(3){grid-area:r2}
.x-rev-k{font-family:var(--display);font-weight:800;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#B0294A}
.x-rev blockquote{margin:0;font-family:var(--display);font-weight:700;font-size:1rem;line-height:1.5;letter-spacing:-.01em;color:var(--ink)}
.x-rev figcaption{margin-top:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.x-rev figcaption img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--pd-mint)}
.x-rev figcaption>span{display:flex;flex-direction:column;flex:1;min-width:120px}
.x-rev figcaption b{font-family:var(--display);font-size:.94rem;line-height:1.2;color:var(--ink)}
.x-rev figcaption>span>span{font-size:.78rem;color:var(--muted)}
.x-rev figcaption em{font-style:normal;padding:.35em .75em;border-radius:99px;background:var(--pd-mint);color:var(--b700);font-size:.7rem;font-weight:800;white-space:nowrap}
.x-rev:nth-of-type(1){display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:24px;row-gap:10px;align-items:center}
.x-rev:nth-of-type(1) .x-rev-k{grid-column:1}
.x-rev:nth-of-type(1) blockquote{grid-column:1;grid-row:2;align-self:start}
.x-rev:nth-of-type(1) figcaption{grid-column:2;grid-row:1/3;margin-top:0;align-self:center}
.x-rev-note{margin-top:.9rem}
@media (max-width:1100px){.x-bento--rev{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"count count" "r1 r2" "r3 r3"}.x-bt--count{min-height:200px}}
@media (max-width:700px){.x-bento--rev{grid-template-columns:1fr;grid-template-areas:"count" "r1" "r2" "r3"}.x-rev:nth-of-type(1){display:flex;flex-direction:column;align-items:stretch}}

/* --- 5 the payoff --------------------------------------------------------------------------------------- */
.x-bento--after{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"smile head";align-items:stretch}
.x-bt--smile{grid-area:smile;min-height:420px;border:0}
.x-bt--smile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.x-bento--after .x-bt--head{grid-area:head;padding:10px 0 10px clamp(8px,2vw,28px)}
.x-after-ticks{list-style:none;margin:1.1rem 0 1.2rem;padding:0;display:grid;gap:8px}
.x-after-ticks li{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:16px;background:var(--pd-mint);font-weight:600;font-size:.95rem;line-height:1.4;color:var(--ink)}
.x-after-ticks li:nth-child(even){background:var(--pd-pink)}
.x-after-ticks li::before{content:"\2713";width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;background:#fff;color:var(--b700);font-size:.78rem;font-weight:900}
.x-bento--after .hero-actions{margin:0 0 .7rem}
@media (min-width:901px) and (max-height:820px) and (min-height:501px){.x-bt--smile{min-height:360px}.x-after-ticks li{padding:8px 12px;font-size:.9rem}}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){.x-bento--after{grid-template-columns:1fr;grid-template-areas:"head" "smile"}.x-bt--smile{min-height:0;aspect-ratio:4/3}.x-bento--after .x-bt--head{padding:0}}

/* --- 6 bonuses ------------------------------------------------------------------------------------------ */
.x-bons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.x-bon{display:flex;flex-direction:column;box-shadow:var(--sh-1)}
.x-bon-pic{aspect-ratio:620/448;overflow:hidden;background:var(--pd-mint)}
.x-bon-pic img{width:100%;height:100%;object-fit:cover;display:block}
.x-bon-b{padding:16px 20px 20px}
.x-bon-k{display:block;margin-bottom:.45rem;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#B0294A}
.x-bon-k s{color:var(--muted);font-weight:700}
.x-bon-k b{padding:.25em .6em;border-radius:99px;background:var(--b600);color:#fff;font-size:.9em;margin-left:.2em}
.x-bon h3{font-size:1.08rem;line-height:1.3;margin:0 0 .35rem}
.x-bon p{margin:0;font-size:.88rem;line-height:1.55;color:var(--ink-2)}
@media (min-width:901px) and (max-height:820px) and (min-height:501px){.x-bon-pic{aspect-ratio:620/360}.x-bon-b{padding:12px 16px 16px}.x-bon p{font-size:.84rem;line-height:1.5}}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){.x-bons{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

/* --- 7 packages: bento pricing ---------------------------------------------------------------------------- */
.x-pbento{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:auto auto;gap:14px}
.x-pb{display:flex;flex-direction:column;gap:12px;padding:18px 20px 20px;box-shadow:var(--sh-1)}
.x-pb--best{grid-row:1/3;border:0;color:#fff;box-shadow:var(--sh-3),0 0 0 3px color-mix(in srgb,var(--accent) 55%,transparent);
  background:radial-gradient(520px 320px at 0 0,color-mix(in srgb,var(--b400) 40%,transparent),transparent 70%),linear-gradient(160deg,var(--b700),var(--b900))}
.x-pb-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.x-pb-tag{padding:.45em .9em;border-radius:99px;background:var(--accent);color:#fff;font-family:var(--display);font-weight:800;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.2}
.x-pb-tag--pop{background:var(--b600)}
.x-pb-tag--basic{background:var(--pd-mint);color:var(--b700)}
.x-pb-save{padding:.4em .8em;border-radius:99px;background:var(--pd-butter);color:#7A4F00;font-size:.76rem;font-weight:800;line-height:1.2}
.x-pb--best .x-pb-save{background:rgba(255,194,75,.18);color:#FFD37A}
.x-pb-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:center;flex:1}
.x-pb-row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center}
.x-pb--sm{justify-content:center}
.x-pb--sm .x-pb-row{grid-template-columns:112px minmax(0,1fr) auto}
.x-pb--sm .btn{width:auto;min-width:128px}
.x-pb-pic{display:flex;align-items:center;justify-content:center;border-radius:20px;background:var(--pd-pink);padding:10px;height:128px}
.x-pb-pic img{max-height:100%;max-width:100%;width:auto;height:auto;filter:drop-shadow(0 12px 14px rgba(3,44,38,.2))}
.x-pb--best .x-pb-pic{height:clamp(210px,30vh,280px);padding:0;background:radial-gradient(closest-side,rgba(255,255,255,.16),rgba(255,255,255,0))}
.x-pb--best .x-pb-pic img{max-height:94%;max-width:100%}
.x-pb-pic--duo{display:flex;align-items:flex-end;justify-content:center;gap:0}
.x-pb-pic--duo img{max-height:96px}
.x-pb-pic--duo img+img{margin-left:-16px}
.x-pb-info{display:flex;flex-direction:column;align-items:flex-start}
.x-pb-n{font-family:var(--display);font-weight:800;font-size:1.3rem;line-height:1.15;color:var(--ink)}
.x-pb-sup{font-size:.8rem;color:var(--muted)}
.x-pb-price{display:flex;align-items:flex-start;margin:.35rem 0 .15rem;font-family:var(--display);font-weight:800;font-size:2.5rem;line-height:1;letter-spacing:-.04em;color:var(--ink)}
.x-pb-price sup{font-size:.42em;margin:.25em .05em 0 0;top:0}
.x-pb-price span{align-self:flex-end;font-size:.34em;letter-spacing:0;margin:0 0 .35em .2em;color:var(--muted);font-weight:700}
.x-pb-tot{font-size:.84rem;color:var(--ink-2)}
.x-pb-tot b{color:var(--b600)}
.x-pb--best .x-pb-n,.x-pb--best .x-pb-price{color:#fff}
.x-pb--best .x-pb-sup,.x-pb--best .x-pb-price span,.x-pb--best .x-pb-tot{color:rgba(236,255,249,.78)}
.x-pb--best .x-pb-tot b{color:#8FF0D2}
.x-pb--best .x-pb-price{font-size:3.2rem}
.x-pb--best ul{list-style:none;margin:.8rem 0 1rem;padding:0;display:grid;gap:.35rem}
.x-pb--best li{position:relative;padding-left:1.5em;font-size:.9rem;color:rgba(236,255,249,.88)}
.x-pb--best li::before{content:"\2713";position:absolute;left:0;color:var(--accent-2);font-weight:900}
.x-pb .btn{width:100%}
.x-pb--best .btn{margin-top:auto}
.x-pship{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 22px;margin-top:14px;padding:12px 18px;border-radius:18px;background:rgba(255,255,255,.75);border:1px solid var(--line);font-size:.84rem;color:var(--ink-2)}
.x-pship>b{padding:.3em .7em;border-radius:6px;background:var(--pd-mint);color:var(--b700);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.x-pship span{display:inline-block;line-height:1.5}
.x-pship i{font-style:normal;margin-right:.4em}
.x-pnote{margin-top:.7rem}
body.t-prodentim #packages .x-bh h2,body.t-prodentim #packages .x-bh .lead{max-width:none}
@media (min-width:901px) and (max-height:760px) and (min-height:501px){
  .x-pb--best .btn{padding:.8em 1.2em;font-size:.98rem}
  .x-pb--best ul{gap:.2rem;margin:.4rem 0 .6rem}
  .x-pb--best .x-pb-pic{height:170px}
}
@media (min-width:901px) and (max-height:820px) and (min-height:501px){.x-pb{padding:14px 16px 16px;gap:9px}.x-pb-pic{height:100px}.x-pb--best .x-pb-pic{height:190px}.x-pb-price{font-size:2.2rem}.x-pb--best .x-pb-price{font-size:2.8rem}.x-pb--best ul{margin:.5rem 0 .7rem}.x-pship{margin-top:10px;padding:9px 14px}}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){.x-pbento{grid-template-columns:1fr;max-width:560px;margin-inline:auto}.x-pb--best{grid-row:auto}}
@media (max-width:1100px){.x-pb--sm .x-pb-row{grid-template-columns:104px minmax(0,1fr)}.x-pb--sm .btn{grid-column:1/-1;width:100%}}
@media (max-width:520px){.x-pb-main{grid-template-columns:1fr}.x-pb--best .x-pb-pic{height:190px}.x-pb-row{grid-template-columns:96px minmax(0,1fr)}.x-pb-pic{height:110px}}

/* --- 8 guarantee ------------------------------------------------------------------------------------------ */
.x-bento--guar{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"seal head";padding:clamp(18px,2.4vw,30px);border-radius:var(--pd-r);background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);gap:clamp(20px,3vw,48px);align-items:center}
.x-bt--seal{grid-area:seal;width:clamp(180px,17vw,236px);aspect-ratio:1/1;display:grid;place-items:center;border:0;background:radial-gradient(circle,var(--pd-butter) 0,var(--pd-pink) 70%);border-radius:50%}
.x-bt--seal img{width:86%;height:auto;filter:drop-shadow(0 16px 20px rgba(3,44,38,.25))}
.x-bento--guar .x-bt--head{grid-area:head;padding:0}
.x-bento--guar .x-bt--head p{margin:.8rem 0 1.1rem;font-size:.98rem;line-height:1.65;color:var(--ink-2);max-width:64ch}
.x-bento--guar .x-bt--head .btn{align-self:flex-start}
body.t-prodentim #guarantee .howorder{margin-top:clamp(16px,2.2vh,26px)}
@media (min-width:901px) and (max-height:820px) and (min-height:501px){.x-bt--seal{width:160px}.x-bento--guar .x-bt--head p{font-size:.92rem;line-height:1.55}}
@media (max-width:700px){.x-bento--guar{grid-template-columns:1fr;grid-template-areas:"seal" "head";justify-items:center;text-align:center}.x-bento--guar .x-bh{display:flex;flex-direction:column;align-items:center}.x-bento--guar .x-bt--head .btn{align-self:center}}

/* --- final CTA: a four-tile bento ----------------------------------------------------------------------------- */
.x-cta-pd{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.78fr);grid-template-rows:1fr 1fr;grid-template-areas:"copy pic stat" "copy pic ship";gap:14px}
.x-cta-pd-tile{border-radius:var(--pd-r);position:relative;overflow:hidden}
.x-cta-pd-tile--copy{grid-area:copy;padding:clamp(24px,3vw,44px);color:#fff;display:flex;flex-direction:column;justify-content:center;
  background:radial-gradient(420px 260px at 0 0,color-mix(in srgb,var(--b400) 45%,transparent),transparent 70%),linear-gradient(150deg,var(--b700),var(--b900))}
.x-cta-pd-tile--copy .x-bchip{align-self:flex-start;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff;box-shadow:none}
.x-cta-pd-tile--copy .x-bchip i{background:rgba(255,255,255,.14)}
.x-cta-pd-tile--copy h2{color:#fff;margin:.9rem 0 .6rem;max-width:18ch}
.x-cta-pd-tile--copy p{color:rgba(236,255,249,.82);margin:0 0 1.3rem;max-width:44ch}
.x-cta-pd-tile--copy .btn{align-self:flex-start}
.x-cta-pd-tile--pic{grid-area:pic;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#fff 0,var(--pd-pink) 62%,#FFCCD9 100%)}
.x-cta-pd-tile--pic img{width:82%;height:auto;max-height:88%;object-fit:contain;filter:drop-shadow(0 22px 24px rgba(120,20,50,.25))}
.x-cta-pd-tile--stat,.x-cta-pd-tile--ship{display:flex;flex-direction:column;justify-content:center;padding:18px 20px}
.x-cta-pd-tile--stat{grid-area:stat;background:var(--pd-butter)}
.x-cta-pd-tile--ship{grid-area:ship;background:var(--pd-mint)}
.x-cta-pd-tile--stat b,.x-cta-pd-tile--ship b{font-family:var(--display);font-weight:800;font-size:2.4rem;line-height:1;letter-spacing:-.03em;color:var(--ink)}
.x-cta-pd-tile--stat span,.x-cta-pd-tile--ship span{margin-top:.35rem;font-size:.84rem;line-height:1.4;color:var(--ink-2)}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){.x-cta-pd{grid-template-columns:1fr 1fr;grid-template-rows:auto;grid-template-areas:"copy copy" "pic stat" "pic ship"}.x-cta-pd-tile--pic{min-height:240px}}
@media (max-width:480px){.x-cta-pd{grid-template-columns:1fr;grid-template-areas:"copy" "pic" "stat" "ship"}}

/* --- shared: tighter vendor-steps band on mid-height laptops ------------------ */
@media (min-width:901px) and (max-height:880px) and (min-height:501px){
  body.x-page .howorder .step{padding:16px 20px;gap:.4rem}
  body.x-page .howorder{margin-top:16px!important}
}
@media (min-width:901px) and (min-height:821px) and (max-height:880px){
  .x-jbg-copy{padding:26px 36px}
  .x-jbg-terms{margin:1rem 0 1.1rem}
  .x-prow{padding-block:10px}
  .x-prow .pic{height:88px}.x-prow .pic img{max-height:78px}
  .x-ship{margin-top:12px}
}

@media (min-width:901px) and (max-height:760px) and (min-height:501px){
  .x-prows{gap:9px}
  .x-prow{padding-block:7px}
  .x-prow .pic{height:72px}.x-prow .pic img{max-height:64px}
  .x-prow .per b{font-size:1.85rem}
  .x-jbg-copy{padding:18px 28px}
  .x-jbg h2{font-size:1.6rem;margin-bottom:.5rem}
  .x-jbg-terms{margin:.7rem 0 .8rem}
  .x-jbg-terms b{font-size:1.45rem;margin-bottom:.2rem}
}

/* --- v7.1 final pass: image rows end on one line, mobile hero centring, small fixes ------------------- */
.x-nw{white-space:nowrap}
body.x-page .eyebrow{text-wrap:balance}

/* ProstaVive · the label sheet fills its row, like a specimen on graph paper */
.x-label-fig{display:flex;align-items:baseline;gap:.6rem;margin:0 0 12px;font-size:.78rem;line-height:1.3;color:var(--muted)}
.x-label-fig b{font-family:var(--display);font-weight:800;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--b600)}
@media (min-width:901px) and (min-height:501px){
  .x-label{align-items:stretch}
  .x-label-sheet{display:flex;flex-direction:column;justify-content:center;padding:52px 22px 62px;
    background-color:#fff;background-image:linear-gradient(rgba(15,90,70,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(15,90,70,.06) 1px,transparent 1px);
    background-size:24px 24px;background-position:-1px -1px}
  .x-label-fig{position:absolute;left:22px;top:18px;margin:0}
  .x-label-sheet img{box-shadow:0 18px 36px -22px rgba(10,40,30,.4);border:1px solid var(--line)}
}
/* ProstaVive · life photo takes the copy's height */
@media (min-width:901px) and (min-height:501px){
  .x-life-fig{height:auto;min-height:360px}
  .x-life-fig img{position:absolute;inset:0}
}
/* ProstaVive · phones: 6 tubs, then 3, then 1 · bonus covers sit above their copy */
@media (max-width:900px),(max-height:500px) and (orientation:landscape){.x-price3 .x-pc:first-child{order:1}}
@media (max-width:520px){
  .x-bn{grid-template-columns:1fr;justify-items:center;text-align:center}
  .x-bn .cover{height:180px}
  .x-bn .cover img{max-height:180px;max-width:150px}
}

/* VisiFlora · capsule calendar and the reading photo take the copy's height */
@media (min-width:901px) and (min-height:501px){
  .x-take{align-items:stretch}
  .x-cal{display:flex;flex-direction:column;justify-content:center}
  .x-cal-top{margin-bottom:22px}
  .x-cal-key{margin-top:20px}
  .x-after{align-items:stretch}
  .x-after-fig{display:flex;flex-direction:column}
  .x-after-main{flex:1;aspect-ratio:auto;min-height:340px}
  .x-after-main img{position:absolute;inset:0}
}
/* VisiFlora · final CTA: the rings fade out before they reach the eyebrow */
.x-cta-vf p{text-wrap:balance}
.x-cta-vf-stage{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 46%,transparent 66%);mask-image:linear-gradient(180deg,#000 0,#000 46%,transparent 66%)}

/* Java Burn · verdict cards end level with the glance panel */
@media (min-width:1001px) and (min-height:501px){
  .x-verdict{align-items:stretch}
  .x-verdict-main{display:flex;flex-direction:column}
  .x-pc2{flex:1}
}
/* Java Burn · ritual and made photos take the copy's height */
@media (min-width:901px) and (min-height:501px){
  .x-rit{align-items:stretch}
  .x-rit-fig{display:flex;flex-direction:column;margin:0}
  .x-rit-ph{position:relative;flex:1;min-height:340px;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3)}
  .x-rit-ph img{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;border-radius:0;box-shadow:none}
  .x-made{align-items:stretch}
  .x-made-fig{position:relative;margin:0;min-height:320px;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3)}
  .x-made-fig img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none;object-position:62% 50%}
}

/* ProDentim · guarantee: a third tile with the refund steps */
.x-bento--guar{grid-template-columns:auto minmax(0,1fr) minmax(0,.72fr);grid-template-areas:"seal head steps"}
.x-bt--gsteps{grid-area:steps;align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:20px 22px;border:0;color:#fff;
  background:linear-gradient(150deg,var(--b700),var(--b900))}
.x-bt--gsteps .x-bt-k{color:var(--accent-2)}
.x-bt--gsteps ol{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.x-bt--gsteps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:center;font-size:.9rem;line-height:1.45;color:rgba(255,255,255,.92)}
.x-bt--gsteps li b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);color:#fff;font-family:var(--display);font-weight:800;font-size:.8rem}
@media (max-width:1100px){
  .x-bento--guar{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"seal head" "steps steps"}
  .x-bt--gsteps ol{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:700px){
  .x-bento--guar{grid-template-columns:1fr;grid-template-areas:"seal" "head" "steps"}
  .x-bt--gsteps{justify-self:stretch;text-align:left}
  .x-bt--gsteps ol{grid-template-columns:1fr}
}

/* all four · the shared sheet sets package fine print to nowrap; let it wrap instead of spilling sideways */
@media (min-width:901px) and (min-height:501px){body.x-page #packages .fine{white-space:normal;text-wrap:balance}}

/* all four · phones: the hero reads as one centred column */
@media (max-width:900px),(max-height:500px) and (orientation:landscape){
  body.x-page .hero-copy .eyebrow{justify-content:center}
  body.t-prodentim .x-pd-hero .hero-copy .x-bchip{align-self:center}
  body.x-page .hero-copy .ticks{align-self:center;justify-items:start;text-align:left}
}

/* --- utilities (shared) ---------------------------------------------------------------------- */
.x-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:560px){.x-hide-sm{display:none}}


/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .x-path::before,.x-seal-ring,.x-orbit-ring,.x-orbit-prod,.x-axis-line::after,.x-cal-grid i.today,.x-gsplit-seal::before,.x-cta-vf-stage .r2,.x-jb-hero-card img{animation:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   v7.3 — CLIENT ROUND, 11 Sep (Ramanathan's annotated screenshots)
   Two asks, repeated across ~20 shots:
     (a) "put this in one line"  — every section h2 was capped at 21-23ch,
         which is what forced the two-line wrap. Caps lifted.
     (b) "the marked need to go below ... in one or two line" — the intro
         paragraph sat in a second column to the RIGHT of the heading. The
         section head now stacks: heading first, full width, intro under it.
   Headings get LESS tall, never more, so section-fit can only improve.
   ══════════════════════════════════════════════════════════════════════ */

/* (b) VisiFlora — "Four jobs, one capsule", "What customers report",
   "Three guides with every package", "Every package includes all three
   ebooks", "Headlights, fine print, the 4 p.m. squint" */
.x-sh{grid-template-columns:1fr}
.x-sh .lead{justify-self:start;margin-top:.7rem;max-width:78ch}

/* (a) one-line headings — ProstaVive, VisiFlora, Java Burn, ProDentim */
.x-sh h2,
.x-mh h2,
.x-bh h2,
.x-hd h2{max-width:44ch}
.x-hd{max-width:none}

/* ProDentim #how — "do not expad beyond pink box": hold the heading to the
   width of the three-step row it sits above. */
body.t-prodentim #how .x-bh h2{max-width:40ch}

/* "one line" on the two headings that sit in a narrow column and were only
   3-5% too wide for it. Anything wider than that keeps his own fallback
   ("if not then move tight to second line"). */
body.t-prodentim #guarantee .x-bh h2{font-size:clamp(1.36rem,1.88vw,1.74rem)}
body.x-page.t-javaburn #ritual .x-mh h2{font-size:clamp(1.55rem,2.16vw,2.07rem)}

/* Java Burn hero — "The model image is to far from the message, need to move
   slightly INside": the cover was focused at 72% across, pushing the man to
   the far right. Pull the focal point inward toward the copy.            */
.x-jb-cover img{object-position:58% 42%!important}

/* Java Burn final CTA — "Put the bottles in center": the glow ring was pinned
   at right:12% while the bottles sit in the centre of the .85fr column, so
   the two never lined up. Centre the ring on the bottles, and centre the
   bottles in their own panel. */
.x-cta-jb::before{right:21.25%}
.x-cta-jb-pic{justify-items:center;align-items:center}
.x-cta-jb-pic img{margin-inline:auto;display:block}

/* Java Burn hero — the worldwide-shipping fact made the facts row wrap onto a
   second line and broke the divider rhythm. Tighten so all four sit on one. */
@media (min-width:901px) and (min-height:501px){
  .x-jb-facts li{padding:0 15px}
  .x-jb-facts b{font-size:1.06rem}
  .x-jb-facts span{font-size:.72rem}
}
/* Java Burn final CTA — final alignment of the glow ring onto the bottles. */
.x-cta-jb::before{right:19%}

/* Stacking the section head (his "below the heading" ask) adds the lead's
   height to every section. Claw it back out of the head's own spacing so the
   sections keep fitting one screen. */
.x-sh{margin-bottom:clamp(12px,1.7vh,20px);padding-bottom:clamp(9px,1.1vh,13px)}
.x-sh .lead{margin-top:.34rem}
body.x-page .sec .x-sh .lead{line-height:1.45}

/* VisiFlora runs the tallest three sections; recover the last of the height
   the stacked head cost, inside the sections themselves. */
@media (min-width:901px) and (min-height:501px){
  body.t-visiflora #system .x-sysgrp,
  body.t-visiflora #system .ing{padding-block:clamp(10px,1.2vh,15px)}
  body.t-visiflora #proof .x-vfq{padding:clamp(14px,1.7vw,20px)}
  body.t-visiflora #packages .x-cmp td,
  body.t-visiflora #packages .x-cmp th{padding-block:clamp(7px,.85vh,11px)}
}

/* Java Burn final CTA — "Need to be inside the circle". The ring was centred
   142px left of the bottles at 1470px (ring centre 782 vs image centre 924),
   because `right` positions its EDGE while the bottles sit on the pic
   column's centre. Anchor the ring's own centre to that column and widen it
   so the bottles sit inside it rather than across its edge. */
.x-cta-jb::before{right:23%;width:clamp(300px,30vw,440px);transform:translate(50%,-50%)}

/* "I wanted the model to move little in" — 72% was the original, 58% was not
   far enough for him; bring the subject properly toward the copy. */
.x-jb-cover img{object-position:45% 42%!important}

/* ProDentim hero on phones — "Mobile view is messed up". The 2x2 bento kept
   its columns at 390px, so the model cell was ~200px wide and the 880x1100
   portrait got cropped to a sliver with her face cut off at the edge. Give her
   the full width at a sane aspect, then sit the product and stat tiles
   side by side underneath. */
@media (max-width:600px){
  body.t-prodentim .x-pd-bento{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:auto auto;
    height:auto!important;
  }
  body.t-prodentim .x-pd-bento .x-bt--model{grid-column:1/-1;aspect-ratio:4/3}
  /* retuned 15 Sep for m-prodentim-8: the tighter crop sits the smile lower in
     the frame, and at 46% the 4:3 mobile tile cut it off behind the caption. */
  body.t-prodentim .x-pd-bento .x-bt--model img{object-position:50% 64%}
}

/* ── v8.0 · client round, 15 Sep — five blocks he circled as "put this in one line"
   Every one of them is a max-width cap or a fluid font ceiling that outgrows its
   own column above ~1500px, NOT copy that is too long. Never shorten the text. */

/* Java Burn "Why a serum, not a powder" — the h2 kept growing to 44px inside a
   506px column, so it wrapped on any monitor wider than ~1500px. Cap the ceiling. */
body.x-page.t-javaburn .sec .x-serum .x-mh h2{font-size:clamp(1.9rem,2.8vw,2.4rem)}

/* ProstaVive "What else is in the scoop" — the copy column was the narrow half of
   .x-label (509px, of which the 05 numeral eats 88). Even the halves: the label
   photo scales, the heading cannot. */
body.t-prostavive .x-label{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}

/* ProDentim bonus-guides lead — capped at 60ch (660px) while needing 859px. */
body.t-prodentim #bonuses .x-bh .lead{max-width:none}

/* VisiFlora "Every package includes all three ebooks" lead — capped at 78ch (858px)
   while needing 912px, so it broke one word onto a second line. */
body.t-visiflora #packages .x-sh .lead{max-width:none}

/* Java Burn pricing lead — he asked for "one line and half second line", so this one
   is NOT meant to be a single line: 84ch lands it at roughly a line and a half. */
body.t-javaburn #packages .x-mh .lead{max-width:84ch}

/* ProDentim hero — the model tile turns into a tall narrow strip on big screens, and
   the old 34% put the left half of the smile outside it. Centre the face instead.
   (Paired with m-prodentim-8: 1180x1700 off the 5792x8688 original, de-hazed, so it
   is no longer a 1.19x upscale at 2x DPR. Client, 15 Sep: "sharper image with
   clearer smiling image".) */
@media (min-width:601px){
  body.t-prodentim .x-pd-bento .x-bt--model>img{object-position:42% 33%}
}