/* myvisivra.com — Visivra, U.S. stocking partner desk.
   Design slot, row 302 (batch8_assignments.py): Cormorant Garamond / Heebo, a
   deep olive-tinted cream ground, a two-tier header whose lower tier is inset
   and tinted, a footer that opens on a tinted seal band above a darker block of
   destinations, and the focus-pull hero motif.

   The ground is the point of difference. The bottle is white-and-azure and every
   other blue desk on this estate sits it on a cool white or steel page; this one
   puts it on warm olive cream, which is where the vendor's own gold-framed
   "INSIDE VISIVRA" artwork lives. Azure on olive cream is a pairing nothing else
   in the estate uses.

   The LOOKS FOR reference (alkaslean.com) contributed its component register and
   nothing else: product LEFT in a 50/50 split, pill buttons, circular check
   bullets, large-radius hairline cards, generous section padding.

   Everything above CRITICAL-END is inlined into every page head. */

/* ---- tokens */
:root{
  --ink:#1e2218;             /* olive-black body text */
  --ink-2:#4b5142;           /* secondary */
  --ink-3:#6e7562;           /* captions, meta */
  --azure:#1478b1;           /* the label's band blue */
  --azure-d:#0f5c8b;         /* deep, for type on light */
  --azure-l:#6fbfe2;         /* the eye glyph */
  --wash:#e4f0f8;            /* azure wash */
  --olive:#6a6a3c;           /* the artwork's gold-olive trim */
  --olive-d:#4a4a29;
  --umber:#2a2c20;           /* the footer's darker block */
  --umber-2:#3a3d2d;
  --paper:#f2efe2;           /* the page: deep olive-tinted cream */
  --panel:#fffdf6;
  --tint:#e8e4d2;
  --line:#dcd7c2;
  --line-2:#c4bda3;
  --good:#4a7a3f;
  --warn:#8a6a10;
  --wrap:1180px;
  --measure:740px;
  --measure-wide:960px;
  --radius:10px;
  --radius-lg:18px;
  --pill:999px;
  --shadow:0 1px 2px rgba(30,34,24,.05), 0 12px 32px rgba(30,34,24,.07);
  --shadow-lg:0 24px 62px rgba(30,34,24,.18);
  --navh:112px;
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --text:"Heebo",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---- base */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  overflow-x:clip;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:17px;line-height:1.75;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--azure-d);text-underline-offset:3px}
a:hover{color:var(--olive-d)}
/* Cormorant Garamond is a high-contrast old-style face: it needs SIZE and it
   needs weight, or it turns grey at a caption scale. So the display family is
   used for h1/h2 only and the sub-heads stay in Heebo (typography.md). */
h1,h2{font-family:var(--display);color:var(--ink);font-weight:700;line-height:1.1;margin:0 0 .42em}
h3,h4{font-family:var(--text);color:var(--ink);font-weight:700;line-height:1.3;margin:0 0 .5em}
h1{font-size:clamp(2.15rem,1.5rem + 2.7vw,3.7rem);letter-spacing:-.015em}
h2{font-size:clamp(1.8rem,1.3rem + 1.7vw,2.7rem);letter-spacing:-.01em}
h3{font-size:1.14rem}
h4{font-size:1.02rem}
p,li{font-size:1.0625rem}
p{margin:0 0 1.05em}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.skip{position:absolute;left:-9999px;top:0;background:var(--umber);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--azure);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--text);font-size:0.8438rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--azure-d);
  margin:0 0 10px;
}
.eyebrow::before{
  content:"";width:9px;height:9px;border-radius:50%;
  box-shadow:0 0 0 3px var(--wash);background:var(--azure);flex:0 0 auto;
}

/* ---- buttons: full pills, after the reference's CTA register */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:15px 34px;
  font-family:var(--text);font-size:1rem;font-weight:700;letter-spacing:.01em;
  border:0;border-radius:var(--pill);cursor:pointer;text-decoration:none;
  background:var(--umber);color:#fff;
  box-shadow:0 10px 26px rgba(42,44,32,.22);
  transition:filter .18s ease,transform .18s ease;
}
.btn:hover{filter:brightness(1.14);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--cyan{background:linear-gradient(104deg,var(--azure-d) 0%,var(--azure) 100%);
  box-shadow:0 10px 26px rgba(20,120,177,.3)}
.btn--lg{min-height:62px;padding:17px 42px;font-size:1.06rem}
.btn--ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--tint);color:var(--ink);filter:none}
.btn--wide{width:100%}

