/* thevinetarodrops.com — Vinetaro Drops, U.S. authorized retailer desk.
   Design slot: row 337 of batch8_assignments.py. Shrikhand / Aleo, a
   brick-tinted sand ground, an identity repeated small at the left and large at
   the centre of the masthead, a footer that sets the certificate reference very
   large above a plain list of pages, and the taro-spiral hero motif.

   The colour comes off the bottle rather than off the LOOKS FOR reference:
   amber glass, a brick-red cap band, and the warm sand the seller photographs
   the bottle against. Nothing on this estate uses a brick-on-sand ground, which
   is what keeps this desk clear of the other two liquid-drops sites.

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

/* ---- tokens */
:root{
  --ink:#2e1d13;            /* body text */
  --ink-2:#5f4739;          /* secondary */
  --ink-3:#8a7161;          /* captions, meta */
  --brick:#9d3a1f;          /* the cap band */
  --brick-d:#6d2512;        /* deep */
  --brick-2:#c4491f;        /* the accent ramp's brightest step */
  --amber:#c07f28;          /* the glass */
  --amber-d:#96601a;
  --wash:#f7e2cf;           /* amber wash */
  --paper:#f6ece0;          /* the page: brick-tinted sand */
  --panel:#fffbf5;
  --tint:#efdfcd;
  --line:#e2cbb4;
  --line-2:#c9ab8e;
  --good:#2c6a43;
  --warn:#8a5a10;
  --wrap:1200px;
  --measure:760px;
  --measure-wide:980px;
  --radius:4px;
  --radius-lg:10px;
  --shadow:0 1px 2px rgba(46,29,19,.06), 0 10px 26px rgba(46,29,19,.08);
  --shadow-lg:0 22px 58px rgba(109,37,18,.20);
  --navh:112px;
  --display:"Shrikhand",Georgia,"Times New Roman",serif;
  --text:"Aleo",Georgia,"Times New Roman",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.76;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brick);text-underline-offset:3px}
a:hover{color:var(--brick-d)}
/* Shrikhand ships one weight. Asking for 800 gives a synthesised bold on the
   browsers that oblige and nothing on the rest, so the display face is set at
   its own weight and the hierarchy comes from size and colour instead. */
h1,h2,h3,h4{font-family:var(--display);color:var(--brick-d);font-weight:400;line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(1.9rem,1.24rem + 2.1vw,2.95rem);letter-spacing:-.005em}
h2{font-size:clamp(1.42rem,1.12rem + 1.15vw,2.08rem)}
h3{font-family:var(--text);font-size:1.2rem;font-weight:700;color:var(--brick-d);line-height:1.34}
h4{font-family:var(--text);font-size:1.03rem;font-weight:700;color:var(--brick-d)}
p,li{font-size:1.0625rem}
p{margin:0 0 1.05em}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.skip{position:absolute;left:-9999px;top:0;background:var(--brick-d);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--brick-2);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:.78125rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--brick-2);
  margin:0 0 10px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--brick-2)}

/* ---- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:15px 32px;
  font-family:var(--text);font-size:1rem;font-weight:700;letter-spacing:.01em;
  border:0;border-radius:var(--radius);cursor:pointer;text-decoration:none;
  background:var(--brick-d);color:#fff;
  box-shadow:0 3px 0 rgba(58,18,8,.42);
  transition:filter .18s ease,transform .18s ease,box-shadow .18s ease;
}
.btn:hover{filter:brightness(1.12);color:#fff}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(58,18,8,.42)}
.btn--brick{background:linear-gradient(100deg,var(--brick) 0%,var(--brick-2) 100%)}
.btn--lg{min-height:62px;padding:17px 38px;font-size:1.08rem}
.btn--ghost{background:none;color:var(--brick-d);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--wash);color:var(--brick-d)}
.btn--wide{width:100%}

/* ---- header: the identity small at the left and large at the centre */
.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:12px 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:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;padding-block:12px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--brick-d)}
.brand__glyph{width:32px;height:32px;flex:0 0 auto}
/* Size the mark by ELEMENT as well as by class: brand_marks.py rewrites the
   <svg> inside .brand without carrying the class onto the replacement, so a
   rule keyed only to .brand__glyph stops applying the moment the tool runs
   (pitfall 16). */
