/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Alegreya Fallback";src:local("Arial");font-weight:400;size-adjust:92.07%;ascent-override:110.35%;descent-override:37.47%;line-gap-override:0.00%}
@font-face{font-family:"Alegreya Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:86.43%;ascent-override:117.55%;descent-override:39.92%;line-gap-override:0.00%}
@font-face{font-family:"Cabin Fallback";src:local("Arial");font-weight:400;size-adjust:95.21%;ascent-override:101.35%;descent-override:26.26%;line-gap-override:0.00%}
@font-face{font-family:"Cabin Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:89.96%;ascent-override:107.27%;descent-override:27.79%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* goartivorin.com - Artivorin, U.S. stocking partner desk.
   Design slot: batch10_assignments.py. Alegreya / Cabin, a COOL GRAPHITE ground
   with PARCHMENT cards, the identity set in a filled parchment tab that hangs
   over the rule beneath it, and a graphite footer slab whose destinations are
   numbered like rungs on a ladder.

   The tab is the idea. A 2px graphite rule runs the full width of the viewport
   along the foot of the masthead; the wordmark sits in a filled parchment tab
   with its own keyline that drops past that rule and covers it. Nothing else on
   the estate builds a header that way.

   This desk's live sister sells the same bottle from a warm clay ground with
   charcoal bands and a hard offset shadow. Nothing here uses clay, charcoal or
   an offset shadow: the shadows are soft and low, the corners take a small
   radius rather than a square edge, and the ground is cool.

   Colour is taken from the artwork rather than from the bottle's navy, which
   the sister already holds. The petrol blue below is the band the seller's own
   how-it-works graphic is printed on; the parchment is the slot's.

   Type: Alegreya ships 400-900 and carries the headings; Cabin ships 400-700
   and carries everything that has to stay legible at small sizes. Nothing here
   asks either family for a weight it does not ship.

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

/* ---- tokens */
:root{
  --paper:#e7eaee;          /* the page: a cool graphite wash */
  --parch:#f7f1e3;          /* parchment cards */
  --parch-2:#fdfaf2;        /* the lighter parchment, for raised surfaces */
  --graph:#252a31;          /* the graphite slab */
  --graph-d:#171b20;        /* the deepest graphite */
  --graph-2:#39404a;        /* graphite, one step up */
  --blue:#0f4c75;           /* the accent: the artwork's petrol band */
  --blue-d:#0a3453;
  --sky:#4f88ad;            /* the paler blue in the label wave */
  --ink:#1d2126;
  --ink-2:#4b535d;
  /* Darkened from #6e7782 on 19 Sep 2026. Every caption, crumb, table note and
     meta line on this site uses this one token, and at the old value it sat at
     4.0-4.35:1 on both grounds, which is under AA for text this size. One token,
     fifteen failures, one fix. */
  --ink-3:#5b6472;
  --line:#cdd3da;
  --line-2:#aeb7c1;
  --parch-line:#ddd2b8;
  --good:#2c6a4a;
  --warn:#7d5a1e;
  --wrap:1180px;
  --measure:740px;
  --measure-wide:960px;
  --radius:6px;
  --radius-lg:10px;
  --shadow:0 2px 10px rgba(23,27,32,.09);
  --shadow-lg:0 14px 34px rgba(23,27,32,.16);
  --navh:112px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --display:Alegreya,Georgia,"Times New Roman",serif;
  --text:Cabin,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.72;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-underline-offset:3px}
a:hover{color:var(--blue-d)}
h1,h2,h3,h4{font-family:var(--display);color:var(--graph-d);font-weight:700;line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(1.95rem,1.25rem + 1.95vw,2.75rem);letter-spacing:-.008em}
h2{font-size:clamp(1.5rem,1.16rem + 1.25vw,2.18rem);letter-spacing:-.006em}
h3{font-size:1.24rem;font-weight:800}
h4{font-size:1.06rem;font-weight:800}
p,li{font-size:1.09rem}
p{margin:0 0 1.05em}
b,strong{font-weight:700;color:var(--graph-d)}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.skip{position:absolute;left:-9999px;top:0;background:var(--graph-d);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--blue);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:.86rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--blue);
  margin:0 0 10px;
}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;
  border:2px solid var(--blue);flex:0 0 auto}

/* ---- buttons: rounded, solid, a low soft shadow. No offset block shadow
   anywhere on this site -- the sister desk owns that construction. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:15px 30px;
  font-family:var(--text);font-size:1.02rem;font-weight:700;letter-spacing:.01em;
  border:2px solid transparent;border-radius:var(--radius);cursor:pointer;
  text-decoration:none;background:var(--blue);color:#fff;
  box-shadow:var(--shadow);
  transition:background .16s var(--ease),box-shadow .16s var(--ease),transform .16s var(--ease);
}
.btn:hover{color:#fff;background:var(--blue-d);box-shadow:0 8px 20px rgba(15,76,117,.28);transform:translateY(-1px)}
.btn:active{transform:translateY(1px);box-shadow:var(--shadow)}
.btn--cyan{background:var(--blue)}
.btn--lg{min-height:62px;padding:17px 28px;font-size:1.06rem}
.btn--ghost{background:var(--parch);color:var(--graph-d);border-color:var(--parch-line)}
.btn--ghost:hover{background:var(--parch-2);color:var(--graph-d);box-shadow:var(--shadow)}
.btn--wide{width:100%}

/* ---- masthead: the identity in a filled parchment tab that overlaps the rule.
   padding-BLOCK, never the shorthand: .nav__top also carries .wrap, and
   `padding:16px 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{position:sticky;top:0;z-index:100;background:var(--paper);overflow-x:clip;overflow-y:visible}
.nav__top{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;gap:0 18px;
  padding-block:14px 0}
.nav__top::after{
  content:"";position:absolute;left:calc(50% - 50vw);right:calc(50% - 50vw);
  bottom:0;height:2px;background:var(--graph);z-index:0;
}
/* the tab itself: filled parchment, keylined, dropping 14px past the rule */
.brand{position:relative;z-index:2;display:flex;align-items:center;gap:12px;
  text-decoration:none;color:var(--graph-d);background:var(--parch);
  border:2px solid var(--graph);border-bottom-color:var(--parch);
  border-radius:var(--radius) var(--radius) 0 0;
  padding:9px 18px 11px;margin-bottom:-2px}