/* ---- header: two tiers, the lower one inset and tinted */
.nav{position:sticky;top:0;z-index:100;background:var(--panel);box-shadow:0 1px 0 var(--line)}
/* padding-BLOCK, never the shorthand: this element also carries .wrap, and
   `padding:14px 0` would set padding-inline to 0 and wipe the page gutter.
   Invisible above the container max-width, and no overflow test can see it
   (pitfall 46). */
.nav__top{display:flex;align-items:center;gap:20px;padding-block:11px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand__glyph{width:36px;height:36px;flex:0 0 auto}
/* Size the mark by ELEMENT as well as by class. brand_marks.py rewrites the
   <svg> inside .brand and does not carry class="brand__glyph" onto the
   replacement, so a rule keyed only to that class stops applying the moment the
   tool runs and the glyph renders at its intrinsic size (pitfall 16). */
.brand>svg{width:36px;height:36px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.06}
.bw b{font-family:var(--display);font-size:1.6rem;font-weight:700;letter-spacing:-.01em}
.bw b em{font-style:normal;color:var(--azure-d)}
.bw small{font-size:0.9062rem;font-weight:500;color:var(--ink-3);letter-spacing:.02em}
.nav__rail{margin-left:auto;display:flex;align-items:center;gap:18px}
.nav__price{text-align:right;line-height:1.2}
.nav__price b{display:block;font-family:var(--display);font-size:1.32rem;font-weight:700;color:var(--ink)}
.nav__price span{font-size:.78125rem;font-weight:500;color:var(--ink-3)}
.nav__buy{min-height:46px;padding:11px 24px;font-size:.94rem}
.burger{
  display:none;width:48px;height:46px;background:transparent;border:1px solid var(--line-2);
  border-radius:var(--pill);cursor:pointer;padding:12px 11px;
}
.burger span{display:block;height:2px;background:var(--ink);margin:0 0 5px;border-radius:2px}
.burger span:last-child{margin:0}
/* tier two: a tinted bar INSET from the page edge rather than run full-bleed */
.nav__strip{background:var(--panel);padding-block:0 8px}
.nav__inset{background:var(--tint);border:1px solid var(--line);border-radius:var(--pill);padding-block:1px}
.menu{
  display:flex;flex-wrap:wrap;gap:0 26px;list-style:none;margin:0;padding:0 22px;
  align-items:center;min-height:38px;
}
.menu a{
  display:inline-block;padding:9px 0;font-family:var(--text);
  font-size:.9375rem;font-weight:600;color:var(--ink-2);text-decoration:none;
  border-bottom:2px solid transparent;
}
.menu a:hover{color:var(--ink)}
.menu a[aria-current="page"]{color:var(--azure-d);border-bottom-color:var(--azure)}
.menu__more{display:none}

/* ---- hero: bottle LEFT, copy RIGHT, in the reference's 50/50 register */
.hero{position:relative;padding:52px 0 64px;overflow-x:clip}
.hero__grid{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:52px;align-items:center}
.hero__copy{display:flex;flex-direction:column;min-width:0}
.hero h1{margin:0 0 18px}
.hero h1 em{font-style:normal;color:var(--azure-d)}
.answer{
  background:var(--panel);border:1px solid var(--line);
  border-left:4px solid var(--azure);border-radius:0 var(--radius) var(--radius) 0;
  padding:22px 26px;margin:0 0 18px;box-shadow:var(--shadow);
}
.answer p{margin:0 0 .75em;font-size:1.062rem}
.answer p:last-child{margin:0}
.hero__road{font-size:1rem;color:var(--ink-2);margin:0 0 22px;max-width:58ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 22px}
.hero__sub{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 18px;font-size:0.9688rem;font-weight:600;color:var(--ink-2)}
.hero__sub span{display:inline-flex;align-items:center;gap:7px}
/* the reference's circular filled check, kept as the house tick */
.factpills{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:0 0 20px;padding:0}
.factpills li{
  font-size:0.9062rem;font-weight:500;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line);padding:7px 16px;border-radius:var(--pill);
}
.factpills li b{color:var(--ink);font-weight:700}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.figures div{background:var(--panel);border:1px solid var(--line);padding:14px 16px;border-radius:var(--radius)}
.figures b{display:block;font-family:var(--display);font-size:1.86rem;font-weight:700;color:var(--azure-d);line-height:1}
.figures span{display:block;font-size:0.9062rem;font-weight:500;color:var(--ink-3);margin-top:5px}
/* the product stands free on the ground: no card, so the motif rings behind it
   are visible rather than hidden under an opaque panel (design-system rule 6) */