.brand>svg{width:32px;height:32px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.1}
.bw b{font-family:var(--display);font-size:1.16rem;font-weight:400;letter-spacing:.005em}
.bw b em{font-style:normal;color:var(--brick-2)}
.bw small{font-size:.72rem;font-weight:700;color:var(--ink-3);letter-spacing:.04em}
/* the same identity again, large, in the middle of the masthead */
.nav__big{
  justify-self:center;font-family:var(--display);font-weight:400;
  font-size:clamp(1.5rem,.9rem + 1.5vw,2.15rem);color:var(--brick-d);
  line-height:1;letter-spacing:.004em;white-space:nowrap;
}
.nav__big i{font-style:normal;color:var(--brick-2)}
.nav__rail{display:flex;align-items:center;gap:16px}
.nav__price{text-align:right;line-height:1.24}
.nav__price b{display:block;font-family:var(--text);font-size:1.02rem;font-weight:700;color:var(--brick-d)}
.nav__price span{font-size:.78125rem;font-weight:400;color:var(--ink-3)}
.nav__buy{min-height:46px;padding:11px 20px;font-size:.95rem}
.burger{
  display:none;width:48px;height:46px;background:transparent;border:1px solid var(--line-2);
  border-radius:var(--radius);cursor:pointer;padding:12px 11px;
}
.burger span{display:block;height:2px;background:var(--brick-d);margin:0 0 5px}
.burger span:last-child{margin:0}
/* the menu band, ruled top and bottom in brick */
.nav__strip{background:var(--tint);border-top:2px solid var(--brick);border-bottom:1px solid var(--line)}
.menu{
  display:flex;flex-wrap:wrap;justify-content:center;gap:0 26px;list-style:none;margin:0;padding:0;
  align-items:center;min-height:44px;
}
.menu a{
  display:inline-block;padding:11px 0;font-family:var(--text);
  font-size:.9375rem;font-weight:700;color:var(--ink-2);text-decoration:none;
  border-bottom:3px solid transparent;
}
.menu a:hover{color:var(--brick-d)}
.menu a[aria-current="page"]{color:var(--brick-d);border-bottom-color:var(--brick-2)}
.menu__more{display:none}

/* ---- hero: copy LEFT, bottle RIGHT on the sand */
.hero{position:relative;background:var(--paper);padding:52px 0 58px;overflow-x:clip}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:42px;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(--brick-2)}
.answer{
  background:var(--panel);border:1px solid var(--line);
  border-left:5px solid var(--brick-2);border-radius:0 var(--radius) var(--radius) 0;
  padding:20px 24px;margin:0 0 18px;box-shadow:var(--shadow);
}
.answer p{margin:0 0 .75em;font-size:1.06rem}
.answer p:last-child{margin:0}
.hero__road{font-size:1rem;color:var(--ink-2);margin:0 0 20px;max-width:56ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 20px}
.hero__sub{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 18px;font-size:.925rem;font-weight:700;color:var(--ink-2)}
.hero__sub span{display:inline-flex;align-items:center;gap:7px}
.hero__sub span::before{content:"\2713";color:var(--good);font-weight:700}
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0}
.factpills li{
  font-size:.875rem;font-weight:400;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line);padding:7px 14px;border-radius:999px;
}
.factpills li b{color:var(--brick-d);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);border-top:3px solid var(--amber);padding:13px 15px;border-radius:0 0 var(--radius) var(--radius);min-width:0}
.figures b{display:block;font-family:var(--display);font-size:1.42rem;font-weight:400;color:var(--brick-d);line-height:1.15}
.figures span{display:block;font-size:.8125rem;font-weight:400;color:var(--ink-3);margin-top:3px}
.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:430px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 24px 40px rgba(60,25,10,.34))}
.hero__cap{margin:16px 0 0;font-size:.8125rem;font-weight:700;color:var(--ink-3);text-align:center}
.trust__row{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none;font-size:.875rem;font-weight:700;color:var(--ink-2)}
.trust__row li{display:inline-flex;align-items:center;gap:8px}
.trust__row li::before{content:"\2713";color:var(--good);font-weight:700}

/* ---- inner page head */
.phead{padding:34px 0 10px;background:var(--panel);border-bottom:1px solid var(--line)}
.crumbs{font-size:.875rem;color:var(--ink-3);margin:0 0 14px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--brick-2)}
.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 facts a buyer wants before reading anything.
   Role, lot, dose and bottle size, guarantee, order desk. It sits ABOVE
   CRITICAL-END because it is the first band painted; appended to the end of the
   stylesheet it would load async and flash unstyled at the very top of the
   page. Lot and dose are trimmed on phones, where five items wrap to three
   lines and eat a tenth of the screen (hero.md). */
