/* getnervelin.com — Nervelin, U.S. authorized retailer desk.
   Design slot, row 315 (batch8_assignments.py): Chakra Petch / PT Sans, a
   sun-bleached khaki ground, the identity CENTRED in the header with the
   destinations fanned symmetrically to either side of it, and a footer built as
   a boxed panel of contact facts beside a dense index of destinations.

   The accent ramp is re-derived from the bottle, as the skill requires: the
   Nervelin label is deep violet (#371565 in the solid favicon) with a lighter
   plum sweep across the lower third. The khaki ground is the assigned one and
   stays; the violet is what the product actually looks like, and the two sit
   together without either going muddy.

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

/* ---- tokens */
:root{
  --ink:#241c33;            /* body text, violet-leaning rather than neutral */
  --ink-2:#554b63;          /* secondary */
  --ink-3:#6c6279;          /* captions, meta */
  --violet:#3a1668;         /* the label's band */
  --violet-d:#260f46;       /* deep */
  --violet-2:#552a8c;
  --orchid:#8348ad;         /* the plum sweep across the bottle */
  --orchid-d:#6d2f9b;
  --wash:#ece4f6;           /* violet wash */
  --paper:#f1ebdc;          /* the page: sun-bleached khaki */
  --panel:#fffdf7;
  --tint:#e8e0cc;
  --line:#ddd3bd;
  --line-2:#c8bb9f;
  --good:#2c6b46;
  --warn:#8a5a10;
  --wrap:1200px;
  --measure:760px;
  --measure-wide:980px;
  --radius:10px;
  --radius-lg:18px;
  --shadow:0 1px 2px rgba(38,15,70,.06), 0 12px 32px rgba(38,15,70,.08);
  --shadow-lg:0 24px 64px rgba(38,15,70,.20);
  --navh:112px;
  --pack-img:136px;
  --display:"Chakra Petch",system-ui,-apple-system,"Segoe UI",sans-serif;
  --text:"PT Sans",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:17.5px;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--violet);text-underline-offset:3px}
a:hover{color:var(--orchid-d)}
h1,h2,h3,h4{font-family:var(--display);color:var(--violet);font-weight:700;line-height:1.18;margin:0 0 .5em}
h1{font-size:clamp(2rem,1.28rem + 2.3vw,3.05rem);letter-spacing:-.012em}
h2{font-size:clamp(1.5rem,1.16rem + 1.24vw,2.18rem);letter-spacing:-.008em}
h3{font-size:1.2rem;font-weight:700}
h4{font-size:1.03rem;font-weight:700}
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(--violet);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--orchid);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-size:.8125rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--orchid-d);
  margin:0 0 10px;
}
/* three squares stepping up: the relay, drawn at the smallest scale the site
   has. It is the hero motif's idea repeated as punctuation. */
.eyebrow::before{
  content:"";width:22px;height:8px;flex:0 0 auto;
  background-image:linear-gradient(var(--orchid),var(--orchid)),
                   linear-gradient(var(--orchid),var(--orchid)),
                   linear-gradient(var(--violet),var(--violet));
  background-size:5px 3px,5px 5px,5px 8px;
  background-position:0 100%,8px 100%,16px 100%;
  background-repeat:no-repeat;
}

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

/* ---- header: identity CENTRED, destinations fanned to either side ---------
   The brand sits in the middle column of a three-column grid and the menu is
   split around it, so the masthead reads outward from the name rather than
   left to right. Below 980 the fan collapses into one stacked panel. */
.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:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:18px;padding-block:12px;
}
.nav__top>*{min-width:0}
.brand{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--violet);text-align:center}
.brand__glyph{width:38px;height:38px;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 always 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 — a masthead two
   different heights on one site (pitfall 16). */
.brand>svg{width:38px;height:38px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.06;align-items:center}
.bw b{font-family:var(--display);font-size:1.42rem;font-weight:700;letter-spacing:.01em}
.bw b em{font-style:normal;color:var(--orchid-d)}
.bw small{font-size:.75rem;font-weight:700;color:var(--ink-3);letter-spacing:.04em}

.menu{
  display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;
  gap:2px 22px;align-items:center;min-width:0;
}
.menu--a{justify-content:flex-end}
.menu--b{justify-content:flex-start}
.menu a{
  display:inline-block;padding:9px 0;font-family:var(--display);
  font-size:.9375rem;font-weight:600;color:var(--ink-2);text-decoration:none;
  border-bottom:3px solid transparent;
}
.menu a:hover{color:var(--violet)}
.menu a[aria-current="page"]{color:var(--violet);border-bottom-color:var(--orchid)}
.menu__more{display:none}
/* The right-hand half of the fan sits immediately beside the identity, and the
   ordering button is pushed to the far edge, so the two menus mirror each other
   around the brand instead of being crowded against the button. */
.nav__rail{display:flex;align-items:center;justify-content:flex-start;gap:12px;min-width:0}
.nav__buy{min-height:44px;padding:10px 20px;font-size:.9375rem;margin-left:auto}
.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(--violet);margin:0 0 5px}
.burger span:last-child{margin:0}