.hero__media{position:relative;align-self:center;min-width:0}
.hero__card{position:relative;z-index:2;text-align:center;padding:10px}
.hero__card img{width:100%;max-width:400px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 30px 40px rgba(30,34,24,.28))}
.hero__cap{margin:18px 0 0;font-size:.8125rem;font-weight:500;color:var(--ink-3);text-align:center}

/* ---- inner page head */
.phead{padding:38px 0 14px;background:var(--panel);border-bottom:1px solid var(--line)}
.crumbs{font-size:0.9062rem;color:var(--ink-3);margin:0 0 14px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--azure-d)}
.phead h1{margin:0 0 16px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide)}
.lead{font-size:1.14rem;color:var(--ink-2);max-width:var(--measure)}

/* ---- topline strip: the five trust facts, above the navigation.
   Role, lot, dose and count, guarantee, order phone. It exists so the NAV does
   not have to carry them: getexitide shipped without one, pushed the lot into
   the menu as a chip, crowded the navigation and still left the other four
   facts off the page (hero.md). Sits ABOVE CRITICAL-END because it is the first
   thing painted; appended to the end of the stylesheet it would load async and
   flash unstyled at the very top of the page. */
.util{background:var(--umber);color:#c9cbb6;font-size:.8125rem;line-height:1.5}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding-block:9px}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.util__item+.util__item::before{content:"";width:3px;height:3px;border-radius:50%;
  background:#6f7458;flex:0 0 auto;margin-right:11px}
.util b{color:#f1f0e2;font-weight:700}
.util a{color:inherit;text-decoration:none}
.util a:hover{text-decoration:underline}
@media (max-width:760px){
  /* Five items wrap to three lines and eat 103px of an 844px screen (hero.md).
     Keep role, guarantee and phone; the lot and the count are on the pages that
     need them. */
  .util__item--trim{display:none}
  .util__row{gap:4px 14px}
}


/* ---- hero motif -- focus-pull ---------------------------------------- */
.hero{position:relative;overflow-x:clip;overflow-y:visible}
:where(.hero__media){position:relative}
.hero__card{position:relative;z-index:2}
.hero__card img{position:relative;z-index:3}
.hero{background:radial-gradient(118% 84% at 26% 34%,#fbfbf7,#f6f4eb 40%,#e3e1d4)}.hero__card{animation:vsFloat 8.5s ease-in-out infinite}.hero__media::before{content:'';position:absolute;left:50%;top:50%;width:104%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(126,181,212,0.46),rgba(20,120,177,0.16) 58%,transparent 72%);filter:blur(24px);animation:vsFocus 9s ease-in-out infinite;z-index:0;pointer-events:none}.hero__media::after{content:'';position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1px solid rgba(20,120,177,0.42);box-shadow:0 0 0 14px rgba(126,181,212,0.10) inset;animation:vsIris 9s ease-in-out infinite;z-index:1;pointer-events:none}@keyframes vsFocus{0%,100%{filter:blur(26px);opacity:.48;scale:1.04}46%{filter:blur(7px);opacity:.92;scale:.96}}@keyframes vsIris{0%,100%{scale:1;opacity:.24}46%{scale:.72;opacity:.72}}@keyframes vsFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/* --- hero responsive rules, copied into the critical block
   A phone painted the desktop hero from the inline block and then
   jumped when the async sheet arrived -- 692px on one site, CLS 0.95.
   These are COPIES: the originals stay below, so the cascade is
   unchanged and the first paint is already correct. */
@media (max-width:980px){
  /* Stacked, the bottle sits between the H1 and the Quick Answer, so every pixel it takes pushes the answer down a phone screen. Capped here rather than left at the column width: measured at 390, an uncapped shot put the Quick Answer at y=987 against the 850 target in hero.md. */ .hero__card img{max-width:300px}
  .hero__cap{margin-top:12px}
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:6px 0 20px}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
}
@media (max-width:760px){
  .hero{padding:28px 0 46px}
  .hero__card{padding:6px}
  .hero__card img{max-width:264px}
}
@media (min-width: 981px){
  .hero__media{position: sticky; top: calc(var(--navh, 112px) + 14px); align-self: start; min-height: calc(100vh - var(--navh, 112px) - 28px); min-height: calc(100svh - var(--navh, 112px) - 28px); display: flex; flex-direction: column; align-items: center; justify-content: center;}
}
@media (prefers-reduced-motion: reduce){
  .hero__media{position: relative; top: 0; min-height: 0;}
}

/*!CRITICAL-END*/
/* ---- sections */
.sec{padding:74px 0;position:relative}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--umber);color:#d2d4c1}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#c3c6b0}
.sec--dark .eyebrow{color:var(--azure-l)}
.sec--dark .eyebrow::before{background:var(--azure-l);box-shadow:0 0 0 3px rgba(111,191,226,.18)}
.sec--dark a{color:var(--azure-l)}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec--center .eyebrow{justify-content:center}
.sec__head{max-width:var(--measure);margin:0 0 30px}
.sec__head h2{margin:0 0 10px}
.sec__head p{color:var(--ink-2);margin:0;font-size:1.08rem}
.sec--dark .sec__head p{color:#c3c6b0}

/* one measure, centred; multi-column components keep the full wrap */
@media (min-width:1060px){
  .sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,.sec>.wrap>p,
  .sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
  .sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.pullquote,
  .sec>.wrap>blockquote{max-width:var(--measure);margin-inline:auto}
  .sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps{
    max-width:var(--measure-wide);margin-inline:auto}
}

/* ---- lists: the reference's circular filled check */
.ticks{list-style:none;margin:0 0 1.1em;padding:0}
.ticks li{position:relative;padding-left:36px;margin:0 0 .62em}
.ticks li::before{content:"";position:absolute;left:0;top:.36em;width:21px;height:21px;
  border-radius:50%;background:var(--good)}
.ticks li::after{content:"";position:absolute;left:7px;top:.66em;width:6px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.sec--dark .ticks li::before{background:var(--azure)}

/* ---- tables */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:1rem}
th,td{padding:14px 17px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--text);font-weight:700;color:#fff;background:var(--umber);font-size:.9375rem}
tbody tr:nth-child(even){background:#faf8ee}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--ink)}
.tnote{font-size:.9375rem;color:var(--ink-3);margin:-.4em 0 1.2em}

/* ---- numbered steps */
.steps{display:grid;gap:16px;margin:0 0 1.2em;counter-reset:s}
.step{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 24px 22px 74px}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:22px;top:21px;width:38px;height:38px;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--azure),var(--azure-d));color:#fff;
  font-family:var(--display);font-weight:700;font-size:1.22rem;border-radius:50%;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: large radius, hairline, lift on hover */
.grid{display:grid;gap:20px}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* A grid ITEM defaults to min-width:auto, which floors at min-content, so a
   card holding a table or a nowrap chip refuses to shrink and overflows the
   phone silently (pitfall 46 family). */
.grid>*{min-width:0}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 24px 24px;box-shadow:var(--shadow)}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:var(--umber-2);border-color:#4c5040;box-shadow:none}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:1px solid #c5ddec;border-radius:var(--radius-lg);padding:22px 24px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--azure-d)}
.callout p:last-child{margin:0}
.alert{background:#fbf4e3;border:1px solid #ecdcb4;border-left:4px solid var(--warn);border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px;margin:0 0 1.2em}
.alert b:first-child{display:block;margin-bottom:6px;color:var(--warn)}
.alert p:last-child{margin:0}
.pullquote{font-family:var(--display);font-size:1.52rem;font-weight:600;line-height:1.42;color:var(--ink);border-left:4px solid var(--azure);padding:4px 0 4px 24px;margin:0 0 1.2em}
.pullquote cite{display:block;font-family:var(--text);font-size:.9375rem;font-style:normal;font-weight:400;color:var(--ink-3);margin-top:8px}
.keypoints{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--azure);border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px;margin:0 0 1.2em}
.keypoints>b{display:block;margin-bottom:8px}
.keypoints ul{margin:0;padding-left:20px}

/* ---- image beside copy */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;margin:0 0 1.2em}
.split--flip .split__img{order:2}
/* A grid item's default min-width is auto, which floors at MIN-CONTENT. A
   .tablewrap holding a 520px-min table therefore keeps its column 520px wide
   however narrow the grid is. min-width:0 is the fix, and it belongs on the
   items at every width rather than only in the media query. */