.util{background:var(--brick-d);color:#f0d6c6;font-size:.8125rem;line-height:1.5}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding-block:8px}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;min-width:0}
.util__item+.util__item::before{content:"";width:3px;height:3px;border-radius:50%;
  background:#b6674c;flex:0 0 auto;margin-right:11px}
.util b{color:#fff3e9;font-weight:700}
.util a{color:inherit;text-decoration:none}
.util a:hover{text-decoration:underline}
@media (max-width:760px){
  .util__item--trim{display:none}
  .util__row{gap:4px 14px}
}

/* ---- hero motif -- taro-spiral ---------------------------------------- */
.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% 92% at 76% 4%,#e6b8a2,#f6ece0 48%,#f6ece0)}.hero__media::before{content:'';position:absolute;left:50%;top:50%;width:152%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:0;pointer-events:none;background:conic-gradient(from 0deg,rgba(196,73,31,0.00) 0deg,rgba(196,73,31,0.34) 86deg,rgba(46,29,19,0.18) 196deg,rgba(196,73,31,0.00) 312deg);-webkit-mask:radial-gradient(closest-side,transparent 55%,#000 58%,#000 79%,transparent 82%);mask:radial-gradient(closest-side,transparent 55%,#000 58%,#000 79%,transparent 82%);animation:vtSpiral 26s linear infinite}.hero__media::after{content:'';position:absolute;left:50%;top:52%;width:106%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:0;pointer-events:none;border:1px dashed rgba(196,73,31,0.34);animation:vtCoil 15s ease-in-out infinite}@keyframes vtSpiral{from{rotate:0deg}to{rotate:360deg}}@keyframes vtCoil{0%,100%{scale:.93;opacity:.42}50%{scale:1.06;opacity:.88}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/*!CRITICAL-END*/
/* ---- sections */
.sec{padding:60px 0;position:relative}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--brick-d);color:#f3ddd1}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#eccfbf}
.sec--dark .eyebrow{color:#f0a480}
.sec--dark .eyebrow::before{background:#f0a480}
.sec--dark a{color:#ffc9a8}
.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 26px}
.sec__head h2{margin:0 0 10px}
.sec__head p{color:var(--ink-2);margin:0}
.sec--dark .sec__head p{color:#eccfbf}

/* 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 */
.ticks{list-style:none;margin:0 0 1.1em;padding:0}
.ticks li{position:relative;padding-left:28px;margin:0 0 .5em}
.ticks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--good);font-weight:700}
.sec--dark .ticks li::before{color:#7fd0a0}

/* ---- tables */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:1rem}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--text);font-weight:700;color:#fff;background:var(--brick-d);font-size:.9375rem;letter-spacing:.02em}
tbody tr:nth-child(even){background:#fdf6ec}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--brick-d)}
.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-left:4px solid var(--amber);border-radius:0 var(--radius) var(--radius) 0;padding:20px 22px 20px 70px;min-width:0}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:18px;top:19px;width:36px;height:36px;
  display:grid;place-items:center;
  background:var(--brick);color:#fff;
  font-family:var(--text);font-weight:700;font-size:1.02rem;border-radius:50%;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: a brick rule down the leading edge */
.grid{display:grid;gap:18px}
.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's default min-width is auto, which floors at MIN-CONTENT — so a
   card holding a table or a nowrap chip refuses to shrink and silently
   overhangs a phone. It belongs on the items at every width, not only in a
   media query. */
.grid>*{min-width:0}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--brick-2);border-radius:0 var(--radius) var(--radius) 0;padding:22px 22px 20px;min-width:0}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#7d2c16;border-color:#a2452a;border-left-color:var(--amber)}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:1px solid #e7c6a8;border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--brick-d)}
.callout p:last-child{margin:0}
.alert{background:#fdf4e3;border:1px solid #eedcb6;border-left:4px solid var(--warn);border-radius:0 var(--radius) var(--radius) 0;padding:20px 22px;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.22rem;font-weight:400;line-height:1.52;color:var(--brick-d);border-left:4px solid var(--brick-2);padding:4px 0 4px 22px;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-top:4px solid var(--brick-2);border-radius:0 0 var(--radius) var(--radius);padding:20px 22px;margin:0 0 1.2em}
.keypoints>b{display:block;margin-bottom:8px;color:var(--brick-d)}
.keypoints ul{margin:0;padding-left:20px}

/* ---- image beside copy */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center;margin:0 0 1.2em}
.split--flip .split__img{order:2}
/* min-width:0 on both items. `1fr` is minmax(auto,1fr) and re-introduces the
   min-content floor that the desktop minmax(0,1fr) avoids, so a .tablewrap
   holding a 520px-min table keeps its column 520px wide however narrow the
   grid gets — clipped by body{overflow-x:clip}, with nothing to scroll and
   nothing for an overflow test to report. */