/* ---- hero: copy LEFT, the bottle RIGHT on a khaki plate */
.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:44px;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(--orchid-d)}
.answer{
  background:var(--panel);border:1px solid var(--line);
  border-left:4px solid var(--orchid);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:.9375rem;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(--violet);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(--orchid);padding:13px 15px;border-radius:var(--radius);min-width:0}
.figures b{display:block;font-family:var(--display);font-size:1.46rem;font-weight:700;color:var(--violet);line-height:1.1}
.figures span{display:block;font-size:.8125rem;font-weight:400;color:var(--ink-3);margin-top:3px}
.hero__media{position:relative;align-self:center}
.hero__card{
  position:relative;z-index:2;text-align:center;padding:22px 18px 16px;
  background:linear-gradient(180deg,var(--panel),#f7f2e6);
  border:1px solid var(--line);border-top:4px solid var(--violet);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);
}
.hero__card img{width:100%;max-width:392px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 22px 34px rgba(38,15,70,.28))}
.hero__cap{margin:14px 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:32px 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(--orchid-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 facts, above the navigation.
   Role, lot, dose and count, the return window, the order desk. It exists so
   the header does not have to carry them, and it sits ABOVE CRITICAL-END
   because it is the first thing painted; appended to the end of the sheet it
   would load async and flash unstyled at the very top of the page.
   The guarantee slot names the marketplace's own return window rather than a
   day count, because no day count was read on this listing. */
.util{background:var(--violet-d);color:#cbb8e2;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:#7a53a8;flex:0 0 auto;margin-right:11px}
.util b{color:#f2ebfa;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 a tenth of the screen. Keep the
     role, the return window and the desk; the lot and the dose are on the
     pages that need them. */
  .util__item--trim{display:none}
  .util__row{gap:4px 14px}
}

/* The hero motif and its reduced-motion rule are written by
   _generators/hero_motifs.py and start at the marker below. The recipe, and the
   reason both pseudo-elements go to opacity:0 rather than animation:none, live
   with the motif in that file. Do not hand-edit the block: the next --write
   replaces it. */

/* ---- hero motif -- signal-relay ---------------------------------------- */
.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(120% 86% at 50% 4%,#f7f4ec,#e5dac4 56%,#f1ebdc)}.hero__media::before{content:'';position:absolute;left:50%;top:50%;width:146%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 72%,rgba(109,47,155,0.55) 84%,rgba(131,72,173,0.16) 93%,transparent 100%);-webkit-mask:radial-gradient(closest-side,transparent 70%,#000 72%);mask:radial-gradient(closest-side,transparent 70%,#000 72%);animation:nlRelay 7.2s steps(8,end) infinite;z-index:1;pointer-events:none}.hero__media::after{content:'';position:absolute;left:50%;top:50%;width:146%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1px dashed rgba(58,22,104,0.30);animation:nlHold 7.2s ease-in-out infinite;z-index:0;pointer-events:none}@keyframes nlRelay{to{transform:rotate(360deg)}}@keyframes nlHold{0%,100%{opacity:.45;scale:1}50%{opacity:.92;scale:1.035}}
@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(--violet-d);color:#e0d5ee}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#cec0e0}
.sec--dark .eyebrow{color:#c39ae8}
.sec--dark a{color:#d7b9f2}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
/* a ruled top edge, the relay drawn across the full width */
.sec--rule{background:var(--panel);border-top:3px solid var(--violet)}
.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:#cec0e0}

/* 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:#7ad3a4}

/* ---- 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(--display);font-weight:700;color:#fff;background:var(--violet);font-size:.9375rem}
tbody tr:nth-child(even){background:#faf7ef}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--violet)}
.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}
.steps>*{min-width:0}
.step{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px 20px 70px}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:20px;top:19px;width:36px;height:36px;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--orchid),var(--violet));color:#fff;
  font-family:var(--display);font-weight:700;font-size:1.02rem;border-radius:50%;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards */
.grid{display:grid;gap:18px}
/* 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 below it and hangs
   off the side of a phone with nothing to scroll and nothing to report. */
.grid>*{min-width:0}
.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))}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px 22px;overflow:hidden}
.card::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:4px;
  background-image:linear-gradient(90deg,var(--violet),var(--violet)),
                   linear-gradient(90deg,var(--orchid),var(--orchid));
  background-size:34px 4px,20px 4px;
  background-position:0 0,42px 0;
  background-repeat:no-repeat;
}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#33195c;border-color:#4d2b7d}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:1px solid #d5c2ea;border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--violet)}
.callout p:last-child{margin:0}
.alert{background:#fdf6ea;border:1px solid #efdcbc;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.3rem;font-weight:600;line-height:1.5;color:var(--violet);border-left:4px solid var(--orchid);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(--orchid);border-radius:0 0 var(--radius) var(--radius);padding:20px 22px;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:34px;align-items:center;margin:0 0 1.2em}
.split--flip .split__img{order:2}
/* min-width:0 on the items, at every width rather than only in the media
   query: a .tablewrap holding a 520px-min table otherwise keeps its column
   520px wide however narrow the grid is. */
.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>*{min-width:0}
.stats div b{display:block;font-family:var(--display);font-size:2.2rem;font-weight:700;color:#fff;line-height:1.1}
.stats div span{display:block;font-size:.9375rem;color:#cbb8e2;margin-top:4px}

/* ---- label versus research */
.versus{display:grid;grid-template-columns:1.08fr 1fr 1.1fr;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:#f8f4ea}
.versus__h{background:var(--violet)!important;color:#fff;font-family:var(--display);font-weight:700;font-size:.92rem}

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
/* .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-left:4px solid var(--orchid);border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px}
.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:#fff;background:var(--violet);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(3,minmax(0,1fr));gap:20px;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}
.card--pack::before{display:none}
/* No lift on the featured card: a negative margin makes it taller than its
   siblings and breaks the one-height, one-baseline rule the pricing row is
   measured against. The accent border, the deeper shadow, the coloured head
   band and the flag already make it unmistakable. */
.card--pack.featured{border-color:var(--orchid);box-shadow:var(--shadow-lg)}
.pack__head{background:var(--tint);border-bottom:1px solid var(--line);padding:14px 20px;display:flex;align-items:center;gap:10px}
.card--pack.featured .pack__head{background:linear-gradient(104deg,var(--violet),var(--violet-2));border-bottom-color:var(--violet)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--display);font-size:1.14rem;font-weight:700}
.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(--orchid);color:#fff;font-family:var(--display);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 13px;z-index:3;border-radius:0 0 0 var(--radius)}
.pack__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,136px);object-fit:contain;margin-inline:auto;margin-bottom:14px}
/* No price is published for this product, so the slot that would hold one
   carries the fact instead. It keeps the shape of a price block — same
   position, same weight, same height — without printing a figure nobody read. */
.pack__per{font-family:var(--display);font-size:1.42rem;font-weight:700;color:var(--violet);line-height:1.15;text-align:center;margin:0}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:400;color:var(--ink-3);margin:6px 0 14px}
.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>*{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);overflow:hidden}
.shots img{width:100%}
.shots figcaption{padding:16px 18px}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--violet)}
.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(--violet)}
.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}
.meter__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--orchid),var(--violet))}
.stars{color:#c48a1d;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(--display);font-weight:700;font-size:1.06rem;color:var(--violet)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;translate:0 -50%;font-family:var(--text);font-size:1.34rem;font-weight:400;color:var(--orchid-d)}
.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}
/* The reference list prints each source's full URL as the link TEXT, and a URL
   is one unbreakable token. `anywhere` rather than `break-word` because it 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:18px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--orchid);border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px;margin:0 0 1.2em}
.byline>*{min-width:0}
.byline__mark{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;background:linear-gradient(140deg,var(--violet),var(--violet-2));color:#fff;font-family:var(--display);font-weight:700;font-size:1.06rem;border-radius:var(--radius)}
.byline b{display:block;margin-bottom:6px;color:var(--violet)}
.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(--orchid);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--media>*{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(--orchid);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--display);font-size:1.08rem;color:var(--violet);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(--violet)}
.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}
/* An article figure is the same object as a .shots figure -- panel, hairline,
   rounded -- so the blog does not read as a different site. The default UA
   margin of 1em 40px is dropped: it inset the image inside a column that is
   already a measure, and at 390 it stole 80px of a 358px column. */