.brand>svg{width:34px;height:34px;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__glyph{width:34px;height:34px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.08}
.bw b{font-family:var(--display);font-size:1.5rem;font-weight:800;letter-spacing:-.01em;color:var(--graph-d)}
.bw b em{font-style:normal;color:var(--blue)}
.bw small{font-family:var(--text);font-size:0.8438rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3)}
.menu{
  position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;
  gap:0 22px;list-style:none;margin:0 0 0 14px;padding:0 0 10px;
}
.menu a{
  display:inline-block;padding:9px 0;font-family:var(--text);
  font-size:.96rem;font-weight:700;color:var(--ink-2);text-decoration:none;
  border-bottom:2px solid transparent;
}
.menu a:hover{color:var(--graph-d);border-bottom-color:var(--line-2)}
.menu a[aria-current="page"]{color:var(--blue);border-bottom-color:var(--blue)}
.menu__more{display:none}
.nav__rail{position:relative;z-index:1;margin-left:auto;display:flex;align-items:center;
  gap:16px;padding-bottom:10px}
.nav__price{text-align:right;line-height:1.2}
.nav__price b{display:block;font-family:var(--display);font-size:1.2rem;font-weight:800;color:var(--graph-d)}
.nav__price span{font-size:.8rem;font-weight:600;color:var(--ink-3)}
.nav__buy{min-height:46px;padding:11px 20px;font-size:.96rem}
.burger{
  display:none;width:48px;height:46px;background:var(--parch);border:2px solid var(--graph);
  border-radius:var(--radius);cursor:pointer;padding:12px 11px;
}
.burger span{display:block;height:2px;background:var(--graph-d);margin:0 0 5px}
.burger span:last-child{margin:0}

/* ---- hero: the bottle LEFT on a parchment plate, copy RIGHT */
.hero{position:relative;background:var(--paper);padding:40px 0 54px;overflow-x:clip}
.hero__grid{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:44px;align-items:center}
.hero__copy{display:flex;flex-direction:column;min-width:0}
.hero h1{margin:0 0 14px}
.hero h1 em{font-style:normal;color:var(--blue)}
.answer{
  background:var(--parch-2);border:1px solid var(--parch-line);
  border-left:6px solid var(--blue);
  border-radius:var(--radius);padding:17px 22px;margin:0 0 14px;
  box-shadow:var(--shadow);
}
.answer p{margin:0 0 .75em;font-size:1.12rem}
.answer p:last-child{margin:0}
.hero__road{font-size:1.03rem;color:var(--ink-2);margin:0 0 15px;max-width:58ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 20px}
.hero__sub{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 18px;font-size:1rem;
  font-weight:600;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:.92rem;font-weight:600;color:var(--ink-2);background:var(--parch);
  border:1px solid var(--parch-line);padding:7px 14px;border-radius:999px;
}
.factpills li b{color:var(--graph-d);font-weight:700}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.figures div{background:var(--parch);border:1px solid var(--parch-line);border-radius:var(--radius);
  padding:13px 15px;min-width:0}
.figures b{display:block;font-family:var(--display);font-size:1.62rem;font-weight:800;
  color:var(--blue);line-height:1.1}
.figures span{display:block;font-size:0.9062rem;font-weight:600;color:var(--ink-3);margin-top:3px}
/* the product stands on a parchment plate with a graphite keyline */
.hero__media{position:relative;align-self:center}
.hero__card{position:relative;z-index:2;text-align:center;
  background:var(--parch);border:2px solid var(--graph);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:22px 20px 0;max-width:408px;margin-inline:auto}
/* The plate is deliberately NARROWER than the media column. The root-warm
   bloom is sized at 110% of that column, so a plate filling it would hide the
   motif completely -- which is design-system.md rule 6, and is how the first
   version of the estate's motifs shipped showing nothing at all. */
.hero__card img{position:relative;z-index:3;width:100%;max-width:330px;height:auto;
  margin-inline:auto}
.hero__cap{position:relative;z-index:3;margin:0;padding:6px 10px 18px;
  font-size:.92rem;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:.96rem;font-weight:600;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 14px;background:var(--parch);border-bottom:2px solid var(--graph)}