.split__img,.split__body{min-width:0}
.split__img img{width:100%;border:1px solid var(--line);border-radius:var(--radius);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>div{min-width:0}
.stats div b{display:block;font-family:var(--display);font-size:2.05rem;font-weight:400;color:#fff;line-height:1.14}
.stats div span{display:block;font-size:.9375rem;color:#eccfbf;margin-top:4px}

/* ---- label versus research */
.versus{display:grid;grid-template-columns:1.1fr 1fr 1.2fr;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);margin:0 0 1.2em}
.versus>div{padding:13px 16px;border-bottom:1px solid var(--line);font-size:.98rem;min-width:0}
.versus>div:nth-child(3n+1){font-weight:700;background:#fbf2e6}
.versus__h{background:var(--brick-d)!important;color:#fff;font-family:var(--text);font-weight:700;font-size:.92rem}

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
/* Same family as the .split fix. .ingcard is a grid ITEM and .ing__dose is
   white-space:nowrap, so without this the card cannot shrink below the widest
   chip in the list. */
.inglist>*{min-width:0}
.ingcard{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--amber);border-radius:0 0 var(--radius) var(--radius);padding:22px 24px;min-width:0}
.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:.9375rem;font-weight:700;color:#fff;background:var(--brick);padding:4px 12px;border-radius:999px;white-space:nowrap}
.ingcard p:last-child{margin:0}

/* ---- add-to-cart pricing panel */
.prices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;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);border-radius:var(--radius-lg);overflow:hidden;position:relative;padding:0}
.card--pack{border-left-width:2px}
.card--pack.featured{border-color:var(--brick-2);box-shadow:var(--shadow-lg)}
.pack__head{background:var(--tint);border-bottom:1px solid var(--line);padding:13px 18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card--pack.featured .pack__head{background:linear-gradient(100deg,var(--brick-d),var(--brick));border-bottom-color:var(--brick-d)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--text);font-size:1.1rem;font-weight:700;color:var(--brick-d)}
.pack__head span{font-size:.8125rem;font-weight:700;color:var(--ink-3);margin-left:auto}
.pack__flag{position:absolute;right:0;top:0;background:var(--brick-2);color:#fff;font-family:var(--text);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;z-index:3;border-radius:0 0 0 var(--radius)}
.pack__body{display:flex;flex-direction:column;flex:1;padding:18px 18px 20px}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,150px);object-fit:contain;margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:1.34rem;font-weight:400;color:var(--brick-d);line-height:1.2;text-align:center;margin:0}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:700;color:var(--ink-3);margin:4px 0 12px}
.pack__tot{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0 0 14px;font-size:.9375rem;color:var(--ink-2);text-align:center}
.pack__tot b{font-weight:700;color:var(--brick-d)}
.pack__was{color:var(--ink-3);font-weight:400}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:.9375rem}
.pack__perks li{position:relative;padding-left:24px;margin:0 0 6px;color:var(--ink-2)}
.pack__perks li::before{content:"\2713";position:absolute;left:0;color:var(--good);font-weight:700}
.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:20px;margin:0 0 1.2em}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots>*{min-width:0}
.shots figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.shots img{width:100%}
.shots figcaption{padding:16px 18px}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--brick-d)}
.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:18px;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);padding:18px 16px}
.badgewall img{width:74px;height:74px;object-fit:contain;margin:0 auto 10px}
.badgewall b{display:block;font-size:.98rem;margin-bottom:4px;color:var(--brick-d)}
.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 minmax(0,1fr) 52px;gap:12px;align-items:center;margin:0 0 8px;font-size:.9375rem}
.meter__bar{height:10px;background:var(--line);border-radius:999px;overflow:hidden;min-width:0}
.meter__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--amber),var(--brick))}
.stars{color:var(--amber);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);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:17px 48px 17px 20px;cursor:pointer;position:relative;list-style:none;font-family:var(--text);font-weight:700;font-size:1.06rem;color:var(--brick-d)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;translate:0 -50%;font-size:1.34rem;font-weight:400;color:var(--brick-2)}
.faq details[open] summary::after{content:"\2212"}
.faq__body{padding:0 20px 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:.9375rem;color:var(--ink-2);margin:0 0 .6em}
/* Each source prints its full URL as the link TEXT, and a URL is one
   unbreakable token: `anywhere` lowers the element's MIN-CONTENT, which is what
   stops an ancestor being sized by the longest URL in the list. */