.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 img{width:var(--figw,320px);max-width:100%}
.article figcaption{padding:14px 18px;font-size:.9375rem;color:var(--ink-2)}

/* ---- footer: a boxed panel of contact facts beside a dense index ---------
   The contact box is a bordered card with a violet head rule; the index beside
   it runs four tight columns of destinations, which is the densest thing on
   the site and is meant to be. */
.fcta{position:relative;background:linear-gradient(140deg,var(--violet) 0%,var(--violet-d) 100%);color:#fff;padding:52px 0}
.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(--display);font-size:.8125rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:#c39ae8;margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.62rem;font-weight:700;line-height:1.24;margin:0 0 10px}
.fcta p{color:#cec0e0}
.fcta__sm{font-size:.9375rem;color:#b3a1c9;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:#d7b9f2}
.fcta__img img{width:280px}
footer{background:var(--panel)}
.fgrid{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:34px;padding-block:44px 30px}
.fgrid>*{min-width:0}
.fcard{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--violet);border-radius:var(--radius);padding:24px 24px 18px}
.fbrand{font-family:var(--display);font-size:1.62rem;font-weight:700;color:var(--violet);letter-spacing:.01em;line-height:1}
.fbrand span{color:var(--orchid-d)}
.frole{font-size:.9375rem;color:var(--ink-2);margin:8px 0 14px}
.fcard p{font-size:.9375rem;color:var(--ink-2);margin:0 0 .7em}
.fcard b{color:var(--violet)}
.findex{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 20px}
.findex>*{min-width:0}
.fh{font-family:var(--display);font-size:.8125rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.findex ul{list-style:none;margin:0 0 18px;padding:0}
.findex 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:5px;margin-block:-5px;font-size:.9375rem;color:var(--ink-2);text-decoration:none}
footer li a:hover{color:var(--orchid-d)}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-block:20px;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-block: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(--violet)}
.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:.62em;width:8px;height:3px;background:var(--orchid)}
.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(--violet-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-block:12px;padding-inline:22px}
.buybar__t{font-size:.9375rem;min-width:0}
.buybar__t b{display:block;font-size:1rem}
.buybar__t span{color:#cbb8e2}
.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){
  .findex{grid-template-columns:repeat(3,minmax(0,1fr))}
  .menu{gap:2px 16px}
  .menu a{font-size:.9rem}
}
@media (max-width:980px){
  :root{--navh:98px}
  /* The fan collapses into one stacked panel under the brand row. `display:
     contents` on the rail lets its children -- the right-hand half of the fan
     and the burger -- become grid items of the brand row, so both halves of the
     menu can span the full width when the panel opens. */
  .nav__top{grid-template-columns:minmax(0,1fr) auto;gap:10px 12px}
  .nav__rail{display:contents}
  .brand{flex-direction:row;align-items:center;text-align:left;gap:10px;grid-column:1;grid-row:1}
  .bw{align-items:flex-start}
  .burger{display:block;grid-column:2;grid-row:1;justify-self:end}
  .nav__buy{display:none}
  .menu{display:none;grid-column:1 / -1;flex-direction:column;align-items:stretch;gap:0;padding:4px 0 0}
  .menu--a{grid-row:2}
  .menu--b{grid-row:3;padding:0 0 8px}
  .nav.menu-open .menu{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)}
  .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}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .fgrid{grid-template-columns:1fr}
  .fcta__box{grid-template-columns:1fr}
  .fcta__img{display:none}
  .final--media{grid-template-columns:1fr;gap:20px}
}
@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 it sits at the start of its own line and wraps. */
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .figures{grid-template-columns:1fr;gap:8px}
  .findex{grid-template-columns:repeat(2,minmax(0,1fr))}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:440px){
  .findex{grid-template-columns:1fr}
  .badgewall{grid-template-columns:1fr}
}

