/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Chivo Fallback";src:local("Arial");font-weight:400;size-adjust:108.03%;ascent-override:87.01%;descent-override:23.14%;line-gap-override:0.00%}
@font-face{font-family:"Chivo Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:101.57%;ascent-override:92.55%;descent-override:24.61%;line-gap-override:0.00%}
@font-face{font-family:"Eczar Fallback";src:local("Georgia");font-weight:400;size-adjust:98.94%;ascent-override:115.52%;descent-override:64.08%;line-gap-override:0.00%}
@font-face{font-family:"Eczar Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:93.48%;ascent-override:122.28%;descent-override:67.82%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* govisivra.com - Visivra, licensed U.S. retail desk.
   Design slot, batch10_assignments.py: Eczar / Chivo, a deep indigo ground with
   pale sand panels and DARK FIRST, a slim indigo bar whose destinations sit on a
   recessed sand strip beneath it, a sand index above an indigo legal rail, and
   the aperture-rest hero motif.

   The ground is taken from the product's own artwork rather than from its
   bottle. Both vendor scenes are rendered on deep indigo glass, and the corner
   pixels of the ingredients tile measure at 6,15,21. So the page is that indigo
   and the reading surfaces are pale sand laid on top of it. The accent is the
   bright end of the label's own gradient, kept well clear of the mid azure the
   sister desk uses, because on an indigo ground a mid azure is barely a colour.

   Shape language: flat. 2px corners, hairline keylines, no shadow on any card,
   no gradient on any button. Where a supplement site usually lifts a card, this
   one rules it.

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

/* ---- tokens */
:root{
  --dark:#141b3e;            /* the page: deep indigo, dark first */
  --dark-2:#0c1230;          /* the legal rail and the deepest bands */
  --dark-3:#202a56;          /* a raised indigo surface on the dark ground */
  --line-d:#333e70;          /* a keyline that reads on indigo */
  --cyan:#3fb3e6;            /* the bright end of the label gradient */
  --cyan-d:#125f8c;          /* the same hue, for type and links on sand */
  --sand:#efe6d4;            /* the pale sand panel */
  --sand-2:#f8f3e8;          /* the lighter sand card */
  --sand-3:#e2d7c0;          /* the sand tint band */
  --paper:#faf6ed;           /* the lightest plate, behind product art */
  --ink:#1b2140;             /* type on sand */
  --ink-2:#3d4566;
  --ink-3:#5f6786;
  --on-dark:#ccd5ea;         /* type on indigo */
  --on-dark-2:#9aa6c8;
  --line:#d8cdb4;
  --line-2:#c3b697;
  --good:#2f7d4f;
  --warn:#8a5a10;
  --wrap:1200px;
  --measure:740px;
  --measure-wide:980px;
  --radius:2px;
  --radius-lg:3px;
  --pill:2px;
  --shadow:0 0 0 0 rgba(0,0,0,0);
  --shadow-lg:0 0 0 0 rgba(0,0,0,0);
  --navh:118px;
  --display:"Eczar","Eczar Fallback",Georgia,"Times New Roman",serif;
  --text:"Chivo","Chivo Fallback",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(--dark);color:var(--on-dark);
  font-family:var(--text);font-size:17px;line-height:1.74;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--cyan);text-underline-offset:3px}
a:hover{color:#8ed2f2}
/* Eczar carries weight at display size and goes muddy under 20px, so it is
   used for h1 and h2 only; h3 and h4 stay in Chivo (typography.md). */
h1,h2{font-family:var(--display);color:#f3f6ff;font-weight:700;line-height:1.1;margin:0 0 .4em}
h3,h4{font-family:var(--text);color:#f3f6ff;font-weight:700;line-height:1.34;margin:0 0 .5em}
h1{font-size:clamp(2rem,1.36rem + 2.3vw,3rem);letter-spacing:-.012em}
h2{font-size:clamp(1.7rem,1.24rem + 1.55vw,2.5rem);letter-spacing:-.008em}
h3{font-size:1.14rem}
h4{font-size:1.02rem}
p,li{font-size:1.0625rem}
p{margin:0 0 1.05em}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.skip{position:absolute;left:-9999px;top:0;background:var(--cyan);color:var(--dark-2);padding:12px 18px;z-index:200;font-weight:700}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it. A drawn rule rather than
   a dot, so it reads as a rule-and-label masthead like the header below it. */
.eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--text);font-size:0.8438rem;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:var(--cyan);
  margin:0 0 11px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--cyan);flex:0 0 auto}

/* ---- buttons: square blocks, uppercase, flat fills only */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:15px 30px;
  font-family:var(--text);font-size:.9375rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  border:0;border-radius:var(--pill);cursor:pointer;text-decoration:none;
  background:var(--cyan);color:var(--dark-2);
  transition:background .16s ease,color .16s ease;
}
.btn:hover{background:#7ccdf1;color:var(--dark-2)}
.btn:active{transform:translateY(1px)}
/* The buy button is the cyan block with indigo type: measured 7.4:1, where
   white on the same cyan would be 2.1:1 (pitfall 92). */
.btn--cyan{background:var(--cyan);color:var(--dark-2)}
.btn--cyan:hover{background:#7ccdf1;color:var(--dark-2)}
.btn--lg{min-height:60px;padding:17px 36px;font-size:1rem}
.btn--ghost{background:none;color:var(--on-dark);box-shadow:inset 0 0 0 2px var(--line-d)}
.btn--ghost:hover{background:var(--dark-3);color:#fff}
.btn--wide{width:100%}
/* Button type colour, held above every container link rule.
   The two declarations above were correct and never reached the page. This
   stylesheet gives each reading container its own link colour -- .final a,
   .card a, .sec--tint a, .step a and twenty-four more -- and every one of them
   is (0,1,1) against .btn--cyan's (0,1,0), so a CTA dropped into one was
   repainted the accent. .final a put cyan type on the cyan block at 1.00:1,
   which is the button drawn in its own fill and completely unreadable, and
   .card a put cyan-d on it at 2.89:1 on the three pack buttons. Same two
   colours as above, at a specificity no container rule can outrank; the :hover
   pair carries an extra `a` because .sec--tint a:hover is (0,2,1) and lands
   later in the file. Measured on the built page at 1440 and 390: 7.69:1 rest,
   10.36:1 hover, against a 4.5 floor. */
.btn.btn--cyan,a.btn.btn--cyan{color:var(--dark-2)}
.btn.btn--cyan:hover,a.btn.btn--cyan:hover{color:var(--dark-2)}
.btn.btn--ghost,a.btn.btn--ghost{color:var(--on-dark)}
.btn.btn--ghost:hover,a.btn.btn--ghost:hover{color:#fff}

/* ---- header: a slim indigo bar over a recessed sand strip */
.nav{position:sticky;top:0;z-index:100;background:var(--dark)}
/* padding-BLOCK, never the shorthand: this element also carries .wrap, and
   `padding:10px 0` would set padding-inline to 0 and wipe the page gutter.
   Invisible above the container max-width, and no overflow test can see it
   (pitfall 46). */
.nav__top{display:flex;align-items:center;gap:18px;padding-block:10px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff}
.brand__glyph{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 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 (pitfall 16). */
.brand>svg{width:34px;height:34px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.05}
.bw b{font-family:var(--display);font-size:1.5rem;font-weight:700;letter-spacing:.01em;color:#fff}
.bw b em{font-style:normal;color:var(--cyan)}
.bw small{font-size:0.8125rem;font-weight:400;color:var(--on-dark-2);letter-spacing:.06em;text-transform:uppercase}
.nav__rail{margin-left:auto;display:flex;align-items:center;gap:16px}
.nav__price{text-align:right;line-height:1.18}
.nav__price b{display:block;font-family:var(--display);font-size:1.2rem;font-weight:700;color:#fff}
.nav__price span{font-size:.78125rem;font-weight:400;color:var(--on-dark-2)}
.nav__buy{min-height:44px;padding:11px 20px;font-size:.84rem}
.burger{
  display:none;width:46px;height:44px;background:transparent;border:1px solid var(--line-d);
  border-radius:var(--radius);cursor:pointer;padding:11px 10px;
}
.burger span{display:block;height:2px;background:#fff;margin:0 0 5px;border-radius:0}
.burger span:last-child{margin:0}
/* tier two: a full-bleed SAND strip, recessed into the indigo bar above it by a
   real inset shadow rather than drawn as a floating pill. */
.nav__strip{background:var(--sand-3);box-shadow:inset 0 4px 7px rgba(6,10,28,.34),inset 0 -1px 0 var(--line-2)}
.nav__strip>.wrap{padding-inline:22px}
.menu{
  display:flex;flex-wrap:wrap;gap:0 24px;list-style:none;margin:0;padding:0;
  align-items:center;min-height:38px;
}
.menu a{
  display:inline-block;padding:9px 0;font-family:var(--text);
  font-size:.875rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;border-bottom:2px solid transparent;
}
.menu a:hover{color:var(--ink)}
.menu a[aria-current="page"]{color:var(--cyan-d);border-bottom-color:var(--cyan-d)}
.menu__more{display:none}

/* ---- hero: copy LEFT, the pack RIGHT, on the indigo ground */
.hero{position:relative;padding:36px 0 58px;overflow-x:clip;color:var(--on-dark)}
.hero__grid{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:38px;align-items:center}
.hero__copy{display:flex;flex-direction:column;min-width:0}
.hero h1{margin:0 0 18px;color:#f6f8ff}
.hero h1 em{font-style:normal;color:var(--cyan)}
/* The Quick Answer is a raised indigo plate, not a sand card: a bright card in
   the middle of a dark first screen would out-shout the H1 above it. */
.answer{
  background:var(--dark-3);border:1px solid var(--line-d);
  border-left:3px solid var(--cyan);border-radius:0 var(--radius) var(--radius) 0;
  padding:18px 22px;margin:0 0 16px;
}
.answer p{margin:0 0 .72em;font-size:1.0625rem;color:var(--on-dark)}
.answer p b{color:#fff}
.answer p:last-child{margin:0}
.hero__road{font-size:.9688rem;color:var(--on-dark-2);margin:0 0 18px;max-width:58ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
/* The pair has to sit on ONE row at 1440, in both font states. Measured with
   webfonts blocked, a wrapped pair put the second button's bottom edge at
   y=977 against a 900px fold, which is the two-half-buttons defect hero.md
   records. The buttons are allowed to shrink and their labels are not allowed
   to break, so the row stays one row and the CTA stays above the fold. */
.hero__cta .btn{flex:0 1 auto;min-width:0;white-space:nowrap}
.hero__cta .btn--lg{padding:16px 22px;font-size:.9375rem;letter-spacing:.05em}
.hero__sub{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 18px;font-size:0.9688rem;font-weight:700;color:var(--on-dark)}
.hero__sub span{display:inline-flex;align-items:center;gap:7px}
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 20px;padding:0}
.factpills li{
  font-size:0.9062rem;font-weight:400;color:var(--on-dark);background:none;
  border:1px solid var(--line-d);padding:6px 14px;border-radius:var(--radius);
}
.factpills li b{color:#fff;font-weight:700}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0;background:var(--line-d);border:1px solid var(--line-d)}
.figures div{background:var(--dark);padding:14px 16px}
.figures b{display:block;font-family:var(--display);font-size:1.8rem;font-weight:700;color:var(--cyan);line-height:1}
.figures span{display:block;font-size:0.9062rem;font-weight:400;color:var(--on-dark-2);margin-top:5px}
/* The pack stands free on the indigo with no plate behind it, so the aperture
   ring and its bloom read around the bottles rather than under a panel. */
.hero__media{position:relative;align-self:center;min-width:0}
.hero__card{position:relative;z-index:2;text-align:center;padding:10px}
.hero__card img{width:100%;max-width:386px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 26px 44px rgba(4,8,24,.62))}
.hero__cap{margin:16px 0 0;font-size:.8125rem;font-weight:400;color:var(--on-dark-2);text-align:center}

/* ---- inner page head */
.phead{padding:36px 0 30px;background:var(--dark)}
.crumbs{font-size:0.9062rem;color:var(--on-dark-2);margin:0 0 13px}
.crumbs a{color:var(--on-dark);text-decoration:none}
.crumbs a:hover{color:var(--cyan)}
.phead h1{margin:0 0 16px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide)}
.phead .lead{color:var(--on-dark-2)}
.lead{font-size:1.14rem;color:var(--on-dark-2);max-width:var(--measure)}

/* ---- topline strip: the five trust facts, above the navigation.
   Role, lot, count, guarantee, order phone. It exists so the NAV does not have
   to carry them: getexitide shipped without one, pushed the lot into the menu
   as a chip, crowded the navigation and still left the other four facts off the
   page (hero.md). It 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(--dark-2);color:var(--on-dark-2);font-size:.8125rem;line-height:1.5}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 17px;padding-block:8px}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.util__item+.util__item::before{content:"";width:1px;height:12px;
  background:var(--line-d);flex:0 0 auto;margin-right:11px}
.util b{color:#eef2ff;font-weight:700}
.util a{color:var(--cyan);text-decoration:none}
.util a:hover{text-decoration:underline}
@media (max-width:760px){
  /* Five items wrap to three lines and eat 103px of an 844px screen (hero.md).
     Keep role, guarantee and phone; the lot and the count are on the pages that
     need them. */
  .util__item--trim{display:none}
  .util__row{gap:4px 13px}
}

/* --- hero responsive rules, copied into the critical block
   A phone painted the desktop hero from the inline block and then
   jumped when the async sheet arrived -- 692px on one site, CLS 0.95.
   These are COPIES: the originals stay below, so the cascade is
   unchanged and the first paint is already correct. */
@media (max-width:980px){
  /* Stacked, the pack sits between the H1 and the Quick Answer, so every pixel it takes pushes the answer down a phone screen. Capped here rather than left at the column width. */ .hero__card img{max-width:232px}
  .hero__cap{margin-top:10px}
  .hero__grid{grid-template-columns:1fr;gap:24px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:2px 0 12px}
  .hero__cta{order:5}
  /* The roadmap line moves BELOW the CTA on a phone. hero.md's stacked order is eyebrow, H1, shot, Quick Answer, CTA, and the roadmap line is not in it; at 390 it was a 110px block sitting between the answer and the button, which put the CTA at y=1227 against the 1100 target. It keeps its place on desktop, where there is room for it above the fold. */ .hero__road{order:7}
  .hero__sub{order:8}
}
@media (max-width:760px){
  .hero{padding:22px 0 42px}
  .hero__card{padding:4px}
  .hero__card img{max-width:206px}
  .hero .answer{padding:15px 17px}
  .hero .answer p{font-size:1rem}
  .hero__road{font-size:.9375rem}
}
@media (min-width: 981px){
  .hero__media{position: sticky; top: calc(var(--navh, 118px) + 14px); align-self: start; min-height: calc(100vh - var(--navh, 118px) - 28px); min-height: calc(100svh - var(--navh, 118px) - 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;}
}


/* ---- hero motif -- aperture-rest ---------------------------------------- */
.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(112% 86% at 50% 42%,#1c365c,#141b3e 54%,#141b3e)}.hero__media::before{content:'';position:absolute;left:50%;top:48%;width:114%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:1;pointer-events:none;border:2px solid rgba(63,179,230,0.50);animation:gvsAperture 14s cubic-bezier(.35,.9,.4,1) infinite}.hero__media::after{content:'';position:absolute;left:50%;top:48%;width:60%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:0;pointer-events:none;background:radial-gradient(closest-side,rgba(63,179,230,0.30),transparent 70%);animation:gvsGlow 14s ease-in-out infinite}@keyframes gvsAperture{0%,100%{transform:scale(.72);opacity:.22}40%,68%{transform:scale(1.04);opacity:.6}}@keyframes gvsGlow{0%,100%{opacity:.24}54%{opacity:.62}}
@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. The page is indigo; most reading happens on sand laid on it. */
.sec{padding:72px 0;position:relative}
.sec--tint{background:var(--sand)}
.sec--panel{background:var(--sand-2)}
.sec--dark{background:var(--dark-2)}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec--center .eyebrow{justify-content:center}
.sec__head{max-width:var(--measure);margin:0 0 30px}
.sec__head h2{margin:0 0 10px}
.sec__head p{color:var(--on-dark-2);margin:0;font-size:1.08rem}

/* Every text colour flips on a sand band, and all of it is written here in one
   place. A dark band that recolours its headings and forgets its paragraphs is
   how three sites shipped copy at 1.1:1 (pitfall 115). */
.sec--tint,.sec--panel{color:var(--ink)}
.sec--tint h2,.sec--panel h2,
.sec--tint h3,.sec--panel h3,
.sec--tint h4,.sec--panel h4{color:var(--ink)}
.sec--tint p,.sec--panel p,
.sec--tint li,.sec--panel li,
.sec--tint dd,.sec--panel dd,
.sec--tint dt,.sec--panel dt{color:var(--ink-2)}
.sec--tint .sec__head p,.sec--panel .sec__head p{color:var(--ink-2)}
.sec--tint .lead,.sec--panel .lead{color:var(--ink-2)}
.sec--tint a,.sec--panel a{color:var(--cyan-d)}
.sec--tint a:hover,.sec--panel a:hover{color:var(--ink)}
.sec--tint .eyebrow,.sec--panel .eyebrow{color:var(--cyan-d)}
.sec--tint .eyebrow::before,.sec--panel .eyebrow::before{background:var(--cyan-d)}
.sec--tint .btn--ghost,.sec--panel .btn--ghost{color:var(--ink);box-shadow:inset 0 0 0 2px var(--line-2)}
.sec--tint .btn--ghost:hover,.sec--panel .btn--ghost:hover{background:var(--sand-3);color:var(--ink)}

/* 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: a square tick, to match the square everything else */
.ticks{list-style:none;margin:0 0 1.1em;padding:0}
.ticks li{position:relative;padding-left:34px;margin:0 0 .6em}
.ticks li::before{content:"";position:absolute;left:0;top:.36em;width:20px;height:20px;
  border-radius:var(--radius);background:var(--good)}
.ticks li::after{content:"";position:absolute;left:7px;top:.62em;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ---- tables. A table is a light plate wherever it sits, so its own colours
   are declared here and never inherited from the band. */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line-2);border-radius:var(--radius-lg);background:var(--paper)}
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;color:var(--ink-2)}
th{font-family:var(--text);font-weight:700;color:#fff;background:var(--dark-2);font-size:.9375rem;letter-spacing:.03em}
tbody tr:nth-child(even){background:#f2ece0}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--ink)}
.tnote{font-size:.9375rem;color:var(--ink-3);margin:-.4em 0 1.2em}
.sec .tnote{color:var(--on-dark-2)}
.sec--tint .tnote,.sec--panel .tnote{color:var(--ink-3)}

/* ---- numbered steps */
.steps{display:grid;gap:14px;margin:0 0 1.2em;counter-reset:s}
.step{position:relative;background:var(--paper);border:1px solid var(--line-2);border-radius:var(--radius-lg);padding:22px 24px 22px 72px;color:var(--ink-2)}
.step h3{color:var(--ink)}
.step p,.step li{color:var(--ink-2)}
.step a{color:var(--cyan-d)}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:20px;top:20px;width:36px;height:36px;
  display:grid;place-items:center;
  background:var(--dark);color:var(--cyan);
  font-family:var(--display);font-weight:700;font-size:1.16rem;border-radius:var(--radius);
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: a sand plate with a hairline, flat, no shadow anywhere */
.grid{display:grid;gap:18px}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* A grid ITEM defaults to min-width:auto, which floors at min-content, so a
   card holding a table or a nowrap chip refuses to shrink and overflows the
   phone silently (pitfall 46 family). */
.grid>*{min-width:0}
.card{position:relative;background:var(--paper);border:1px solid var(--line-2);border-radius:var(--radius-lg);padding:24px 22px;color:var(--ink-2)}
.card h3{margin:0 0 8px;color:var(--ink)}
.card p,.card li{color:var(--ink-2)}
.card a{color:var(--cyan-d)}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--panel .card{background:#fff}

/* ---- callout, alert, quote, keypoints. All light plates with declared type. */
.callout{background:#e7f2fa;border:1px solid #bfd9ea;border-left:3px solid var(--cyan-d);border-radius:0 var(--radius) var(--radius) 0;padding:20px 22px;margin:0 0 1.2em;color:var(--ink-2)}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--cyan-d)}
.callout p,.callout li{color:var(--ink-2)}
.callout a{color:var(--cyan-d)}
.callout p:last-child{margin:0}
.alert{background:#f8efdb;border:1px solid #e3d0a6;border-left:3px solid var(--warn);border-radius:0 var(--radius) var(--radius) 0;padding:20px 22px;margin:0 0 1.2em;color:var(--ink-2)}
.alert b:first-child{display:block;margin-bottom:6px;color:var(--warn)}
.alert p,.alert li{color:var(--ink-2)}
.alert a{color:var(--cyan-d)}
.alert p:last-child{margin:0}
.pullquote{font-family:var(--display);font-size:1.46rem;font-weight:600;line-height:1.44;color:#f3f6ff;border-left:3px solid var(--cyan);padding:2px 0 2px 22px;margin:0 0 1.2em}
.sec--tint .pullquote,.sec--panel .pullquote{color:var(--ink);border-left-color:var(--cyan-d)}
.pullquote cite{display:block;font-family:var(--text);font-size:.9375rem;font-style:normal;font-weight:400;color:var(--on-dark-2);margin-top:8px}
.sec--tint .pullquote cite,.sec--panel .pullquote cite{color:var(--ink-3)}
.keypoints{background:var(--paper);border:1px solid var(--line-2);border-left:3px solid var(--cyan-d);border-radius:0 var(--radius) var(--radius) 0;padding:20px 22px;margin:0 0 1.2em;color:var(--ink-2)}
.keypoints>b{display:block;margin-bottom:8px;color:var(--ink)}
.keypoints ul{margin:0;padding-left:20px}
.keypoints li{color:var(--ink-2)}
.keypoints a{color:var(--cyan-d)}

/* ---- image beside copy

   `align-items:center` is what made this block read as scattered. The picture
   and the copy are almost never the same height, so the shorter of the two
   floated in the middle of the taller one's row: the 420x522 bottle filled its
   track at 559x694 beside 450px of copy and left 126px of empty ground above
   the first line. `start` puts that first line level with the top of the
   picture, which is what makes the two read as one block, and the surplus
   height falls at the BOTTOM of the short column where it reads as margin
   rather than as a hole. */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:38px;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}
/* The single-bottle master is a studio shot on an opaque white ground, so every
   placement of it sits on a white plate on purpose. Dropped straight onto the
   indigo it would render as a white rectangle, which is the same defect as a
   black bottle on a cream plate reached from the other side. */
.split__img img{width:100%;border:1px solid var(--line-2);border-radius:var(--radius-lg);background:#fff}
.split__body p:last-child{margin:0}
/* A portrait still has to be capped, or it dwarfs the copy it belongs to even
   when the two start level: 694px of bottle against 450px of text is not a
   pair, and the 420px master was being stretched to 559 to get there. The cap
   is a HEIGHT, because that is the dimension that has to match the copy, and
   the width that produces it is this file's own aspect -- blocks.py stamps
   --imgar and --imgw and stamps .split--tall at h/w >= 1.2. Never
   `width:auto`: these images are lazy, and one that has not arrived computes
   4px wide under it and collapses the section.
   Measured: 559x694 beside 450px of copy becomes 378x470. Inside the query
   because below it .split is a single column and the bottle should fill the
   phone. */
@media (min-width:761px){
  .split--tall .split__img{
    width:min(100%,var(--imgw,100%),calc(var(--split-h,470px) * var(--imgar,1)));
    margin-inline:auto}
}
/* A banner is a band, not a column: a strip a hundred pixels tall stranded in
   half a row of white is the same defect reached from the other side. Nothing
   in this pack is one yet; the rule is here so a wide image added later stacks
   instead, with the copy on the page's own measure. */
.split--band{grid-template-columns:minmax(0,1fr);gap:22px;justify-items:center}
.split--band .split__img{order:0;width:min(100%,var(--imgw,100%))}
.split--band .split__body{max-width:var(--measure-wide)}

/* ---- stat band */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;text-align:center;background:var(--line-d);border:1px solid var(--line-d)}
.stats>*{min-width:0;background:var(--dark-2);padding:22px 14px}
.stats div b{display:block;font-family:var(--display);font-size:2.5rem;font-weight:700;color:var(--cyan);line-height:1}
.stats div span{display:block;font-size:.9375rem;color:var(--on-dark-2);margin-top:6px}

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

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
/* Same family as the .split fix above: .ingcard is a grid ITEM and .ing__dose
   is white-space:nowrap, so without min-width:0 the chip sets the column's
   floor and the card cannot shrink to a phone. */
.inglist>*{min-width:0}
.ingcard{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--radius-lg);padding:22px 24px;color:var(--ink-2)}
.ingcard p,.ingcard li{color:var(--ink-2)}
.ingcard a{color:var(--cyan-d)}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 10px}
.ingcard__top h3{margin:0;color:var(--ink)}
.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(--dark);border:1px solid var(--dark);padding:4px 13px;border-radius:var(--radius);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(--paper);border:2px solid var(--line-2);border-radius:var(--radius-lg);overflow:hidden;position:relative;padding:0;color:var(--ink-2)}
/* No lift on the featured card: a negative margin makes it taller than its
   siblings and trips the rule that a pricing row shares one height and one
   button baseline (responsive.md). The border, the head band and the flag
   already make it unmistakable. And box-sizing is border-box, so all three
   carry a 2px border and only its colour changes, or the featured card's
   button drops 2px out of line. */
.card--pack.featured{border-color:var(--cyan-d)}
.pack__head{background:var(--sand-3);border-bottom:1px solid var(--line-2);padding:14px 20px;display:flex;align-items:center;gap:10px}
.card--pack.featured .pack__head{background:var(--dark);border-bottom-color:var(--dark)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--display);font-size:1.34rem;font-weight:700;color:var(--ink)}
.pack__head span{font-size:.8125rem;font-weight:700;color:var(--ink-3);margin-left:auto;text-transform:uppercase;letter-spacing:.04em}
.pack__flag{position:absolute;right:0;top:0;background:var(--cyan-d);color:#fff;font-family:var(--text);font-size:0.75rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:5px 12px;z-index:3}
/* The flag is absolutely positioned in the head band's top-right corner, which
   is where the supply label also sits because it carries margin-left:auto. On
   the one card that has both they overlapped. The flag stays where it is, and
   on a flagged card the supply label is set inline after the pack name instead,
   so the right end of the band is free. Doing it the other way round, by
   growing the band, would make the featured card taller than its siblings and
   drop its button out of the shared baseline (responsive.md proof 3). */
.pack__flag + .pack__head{padding-right:126px}
.pack__flag + .pack__head span{margin-left:10px}
.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,176px);object-fit:contain;margin-inline:auto;margin-bottom:16px}
.pack__per{font-family:var(--display);font-size:2.9rem;font-weight:700;color:var(--ink);line-height:1;text-align:center}
.pack__per sup{font-size:1.05rem;font-weight:700;top:-.85em}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em;margin:6px 0 14px}
.pack__tot{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0 0 14px;font-size:1rem;color:var(--ink-2)}
.pack__tot b{font-weight:700;color:var(--ink)}
.pack__was{color:var(--ink-3);text-decoration:line-through;font-weight:400}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:.9375rem}
.pack__perks li{position:relative;padding-left:25px;margin:0 0 7px;color:var(--ink-2);font-size:.9375rem}
.pack__perks li::before{content:"";position:absolute;left:0;top:.44em;width:15px;height:15px;border-radius:var(--radius);background:var(--good)}
.pack__perks li::after{content:"";position:absolute;left:5px;top:.6em;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.card--pack>.pack__body>.btn{margin-top:auto}
.pack__marks{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;margin:12px 0 0;font-size:.8125rem;color:var(--ink-3)}
.buy__note{font-size:.9375rem;color:var(--ink-3);text-align:center;margin:0}
.sec .buy__note{color:var(--on-dark-2)}
.sec--tint .buy__note,.sec--panel .buy__note{color:var(--ink-3)}

/* ---- 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(--paper);border:1px solid var(--line-2);border-radius:var(--radius-lg);overflow:hidden;color:var(--ink-2)}
.shots img{width:100%;background:#fff}
.shots figcaption{padding:16px 18px}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--ink)}
.shots figcaption span{font-size:.9375rem;color:var(--ink-2)}
figure.portrait img{width:var(--figw,320px);margin-inline:auto}

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

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

/* ---- FAQ. Padding on <summary>, which is the click target (pitfall 73). */
.faq{border:1px solid var(--line-2);border-radius:var(--radius-lg);overflow:hidden;background:var(--paper);margin:0 0 1.2em}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:17px 48px 17px 20px;cursor:pointer;position:relative;list-style:none;font-family:var(--text);font-weight:700;font-size:1.04rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;translate:0 -50%;font-size:1.4rem;font-weight:400;color:var(--cyan-d)}
.faq details[open] summary::after{content:"\2212"}
.faq__body{padding:0 20px 17px;color:var(--ink-2)}
.faq__body p,.faq__body li{color:var(--ink-2)}
.faq__body a{color:var(--cyan-d)}
.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.0625rem;color:var(--on-dark-2);margin:0 0 .6em}
.sec--tint .refs li,.sec--panel .refs li{color:var(--ink-2)}
/* The reference list prints each source's full URL as the link TEXT, and a URL
   is one unbreakable token; at 390 that pushed a single <a> past the viewport
   on eleven pages of another site, clipped and unscrollable. `anywhere` also
   lowers the element's min-content, which is what stops the ancestor being
   sized by the longest URL in the list. */
.refs li,.refs li a{overflow-wrap:anywhere}
.byline{display:flex;gap:18px;background:var(--paper);border:1px solid var(--line-2);border-left:3px solid var(--cyan-d);border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px;margin:0 0 1.2em;color:var(--ink-2)}
.byline__mark{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;background:var(--dark);color:var(--cyan);font-family:var(--display);font-weight:700;font-size:1.26rem;border-radius:var(--radius)}
.byline b{display:block;margin-bottom:6px;color:var(--ink)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}
.byline a{color:var(--cyan-d)}

/* ---- closing CTA */
.final{background:var(--dark-2);border:1px solid var(--line-d);border-top:3px solid var(--cyan);border-radius:0;padding:30px 32px;color:var(--on-dark)}
.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:200px;background:#fff;border:1px solid var(--line-d);border-radius:var(--radius-lg)}
.final h2{margin:0 0 10px;color:#fff}
.final p{color:var(--on-dark)}
.final a{color:var(--cyan)}
.final__price{font-weight:700;color:#fff}
.final__sm{font-size:.9375rem;color:var(--on-dark-2);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(--paper);border:1px solid var(--line-2);border-radius:var(--radius-lg);padding:20px 22px;text-decoration:none;color:var(--ink-2);transition:border-color .16s ease}
.rel a:hover{border-color:var(--cyan-d)}
.rel b{display:block;font-family:var(--display);font-size:1.26rem;color:var(--ink);margin-bottom:5px}
.rel span{font-size:.9375rem;color:var(--ink-2)}

/* ---- forms. 16px minimum or iOS Safari zooms on focus (pitfall 86). */
.form{display:grid;gap:15px;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(--paper);color:var(--ink)}
.field textarea{min-height:140px;resize:vertical}
.field small{display:block;font-size:0.9062rem;color:var(--ink-3);margin-top:5px}
.sec .field label{color:var(--on-dark)}
.sec .field small{color:var(--on-dark-2)}
.sec--tint .field label,.sec--panel .field label{color:var(--ink)}
.sec--tint .field small,.sec--panel .field small{color:var(--ink-3)}

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

/* ---- footer: an indigo CTA slab, a sand seal row, a SAND INDEX, then an
   indigo legal rail. The sand index is the point of difference: the
   destinations are the light part of the footer and the legal line is the
   dark one, which is the reverse of the usual arrangement. */
.fcta{background:var(--dark);padding:54px 0}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center;
  background:var(--dark-2);border:1px solid var(--line-d);border-left:3px solid var(--cyan);
  border-radius:0;padding:32px 36px;color:var(--on-dark)}
.fcta__box>*{min-width:0}
.fcta h2,.fcta__h{color:#fff}
.fcta__eye{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--cyan);margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.9rem;font-weight:700;line-height:1.18;margin:0 0 10px}
.fcta p{color:var(--on-dark)}
.fcta__sm{font-size:.9375rem;color:var(--on-dark-2);margin:12px 0 0}
.fcta__sm a,.fcta p a{color:var(--cyan)}
.fcta__img img{width:240px}
footer{background:var(--sand)}
.fseals{background:var(--sand-3);border-bottom:1px solid var(--line-2)}
.fseals__row{display:flex;flex-wrap:wrap;align-items:center;gap:15px;padding-block:20px}
.fseals img{width:46px;height:46px;object-fit:contain}
.fseals span{font-size:.9375rem;color:var(--ink-2)}
.fseals a{color:var(--cyan-d)}
.fdark{background:var(--sand);color:var(--ink-2)}
.fgrid{display:grid;grid-template-columns:1.45fr repeat(4,1fr);gap:26px;padding:44px 0 30px}
.fgrid>*{min-width:0}
.fbrand{font-family:var(--display);font-size:2rem;font-weight:700;color:var(--ink);letter-spacing:.01em;line-height:1}
.fbrand span{color:var(--cyan-d)}
.frole{font-size:.9375rem;color:var(--ink-3);margin:8px 0 14px}
.fcard p{font-size:1.0625rem;color:var(--ink-2);margin:0 0 .7em}
.fcard b{color:var(--ink)}
.fcard a{color:var(--cyan-d)}
.fh{font-size:.8125rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px}
.fgrid ul{list-style:none;margin:0 0 20px;padding:0}
.fgrid li{margin:0}
/* inline-block, not block: the box shrink-wraps so the hover underline stays
   the width of the words, and the negative margin gives the row height back
   (pitfall 82). */
footer li a{display:inline-block;padding-block:6px;margin-block:-6px;font-size:.9688rem;color:var(--ink-2);text-decoration:none}
footer li a:hover{color:var(--cyan-d)}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:15px;border-top:1px solid var(--line-2);padding:22px 0 30px}
.fpay img{width:236px;height:auto}
.fpay span{font-size:.9375rem;color:var(--ink-3)}
.disc{background:var(--dark-2);border-top:1px solid var(--line-d);padding:30px 0 34px;color:var(--on-dark-2)}
.disc p,.disc li{font-size:.9375rem;color:var(--on-dark-2)}
.disc b{color:#fff}
.disc a{color:var(--cyan)}
.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:17px;position:relative}
.disc__list li::before{content:"";position:absolute;left:0;top:.76em;width:7px;height:7px;background:var(--cyan)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line-d);font-size:.9375rem}

/* ---- sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--dark-2);color:#fff;border-top:1px solid var(--line-d);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:11px 22px}
.buybar__t{font-size:.9375rem;min-width:0}
.buybar__t b{display:block;font-size:1rem;color:#fff}
.buybar__t span{color:var(--on-dark-2)}
.buybar .btn{margin-left:auto;flex:0 0 auto}

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

/* ---- responsive */
@media (max-width:1100px){
  .fgrid{grid-template-columns:1fr 1fr 1fr;gap:24px}
}
@media (max-width:980px){
  :root{--navh:110px}
  /* Stacked, the pack sits between the H1 and the Quick Answer, so every pixel
     it takes pushes the answer down a phone screen. Capped here rather than
     left at the column width. */
  .hero__card img{max-width:232px}
  .hero__cap{margin-top:10px}
  .hero__grid{grid-template-columns:1fr;gap:24px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:2px 0 12px}
  .answer{order:4}
  .hero__cta{order:5}
  /* The roadmap line moves BELOW the CTA on a phone. hero.md's stacked order is
     eyebrow, H1, shot, Quick Answer, CTA, and the roadmap line is not in it; at
     390 it was a 110px block sitting between the answer and the button, which
     put the CTA at y=1227 against the 1100 target. It keeps its place on
     desktop, where there is room for it above the fold. */
  .hero__road{order:7}
  .hero__sub{order:8}
  .factpills{order:10}
  .figures{order:11}
  .nav__price{display:none}
  .menu{display:none;flex-direction:column;align-items:stretch;gap:0;padding:4px 0 10px}
  .menu.open{display:flex}
  .menu__more{display:block}
  .menu a{padding:12px 0;border-bottom:1px solid var(--line-2)}
  .menu a[aria-current="page"]{border-bottom-color:var(--line-2)}
  .burger{display:block}
  .nav__buy{display:none}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fcta__box{grid-template-columns:1fr;padding:26px 24px}
  .fcta__img{display:none}
  .final--media{grid-template-columns:1fr;gap:20px}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:50px 0}
  .hero{padding:22px 0 42px}
  .hero__card{padding:4px}
  .hero__card img{max-width:206px}
  .hero .answer{padding:15px 17px}
  .hero .answer p{font-size:1rem}
  .hero__road{font-size:.9375rem}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr}
  .card--pack.featured{order:-1}
  .shots,.shots.s2{grid-template-columns:1fr}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel,.posts{grid-template-columns:1fr}
  .split,.split--flip .split__img{grid-template-columns:minmax(0,1fr);order:0}
  .versus{grid-template-columns:1fr}
  .versus>div:nth-child(3n+1){border-top:2px solid var(--line-2)}
  /* The chip is white-space:nowrap and margin-left:auto, so on a narrow card it
     is pushed onto a line with no room for it and overhangs the card edge. On a
     phone let it start its own line and wrap its own text. */
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .figures{grid-template-columns:1fr;gap:1px}
  .fgrid{grid-template-columns:1fr 1fr;gap:22px}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:440px){
  .fgrid{grid-template-columns:1fr}
  .badgewall{grid-template-columns:1fr}
}

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

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

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

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

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

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

/* A figure alone on its row spans it and centres, keeping the width it was
   designed at. A lone figure beside an empty track reads as misalignment even
   though every box is where it was asked to be (pitfall 114). */
.shots.s2>figure:last-child:nth-child(odd){grid-column:1/-1;max-width:calc((100% - 20px) / 2);margin-inline:auto}
/* brand mark: bare construction */
.brand svg.brand__glyph{background:none!important}

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

/* ==== 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*/
/* ==== govisivra.com home page, modern surface pass ======================
   HOME ONLY. class="hero" is on index.html and on no other page here, so
   `body:has(.hero)` and `.hero ...` both resolve on the money page alone;
   pricing.html carries the same pack markup and is deliberately untouched.

   PAINT ONLY. Radius, shadow, background, colour, transform, transition and
   animation move no box, so this block sits below the critical marker and
   needs a restamp rather than a rebuild. Nothing here sets padding, margin,
   font-size, width or any grid or flex property, which is why the three
   Add To Cart buttons keep the single baseline the pack cards are engineered
   around.

   Every selector is scoped, so it outranks modern_surface.py and
   footer_type.py on SPECIFICITY rather than on source order -- both re-append
   their blocks after this one on every build.

   Slot: orbit motif, 20px cards, 14px controls, deep diffuse ambient shade,
   ribbon as a tab above the card. */

:root{
  --gvs-rc:20px;                 /* cards and panels */
  --gvs-rk:14px;                 /* buttons and other controls */
  /* Ambient only and very diffuse -- no tight contact stop -- tinted with
     this site's own ink, 27,33,64, never neutral black. */
  --gvs-amb:0 22px 60px rgba(27,33,64,.14);
  --gvs-amb-hi:0 14px 34px rgba(27,33,64,.10), 0 34px 82px rgba(27,33,64,.20);
  /* On the indigo ground an ink shadow is invisible, so the dark surfaces
     get the deeper indigo the hero art is lit against. */
  --gvs-amb-dark:0 26px 64px rgba(6,10,28,.55);
  --gvs-cta:0 14px 30px rgba(18,95,140,.34);
  --gvs-cta-hi:0 18px 40px rgba(18,95,140,.46);
}

/* ---- controls: 14px, one gradient weight and one solid weight ----------
   The buy button is the only gradient on the page. The secondary stays a
   solid outline so the pair reads as two weights rather than two buttons.
   Both background-color AND background-image are set in each state, because
   the base sheet's :hover uses the `background` shorthand, which resets an
   image declared on the rest state alone. */
body:has(.hero) .btn{
  border-radius:var(--gvs-rk);
  transition:background-color .18s ease,color .18s ease,
             box-shadow .22s ease,transform .22s ease;
}
body:has(.hero) .btn--cyan{
  background-color:#3fb3e6;
  background-image:linear-gradient(177deg,#63c6f2 0%,#3fb3e6 54%,#2a96c9 100%);
  box-shadow:var(--gvs-cta);
}
body:has(.hero) .btn--cyan:hover{
  background-color:#7ccdf1;
  background-image:linear-gradient(177deg,#93daf8 0%,#66c8f3 54%,#3aa8dd 100%);
  box-shadow:var(--gvs-cta-hi);
  transform:translateY(-2px);
}
body:has(.hero) .btn--ghost{background-image:none;box-shadow:inset 0 0 0 2px var(--line-d)}
body:has(.hero) .btn--ghost:hover{
  background-color:var(--dark-3);
  box-shadow:inset 0 0 0 2px var(--cyan);
  transform:translateY(-2px);
}
body:has(.hero) .btn:active{transform:translateY(0)}
body:has(.hero) .btn:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
body:has(.hero) .burger{border-radius:var(--gvs-rk)}

/* ---- the first screen -------------------------------------------------- */
/* The Quick Answer keeps its square accent edge and loses the all-round
   16px the estate pass gave it. */
.hero .answer{
  border-radius:0 var(--gvs-rc) var(--gvs-rc) 0;
  background-image:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 62%);
  box-shadow:var(--gvs-amb-dark);
}
.hero .factpills li{
  border-radius:999px;
  border-color:rgba(99,198,242,.32);
  background-color:rgba(63,179,230,.07);
}
.hero .figures{
  border-radius:var(--gvs-rc);
  overflow:hidden;
  box-shadow:var(--gvs-amb-dark);
}

/* ---- hero motif: orbit -------------------------------------------------
   A thin ring set WIDER than the product card, so it reads around the pack
   rather than inside it, with one bright arc travelling it once every 34
   seconds. Both pseudo-elements belong to the media column; the <img> is the
   LCP element and is never touched. The travelling arc moves on transform
   alone. The keyframe name is new: gvsAperture and gvsGlow already exist in
   this sheet and are left where they are. */
.hero .hero__media{
  background-image:radial-gradient(38% 26% at 50% 47%,rgba(63,179,230,.20),rgba(63,179,230,0) 72%);
}
.hero .hero__media::before{
  content:'';position:absolute;left:50%;top:48%;width:124%;aspect-ratio:1;
  translate:-50% -50%;border-radius:50%;z-index:1;pointer-events:none;
  border:1px solid rgba(63,179,230,.26);
  background:none;animation:none;opacity:1;
}
.hero .hero__media::after{
  content:'';position:absolute;left:50%;top:48%;width:124%;aspect-ratio:1;
  translate:-50% -50%;border-radius:50%;z-index:1;pointer-events:none;
  border:0;opacity:1;
  background:conic-gradient(from 0deg,
    rgba(63,179,230,0) 0 54%,
    rgba(63,179,230,.28) 68%,
    #a8e4ff 75%,
    rgba(63,179,230,.28) 82%,
    rgba(63,179,230,0) 92% 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  animation:gvsOrbitTravel 34s linear infinite;
}
@keyframes gvsOrbitTravel{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ---- reading surfaces --------------------------------------------------
   20px, and one very diffuse ambient stop. The estate default is a tight
   1px contact shadow plus a 6px ambient one, which on a sand ground reads
   as a hairline rather than as depth. */
body:has(.hero) .card,
body:has(.hero) .step,
body:has(.hero) .ingcard,
body:has(.hero) .faq,
body:has(.hero) .tablewrap,
body:has(.hero) .shots figure,
body:has(.hero) .split__img,
body:has(.hero) .rel a{border-radius:var(--gvs-rc);box-shadow:var(--gvs-amb)}
body:has(.hero) .split__img img{border-radius:var(--gvs-rc)}
/* The accent-bar panels keep their flat left edge: the 3px rule IS the
   panel's signature, and a radius on that side cuts it short. */
body:has(.hero) .callout,
body:has(.hero) .alert,
body:has(.hero) .keypoints,
body:has(.hero) .byline{border-radius:0 var(--gvs-rc) var(--gvs-rc) 0;box-shadow:var(--gvs-amb)}
body:has(.hero) .ing__dose{border-radius:999px}
/* The two indigo slabs: an ink shadow disappears on indigo. */
body:has(.hero) .final,
body:has(.hero) .fcta__box{border-radius:var(--gvs-rc);box-shadow:var(--gvs-amb-dark)}

/* ---- a surface a pointer can reach answers it -------------------------- */
body:has(.hero) .rel a,
body:has(.hero) .shots figure,
body:has(.hero) .card--pack{transition:box-shadow .24s ease,transform .24s ease,border-color .18s ease}
body:has(.hero) .rel a:hover,
body:has(.hero) .shots figure:hover{box-shadow:var(--gvs-amb-hi);transform:translateY(-2px)}
body:has(.hero) .rel a:focus-visible,
body:has(.hero) .faq summary:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}

/* ---- the pricing row ---------------------------------------------------
   overflow is released so the ribbon can sit ABOVE the card; the head band
   takes the card's inner radius in exchange, or its square top corners cut
   through the new one. No margin, no padding and no transform at rest, so
   all three cards keep the shared button baseline. */
body:has(.hero) .card--pack{
  border-radius:var(--gvs-rc);
  overflow:visible;
  box-shadow:var(--gvs-amb);
}
body:has(.hero) .card--pack .pack__head{border-radius:18px 18px 0 0}
body:has(.hero) .card--pack:hover{box-shadow:var(--gvs-amb-hi);transform:translateY(-2px)}
/* The recommended tier: a brighter plate, a deeper pool of shade under it
   and the indigo head band graded. It is NOT lifted geometrically -- this
   row's three buttons share one baseline and a margin or a transform on one
   card breaks it. */
body:has(.hero) .card--pack.featured{
  background-image:linear-gradient(180deg,#ffffff 0%,rgba(255,255,255,0) 46%);
  box-shadow:var(--gvs-amb-hi);
}
body:has(.hero) .card--pack.featured .pack__head{
  background-image:linear-gradient(180deg,#232e5e 0%,#141b3e 100%);
}
body:has(.hero) .card--pack.featured:hover{
  box-shadow:0 18px 40px rgba(27,33,64,.12), 0 44px 96px rgba(27,33,64,.26);
  transform:translateY(-2px);
}
/* The ribbon becomes a tab plugged into the top of the card. It also ends a
   real collision: at 1440 the corner flag printed straight over the
   90-DAY SUPPLY label in the head band beneath it. */
body:has(.hero) .pack__flag{
  top:auto;right:auto;left:50%;bottom:calc(100% - 14px);
  translate:-50% 0;
  /* Centred on `left:50%`, the shrink-to-fit width is capped at half the
     card, and at 768 the label wrapped to two lines and grew 21px taller,
     which put it through the paragraph above the row. Measured at 390, 768
     and 1440 after. */
  white-space:nowrap;
  border-radius:12px 12px 0 0;
  background-image:linear-gradient(180deg,#2f9fd2 0%,#125f8c 100%);
  box-shadow:0 -10px 24px rgba(27,33,64,.20);
}
/* Dashed separators between the feature rows, drawn as a background so the
   rows keep their exact heights. */
body:has(.hero) .pack__perks li + li{
  background-image:linear-gradient(90deg,rgba(27,33,64,.26) 0 5px,rgba(27,33,64,0) 5px 11px);
  background-repeat:repeat-x;
  background-size:11px 1px;
  background-position:left top;
}

/* ---- the indigo bands ---------------------------------------------------
   A light panel standing on the indigo ground needs indigo shade: the ink
   tint above is correct on sand and invisible here. */
body:has(.hero) .sec:not(.sec--tint,.sec--panel) :is(.card,.step,.ingcard,.faq,
  .tablewrap,.callout,.alert,.keypoints,.byline,.split__img,.shots figure,
  .rel a){box-shadow:var(--gvs-amb-dark)}
body:has(.hero) .stats{border-radius:var(--gvs-rc);overflow:hidden;box-shadow:var(--gvs-amb-dark)}

/* ---- the small flat parts ----------------------------------------------
   The bars in the rating breakdown, the tick discs and the comparison grid
   were all left at 0 or 3px while the panels around them were raised. */
body:has(.hero) .meter__bar,
body:has(.hero) .meter__bar i{border-radius:999px}
body:has(.hero) .ticks li::before{border-radius:999px}
body:has(.hero) .versus{border-radius:var(--gvs-rc)}
body:has(.hero) .faq summary{transition:background-color .18s ease}
body:has(.hero) .faq summary:hover{background-color:rgba(18,95,140,.06)}

/* ---- motion off on request --------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  body:has(.hero) .btn,
  body:has(.hero) .rel a,
  body:has(.hero) .shots figure,
  body:has(.hero) .card--pack{transition:none}
  body:has(.hero) .btn:hover,
  body:has(.hero) .btn--cyan:hover,
  body:has(.hero) .btn--ghost:hover,
  body:has(.hero) .rel a:hover,
  body:has(.hero) .shots figure:hover,
  body:has(.hero) .card--pack:hover,
  body:has(.hero) .card--pack.featured:hover{transform:none}
  .hero .hero__media::after{animation:none}
}
/* ==== end govisivra.com home page, modern surface pass ==== */
/*!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 li a{font-size:16px}
footer .copy{font-size:16px}
footer .disc li{font-size:16px}
footer .disc p{font-size:16px}
footer .fh{font-size:15px}
footer .fpay span{font-size:16px}
footer .fseals span{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 20 box-shadow declaration(s)
   and 1 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 (27,33,64), 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(27,33,64,.06), 0 6px 18px rgba(27,33,64,.07);
  --lift:0 2px 6px rgba(27,33,64,.09), 0 16px 34px rgba(27,33,64,.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. */
.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.final,
.split__img,
.answer{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}

/*!SITE-REFRESH 2026-09-30 (govisivra): page record strip, byline, page ledger, three-question gate, guides shelf, doctor-first rows, reviewer card, policy page, motion layer, readability floors, phone menu*/
header:has([aria-expanded="true"]){-webkit-backdrop-filter:none!important;backdrop-filter:none!important;filter:none!important;transform:none!important;z-index:1000!important}header [aria-expanded]{position:relative;z-index:1001}.nav:has(.menu.open){transform:none!important}@media(max-width:620px){.util__row{flex-wrap:nowrap;white-space:nowrap;overflow:hidden;gap:6px 14px}.util .gq-lg{display:none}}
.gq-cred{background:var(--sand);border-bottom:1px solid var(--line)}
.gq-cred__in{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;padding:0}
.gq-cred__in>*{display:flex;align-items:center;padding:12px 18px;border-right:1px solid var(--line);font-size:15px;line-height:1.45;color:var(--ink-2)}
.gq-cred__k{background:var(--dark);color:#fff!important;font-size:13px!important;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.gq-cred__v a{color:var(--cyan-d);font-weight:700;margin-left:4px}
.gq-cred__go{margin-left:auto;border-right:0!important;color:var(--cyan-d)!important;font-weight:700;text-decoration:none}
@media(max-width:760px){.gq-cred__in>*{flex:1 1 100%;border-right:0;border-bottom:1px solid var(--line);padding:10px 16px}.gq-cred__go{margin-left:0}}
.gq-by{margin:4px 0 16px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.gq-by a{color:var(--cyan-d);font-weight:700}
.gq-led{padding:52px 0;background:var(--sand-2)}
.gq-led__box{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);background:var(--dark);color:var(--on-dark);border-left:6px solid var(--cyan)}
.gq-led__main{padding:28px 30px}
.gq-led__k{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7fd0f2;margin:0 0 8px}
.gq-led__main h2{color:#fff;margin:0 0 12px}
.gq-led__main p{color:var(--on-dark)}
.gq-led__ref{padding:14px 16px;background:var(--dark-3);border-left:3px solid #7fd0f2;color:#eef2fb!important}
.gq-led__links{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.gq-led__links a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid #5b6aa6;color:#fff;font-weight:700;font-size:15px;text-decoration:none}
.gq-led__links a:hover{background:var(--dark-3);color:#fff}
.gq-led__tbl{margin:0;background:var(--dark-2);align-self:stretch;display:grid;align-content:start}
.gq-led__tbl>div{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px;padding:16px 20px;border-bottom:1px solid var(--line-d)}
.gq-led__tbl dt{color:#9fb0d6;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin:0}
.gq-led__tbl dd{margin:0;font-size:16px;color:#fff}
.gq-led__tbl dd a{color:#fff}
@media(max-width:860px){.gq-led__box{grid-template-columns:1fr}.gq-led__main{padding:22px}}
.gq-gate{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--line-2);background:var(--paper)}
.gq-gate__col{padding:22px 22px 18px;border-right:1px solid var(--line-2)}
.gq-gate__col:last-child{border-right:0}
.gq-gate__col h3{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.gq-gate__col h3 span{display:grid;place-items:center;width:30px;height:30px;background:var(--dark);color:#fff;font-size:15px}
.gq-gate__col ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.gq-gate__col li{margin:0;padding:0 0 0 16px;border-left:3px solid var(--cyan);font-size:16px;line-height:1.6;color:var(--ink-2)}
.gq-gate__col:last-child li{border-left-color:var(--sand-3)}
@media(max-width:900px){.gq-gate{grid-template-columns:1fr}.gq-gate__col{border-right:0;border-bottom:1px solid var(--line-2)}}
.gq-shelf{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.gq-shelf__col h3{margin:0 0 10px;padding-bottom:8px;border-bottom:2px solid var(--dark)}
.gq-shelf__col ul{list-style:none;margin:0;padding:0}
.gq-shelf__col li{margin:0;border-bottom:1px solid var(--line)}
.gq-shelf__col a{display:grid;gap:2px;padding:14px 4px;text-decoration:none;color:var(--ink-2)}
.gq-shelf__col a strong{font-size:18px;color:var(--ink)}
.gq-shelf__col a span{font-size:16px}
.gq-shelf__col a:hover strong{color:var(--cyan-d);text-decoration:underline}
@media(max-width:760px){.gq-shelf{grid-template-columns:1fr}}
.gq-doc{border:1px solid var(--line-2);margin:0 0 16px;background:var(--paper)}
.gq-doc__row{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px;padding:16px 20px;border-bottom:1px solid var(--line)}
.gq-doc__row:last-child{border-bottom:0}
.gq-doc__row h3{margin:0;font-size:18px}
.gq-doc__row p{margin:0;font-size:16px}
.gq-doc__row--now{background:var(--dark);color:var(--on-dark)}
.gq-doc__row--now h3{color:#fff}.gq-doc__row--now p{color:#e3e8f6}.gq-doc__row--now a{color:#8fd6f5}
@media(max-width:700px){.gq-doc__row{grid-template-columns:1fr;gap:6px}}
.gq-doc__note{padding:16px 18px;background:var(--sand);border-left:4px solid var(--dark);color:var(--ink);font-weight:700}
.gq-rev{max-width:var(--measure-wide);padding:24px 26px;background:var(--paper);border:1px solid var(--line-2);border-top:4px solid var(--dark)}
.gq-prose{max-width:var(--measure-wide)}.gq-prose p,.gq-prose li{font-size:17px}.gq-list{padding-left:1.3rem}.gq-list li{margin:0 0 12px}
.gq-toc{display:flex;flex-wrap:wrap;gap:0;margin:0;padding:0;list-style:none;border:1px solid var(--line-2)}
.gq-toc li{margin:0;border-right:1px solid var(--line-2)}
.gq-toc a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-size:15px;font-weight:700;text-decoration:none;color:var(--cyan-d)}
/* this build is dark by default (body navy, plain .sec transparent): light panels set their own ink */
.gq-rev{color:var(--ink-2)}.gq-rev h2{color:var(--ink)}.gq-rev .eyebrow,.gq-rev a{color:var(--cyan-d)}
.gq-doc__row{color:var(--ink-2)}.gq-doc__row h3{color:var(--ink)}.gq-doc__row a{color:var(--cyan-d)}
.gq-doc__row--now,.gq-doc__row--now p{color:#e3e8f6}.gq-doc__row--now h3{color:#fff}.gq-doc__row--now a{color:#8fd6f5}
.gq-shelf__col h3{color:#fff;border-bottom-color:#7fd0f2}.gq-shelf__col li{border-bottom-color:var(--line-d)}
.gq-shelf__col a{color:var(--on-dark)}.gq-shelf__col a strong{color:#fff}.gq-shelf__col a:hover strong{color:#8fd6f5}
.phead .gq-by{color:var(--on-dark)}.phead .gq-by a{color:#8fd6f5}
.sec:not(.sec--tint):not(.sec--panel) .gq-prose a{color:#8fd6f5}
.gq-toc{border-color:var(--line-d)}.gq-toc li{border-right-color:var(--line-d)}.gq-toc a{color:#8fd6f5}
.gq-doc__note a{color:var(--cyan-d)}
table a:not(.btn),.badgewall figure a,.faq a:not(.btn){color:var(--cyan-d)}
.pack__flag{background-image:linear-gradient(#1a78ad,#125f8c)!important}
.hero .hero__cap{color:#b8c1dd}
/* readability floors (owner, 30 Sep: "text should clear"): body 16px, labels 13px, muted ink darkened to 4.5:1 */
:root{--ink-3:#4f5675;--warn:#73490c}
.tnote,.buy__note,.final__sm,.byline p,.hero__road{font-size:16px!important}
.fcta__eye,.nav__price span,.pack__flag,.buybar__t span{font-size:13px!important}
.posts .postmeta{color:var(--ink-3)!important}
.review-foot{color:var(--ink-2)!important}.review-foot a{color:var(--cyan-d)!important}
@media(max-width:980px){.hero__grid{grid-template-columns:minmax(0,1fr)!important}.hero__cta .btn{white-space:normal;text-align:center}}
.is-off,.is-off *,.is-off *::before,.is-off *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:no-preference){
.btn--cyan{position:relative;overflow:hidden;isolation:isolate}
.btn--cyan::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-135%);pointer-events:none}
.hero .btn--cyan::after,.fcta .btn--cyan::after{animation:gqSheen 8.5s ease 2.8s infinite}
.btn--cyan:hover::after{animation:gqSheen 1s ease}
@keyframes gqSheen{0%,78%{transform:translateX(-135%)}100%{transform:translateX(135%)}}
.gq-rip{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:rgba(255,255,255,.45);pointer-events:none;z-index:-1;animation:gqRip .6s ease-out forwards}
@keyframes gqRip{from{transform:scale(0);opacity:1}to{transform:scale(13);opacity:0}}
.btn--cyan.gq-mag{translate:var(--gqx,0px) var(--gqy,0px);transition:translate .22s ease,background .18s ease}
.gq-tilt{transition:transform .3s ease}
.gq-tilt.is-tilting{transform:perspective(900px) rotateX(var(--gqrx,0deg)) rotateY(var(--gqry,0deg)) translateY(-2px)}
}