.split__img,.split__body{min-width:0}
.split__img img{width:100%;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel)}
.split__body p:last-child{margin:0}

/* ---- stat band */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;text-align:center}
.stats>*{min-width:0}
.stats div b{display:block;font-family:var(--display);font-size:2.6rem;font-weight:700;color:#fff;line-height:1}
.stats div span{display:block;font-size:.9375rem;color:#b6b9a3;margin-top:6px}

/* ---- the trial amount beside a label column with nothing in it */
.versus{display:grid;grid-template-columns:1.05fr .85fr 1.4fr;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--panel);margin:0 0 1.2em}
.versus>*{min-width:0}
.versus>div{padding:14px 17px;border-bottom:1px solid var(--line);font-size:.98rem}
.versus>div:nth-child(3n+1){font-weight:700;background:#faf8ee}
.versus__h{background:var(--umber)!important;color:#fff;font-family:var(--text);font-weight:700;font-size:.92rem}

/* ---- ingredient cards */
.inglist{display:grid;gap:18px}
/* Same family as the .split fix above: .ingcard is a grid ITEM and .ing__dose
   is white-space:nowrap, so without min-width:0 the chip sets the column's
   floor and the card cannot shrink to a phone. */
.inglist>*{min-width:0}
.ingcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 26px;box-shadow:var(--shadow)}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 10px}
.ingcard__top h3{margin:0}
.ing__latin{font-size:.9375rem;font-style:italic;color:var(--ink-3)}
.ing__dose{margin-left:auto;font-size:.875rem;font-weight:700;color:var(--ink);background:var(--tint);border:1px solid var(--line-2);padding:4px 14px;border-radius:var(--pill);white-space:nowrap}
.ingcard p:last-child{margin:0}

/* ---- add-to-cart pricing panel */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch;margin:0 0 20px}
.prices>*{min-width:0}
.card--pack{display:flex;flex-direction:column;background:var(--panel);border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--line),var(--shadow);border-radius:var(--radius-lg);overflow:hidden;position:relative;padding:0}
/* No lift on the featured card: a negative margin makes it taller than its
   siblings and trips the rule that a pricing row shares one height and one
   button baseline (responsive.md). The border, the head band and the flag
   already make it unmistakable. */