/* ---- hero: the plate holds still, the product settles onto it -------------
   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 is on
   the CARD; hero_motifs.py owns the relay ring around it. */
.hero__card{isolation:isolate}
.hero__card::before{
  content:"";position:absolute;left:50%;bottom:26px;translate:-50% 0;
  width:56%;height:16px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(38,15,70,.34),transparent 74%);
  filter:blur(5px);z-index:0;pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .hero__card{animation:nlFloat 8.5s ease-in-out infinite}
  @keyframes nlFloat{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, because
   nav heights change between breakpoints and a hardcoded offset tucks the
   product under the bar on the taller ones.

   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, 98px) + 14px);
    align-self: start;
    min-height: calc(100vh - var(--navh, 98px) - 28px);
    min-height: calc(100svh - var(--navh, 98px) - 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 ----------------------------
   Three cards that have to share their edges, their image slot and their
   button baseline. The vendor product shots here are 1460x1600, 1800x817 and
   1800x508 — a tall single bottle and two wide strips — so without a fixed
   slot they render at three sizes. The height lives here rather than on the
   <img> attributes, which must keep stating each file's true ratio or
   fix_img_dims.py rewrites them and CLS gets worse. */
.card--pack{display:flex;flex-direction:column}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,136px);
  object-fit:contain;margin-inline:auto;margin-bottom:14px}
.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% - 20px) / 2);margin-inline:auto}