.crumbs{font-size:.92rem;color:var(--ink-3);margin:0 0 14px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--blue)}
.phead h1{margin:0 0 16px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide);background:var(--parch-2)}
.lead{font-size:1.2rem;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 (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(--graph-d);color:#b9c1cb;font-size:.86rem;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}
.util__item+.util__item::before{content:"";width:4px;height:4px;border-radius:50%;
  background:#5d6874;flex:0 0 auto;margin-right:11px}
.util b{color:#f2f5f8;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 dose are on the pages that
     need them. */
  .util__item--trim{display:none}
  .util__row{gap:2px 14px;font-size:.82rem}
}
@media (max-width:980px){
  /* The role already sits in the topline strip, so the masthead does not need
     it twice. Dropping the sub-label lets the identity tab shrink enough for
     the burger to sit beside it instead of wrapping onto a second row. */
  .bw small{display:none}
  .brand{padding:8px 14px 10px}
  .bw b{font-size:1.32rem}
}

/* --- 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.
   REGENERATED ON EVERY BUILD from the rules below the marker. Edit
   the originals; never this copy, which is overwritten. */
@media (max-width:980px){
  .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:4px 0 16px}
  .hero__card{padding:16px 16px 0}
  .hero__card img{max-width:250px}
  .hero__cta{order:5}
  .hero__road{order:7}
  .hero__sub{order:8}
}
@media (max-width:760px){
  .hero{padding:24px 0 40px}
  /* The headline ran to five lines at 390 in the fallback face, which is 187px of the first screen before anything else is drawn. */ .hero h1{font-size:1.72rem;line-height:1.18}
  /* The plate hugs the bottle on a phone so the root-warm bloom, sized at 110% of the media column, still reads around it. */ .hero__card{max-width:304px;padding:18px 16px 0}
  .hero__card img{max-width:222px}
  .hero__cap{padding:4px 10px 14px}
}
@media (min-width: 981px){
  .hero__media{position: sticky; top: calc(var(--navh, 88px) + 14px); align-self: start; min-height: calc(100vh - var(--navh, 88px) - 28px); min-height: calc(100svh - var(--navh, 88px) - 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;}
}
/* --- end of the copied hero responsive rules --- */

/* ---- hero motif -- root-warm ---------------------------------------- */
.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:linear-gradient(176deg,#e7eaee,#c0ced8 54%,#e7eaee)}.hero__media::before{content:'';position:absolute;left:50%;bottom:6%;width:110%;aspect-ratio:1;translate:-50% 0;border-radius:50%;z-index:0;pointer-events:none;background:radial-gradient(closest-side,rgba(15,76,117,0.32),transparent 66%);animation:gavWarm 15s ease-in-out infinite}.hero__media::after{content:'';position:absolute;left:50%;bottom:6%;width:64%;aspect-ratio:1;translate:-50% 0;border-radius:50%;z-index:0;pointer-events:none;background:radial-gradient(closest-side,rgba(15,76,117,0.26),transparent 58%);animation:gavWarm 15s ease-in-out infinite;animation-delay:3s}@keyframes gavWarm{0%,100%{opacity:.26;transform:translate(-50%,0) scale(.9)}50%{opacity:.7;transform:translate(-50%,0) scale(1.08)}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}



/*!SITE-HOME-CRIT-START*/
/* ---- home page, slot: orbit. .hero is index-only, so every rule below is
   inert everywhere else this block is inlined. ---------------------------- */

/* Pricing row. The three Add To Cart buttons share ONE baseline because each
   card is bottom-anchored inside a stretched grid row. Both rules below keep
   that: a top margin on the two outer cards shortens them and lowers their
   top edge by the same amount, so all three bottoms still land on one line,
   and the ribbon band is paid for inside the card head, above the button.

   The head is pulled full-bleed first. .card--pack inherits .card's
   24px/22px padding, so the head band was floating inset inside the card
   while the ribbon -- absolute, against the padding box -- ran the full
   inner width; the two did not line up. The negative margin cancels exactly
   that padding, so band and ribbon share one edge.

   The 48px top padding is added to ALL THREE heads, including the card that
   carries no ribbon, or the three pack titles sit at three different heights
   and the prices below them stop lining up across the row. */
body:has(.hero) .card--pack:not(.featured){margin-top:18px}
body:has(.hero) .pack__head{margin:-24px -22px 0;padding:48px 20px 14px}
@media (max-width:760px){
  body:has(.hero) .card--pack:not(.featured){margin-top:0}
}

/* ---- hero motif -- orbit (replaces the root-warm blooms declared above) --
   A thin ring on the media column with one bright arc travelling it, one turn
   in 34 seconds. Both shapes are pseudo-elements of the column and are sized
   at 112% of it -- 562px against a 374px card at 1440 -- so the ring reads
   OUTSIDE the opaque product card rather than behind it. Nothing here touches
   the <img>: it is the LCP element and is preloaded. */
.hero__media::before,.hero__media::after{
  content:'';position:absolute;top:50%;left:50%;right:auto;bottom:auto;
  width:112%;height:auto;aspect-ratio:1;translate:-50% -50%;
  border-radius:50%;z-index:0;pointer-events:none;
  background:none;animation:none;animation-delay:0s}
.hero__media::before{
  border:2px solid rgba(15,76,117,.16);
  box-shadow:0 0 0 54px rgba(15,76,117,.035)}
.hero__media::after{
  border:2px solid transparent;
  border-top-color:rgba(15,76,117,.72);
  border-right-color:rgba(15,76,117,.26);
  animation:gavOrbitArc 34s linear infinite}
@keyframes gavOrbitArc{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.hero{background:linear-gradient(168deg,#f2f5f8 0%,#e1e7ec 54%,#e7eaee 100%)}
/* The block above this one hides both pseudo-elements outright when motion is
   reduced. Keep the ring drawn and simply stop it turning. */
@media (prefers-reduced-motion:reduce){
  .hero__media::before,.hero__media::after{opacity:1!important;animation:none!important}
}
/*!SITE-HOME-CRIT-END*/
/*!CRITICAL-END*/
/* ---- sections */
.sec{padding:60px 0;position:relative}
.sec--tint{background:#dde2e8}
.sec--panel{background:var(--parch)}
.sec--dark{background:var(--graph);color:#ccd3db}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#bcc5cf}
.sec--dark .eyebrow{color:#8fb7d2}
.sec--dark .eyebrow::before{border-color:#8fb7d2}
.sec--dark a{color:#9ec9e4}
/* A table inside a dark section keeps its own PARCHMENT background, so the
   section's light text colour would be light-on-light. Measured at 1.31:1 on
   eleven cells of the AI-summary table before this rule, which is invisible
   and which an ordinary contrast sweep misses because the cell's own
   background is set two elements up (responsive.md, proof 4). */
.sec--dark .tablewrap{border-color:var(--parch-line)}
.sec--dark table,.sec--dark td{color:var(--ink)}
.sec--dark td b{color:var(--graph-d)}
.sec--dark .tablewrap a{color:var(--blue)}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
/* a parchment band held between two graphite hairlines */
.sec--band{background:var(--parch);border-top:2px solid var(--graph);border-bottom:2px solid var(--graph)}
.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:#bcc5cf}

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

/* ---- tables */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--parch-line);
  border-radius:var(--radius);background:var(--parch-2)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:1.03rem}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--parch-line);vertical-align:top}
th{font-family:var(--text);font-weight:700;color:#fff;background:var(--graph);font-size:.94rem;
  letter-spacing:.03em}
tbody tr:nth-child(even){background:#f4eee0}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--graph-d)}
.tnote{font-size:.97rem;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(--parch);border:1px solid var(--parch-line);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:20px 22px 20px 72px;min-width:0}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:20px;top:19px;width:38px;height:38px;
  display:grid;place-items:center;border-radius:50%;
  background:var(--blue);color:#fff;
  font-family:var(--display);font-weight:800;font-size:1.08rem;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: parchment on graphite, a hairline and a low shadow */
.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))}
.grid>*{min-width:0}
.card{position:relative;background:var(--parch);border:1px solid var(--parch-line);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:24px 22px 22px;min-width:0;
  transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(23,27,32,.14)}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:var(--graph-2);border-color:#4d5661;box-shadow:none}
.sec--dark .card:hover{box-shadow:0 12px 26px rgba(0,0,0,.3)}

/* ---- callout, alert, quote, keypoints */
.callout{background:#e2edf4;border:1px solid #b6cfdf;border-left:6px solid var(--blue);
  border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--blue-d)}
.callout p:last-child{margin:0}
.alert{background:#f6edda;border:1px solid #dcc79a;border-left:6px solid var(--warn);
  border-radius:var(--radius);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.36rem;font-weight:500;line-height:1.5;
  color:var(--graph-d);border-left:4px solid var(--sky);padding:4px 0 4px 22px;margin:0 0 1.2em}
.pullquote cite{display:block;font-family:var(--text);font-size:.97rem;font-style:normal;
  font-weight:400;color:var(--ink-3);margin-top:8px}
.keypoints{background:var(--parch);border:1px solid var(--parch-line);border-left:6px solid var(--sky);
  border-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:start;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(--parch-line);border-radius:var(--radius);
  background:var(--parch)}
.split__body p:last-child{margin:0}
/* A .split is a pair: the media and the paragraph that belongs to it start on
   the same line. Centring them put the first line of copy 107-191px below the
   top of its own image (measured across all six of these sites, 1440px), which
   reads as a figure stranded in the column with the text floating beside it.
   The cap stops a 1:1 artwork at 551px from dwarfing two paragraphs; wide panel
   shots are unaffected because their height is set by the column width. Desktop
   only - below 761px the split is one column and the image is already small. */
@media (min-width:761px){
  .split__img img{max-height:420px;width:auto;margin-inline:auto}
}


/* ---- 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.35rem;font-weight:800;
  color:#fff;line-height:1.1}
.stats div span{display:block;font-size:.97rem;color:#b9c1cb;margin-top:4px}

/* ---- label versus research */
.versus{display:grid;grid-template-columns:1.05fr 1fr 1.1fr;border:1px solid var(--parch-line);
  border-radius:var(--radius);overflow:hidden;background:var(--parch-2);margin:0 0 1.2em}
.versus>div{padding:13px 16px;border-bottom:1px solid var(--parch-line);font-size:1rem;min-width:0}
.versus>div:nth-child(3n+1){font-weight:700;background:#f2ebdc}
.versus__h{background:var(--graph)!important;color:#fff;font-family:var(--text);
  font-weight:700;font-size:.94rem;letter-spacing:.03em}

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
/* Same family as the .split fix above. .ingcard is a grid ITEM, and a grid
   item's default min-width is auto -- so the card cannot shrink below its
   min-content. `.ing__dose` is white-space:nowrap and sets that floor. */
.inglist>*{min-width:0}
.ingcard{background:var(--parch);border:1px solid var(--parch-line);border-radius:var(--radius);
  box-shadow:var(--shadow);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:.97rem;font-style:italic;color:var(--ink-3)}
.ing__dose{margin-left:auto;font-size:.94rem;font-weight:700;color:#fff;background:var(--graph);
  border-radius:999px;padding:4px 14px;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}
.card--pack{display:flex;flex-direction:column;background:var(--parch-2);
  border:2px solid transparent;outline:1px solid var(--parch-line);outline-offset:-1px;
  border-radius:var(--radius-lg);overflow:hidden;position:relative;min-width:0;
  box-shadow:var(--shadow)}
/* A pricing row shares one height and one button baseline, so the card lift
   every other .card gets is cancelled here. Every card carries a 2px
   transparent border and the featured one changes only its COLOUR, so
   border-box never steals 2px from one card's content and drops its button out
   of line (responsive.md proof 3). */
.card--pack:hover{transform:none;box-shadow:var(--shadow)}
.card--pack.featured{border-color:var(--blue);box-shadow:0 14px 30px rgba(15,76,117,.2)}
.pack__head{background:#efe7d4;border-bottom:1px solid var(--parch-line);padding:14px 20px;
  display:flex;align-items:center;gap:10px;min-width:0}
.card--pack.featured .pack__head{background:var(--blue);border-bottom-color:var(--blue)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--display);font-size:1.18rem;font-weight:800}
.pack__head span{font-size:.86rem;font-weight:700;color:var(--ink-3);margin-left:auto;white-space:nowrap}
.pack__flag{position:absolute;right:0;top:0;background:var(--graph-d);color:#fff;
  font-family:var(--text);font-size:0.8438rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 13px;border-radius:0 0 0 var(--radius);z-index:3}
.pack__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px;min-width:0}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);object-fit:contain;
  margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:2.45rem;font-weight:800;color:var(--graph-d);
  line-height:1;text-align:center;margin:0}
.pack__per sup{font-size:1rem;font-weight:700;top:-.7em}
.pack__unit{display:block;text-align:center;font-size:.92rem;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:1.03rem}
.pack__tot b{font-weight:700}
.pack__was{color:var(--ink-3);text-decoration:line-through;font-weight:600}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:.97rem;min-height:132px}
.pack__perks li{position:relative;padding-left:24px;margin:0 0 6px;color:var(--ink-2);font-size:1.062rem}
.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:.92rem;color:var(--ink-3)}
.buy__note{font-size:.97rem;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))}
/* A single figure dropped into the two-column grid renders at half width with a
   hole beside it. s1 gives it the row and caps the measure. */