.card--pack.featured{border-color:var(--azure);box-shadow:var(--shadow-lg)}
.pack__head{background:var(--tint);border-bottom:1px solid var(--line);padding:15px 22px;display:flex;align-items:center;gap:10px}
.card--pack.featured .pack__head{background:linear-gradient(104deg,var(--azure-d),var(--azure));border-bottom-color:var(--azure-d)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--display);font-size:1.42rem;font-weight:700}
.pack__head span{font-size:.8125rem;font-weight:600;color:var(--ink-3);margin-left:auto}
.pack__flag{position:absolute;right:0;top:0;background:var(--azure);color:#fff;font-family:var(--text);font-size:0.8438rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 14px;z-index:3;border-radius:0 0 0 var(--radius)}
.pack__body{display:flex;flex-direction:column;flex:1;padding:22px 22px 24px}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,176px);object-fit:contain;margin-inline:auto;margin-bottom:16px}
.pack__per{font-family:var(--display);font-size:3rem;font-weight:700;color:var(--ink);line-height:1;text-align:center}
.pack__per sup{font-size:1.1rem;font-weight:700;top:-.8em}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:600;color:var(--ink-3);margin:6px 0 14px}
.pack__tot{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0 0 14px;font-size:1rem}
.pack__tot b{font-weight:700}
.pack__was{color:var(--ink-3);text-decoration:line-through;font-weight:500}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:.9375rem}
.pack__perks li{position:relative;padding-left:26px;margin:0 0 7px;color:var(--ink-2)}
.pack__perks li::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;border-radius:50%;background:var(--good)}
.pack__perks li::after{content:"";position:absolute;left:5.4px;top:.62em;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.card--pack>.pack__body>.btn{margin-top:auto}
.pack__marks{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;margin:12px 0 0;font-size:.8125rem;color:var(--ink-3)}
.buy__note{font-size:.9375rem;color:var(--ink-3);text-align:center;margin:0}

/* ---- captioned images */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:0 0 1.2em}
.shots>*{min-width:0}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.shots img{width:100%}
.shots figcaption{padding:18px 20px}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--ink)}
.shots figcaption span{font-size:.9375rem;color:var(--ink-2)}
figure.portrait img{width:var(--figw,320px);margin-inline:auto}

/* ---- seal wall */
.badgewall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:0 0 1.2em}
.badgewall>*{min-width:0}
.badgewall figure{margin:0;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 18px}
.badgewall img{width:74px;height:74px;object-fit:contain;margin:0 auto 12px}
.badgewall b{display:block;font-size:.98rem;margin-bottom:5px;color:var(--ink)}
.badgewall span{font-size:.875rem;color:var(--ink-2)}