.refs li,.refs li a{overflow-wrap:anywhere}
.byline{display:flex;gap:18px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--brick-2);border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px;margin:0 0 1.2em}
.byline__mark{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;background:var(--brick-d);color:#fff;font-family:var(--display);font-weight:400;font-size:1rem;border-radius:var(--radius)}
.byline b{display:block;margin-bottom:6px;color:var(--brick-d)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}
.byline>div{min-width:0}

/* ---- closing CTA */
.final{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--brick-2);border-radius:0 0 var(--radius) var(--radius);padding:30px 32px}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:center}
.final>*{min-width:0}
.final__img img{width:210px}
.final h2{margin:0 0 10px}
.final__price{font-weight:700;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:18px;text-align:left}
.rel>*{min-width:0}
.rel a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;text-decoration:none;color:var(--ink);transition:border-color .18s ease,transform .18s ease}
.rel a:hover{border-color:var(--brick-2);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--text);font-size:1.06rem;font-weight:700;color:var(--brick-d);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:700;font-size:.9688rem;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font-family:var(--text);font-size:16px;padding:13px 14px;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:.875rem;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);padding:20px 24px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px;color:var(--brick-d)}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:0 0 5px;font-size:1rem}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.posts>*{min-width:0}
.posts article{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.posts h3{margin:0 0 8px}
.posts p{font-size:1rem;color:var(--ink-2)}
.dtable{min-width:520px}
.article figure{margin:0 0 1.4em;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.article figure img{width:100%}
.article figure.portrait{max-width:var(--figw,320px);margin-inline:auto}
.article figcaption{padding:14px 18px;font-size:.9375rem;color:var(--ink-2)}
.postnav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0 0 1.4em}
.postnav>*{min-width:0}
.postnav a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;text-decoration:none;color:var(--ink)}
.postnav a:hover{border-color:var(--brick-2)}
.postnav b{display:block;color:var(--brick-d);margin-bottom:4px}
.postnav span{font-size:.9375rem;color:var(--ink-2)}
@media (max-width:640px){.posts,.postnav{grid-template-columns:minmax(0,1fr)}}