.shots.s1{grid-template-columns:minmax(0,1fr)}
.shots.s1 figure{max-width:760px;margin-inline:auto}
.shots>*{min-width:0}
.shots figure{margin:0;background:var(--parch);border:1px solid var(--parch-line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.shots img{width:100%}
.shots figcaption{padding:16px 18px}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--graph-d)}
.shots figcaption span{font-size:1rem;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 figure{margin:0;text-align:center;background:var(--parch);border:1px solid var(--parch-line);
  border-radius:var(--radius);padding:18px 16px;min-width:0}
.badgewall img{width:74px;height:74px;object-fit:contain;margin:0 auto 10px}
.badgewall b{display:block;font-size:1rem;margin-bottom:4px;color:var(--graph-d)}
.badgewall span{font-size:.97rem;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:.97rem}
.meter__bar{height:12px;background:var(--line);border-radius:999px;overflow:hidden}
.meter__bar i{display:block;height:100%;background:var(--blue)}
.stars{color:#a9791f;letter-spacing:1px}
.stars i{font-style:normal;opacity:.34}

/* ---- FAQ. Padding on <summary>, which is the click target. */
.faq{border:1px solid var(--parch-line);border-radius:var(--radius);overflow:hidden;
  background:var(--parch-2);margin:0 0 1.2em}
.faq details{border-bottom:1px solid var(--parch-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:800;font-size:1.12rem;color:var(--graph-d)}
.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.4rem;font-weight:400;color:var(--blue)}
.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: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 pushes a single <a> past the viewport,
   clipped and unscrollable. `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(--parch);border:1px solid var(--parch-line);
  border-left:6px solid var(--blue);border-radius:var(--radius);padding:22px 24px;margin:0 0 1.2em}
.byline__mark{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;border-radius:50%;
  background:var(--blue);color:#fff;font-family:var(--display);font-weight:800;font-size:1.1rem}
.byline b{display:block;margin-bottom:6px;color:var(--graph-d)}
.byline p{font-size:1rem;color:var(--ink-2);margin:0}
.byline>div{min-width:0}

/* ---- closing CTA */
.final{background:var(--parch);border:1px solid var(--parch-line);border-top:6px solid var(--blue);
  border-radius:var(--radius);box-shadow:var(--shadow);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:230px}
.final h2{margin:0 0 10px}
.final__price{font-weight:700;color:var(--ink-2)}
.final__sm{font-size:.97rem;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(--parch);border:1px solid var(--parch-line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px;
  text-decoration:none;color:var(--ink);transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.rel a:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(23,27,32,.14)}
.rel b{display:block;font-family:var(--display);font-size:1.14rem;font-weight:800;color:var(--graph-d);margin-bottom:5px}
.rel span{font-size:.97rem;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:1rem;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(--parch-line);border-radius:var(--radius);
  background:var(--parch-2);color:var(--ink)}
.field textarea{min-height:140px;resize:vertical}
.field small{display:block;font-size:.92rem;color:var(--ink-3);margin-top:5px}

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

/* ---- footer: a graphite slab with the destinations as a numbered ladder.
   Each link is a rung: a counter in the accent to its left, a hairline rung
   beneath it, and the whole column reading top to bottom like a ladder. */
.fcta{position:relative;background:var(--graph);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__eye{display:inline-block;font-family:var(--text);font-size:.86rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#8fb7d2;margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.74rem;font-weight:800;line-height:1.22;margin:0 0 10px}
.fcta p{color:#bcc5cf}
.fcta__sm{font-size:.97rem;color:#98a2ae;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:#9ec9e4}
.fcta__img img{width:300px}
footer{background:var(--graph-d)}
.fcontact{padding-block:40px 0}
.fcard{background:transparent;padding:0 0 30px;border-bottom:1px solid #39404a;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 28px}
.fcard>*{min-width:0}
.fbrand{font-family:var(--display);font-size:1.85rem;font-weight:800;color:#fff;
  letter-spacing:-.01em;line-height:1}
.fbrand span{color:var(--sky)}
.frole{font-size:.97rem;color:#98a2ae;margin:8px 0 0}
.fcard p{font-size:1.062rem;color:#bcc5cf;margin:0 0 .7em}
.fcard b{color:#fff}
.fcard a{color:#9ec9e4}
.flinks{background:var(--graph-d);color:#bcc5cf;padding-block:34px 26px}
.fgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.fgrid>*{min-width:0}
.fh{font-family:var(--text);font-size:.86rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#8a95a2;margin:0 0 10px}
.fgrid ul{list-style:none;margin:0 0 20px;padding:0;counter-reset:rung}
.fgrid li{margin:0;border-bottom:1px solid #2c333b}
.fgrid li:last-child{border-bottom:0}
.fgrid li::before{counter-increment:rung;content:counter(rung,decimal-leading-zero);
  float:left;width:26px;font-family:var(--text);font-size:.8rem;font-weight:700;
  color:var(--sky);line-height:2.1;letter-spacing:.04em}
/* 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:7px;margin-block:-1px;font-size:1rem;
  color:#d2d9e1;text-decoration:none}
footer li a:hover{color:#fff;text-decoration:underline}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:22px 0 0;
  border-top:1px solid #39404a}
.fseals img{width:44px;height:44px;object-fit:contain}
.fseals span{font-size:.97rem;color:#98a2ae}
/* The seal row and the payment row each carry one inline link, and neither was
   covered by the footer's link colours, so both fell back to the page accent:
   a dark petrol blue on a graphite slab, at 1.9:1. */
.fseals a,.fpay a{color:#9ec9e4}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:18px 0 0}
.fpay img{width:230px;height:auto}
.fpay span{font-size:.97rem;color:#98a2ae}
.disc{background:var(--graph);border-top:1px solid #39404a;padding:28px 0 32px}
.disc p,.disc li{font-size:.97rem;color:#bcc5cf}
.disc b{color:#fff}
.disc a{color:#9ec9e4}
.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:.66em;width:6px;height:6px;
  border-radius:50%;background:var(--sky)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid #39404a;font-size:.97rem}

/* ---- sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--graph-d);color:#fff;
  transform:translateY(105%);transition:transform .25s var(--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:.97rem;min-width:0}
.buybar__t b{display:block;font-size:1.03rem;color:#fff}
.buybar__t span{color:#b9c1cb}
.buybar .btn{margin-left:auto;flex:0 0 auto}

/* ---- reveal */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--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){
  .menu{gap:0 16px;margin-left:10px}
  .menu a{font-size:.92rem}
}
@media (max-width:1080px){
  .nav__price{display:none}
  .fcard{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  :root{--navh:96px}
  .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:4px 0 16px}
  .hero__card{padding:16px 16px 0}
  .hero__card img{max-width:250px}
  .answer{order:4}
  .hero__cta{order:5}
  .hero__road{order:7}
  .hero__sub{order:8}
  .trust__row{order:9}
  .factpills{order:10}
  .figures{order:11}
  .menu{display:none;flex-direction:column;align-items:stretch;gap:0;
    flex-basis:100%;order:9;margin:0;padding:6px 0 12px}
  .menu.open{display:flex}
  .menu__more{display:block}
  .menu a{padding:12px 0;border-bottom:1px solid var(--line)}
  .menu a[aria-current="page"]{border-bottom-color:var(--blue)}
  .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}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  body{font-size:17px}
  .sec{padding:44px 0}
  .hero{padding:24px 0 40px}
  /* The headline ran to five lines at 390 in the fallback face, which is 187px
     of the first screen before anything else is drawn. */
  .hero h1{font-size:1.72rem;line-height:1.18}
  /* The plate hugs the bottle on a phone so the root-warm bloom, sized at 110%
     of the media column, still reads around it. */
  .hero__card{max-width:304px;padding:18px 16px 0}
  .answer{padding:15px 18px}
  .answer p{font-size:1.04rem;line-height:1.6}
  .hero__card img{max-width:222px}
  .hero__cap{padding:4px 10px 14px}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr}
  .card--pack.featured{order:-1}
  .pack__perks{min-height:0}
  .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:3px solid var(--graph)}
  /* At one column the three .versus__h bars stop labelling anything: a reader
     meets a stack of three titles and then nine unlabelled cells. Hide the bars
     and let every cell carry its own heading from data-l instead. */
  .versus__h{display:none}
  .versus>div[data-l]::before{content:attr(data-l);display:block;margin-bottom:3px;
    font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    color:var(--ink-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 card edge. On a phone let it sit at the start of its own line. */
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .figures{grid-template-columns:1fr;gap:8px}
  .fcard{grid-template-columns:1fr}
  .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}
  .fgrid{grid-template-columns:1fr}
}

/* ---- hero: the plate rests and lifts -------------------------------------
   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. */
@media (prefers-reduced-motion:no-preference){
  .hero__card{animation:gavRest 9s ease-in-out infinite}
  @keyframes gavRest{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
}

/* ---- 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: nav heights run 66-112px across
   the estate and change when a bar compacts, and a hardcoded offset tucks the
   product under the bar on the taller ones.

   min-height makes the sticky box a full screen tall so the shot can be CENTRED
   inside it. Without it the box is only as tall as the image and `top` merely
   pins it under the header.

   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, 88px) + 14px);
    align-self: start;
    min-height: calc(100vh - var(--navh, 88px) - 28px);
    min-height: calc(100svh - var(--navh, 88px) - 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 product shots are three different
   shapes here -- 765x765, 765x765 and 900x600 -- 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,168px);
  object-fit:contain;margin-inline:auto;margin-bottom:14px}
.card--pack>.btn{margin-top:auto}

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

/* ==== tables never fade (reveal_skip_tables.py) ==== */
/* A comparison table is reference content the reader scrolled to on
   purpose. Fading it in leaves it illegible for half a second at exactly
   that moment, which reads as broken text rather than as motion. The
   reveal stays on cards and callouts, which are decorative arrivals. */
.tablewrap[data-reveal],.tablewrap.reveal{opacity:1;transform:none;transition:none}
/* ==== end tables never fade ==== */

/*!SITE-HOME-PAINT-START*/
/* ======================================================================
   goartivorin.com home page -- slot: orbit
   radius 20px panels / 14px controls, depth = tight contact + wide ambient
   tinted with this site's own ink (29,33,38), gradient on the buying CTA
   only. Paint only: radius, shadow, background, colour, transform,
   transition. Appended last, but modern_surface.py and footer_type.py
   re-append after it on every build -- so every rule here is scoped
   body:has(.hero) and outranks them on specificity, never on order.
   ====================================================================== */

/* The two surface tokens are redefined on BODY, not :root. modern_surface.py
   owns the :root copy and rewrites it on every build; a value set on a
   descendant is inherited past it whatever the source order. Only the home
   page carries .hero, so no other page moves. */
body:has(.hero){
  --radius:20px;
  --radius-lg:20px;
  --shadow:0 1px 2px rgba(29,33,38,.08), 0 10px 28px rgba(29,33,38,.10);
  --lift:0 2px 4px rgba(29,33,38,.10), 0 18px 44px rgba(29,33,38,.16);
  --gav-ctl:14px}

/* The masthead tab is shared chrome. Pin it to the radius the other 30 pages
   draw so the header does not change shape when the reader leaves home. */
body:has(.hero) .brand{border-radius:16px 16px 0 0}

/* ---- controls sit at 14px, panels at 20px ---------------------------- */
body:has(.hero) .btn,
body:has(.hero) .burger,
body:has(.hero) input,
body:has(.hero) select,
body:has(.hero) textarea{border-radius:var(--gav-ctl)}

/* ---- the buying CTA is the only gradient on the page ------------------
   Every buy route carries .btn--cyan: the hero CTA, the masthead button, the
   three Add To Cart buttons and the sticky bar. The secondary button stays
   flat parchment, so the pair reads as two weights rather than two colours.
   .btn and .btn:hover both set the `background` SHORTHAND, which resets
   background-image to none -- these longhands outrank both. */
body:has(.hero) .btn--cyan{
  background-color:#0f4c75;
  background-image:linear-gradient(135deg,#1a6ea9 0%,#0f4c75 54%,#0a3453 100%);
  box-shadow:0 1px 2px rgba(10,52,83,.24), 0 10px 26px rgba(15,76,117,.26);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease)}
body:has(.hero) .btn--cyan:hover{
  background-color:#0a3453;
  background-image:linear-gradient(135deg,#1f7cbb 0%,#12578a 54%,#0a3453 100%);
  box-shadow:0 2px 4px rgba(10,52,83,.26), 0 16px 34px rgba(15,76,117,.34);
  transform:translateY(-2px)}
body:has(.hero) .btn--cyan:active{transform:translateY(0)}
body:has(.hero) .btn--ghost{
  background-image:none;
  background-color:var(--parch);
  border-color:var(--parch-line);
  box-shadow:0 1px 2px rgba(29,33,38,.07), 0 6px 16px rgba(29,33,38,.07);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease)}
body:has(.hero) .btn--ghost:hover{
  background-color:var(--parch-2);
  box-shadow:0 2px 4px rgba(29,33,38,.09), 0 12px 26px rgba(29,33,38,.13);
  transform:translateY(-2px)}

/* A keyboard ring the buying colour cannot be mistaken for the hover state. */
body:has(.hero) .btn:focus-visible,
body:has(.hero) .menu a:focus-visible,
body:has(.hero) .faq summary:focus-visible{
  outline:3px solid var(--blue);outline-offset:3px;
  box-shadow:0 0 0 6px rgba(15,76,117,.16)}

/* ---- hero ------------------------------------------------------------ */
body:has(.hero) .hero__card{
  border-radius:20px;
  border-color:rgba(29,33,38,.82);
  box-shadow:0 2px 6px rgba(29,33,38,.10), 0 22px 52px rgba(15,76,117,.20)}
body:has(.hero) .answer{
  border-radius:20px;
  background:linear-gradient(180deg,#fffdf7 0%,#fdfaf2 100%);
  box-shadow:0 1px 2px rgba(29,33,38,.07), 0 10px 28px rgba(29,33,38,.10)}
body:has(.hero) .hero .factpills li{
  background:linear-gradient(180deg,#fdfaf2 0%,#f4eedf 100%);
  border-color:rgba(221,210,184,.9);
  box-shadow:0 1px 1px rgba(29,33,38,.05)}
body:has(.hero) .hero .figures div{
  border-radius:16px;
  background:linear-gradient(180deg,#fdfaf2 0%,#f5efe1 100%);
  box-shadow:0 1px 2px rgba(29,33,38,.07), 0 8px 20px rgba(29,33,38,.08)}

/* ---- pricing --------------------------------------------------------- */
body:has(.hero) .card--pack{
  border-radius:20px;
  box-shadow:0 1px 2px rgba(29,33,38,.08), 0 10px 28px rgba(29,33,38,.10);
  transition:box-shadow .2s var(--ease)}

/* The recommended tier is raised by the critical block; here it is also the
   only cool-toned card in the row, so the eye lands on it before the price. */
body:has(.hero) .card--pack.featured{
  background:linear-gradient(180deg,#f4f8fb 0%,#fdfaf2 46%);
  border-color:var(--blue);
  box-shadow:0 2px 6px rgba(10,52,83,.14), 0 22px 48px rgba(15,76,117,.26)}
body:has(.hero) .card--pack.featured .pack__head{
  background:linear-gradient(180deg,#14608f 0%,#0f4c75 100%)}
body:has(.hero) .card--pack:hover{
  box-shadow:0 2px 6px rgba(29,33,38,.11), 0 20px 44px rgba(29,33,38,.17)}
body:has(.hero) .card--pack.featured:hover{
  box-shadow:0 2px 6px rgba(10,52,83,.16), 0 26px 56px rgba(15,76,117,.30)}

/* The ribbon is a full-width bar across the top of the card, not a corner
   tag. It stays ABSOLUTE so it adds no height; the room it occupies is paid
   for by the head's padding-top in the critical block. */
body:has(.hero) .pack__flag{
  left:0;right:0;width:auto;height:34px;
  display:flex;align-items:center;justify-content:center;
  padding:0 14px;border-radius:0;
  font-size:.78rem;letter-spacing:.15em;line-height:1;
  background:var(--graph-d)}
/* Solid, and a stop darker than the head beneath it: a second gradient here
   fought the head's own and the two blues read as a seam rather than a band. */
body:has(.hero) .card--pack.featured .pack__flag{background:#0a3453}

/* The two-bottle rung carries no ribbon, but its head still reserves the
   band, or the three pack titles fall at three different heights. Give that
   reserved strip a tone of its own so it reads as the quiet member of a set
   of three bands rather than as a label that failed to render. */
body:has(.hero) .card--pack:not(:has(.pack__flag)) .pack__head{
  background:linear-gradient(180deg,#e4dcc6 0,#e4dcc6 34px,#efe7d4 34px)}

/* Dashed rules between the feature rows, drawn on an absolutely positioned
   pseudo-element so the list keeps its height to the pixel and the three
   button baselines do not move. */
body:has(.hero) .pack__perks li::after{
  content:"";position:absolute;left:24px;right:0;bottom:-3px;
  border-top:1px dashed rgba(29,33,38,.22)}
body:has(.hero) .pack__perks li:last-child::after{content:none}

/* ---- page surfaces --------------------------------------------------- */
body:has(.hero) .card,
body:has(.hero) .callout,
body:has(.hero) .alert,
body:has(.hero) .keypoints,
body:has(.hero) .ingcard,
body:has(.hero) .faq,
body:has(.hero) .final,
body:has(.hero) .fcard,
body:has(.hero) .tablewrap,
body:has(.hero) .split__img{
  box-shadow:0 1px 2px rgba(29,33,38,.08), 0 10px 28px rgba(29,33,38,.10)}
body:has(.hero) .card{
  transition:transform .2s var(--ease), box-shadow .2s var(--ease)}
body:has(.hero) .card:hover{
  transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(29,33,38,.10), 0 18px 44px rgba(29,33,38,.16)}
body:has(.hero) .card--pack:hover{transform:none}
body:has(.hero) .rel a{
  border-radius:16px;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease)}
body:has(.hero) .rel a:hover{transform:translateY(-2px)}

/* Nothing above may move when the reader has asked for less motion. */
@media (prefers-reduced-motion:reduce){
  body:has(.hero) .btn--cyan,
  body:has(.hero) .btn--ghost,
  body:has(.hero) .card,
  body:has(.hero) .card--pack,
  body:has(.hero) .rel a{transition:none}
  body:has(.hero) .btn--cyan:hover,
  body:has(.hero) .btn--ghost:hover,
  body:has(.hero) .card:hover,
  body:has(.hero) .rel a:hover{transform:none}
}
/*!SITE-HOME-PAINT-END*/
/* ==== 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 .copy{font-size:16px}
footer .disc li{font-size:16px}
footer .disc p{font-size:16px}
footer .fgrid li::before{font-size:16px}
footer .fh{font-size:15px}
footer .fpay span{font-size:16px}
footer .fseals span{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 36 box-shadow declaration(s)
   and 13 of them layered, so every panel read flat however generous
   the radius was. Two stops -- a tight contact shadow and a wide
   ambient one -- is what makes a surface look raised. The tint is
   this site's own ink (29,33,38), not neutral black.

   Paint only: border-radius, box-shadow and transform change no
   geometry, so this is safe below the critical marker and needs a
   restamp rather than a rebuild. */
:root{
  --radius:16px;
  --shadow:0 1px 2px rgba(29,33,38,.06), 0 6px 18px rgba(29,33,38,.07);
  --lift:0 2px 6px rgba(29,33,38,.09), 0 16px 34px rgba(29,33,38,.14);
}

/* These panels declared no radius of their own, so raising
   the token alone left them square. House rule 11 is a
   floor: it outranks a slot that chose square corners. */
.split__img{border-radius:var(--radius)}

/* A surface a reader can click answers the pointer. 2px
   registers without reflowing the row beside it. */
.rel a,
.posts article,
.shots figure,
.card--pack,
.badgewall figure{transition:box-shadow .2s ease, transform .2s ease}
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure:hover{box-shadow:var(--lift);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure:hover{transform:none}
}
/* ==== end modern surface ==== */
.review-foot{margin:0;padding:.6rem 0;font-size:.92rem}.review-foot a{font-weight:600}