/* ---- star distribution */
.meter{margin:0 0 1.2em}
.meter__row{display:grid;grid-template-columns:76px 1fr 52px;gap:12px;align-items:center;margin:0 0 9px;font-size:.9375rem}
.meter__row>*{min-width:0}
.meter__bar{height:10px;background:var(--line);border-radius:var(--pill);overflow:hidden}
.meter__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--azure-l),var(--azure-d))}
.stars{color:var(--olive);letter-spacing:1px}
.stars i{font-style:normal;opacity:.34}

/* ---- FAQ. Padding on <summary>, which is the click target (pitfall 73). */
.faq{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--panel);margin:0 0 1.2em}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:18px 50px 18px 22px;cursor:pointer;position:relative;list-style:none;font-family:var(--text);font-weight:600;font-size:1.06rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:22px;top:50%;translate:0 -50%;font-size:1.4rem;font-weight:400;color:var(--azure-d)}
.faq details[open] summary::after{content:"\2212"}
.faq__body{padding:0 22px 18px}
.faq__body p:last-child,.faq__body ul:last-child{margin-bottom:0}

/* ---- references and byline */
.refs{margin:0 0 1.2em}
.refs ol{padding-left:22px;margin:0}
.refs li{font-size:1.062rem;color:var(--ink-2);margin:0 0 .6em}
/* The reference list prints each source's full URL as the link TEXT, and a URL
   is one unbreakable token; at 390 that pushed a single <a> past the viewport
   on eleven pages of another site, clipped and unscrollable. `anywhere` also
   lowers the element's min-content, which is what stops the ancestor being
   sized by the longest URL in the list. */
.refs li,.refs li a{overflow-wrap:anywhere}
.byline{display:flex;gap:20px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--azure);border-radius:0 var(--radius) var(--radius) 0;padding:24px 26px;margin:0 0 1.2em}
.byline__mark{flex:0 0 auto;width:56px;height:56px;display:grid;place-items:center;background:linear-gradient(140deg,var(--azure),var(--azure-d));color:#fff;font-family:var(--display);font-weight:700;font-size:1.3rem;border-radius:var(--radius)}
.byline b{display:block;margin-bottom:6px;color:var(--ink)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--azure);border-radius:0 0 var(--radius-lg) var(--radius-lg);padding:32px 34px}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:32px;align-items:center}
.final--media>*{min-width:0}
.final__img img{width:200px}
.final h2{margin:0 0 10px}
.final__price{font-weight:600;color:var(--ink-2)}
.final__sm{font-size:.9375rem;color:var(--ink-3);margin:12px 0 0}

/* ---- related */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;text-align:left}
.rel>*{min-width:0}
.rel a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 24px;text-decoration:none;color:var(--ink);transition:border-color .18s ease,transform .18s ease}
.rel a:hover{border-color:var(--azure);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--display);font-size:1.3rem;color:var(--ink);margin-bottom:5px}
.rel span{font-size:.9375rem;color:var(--ink-2)}

/* ---- forms. 16px minimum or iOS Safari zooms on focus (pitfall 86). */
.form{display:grid;gap:16px;max-width:var(--measure)}
.field label{display:block;font-weight:600;font-size:.9688rem;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font-family:var(--text);font-size:16px;padding:14px 15px;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--panel);color:var(--ink)}
.field textarea{min-height:140px;resize:vertical}
.field small{display:block;font-size:0.9062rem;color:var(--ink-3);margin-top:5px}

/* ---- blog */
.article{max-width:var(--measure);margin-inline:auto}
.postmeta{font-size:.9375rem;color:var(--ink-3);margin:0 0 20px}
.toc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 26px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px;color:var(--ink)}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:0 0 5px;font-size:1.062rem}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.posts>*{min-width:0}
.posts article{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 26px}
.posts h3{margin:0 0 8px}
.posts p{font-size:1.062rem;color:var(--ink-2)}
.dtable{min-width:520px}
.article h2{scroll-margin-top:calc(var(--navh,112px) + 14px)}

/* ---- footer: a tinted seal band, then a darker block of destinations */
.fcta{background:var(--panel);border-top:1px solid var(--line);padding:56px 0}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:36px;align-items:center;
  background:linear-gradient(104deg,var(--umber),var(--umber-2));color:#d2d4c1;
  border-radius:var(--radius-lg);padding:34px 38px}