/* ---- footer: the certificate reference set large, then a plain list of pages */
.fcta{position:relative;background:linear-gradient(140deg,var(--brick-d) 0%,#4e1a0c 100%);color:#fff;padding:52px 0 52px}
.fcta h2,.fcta__h{color:#fff}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center}
.fcta__box>*{min-width:0}
.fcta__eye{display:inline-block;font-family:var(--text);font-size:.78125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#f2ad86;margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.54rem;font-weight:400;line-height:1.3;margin:0 0 10px}
.fcta p{color:#eccfbf}
.fcta__sm{font-size:.9375rem;color:#d9b3a0;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:#ffc9a8}
.fcta__img img{width:290px}
footer{background:var(--panel)}
.fcoa{padding:40px 0 26px;border-bottom:1px solid var(--line);text-align:center}
.fcoa__eye{display:block;font-size:.78125rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px}
.fcoa b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,1rem + 3vw,3.3rem);color:var(--brick-d);line-height:1.08;letter-spacing:.01em;overflow-wrap:anywhere}
.fcoa p{margin:12px 0 0;font-size:.9375rem;color:var(--ink-3)}
.fmain{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:34px;padding:30px 0 26px}
.fmain>*{min-width:0}
.fcard p{font-size:.9375rem;color:var(--ink-2);margin:0 0 .7em}
.fcard b{color:var(--brick-d)}
.fbrand{font-family:var(--display);font-size:1.45rem;font-weight:400;color:var(--brick-d);line-height:1.1}
.fbrand span{color:var(--brick-2)}
.frole{font-size:.9375rem;color:var(--ink-2);margin:8px 0 14px}
.fh{font-family:var(--text);font-size:.8125rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.fpages ul{columns:3;column-gap:28px;list-style:none;margin:0;padding:0}
.fpages li{break-inside:avoid;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:5px;margin-block:-5px;font-size:.9688rem;color:var(--ink-2);text-decoration:none}
footer li a:hover{color:var(--brick-2)}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:20px 0;border-top:1px solid var(--line)}
.fseals img{width:44px;height:44px;object-fit:contain}
.fseals span{font-size:.9375rem;color:var(--ink-3)}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:0 0 26px}
.fpay img{width:230px;height:auto}
.fpay span{font-size:.9375rem;color:var(--ink-3)}
.disc{background:var(--tint);border-top:1px solid var(--line);padding:28px 0 32px}
.disc p,.disc li{font-size:.9375rem;color:var(--ink-2)}
.disc b{color:var(--brick-d)}
.disc__list{columns:2;column-gap:38px;list-style:none;margin:14px 0 0;padding:0}
.disc__list li{break-inside:avoid;margin:0 0 9px;padding-left:16px;position:relative}
.disc__list li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:2px;background:var(--brick-2)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:.9375rem}

/* ---- sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--brick-d);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 22px}
.buybar__t{font-size:.9375rem;min-width:0}
.buybar__t b{display:block;font-size:1rem}
.buybar__t span{color:#e5bda8}
.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:1180px){
  .nav__big{font-size:1.5rem}
  .prices{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1100px){
  .fpages ul{columns:2}
}
@media (max-width:980px){
  :root{--navh:100px}
  .nav__top{grid-template-columns:auto auto;justify-content:space-between}
  .nav__big{display:none}
  .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}
  .trust__row{order:9}
  .factpills{order:10}
  .figures{order:11}
  .nav__price{display:none}
  .menu{display:none;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 12px}
  .menu.open{display:flex}
  .menu__more{display:block}
  .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}
  .fcta__img{display:none}
  .final--media{grid-template-columns:1fr;gap:20px}
  .fmain{grid-template-columns:1fr;gap:26px}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:44px 0}
  .hero{padding:34px 0 42px}
  .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 dose chip is white-space:nowrap and margin-left:auto, so on a narrow
     card it is pushed to the right of a line with no room for it and overhangs
     the 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}
  .fpages ul{columns:1}
  .figures{grid-template-columns:1fr;gap:8px}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:440px){
  .badgewall{grid-template-columns:1fr}
}

/* ---- hero: the bottle breathes on the sand -----------------------------
   Transform only, NEVER opacity: the bottle is the LCP element and an element
   starting at opacity:0 is not recorded as painted (hero.md). The float goes on
   the CARD, never on the <img>, which is preloaded. */
.hero__card{isolation:isolate}
.hero__card::before{
  content:"";position:absolute;left:50%;top:47%;translate:-50% -50%;
  width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(192,127,40,.34),transparent 72%);
  z-index:0;pointer-events:none;
}
.hero__card::after{
  content:"";position:absolute;left:50%;bottom:30px;translate:-50% 0;
  width:48%;height:17px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(60,25,10,.36),transparent 74%);
  filter:blur(5px);z-index:0;pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .hero__card{animation:vtFloat 9s ease-in-out infinite}
  @keyframes vtFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
}

/* ---- 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
   masthead is two rows and its height changes between breakpoints, and a
   hardcoded offset tucks the bottle under the bar.

   Requires .hero NOT to clip on the block axis — any non-visible overflow on an
   ancestor becomes the scrollport sticky resolves against (pitfall 65). */
@media (min-width: 981px) {
  .hero__grid { align-items: start; }
  .hero__media {
    position: sticky;
    top: calc(var(--navh, 100px) + 14px);
    align-self: start;
    min-height: calc(100vh - var(--navh, 100px) - 28px);
    min-height: calc(100svh - var(--navh, 100px) - 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 four cards that have to share their edges, their image slot
   and their button baseline. The vendor's four pack renders are different
   shapes, so without these rules the images render at four sizes and the CTAs
   sit at four heights. The height lives here rather than 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 (pitfall 91). */
.card--pack{display:flex;flex-direction:column}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,150px);
  object-fit:contain;margin-inline:auto;margin-bottom:14px}
.card--pack>.btn{margin-top:auto}

/* --- the brand mark: a wordmark between two drawn brackets --------------
   The construction assigned in the design slot (row 337: bracket / flame).
   brand_marks.py OWNS the rule and appends it below, keyed to this site's
   measured accent, and it strips any <svg> inside .brand so the wordmark
   stands alone between the two drawn brackets. A hand-written copy lived here
   until the tool had run; two identical copies of one rule is one of them
   waiting to go stale, so the tool's is the only one kept. */
/* brand mark: bracket construction */
.brand{position:relative;padding-inline:14px}.brand::before,.brand::after{content:'';position:absolute;top:2px;bottom:2px;width:8px;border:2px solid #c4491f}.brand::before{left:0;border-right:0}.brand::after{right:0;border-left:0}