.fcta__box>*{min-width:0}
.fcta h2,.fcta__h{color:#fff}
.fcta__eye{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--azure-l);margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:2rem;font-weight:700;line-height:1.16;margin:0 0 10px}
.fcta p{color:#c3c6b0}
.fcta__sm{font-size:.9375rem;color:#a9ad95;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:var(--azure-l)}
.fcta__img img{width:250px}
footer{background:var(--paper)}
.fseals{background:var(--tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line-2)}
.fseals__row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-block:22px}
.fseals img{width:46px;height:46px;object-fit:contain}
.fseals span{font-size:.9375rem;color:var(--ink-2)}
.fdark{background:var(--umber);color:#c3c6b0}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:28px;padding:48px 0 34px}
.fgrid>*{min-width:0}
.fbrand{font-family:var(--display);font-size:2.1rem;font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1}
.fbrand span{color:var(--azure-l)}
.frole{font-size:.9375rem;color:#a9ad95;margin:8px 0 14px}
.fcard p{font-size:1.062rem;color:#b6b9a3;margin:0 0 .7em}
.fcard b{color:#fff}
.fcard a{color:var(--azure-l)}
.fh{font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8d9179;margin:0 0 12px}
.fgrid ul{list-style:none;margin:0 0 20px;padding:0}
.fgrid li{margin:0}
/* inline-block, not block: the box shrink-wraps so the hover underline stays
   the width of the words, and the negative margin gives the row height back
   (pitfall 82). */
footer li a{display:inline-block;padding-block:6px;margin-block:-6px;font-size:.9688rem;color:#c3c6b0;text-decoration:none}
footer li a:hover{color:#fff}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:0 0 30px;border-top:1px solid #454937;padding-top:22px}
.fpay img{width:236px;height:auto}
.fpay span{font-size:.9375rem;color:#a9ad95}
.disc{background:var(--tint);border-top:1px solid var(--line-2);padding:30px 0 34px}
.disc p,.disc li{font-size:.9375rem;color:var(--ink-2)}
.disc b{color:var(--ink)}
.disc__list{columns:2;column-gap:40px;list-style:none;margin:14px 0 0;padding:0}
.disc__list li{break-inside:avoid;margin:0 0 9px;padding-left:18px;position:relative}
.disc__list li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:8px;border-radius:50%;border:2px solid var(--azure)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line-2);font-size:.9375rem}

/* ---- sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--umber);color:#fff;transform:translateY(105%);transition:transform .25s ease}
.buybar.show{transform:none}
.buybar__in{display:flex;align-items:center;gap:18px;max-width:var(--wrap);margin-inline:auto;padding:12px 24px}
.buybar__t{font-size:.9375rem;min-width:0}
.buybar__t b{display:block;font-size:1rem}
.buybar__t span{color:#b6b9a3}
.buybar .btn{margin-left:auto;flex:0 0 auto}

/* ---- reveal */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---- responsive */
@media (max-width:1100px){
  .fgrid{grid-template-columns:1fr 1fr 1fr;gap:26px}
}
@media (max-width:980px){
  :root{--navh:104px}
  /* Stacked, the bottle sits between the H1 and the Quick Answer, so every
     pixel it takes pushes the answer down a phone screen. Capped here rather
     than left at the column width: measured at 390, an uncapped shot put the
     Quick Answer at y=987 against the 850 target in hero.md. */
  .hero__card img{max-width:300px}
  .hero__cap{margin-top:12px}
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:6px 0 20px}
  .answer{order:4}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
  .factpills{order:10}
  .figures{order:11}
  .nav__price{display:none}
  .menu{display:none;flex-direction:column;align-items:stretch;gap:0;padding:6px 18px 12px}
  .menu.open{display:flex}
  .menu__more{display:block}
  .nav__inset{border-radius:var(--radius-lg)}
  .menu a{padding:12px 0;border-bottom:1px solid var(--line-2)}
  .menu a[aria-current="page"]{border-bottom-color:var(--line-2)}
  .burger{display:block}
  .nav__buy{display:none}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .fcta__box{grid-template-columns:1fr;padding:28px 26px}
  .fcta__img{display:none}
  .final--media{grid-template-columns:1fr;gap:20px}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:52px 0}
  .hero{padding:28px 0 46px}
  .hero__card{padding:6px}
  .hero__card img{max-width:264px}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr}
  .card--pack.featured{order:-1}
  .shots,.shots.s2{grid-template-columns:1fr}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel,.posts{grid-template-columns:1fr}
  .split,.split--flip .split__img{grid-template-columns:minmax(0,1fr);order:0}
  .versus{grid-template-columns:1fr}
  .versus>div:nth-child(3n+1){border-top:2px solid var(--line-2)}
  /* The chip is white-space:nowrap and margin-left:auto, so on a narrow card it
     is pushed onto a line with no room for it and overhangs the card edge. On a
     phone let it start its own line and wrap its own text. */
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .figures{grid-template-columns:1fr;gap:8px}
  .fgrid{grid-template-columns:1fr 1fr;gap:24px}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:440px){
  .fgrid{grid-template-columns:1fr}
  .badgewall{grid-template-columns:1fr}
}

/* ---- hero: sticky, centred product column ------------------------------
   The product column holds its place, vertically centred, until the hero has
   fully scrolled past.

   --navh is measured and published by site.js: this header is two tiers and
   its height changes between breakpoints, so a hardcoded offset tucks the
   bottle under the bar at one width and leaves a gap at another.

   min-height makes the sticky box a full screen tall so the shot can be
   CENTRED inside it. Requires .hero NOT to clip on the block axis: any
   non-visible overflow on an ancestor becomes the scrollport sticky resolves
   against, `clip` included (pitfall 65). */
@media (min-width: 981px) {
  .hero__grid { align-items: start; }
  .hero__media {
    position: sticky;
    top: calc(var(--navh, 112px) + 14px);
    align-self: start;
    min-height: calc(100vh - var(--navh, 112px) - 28px);
    min-height: calc(100svh - var(--navh, 112px) - 28px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
/* Cancelling the sticky column must NOT cancel the containing block. Every
   hero motif sizes its .hero__media pseudo-elements in PERCENT, so they
   resolve against the nearest positioned ancestor; `static` re-parents them to
   a box several times wider -- measured at 1800px against a 523px column --
   and the ring lands across the headline. Worse, the same query stops it
   animating, so it SITS there: ask for less motion, get the one broken hero.

   `relative` lays out identically to `static` and keeps the containing block.
   `top:0` is not decoration: the rule above sets a top offset of one nav height
   plus 14px, which a relative box would apply for real and push the plate
   ~110px down the page (pitfall 65). Written WITHOUT naming that custom
   property in the usual var() form on purpose -- preflight's undefined-variable
   check reads comments too, so a property named here is a property it believes
   the sheet uses. Measured on 7 sites before and after (pitfall 107). */
@media (prefers-reduced-motion: reduce) {
  .hero__media { position: relative; top: 0; min-height: 0; }
}

/* --- pack cards read as one repeated object ----------------------------
   A pricing row is three cards that have to share their edges, their image
   slot and their button baseline. The vendor pack shots are three different
   shapes (991x1107, 914x1114, 1038x1106), so without these rules the images
   render at three sizes and the three CTAs sit at three heights.

   The height lives here and not on the <img> attributes on purpose: those must
   keep stating each file's true ratio, or fix_img_dims.py rewrites them and
   CLS gets worse. Override per site with --pack-img. */
.card--pack{display:flex;flex-direction:column}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,176px);
  object-fit:contain;margin-inline:auto;margin-bottom:16px}
.card--pack>.btn{margin-top:auto}

/* ==== fix_layout_breaks.py ==== */
/* A figure alone on its row, and components whose own
   background fights the band they sit in. Appended: each
   rule below is correct in isolation and only their
   combination fails, so the originals stay as written. */
.shots.s2>figure:last-child:nth-child(odd){grid-column:1/-1;max-width:calc((100% - 22px) / 2);margin-inline:auto}
/* ==== end fix_layout_breaks.py ==== */

/* ==== directional chrome (fix_chrome_scroll.py) ==== */
.nav,#nav{transition:transform .28s ease}
@media(prefers-reduced-motion:reduce){.nav,#nav{transition:none}}
.nav--away{transform:translateY(-100%)}
html.chrome-up .buybar{transform:translateY(105%)}
/* ==== end directional chrome ==== */

/* ==== footer type floor (footer_type.py) ==== */
/* The footer carried the smallest text on the page -- the legal pages,
   the guarantee and the contact routes, set as fine print. Running text
   and links sit at 16px, column headings at 15px (uppercase and
   letter-spaced, so they read larger than the number). Last in the file
   on purpose: it outranks the phone breakpoints that shrank them. */
footer li a{font-size:16px}
footer .copy{font-size:16px}
footer .disc li{font-size:16px}
footer .disc p{font-size:16px}
footer .fh{font-size:15px}
footer .fpay span{font-size:16px}
footer .fseals span{font-size:16px}
/* ==== end footer type floor ==== */