/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Hind Fallback";src:local("Arial");font-weight:400;size-adjust:97.68%;ascent-override:108.00%;descent-override:55.90%;line-gap-override:0.00%}
@font-face{font-family:"Hind Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:95.27%;ascent-override:110.73%;descent-override:57.31%;line-gap-override:0.00%}
@font-face{font-family:"Ibarra Real Nova Fallback";src:local("Georgia");font-weight:400;size-adjust:93.84%;ascent-override:101.23%;descent-override:31.97%;line-gap-override:0.00%}
@font-face{font-family:"Ibarra Real Nova Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:85.51%;ascent-override:111.10%;descent-override:35.09%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* gotheyavue.com - TheyaVue, USA Authorized Retailer.
   Design slot, batch12_assignments.py row 81: Ibarra Real Nova / Hind, a COOL
   PORCELAIN ground with DEEP SLATE panels and ONE amber accent; a 7/5 hero whose
   bottle sits in the narrow right column against a full-bleed slate panel;
   hairline-bordered rectangular cards with no fill; hairline depth only, and no
   box-shadow anywhere on the page; the clarity-bloom hero motif.

   WHERE THE COLOURS COME FROM. The bottle is white with a mid-blue band, so the
   page cannot take its identity from the bottle alone -- a white label on a
   white ground is not a design. Both halves are sampled from the vendor pack
   instead: the slate is the deep navy the label's own wordmark is printed in
   (#24497a in the ingredients tile, cooled and darkened for a reading panel),
   and the amber is the vendor's own seal graphic, which measures #f78c01 across
   7,073 of its pixels. That amber is also what lutein and zeaxanthin look like
   -- the tile draws both as marigold and as amber powder -- so the one accent
   on this site is the colour of the two ingredients it leads on.

   SHAPE LANGUAGE. Hairlines and space. There is no box-shadow in this file, not
   even an inset one, and no element lifts, sinks or floats. Cards are 4px
   rectangles with a 1px slate-grey keyline and NO fill, so a card is a ruled
   area of the page rather than a tile laid on it. The featured price tier is
   marked by a 3px amber rule across its top edge and by nothing else: no lift,
   no scale, no second border weight, so the three tiers keep one height and one
   button baseline.

   RHYTHM. Sections alternate a single wide measure and two columns. There is no
   three-column content row anywhere on the site.

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

/* ---- tokens */
:root{
  --paper:#f2f5f7;           /* the page: cool porcelain */
  --paper-card:#ffffff;      /* the lightest plate, behind product art */
  --paper-tint:#e6ecf0;      /* the tint band */
  --slate:#22384d;           /* the deep panel, from the label's own navy */
  --slate-2:#16283a;         /* the deepest band */
  --slate-3:#2d4b66;         /* a raised surface on the slate */
  --amber:#f78c01;           /* the vendor's own seal amber */
  --amber-d:#8a5100;         /* the same hue, dark enough for type on porcelain */
  --amber-l:#ffb04d;         /* the same hue, light enough for type on slate */
  --ink:#16222e;             /* type on porcelain */
  --ink-2:#3c4c5a;
  --ink-3:#5d6e7d;
  --on-dark:#d8e2ea;         /* type on slate */
  --on-dark-2:#a6b7c5;
  --line:#d2dce3;            /* the hairline */
  --line-2:#b4c4cf;          /* the stronger hairline */
  --line-d:#3d5b74;          /* a hairline that reads on slate */
  --good:#1f6b4a;
  --warn:#8a5100;
  --wrap:1140px;
  --measure:720px;
  --measure-wide:960px;
  --radius:4px;
  --radius-lg:4px;
  --pill:4px;
  /* Declared, and deliberately a no-op. This site has no shadow language at
     all: the depth lever in its slot is "hairline only, 1px borders, no
     box-shadow anywhere on the page". The tokens exist so a component copied
     in from another build cannot reference an undefined variable and fail
     validate.py; they resolve to nothing. */
  --shadow:0 0 0 0 rgba(0,0,0,0);
  --shadow-lg:0 0 0 0 rgba(0,0,0,0);
  --navh:104px;
  --display:"Ibarra Real Nova","Ibarra Real Nova Fallback",Georgia,"Times New Roman",serif;
  --text:"Hind","Hind 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(--paper);color:var(--ink-2);
  font-family:var(--text);font-size:17px;line-height:1.75;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--amber-d);text-underline-offset:3px}
a:hover{color:var(--ink)}
/* Ibarra Real Nova is a high-contrast Spanish revival: its thin strokes go to
   grey under about 19px, so it carries h1 and h2 only and everything smaller
   stays in Hind (typography.md). */
h1,h2{font-family:var(--display);color:var(--ink);font-weight:700;line-height:1.14;margin:0 0 .42em}
h3,h4{font-family:var(--text);color:var(--ink);font-weight:600;line-height:1.36;margin:0 0 .5em}
h1{font-size:clamp(2.05rem,1.4rem + 2.35vw,3.05rem);letter-spacing:-.014em}
h2{font-size:clamp(1.66rem,1.2rem + 1.55vw,2.42rem);letter-spacing:-.01em}
h3{font-size:1.16rem}
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(--amber);color:var(--ink);padding:12px 18px;z-index:200;font-weight:700}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--amber-d);outline-offset:2px}

/* The eyebrow names the JOB of the section under it. It is marked by a VERTICAL
   amber tick rather than the horizontal rule the rest of the estate draws,
   which keeps the mark inside the type block instead of beside it. */
.eyebrow{
  display:inline-block;
  font-family:var(--text);font-size:.8438rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--amber-d);
  border-left:3px solid var(--amber);padding-left:11px;margin:0 0 13px;
}

/* ---- buttons: 4px rectangles, no gradient, no shadow, no lift */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:15px 28px;
  font-family:var(--text);font-size:.9375rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;
  border:1px solid transparent;border-radius:var(--pill);cursor:pointer;text-decoration:none;
  background:var(--slate);color:#fff;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.btn:hover{background:var(--slate-3);color:#fff}
/* The order button is the amber block with near-black type: measured 6.5:1,
   where white on the same amber would be 2.4:1 (pitfall 92). */
.btn--amber{background:var(--amber);color:var(--ink);border-color:var(--amber)}
.btn--amber:hover{background:#ffa42a;color:var(--ink);border-color:#ffa42a}
.btn--lg{min-height:60px;padding:17px 32px;font-size:1rem}
/* border, not an inset shadow: there is no shadow of any kind on this site. */
.btn--ghost{background:none;color:var(--ink);border:1px solid var(--line-2)}
.btn--ghost:hover{background:var(--paper-tint);color:var(--ink);border-color:var(--slate)}
.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,
   .sec--dark a, .fcard a and fifteen more -- and every one of them is (0,1,1)
   against .btn--amber's (0,1,0), so a CTA dropped into one was repainted the
   accent: .final a put amber-l on the amber block at 1.33:1, which reads as a
   blank orange slab. Same colours as above, at a specificity no container rule
   can outrank; the :hover pair carries an extra `a` so it also clears the
   pseudo-class rules later in the file. Measured on the built page at 1440 and
   390: 6.69:1 rest, 8.14:1 hover, against a 4.5 floor. */
.btn.btn--amber,a.btn.btn--amber{color:var(--ink)}
.btn.btn--amber:hover,a.btn.btn--amber:hover{color:var(--ink)}
.btn.btn--ghost,a.btn.btn--ghost{color:var(--ink)}
.btn.btn--ghost:hover,a.btn.btn--ghost:hover{color:var(--ink)}

/* ---- header: ONE porcelain row, wordmark hard left, destinations right,
   a single slate hairline beneath it and nothing else. */
.nav{position:sticky;top:0;z-index:100;background:var(--paper);border-bottom:1px solid var(--slate)}
/* padding-BLOCK, never the shorthand: this element also carries .wrap and
   `padding:12px 0` would zero the page gutter, which is invisible above the
   container max-width and which no overflow test can see (pitfall 46). */
.nav__top{display:flex;align-items:center;gap:22px;padding-block:12px;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);flex:0 0 auto}
.brand__glyph{width:36px;height:36px;flex:0 0 auto}
/* Size the mark by ELEMENT as well as by class: brand_marks.py rewrites the
   <svg> inside .brand and does not always carry the class onto the
   replacement, so a rule keyed only to the class stops applying the moment the
   tool runs and the glyph renders at its intrinsic size (pitfall 16). */
.brand>svg{width:36px;height:36px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.04}
.bw b{font-family:var(--display);font-size:1.56rem;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.bw b em{font-style:normal;color:var(--amber-d)}
.bw small{font-size:.75rem;font-weight:500;color:var(--ink-3);letter-spacing:.11em;text-transform:uppercase}
.nav__rail{margin-left:auto;display:flex;align-items:center;gap:18px;min-width:0}
.nav__buy{min-height:44px;padding:11px 20px;font-size:.8125rem}
.burger{
  display:none;width:46px;height:44px;background:transparent;border:1px solid var(--line-2);
  border-radius:var(--radius);cursor:pointer;padding:11px 10px;
}
.burger span{display:block;height:2px;background:var(--ink);margin:0 0 5px}
.burger span:last-child{margin:0}
/* The destinations are right-aligned on the SAME row as the wordmark. No second
   tier, no strip, no recessed bar -- the slate hairline under the row is the
   only drawn edge in the header. */
.menu{
  display:flex;flex-wrap:nowrap;gap:0 21px;list-style:none;margin:0;padding:0;
  align-items:center;min-width:0;
}
.menu a{
  display:inline-block;padding:6px 0;font-family:var(--text);
  font-size:.875rem;font-weight:500;letter-spacing:.02em;
  color:var(--ink-2);text-decoration:none;white-space:nowrap;
  border-bottom:2px solid transparent;
}
.menu a:hover{color:var(--ink);border-bottom-color:var(--line-2)}
.menu a[aria-current="page"]{color:var(--amber-d);border-bottom-color:var(--amber)}
.menu__more{display:none}
@media (max-width:1320px){.menu{gap:0 16px}.menu a{font-size:.84rem}}
@media (max-width:1180px){.menu{gap:0 13px}.menu a{font-size:.8125rem}}

/* ---- hero: copy in a 7-column measure, the bottle in the narrow 5-column
   right against a slate panel that bleeds off the right edge of the screen. */
.hero{position:relative;padding:40px 0 60px;overflow-x:clip}
/* The slate panel. It is a pseudo-element of .hero rather than a background on
   .hero__media, because the panel has to reach the right edge of the VIEWPORT
   and .hero__media is a grid item inside a max-width container. .hero already
   clips on the x axis (the motif's own rule), so the bleed cannot widen the
   document.

   The left edge is CALCULATED from the grid rather than set as a round
   percentage of the viewport, and that is not fussiness. A flat percentage
   tracks the viewport while the media column tracks the container, so the two
   drift apart as the window grows: at 53% the panel edge crossed into the
   7-column copy at 1440 and put the last word of the headline in dark ink on
   slate. The expression below reproduces the grid's own arithmetic -- the page
   gutter, the .wrap padding, seven twelfths of the remaining width -- and then
   sits 34px short of the media column, so the edge always lands in the 44px
   gutter between the two columns. 100vw includes the scrollbar, which moves
   this edge RIGHTWARDS by half the scrollbar width, i.e. further into the
   gutter, which is the safe direction. */
.hero::after{
  content:"";position:absolute;top:0;bottom:0;right:0;
  left:calc(max(0px,(100vw - var(--wrap))/2) + 22px
            + (min(100vw, var(--wrap)) - 88px) * 7 / 12 + 10px);
  background:var(--slate);z-index:0;pointer-events:none;
}
.hero__grid{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:44px;align-items:center}
.hero__copy{display:flex;flex-direction:column;min-width:0}
.hero h1{margin:0 0 18px}
.hero h1 em{font-style:normal;color:var(--amber-d)}
/* The Quick Answer is a ruled area, not a card: a 3px amber rule down its left
   edge and a hairline round the rest, with no fill, so it reads as part of the
   page the headline is set on rather than a panel dropped onto it. */
.answer{
  background:var(--paper-card);border:1px solid var(--line);
  border-left:3px solid var(--amber);border-radius:0 var(--radius) var(--radius) 0;
  padding:19px 23px;margin:0 0 16px;
}
.answer p{margin:0 0 .72em;font-size:1.0625rem;color:var(--ink-2)}
.answer p b{color:var(--ink)}
.answer p:last-child{margin:0}
.hero__road{font-size:.9688rem;color:var(--ink-3);margin:0 0 18px;max-width:58ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
/* The pair has to hold one row at 1440 in both font states: a wrapped pair puts
   the second button below the fold, which is the two-half-buttons defect
   hero.md records. The buttons may shrink; their labels may not break. */
.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:.9688rem;font-weight:600;color:var(--ink)}
.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:.9062rem;font-weight:400;color:var(--ink-2);background:none;
  border:1px solid var(--line-2);padding:6px 14px;border-radius:var(--radius);
}
.factpills li b{color:var(--ink);font-weight:600}
/* Three figures divided by hairlines rather than three boxes: the rules are
   drawn with borders, not with a 1px background grid, because a grid gap of 1px
   filled with colour is a fill and this site does not fill. */
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;
  border:1px solid var(--line-2);border-radius:var(--radius)}
.figures div{padding:14px 16px;border-left:1px solid var(--line-2);min-width:0}
.figures div:first-child{border-left:0}
.figures b{display:block;font-family:var(--display);font-size:1.86rem;font-weight:700;color:var(--ink);line-height:1}
.figures span{display:block;font-size:.9062rem;font-weight:400;color:var(--ink-3);margin-top:5px}
/* The bottle sits on a porcelain card inside the slate panel. The master is an
   opaque RGB studio shot on white, so it needs a white plate under it wherever
   it goes; dropped straight onto the slate it would render as a white
   rectangle. The card is INSET inside the column rather than filling it, which
   is what leaves the clarity ring visible against the slate around it. */
.hero__media{position:relative;align-self:center;min-width:0;padding:34px 10px}
.hero__card{position:relative;z-index:2;text-align:center;
  background:var(--paper-card);border:1px solid var(--line-2);border-radius:var(--radius);
  padding:24px 20px 18px;max-width:340px;margin-inline:auto}
.hero__card img{width:100%;max-width:285px;height:auto;margin-inline:auto}
.hero__cap{margin:14px 0 0;font-size:.8125rem;font-weight:400;color:var(--ink-3);text-align:center}

/* The copy sits ABOVE the motif. The clarity ring is a 120%-wide circle on
   .hero__media, which is positioned, so without this it paints over the
   headline and over the running text: a 2px amber hairline across a serif
   display face, which is the "stray rule across the headline" defect the batch
   brief warns about. Raising the copy keeps the ring visible in the whitespace
   and behind the glyphs, where it reads as the arc it is meant to be.
   .hero__grid already carries position:relative;z-index:1, so both columns sit
   in one stacking context and these values are comparable with the motif's
   own z-index:1 and z-index:0. */
.hero .eyebrow,.hero h1,.hero .answer,.hero__road,.hero__cta,
.hero .hero__sub,.hero .factpills,.hero .figures{position:relative;z-index:4}

/* ---- inner page head */
.phead{padding:40px 0 32px;background:var(--paper);border-bottom:1px solid var(--line)}
.crumbs{font-size:.9062rem;color:var(--ink-3);margin:0 0 13px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--amber-d)}
.phead h1{margin:0 0 16px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide)}
.phead .lead{color:var(--ink-3)}
.lead{font-size:1.14rem;color:var(--ink-3);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). 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. */
/* position + z-index so the topline is a real layer. The clarity ring is a
   pseudo-element of a POSITIONED .hero__media, so it paints above every
   non-positioned block on the page, and at 768 its upper arc was crossing this
   strip. The strip is opaque and the ring must never reach it. */
.util{position:relative;z-index:2;background:var(--slate-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:#fff;font-weight:600}
.util a{color:var(--amber-l);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 the role, the guarantee and the phone. */
  .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.
   REGENERATED ON EVERY BUILD from the rules below the marker. Edit
   the originals; never this copy, which is overwritten. */
@media (max-width:980px){
  /* The slate panel is a right-hand column and there is no right-hand column once the hero stacks, so it is retired rather than left painting a band down the middle of a phone screen. */ .hero::after{display:none}
  /* Stacked, the bottle sits between the H1 and the Quick Answer, so every pixel it takes pushes the answer down a phone screen. */ .hero__media{padding:0;background:var(--slate);border-radius:var(--radius)}
  .hero__card img{max-width:236px}
  .hero__cap{margin-top:10px}
  .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:2px 0 10px;padding:16px 14px}
  .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 is a 110px block between the answer and the button. It keeps its desktop place, where there is room for it above the fold. */ .hero__road{order:7}
  .hero__sub{order:8}
}
@media (max-width:760px){
  .hero{padding:18px 0 40px}
  .hero__card{padding:13px 12px 11px}
  .hero__card img{max-width:210px}
  .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, 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 --- */

/*!SITE-HOME-CRIT-START*/
/* ---- home page, design slot "circulate": the only boxes this pass moves.

   The recommended tier's flag becomes a FULL-WIDTH BAR across the top of the
   card, so a 28px strip has to be reserved in the head band. It is reserved on
   ALL THREE cards, not on the flagged one alone: the .pack__head comment above
   records what happens when that band grows on one card only -- its image and
   its button drop out of the row the other two hold. Reserved on all three,
   the three heads stay identical and the shared image slot and button baseline
   are untouched.

   The tier is RAISED with a negative margin and never with a transform,
   because fix_reveal.py settles every revealed block at transform:none and
   would flatten it. The grid stretches the item, so 16px off the top edge is
   16px onto the height and the card still ends on the row's bottom edge, which
   is what keeps the three Add To Cart buttons on one baseline. Measured after
   the change: three button offsets identical.

   The dashed rule between two feature rows is drawn on an absolutely
   positioned ::after, so only the 10px of breathing room it sits in is
   geometry; the dash itself is paint and lives below the marker. */
.hero ~ #pricing .pack__head{padding-top:44px}
.hero ~ #pricing .pack__flag{left:0;right:0;top:0;height:28px;padding:0;
  display:flex;align-items:center;justify-content:center;line-height:1}
.hero ~ #pricing .pack__flag + .pack__head b{padding-right:0}
.hero ~ #pricing .card--pack.featured{margin-top:-16px}
.hero ~ #pricing .card--pack::before{content:"";position:absolute;
  left:0;right:0;top:0;height:28px;z-index:1}
.hero ~ #pricing .pack__perks li{margin-bottom:10px;padding-bottom:10px}
.hero ~ #pricing .pack__perks li::after{content:"";position:absolute;
  left:2px;right:0;bottom:0}
/*!SITE-HOME-CRIT-END*/


/* ---- hero motif -- clarity-bloom ---------------------------------------- */
.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(180deg,#f2f5f7,#f3e2cb 62%,#f2f5f7)}.hero__media::before{content:'';position:absolute;left:50%;top:46%;width:120%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:1;pointer-events:none;border:2px solid rgba(247,140,1,0.42);animation:gtvClarity 13s cubic-bezier(.3,.8,.35,1) infinite}.hero__media::after{content:'';position:absolute;left:50%;top:46%;width:72%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:0;pointer-events:none;background:radial-gradient(closest-side,rgba(247,140,1,0.30),transparent 72%);animation:gtvSoften 13s ease-in-out infinite}@keyframes gtvClarity{0%,100%{transform:scale(.78);opacity:.18;filter:blur(7px)}46%,70%{transform:scale(1.02);opacity:.55;filter:blur(0)}}@keyframes gtvSoften{0%,100%{opacity:.2;filter:blur(14px)}52%{opacity:.58;filter:blur(2px)}}
@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. Porcelain, a cooler porcelain tint, a white panel and a slate
   band. Every band declares the colour of its own type in one place: a band
   that recolours its headings and forgets its paragraphs is how three sites
   shipped copy at 1.1:1 (pitfall 115). */
.sec{padding:74px 0;position:relative}
.sec--tint{background:var(--paper-tint)}
.sec--panel{background:var(--paper-card);border-block:1px solid var(--line)}
.sec--dark{background:var(--slate);color:var(--on-dark)}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec__head{max-width:var(--measure);margin:0 0 32px}
.sec__head h2{margin:0 0 10px}
.sec__head p{color:var(--ink-3);margin:0;font-size:1.08rem}
.sec--dark h2,.sec--dark h3,.sec--dark h4{color:#fff}
.sec--dark p,.sec--dark li,.sec--dark .sec__head p,.sec--dark .lead{color:var(--on-dark)}
.sec--dark a{color:var(--amber-l)}
.sec--dark a:hover{color:#fff}
.sec--dark .eyebrow{color:var(--amber-l);border-left-color:var(--amber)}
.sec--dark .btn--ghost{color:#fff;border-color:var(--line-d)}
.sec--dark .btn--ghost:hover{background:var(--slate-3);color:#fff;border-color:var(--on-dark-2)}

/* One wide measure, centred; a two-column component keeps the full wrap. The
   slot's layout lever is "sections alternate single wide measure and
   two-column, never three", and this is the single-measure half of it. */
@media (min-width:1040px){
  .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,
  .sec>.wrap>.versus,.sec>.wrap>.meter{max-width:var(--measure-wide);margin-inline:auto}
}

/* ---- lists: a drawn amber tick on nothing, rather than a filled chip */
.ticks{list-style:none;margin:0 0 1.1em;padding:0}
.ticks li{position:relative;padding-left:30px;margin:0 0 .62em}
.ticks li::before{content:"";position:absolute;left:2px;top:.52em;width:7px;height:13px;
  border:solid var(--amber-d);border-width:0 2px 2px 0;transform:rotate(42deg)}
.sec--dark .ticks li::before{border-color:var(--amber-l)}

/* ---- tables. A table is a ruled grid on the page, not a plate laid on it, so
   the head band is the only filled row in it. */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--paper-card)}
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:600;color:#fff;background:var(--slate);font-size:.9375rem;letter-spacing:.03em}
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--dark .tnote{color:var(--on-dark-2)}

/* ---- numbered steps: the number is drawn in the rule, not in a filled tile */
.steps{display:grid;gap:0;margin:0 0 1.2em;counter-reset:s;
  border:1px solid var(--line-2);border-radius:var(--radius)}
.step{position:relative;padding:24px 26px 24px 74px;color:var(--ink-2);border-top:1px solid var(--line)}
.step:first-child{border-top:0}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:24px;top:22px;width:34px;height:34px;
  display:grid;place-items:center;
  border:1px solid var(--amber);color:var(--amber-d);
  font-family:var(--display);font-weight:700;font-size:1.16rem;border-radius:var(--radius);
}
.step h3{margin:0 0 6px;color:var(--ink)}
.step p,.step li{color:var(--ink-2)}
.step p:last-child{margin:0}
.sec--dark .steps{border-color:var(--line-d)}
.sec--dark .step{border-top-color:var(--line-d);color:var(--on-dark)}
.sec--dark .step::before{color:var(--amber-l)}

/* ---- cards: a hairline rectangle with NO fill. Two columns, never three. */
.grid{display:grid;gap:20px}
.grid.g2,.grid.g3{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g4{grid-template-columns:repeat(2,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 silently
   overflows the phone (pitfall 46 family). */
.grid>*{min-width:0}
.card{position:relative;background:none;border:1px solid var(--line-2);border-radius:var(--radius);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 p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{border-color:var(--line-d);color:var(--on-dark)}
.sec--dark .card h3{color:#fff}
.sec--dark .card p,.sec--dark .card li{color:var(--on-dark)}

/* ---- callout, alert, quote, keypoints: ruled areas, one amber or one warn
   edge, no fill except the palest wash on the alert so it reads as a caution */
.callout{background:none;border:1px solid var(--line-2);border-left:3px solid var(--amber);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(--ink)}
.callout p,.callout li{color:var(--ink-2)}
.callout p:last-child{margin:0}
.alert{background:#fdf3e3;border:1px solid #e9d3ad;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(--amber-d)}
.alert p:last-child{margin:0}
.sec--dark .callout{border-color:var(--line-d);color:var(--on-dark)}
.sec--dark .callout b:first-child{color:#fff}
.pullquote{font-family:var(--display);font-size:1.46rem;font-weight:600;line-height:1.46;color:var(--ink);border-left:3px solid var(--amber);padding:2px 0 2px 22px;margin:0 0 1.2em}
.pullquote cite{display:block;font-family:var(--text);font-size:.9375rem;font-style:normal;font-weight:400;color:var(--ink-3);margin-top:8px}
.sec--dark .pullquote{color:#fff}
.sec--dark .pullquote cite{color:var(--on-dark-2)}
.keypoints{background:none;border:1px solid var(--line-2);border-left:3px solid var(--slate);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)}

/* ---- image beside copy

   `align-items:center` is what made these blocks read as scattered. The
   picture and the copy are rarely the same height, so the shorter of the two
   floated in the middle of the taller one's row: on supplement-facts the
   446x541 panel renders 640px tall beside 363px of text and left 140px of
   empty ground above the first line. `start` puts the first line level with
   the top of the picture, which is what makes the two read as one block. The
   surplus height then 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:40px;align-items:start;margin:0 0 1.2em}
.split--flip .split__img{order:2}
.split__img,.split__body{min-width:0}
.split__img img{width:100%;border:1px solid var(--line-2);border-radius:var(--radius);background:#fff}
.split__body p:last-child{margin:0}
/* A portrait needs a narrower column than a square to finish at about the
   height of the copy beside it, and the ratio is in the markup already:
   blocks.py reads the <img>'s own width and height and stamps .split--tall at
   h/w >= 1.2. Measured here: the panel goes from 528x640 beside 363px of copy
   to 360x437, which is the same picture read at the same size as the text.
   Inside the query because below it .split is a single column and the picture
   should fill the phone. */
@media (min-width:761px){
  .split--tall .split__img{width:min(100%,var(--split-w,360px));margin-inline:auto}
}
/* A banner is a band, not a column. The seller's 1400x299 artwork renders
   114px tall in a 528px track beside 631px of copy, and the 317x83 retailer
   mark 140px tall beside 422px -- both stranded in half a row of white, and
   both stretched past their own file to get even that far. Stacked they read
   as a picture with its text under it: the band runs the full width of the
   block, capped at the file's own width so nothing is upscaled, and the copy
   keeps the page's reading measure. --imgw is stamped by blocks.py, because
   `width:auto` computes 4px on a lazy image that has not arrived yet. */
.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)}

/* ---- stat band: figures on the slate, divided by hairlines */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;text-align:center;
  border:1px solid var(--line-d);border-radius:var(--radius)}
.stats>*{min-width:0;padding:24px 14px;border-left:1px solid var(--line-d)}
.stats>*:first-child{border-left:0}
.stats div b{display:block;font-family:var(--display);font-size:2.5rem;font-weight:700;color:var(--amber-l);line-height:1}
.stats div span{display:block;font-size:.9375rem;color:var(--on-dark-2);margin-top:6px}

/* ---- the panel figure beside the trial figure */
.versus{display:grid;grid-template-columns:1.05fr .95fr 1.4fr;border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;background:var(--paper-card);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:600;color:var(--ink)}
.versus__h{background:var(--slate)!important;color:#fff!important;font-family:var(--text);font-weight:600;font-size:.92rem}

/* ---- ingredient cards */
.inglist{display:grid;gap:0;border:1px solid var(--line-2);border-radius:var(--radius)}
/* 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:none;border-top:1px solid var(--line);padding:24px 26px;color:var(--ink-2)}
.ingcard:first-child{border-top:0}
.ingcard p,.ingcard li{color:var(--ink-2)}
.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:600;color:var(--ink);
  border:1px solid var(--amber);padding:4px 13px;border-radius:var(--radius);white-space:nowrap}
.ingcard p:last-child{margin:0}

/* ---- the add-to-cart panel. One function builds it and both the home page and
   pricing.html call it, so the two cannot print different prices.
   The featured tier is marked by a 3px amber rule across its TOP EDGE and by
   nothing else -- no lift and no scale, so the three tiers keep one height and
   one button baseline (responsive.md proof 3). All three carry a 1px border and
   only the top edge changes, or the featured card's button drops out of line. */
.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-card);
  border:1px solid var(--line-2);border-top:3px solid var(--line-2);
  border-radius:var(--radius);overflow:hidden;position:relative;padding:0;color:var(--ink-2)}
.card--pack.featured{border-top-color:var(--amber)}
/* The head band stacks the pack name over the supply label rather than setting
   them on one row. On one row the flagged card had to reserve the flag's width
   with a padding-right, and at 1440 that left 188px for a name and a supply
   label needing 205: "3 Bottles" wrapped, the band grew a line, and the
   featured card's image and button dropped out of the shared baseline the other
   two hold. Stacked, all three bands are the same two lines high whether they
   carry a flag or not, and the flag sits in the corner beside the name with no
   reserved space at all. */
.pack__head{border-bottom:1px solid var(--line);padding:15px 20px;display:flex;
  flex-direction:column;align-items:flex-start;gap:2px}
.pack__head b{font-family:var(--display);font-size:1.34rem;font-weight:700;color:var(--ink);line-height:1.15}
.pack__head span{font-size:.8125rem;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.pack__flag{position:absolute;right:0;top:0;background:var(--amber);color:var(--ink);font-family:var(--text);font-size:.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:5px 12px;z-index:3}
/* The flag sits in the head band's top-right corner, where the supply label
   also sits because it carries margin-left:auto. On the flagged card the
   supply label is set inline after the pack name instead, so the right end of
   the band stays free. Growing the band instead would make that card taller
   than its siblings and drop its button out of the shared baseline. */
/* No reserved width is needed now that the band stacks: the flag clears the
   name on line one and sits above the supply label on line two. The reserve is
   on the NAME rather than on the band, so the supply label underneath it still
   uses the full width. */
.pack__flag + .pack__head b{padding-right:118px}
/* Between the pricing row collapsing (760px) and about 1000px the three cards
   are near 228px wide, and a 118px reserve left 70px for "3 Bottles", which
   wrapped and made the flagged card's head a line taller than its neighbours.
   The row still shared one height and one button baseline, because the body is
   a flex column, but the image sat 25px lower on that one card. Trimming the
   flag and the pack name in that window is enough for all three to hold one
   line. */
@media (max-width:1000px){
  /* The seal wall drops to two columns here rather than at 760: at 768 its four
     columns measured 181px each, under the 200px floor responsive.md sets for a
     grid child. */
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .badgewall figure{border-top:1px solid var(--line)}
  .badgewall figure:nth-child(-n+2){border-top:0}
  .badgewall figure:nth-child(odd){border-left:0}
  .badgewall figure:nth-child(even){border-left:1px solid var(--line)}
  .pack__flag{font-size:.6875rem;padding:4px 9px;letter-spacing:.05em}
  .pack__head b{font-size:1.1rem}
  .pack__flag + .pack__head b{padding-right:86px}
}
.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,150px);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;margin:0}
.pack__per sup{font-size:1.05rem;font-weight:700;top:-.85em}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:600;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:600;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:24px;margin:0 0 7px;color:var(--ink-2);font-size:.9375rem}
.pack__perks li::before{content:"";position:absolute;left:2px;top:.44em;width:6px;height:11px;
  border:solid var(--amber-d);border-width:0 2px 2px 0;transform:rotate(42deg)}
.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--dark .buy__note{color:var(--on-dark-2)}

/* ---- captioned images. Two across, never three. */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:0 0 1.2em}
.shots>*{min-width:0}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots figure{margin:0;background:var(--paper-card);border:1px solid var(--line-2);border-radius:var(--radius);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:0;margin:0 0 1.2em;
  border:1px solid var(--line-2);border-radius:var(--radius)}
.badgewall>*{min-width:0}
.badgewall figure{margin:0;text-align:center;background:none;border-left:1px solid var(--line);border-top:1px solid var(--line);padding:22px 16px;color:var(--ink-2)}
.badgewall figure:nth-child(-n+4){border-top:0}
.badgewall figure:nth-child(4n+1){border-left:0}
.badgewall img{width:74px;height:74px;object-fit:contain;margin:0 auto 12px}
.badgewall b{display:block;font-size:.98rem;margin-bottom:5px;color:var(--ink)}
.badgewall span{font-size:.875rem;color:var(--ink-2)}

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

/* ---- FAQ. The padding is on <summary>, which is the click target (pitfall 73). */
.faq{border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;background:var(--paper-card);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:600;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(--amber-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 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(--ink-2);margin:0 0 .6em}
/* The reference list prints each source's full URL as the link TEXT, and a URL
   is one unbreakable token; at 390 that pushed a single <a> past the viewport
   on eleven pages of another site, clipped and unscrollable. `anywhere` also
   lowers the element's min-content, which is what stops the ancestor being
   sized by the longest URL in the list. */
.refs li,.refs li a{overflow-wrap:anywhere}
.byline{display:flex;gap:18px;background:none;border:1px solid var(--line-2);border-left:3px solid var(--slate);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;border:1px solid var(--amber);color:var(--amber-d);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}

/* ---- closing CTA: a slate block with a single amber rule across its top */
.final{background:var(--slate);border:1px solid var(--slate);border-top:3px solid var(--amber);border-radius:0 0 var(--radius) var(--radius);padding:32px 34px;color:var(--on-dark)}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:32px;align-items:center}
.final--media>*{min-width:0}
.final__img img{width:210px;background:#fff;border:1px solid var(--line-d);border-radius:var(--radius)}
.final h2{margin:0 0 10px;color:#fff}
.final p{color:var(--on-dark)}
.final a{color:var(--amber-l)}
.final__price{font-weight:600;color:#fff}
.final__sm{font-size:.9375rem;color:var(--on-dark-2);margin:12px 0 0}

/* ---- related: two across, matching the section rhythm */
.rel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;text-align:left}
.rel>*{min-width:0}
.rel a{display:block;background:none;border:1px solid var(--line-2);border-radius:var(--radius);padding:20px 22px;text-decoration:none;color:var(--ink-2);transition:border-color .16s ease}
.rel a:hover{border-color:var(--amber)}
.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 and never zooms back
   (pitfall 86). */
.form{display:grid;gap:15px;max-width:var(--measure)}
.field label{display:block;font-weight:600;font-size:.9688rem;margin-bottom:6px;color:var(--ink)}
.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-card);color:var(--ink)}
.field textarea{min-height:140px;resize:vertical}
.field small{display:block;font-size:.9062rem;color:var(--ink-3);margin-top:5px}

/* ---- blog */
.article{max-width:var(--measure);margin-inline:auto}
.postmeta{font-size:.9375rem;color:var(--ink-3);margin:0 0 20px;padding-block:10px;border-block:1px solid var(--line)}
.toc{background:none;border:1px solid var(--line-2);border-radius:var(--radius);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)}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.posts>*{min-width:0}
.posts article{background:none;border:1px solid var(--line-2);border-radius:var(--radius);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)}
.dtable{min-width:520px}
.article h2{scroll-margin-top:calc(var(--navh,104px) + 14px)}
.article .final--media{grid-template-columns:1fr;gap:18px}
.article .final__img img{width:170px}

/* ---- footer: a porcelain CTA band, a hairline seal row, a DEEP SLATE SLAB of
   four columns, and a porcelain legal strip beneath it. The index is the dark
   half of the footer and the legal line is the light one, and the guarantee is
   set as running text in the contact column rather than as an oversized
   figure -- both of those are the slot's footer lever. */
.fcta{background:var(--paper-tint);padding:56px 0;border-top:1px solid var(--line)}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:36px;align-items:center;
  background:var(--slate);border:1px solid var(--slate);border-top:3px solid var(--amber);
  border-radius:0 0 var(--radius) var(--radius);padding:34px 38px;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:600;letter-spacing:.2em;text-transform:uppercase;color:var(--amber-l);margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.9rem;font-weight:700;line-height:1.2;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(--amber-l)}
.fcta__img img{width:240px;background:#fff;border:1px solid var(--line-d);border-radius:var(--radius)}
footer{background:var(--slate)}
.fseals{background:var(--paper);border-block:1px solid var(--line)}
.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)}
.fdark{background:var(--slate);color:var(--on-dark)}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px;padding:46px 0 32px}
.fgrid>*{min-width:0}
.fbrand{font-family:var(--display);font-size:2rem;font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1}
.fbrand span{color:var(--amber-l)}
.frole{font-size:.9375rem;color:var(--on-dark-2);margin:8px 0 14px}
.fcard p{font-size:1.0625rem;color:var(--on-dark);margin:0 0 .7em}
.fcard b{color:#fff}
.fcard a{color:var(--amber-l)}
.fh{font-size:.8125rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-2);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(--on-dark);text-decoration:none}
footer li a:hover{color:var(--amber-l)}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:15px;border-top:1px solid var(--line-d);padding:22px 0 32px}
.fpay img{width:236px;height:auto}
.fpay span{font-size:.9375rem;color:var(--on-dark-2)}
.disc{background:var(--paper);border-top:1px solid var(--line);padding:32px 0 36px;color:var(--ink-2)}
.disc p,.disc li{font-size:.9375rem;color:var(--ink-2)}
.disc b{color:var(--ink)}
.disc a{color:var(--amber-d)}
.disc__list{columns:2;column-gap:40px;list-style:none;margin:14px 0 0;padding:0}
.disc__list li{break-inside:avoid;margin:0 0 9px;padding-left:17px;position:relative}
.disc__list li::before{content:"";position:absolute;left:0;top:.8em;width:7px;height:2px;background:var(--amber)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:.9375rem}

/* ---- sticky buy bar. It is declared at the TOP LEVEL and shown at every
   width: one site declared `.buybar{display:none}` outside a media query and
   had no bottom CTA on desktop at all, with the direction classes landing
   correctly on an element that was never rendered (house rule 8). */
.buybar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--slate-2);color:#fff;border-top:3px solid var(--amber);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:1.4fr 1fr 1fr;gap:26px}
}
@media (max-width:980px){
  :root{--navh:100px}
  /* The slate panel is a right-hand column and there is no right-hand column
     once the hero stacks, so it is retired rather than left painting a band
     down the middle of a phone screen. */
  .hero::after{display:none}
  /* Stacked, the bottle sits between the H1 and the Quick Answer, so every
     pixel it takes pushes the answer down a phone screen. */
  .hero__media{padding:0;background:var(--slate);border-radius:var(--radius)}
  .hero__card img{max-width:236px}
  .hero__cap{margin-top:10px}
  .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:2px 0 10px;padding:16px 14px}
  .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 is a 110px block between the answer and the button. It keeps its
     desktop place, where there is room for it above the fold. */
  .hero__road{order:7}
  .hero__sub{order:8}
  .factpills{order:10}
  .figures{order:11}
  .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);white-space:normal}
  .menu a[aria-current="page"]{border-bottom-color:var(--amber)}
  .burger{display:block}
  .nav__top{flex-wrap:wrap}
  .nav__rail{gap:12px}
  .nav__buy{display:none}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats>*:nth-child(3){border-left:0}
  .stats>*:nth-child(-n+2){border-bottom:1px solid var(--line-d)}
  .fcta__box{grid-template-columns:1fr;padding:28px 24px}
  .fcta__img{display:none}
  .final--media{grid-template-columns:1fr;gap:20px}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:52px 0}
  .hero{padding:18px 0 40px}
  .hero__card{padding:13px 12px 11px}
  .hero__card img{max-width:210px}
  .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))}
  .badgewall figure{border-top:1px solid var(--line)}
  .badgewall figure:nth-child(-n+2){border-top:0}
  .badgewall figure:nth-child(4n+1){border-left:1px solid var(--line)}
  .badgewall figure:nth-child(odd){border-left:0}
  .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 and overhangs the card edge. On a phone
     it starts its own line and wraps its own text. */
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .figures{grid-template-columns:1fr}
  .figures div{border-left:0;border-top:1px solid var(--line-2)}
  .figures div:first-child{border-top:0}
  .fgrid{grid-template-columns:1fr 1fr;gap:24px}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:440px){
  .fgrid{grid-template-columns:1fr}
  .badgewall{grid-template-columns:1fr}
  .badgewall figure{border-left:0}
}


/* ---- 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-99px 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, which is what the old house rule did.

   Requires .hero NOT to clip on the block axis -- any non-visible overflow on
   an ancestor becomes the scrollport sticky resolves against. See pitfall 65,
   whose first fix got this wrong. */
@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 different
   shapes (one site shipped 200x243, 200x105 and 200x65 side by side) and the
   blurbs are different lengths, so without these three 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{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*/
/* =========================================================================
   gotheyavue.com -- HOME PAGE surface. Design slot "circulate".

   SCOPE. Every selector is anchored to .hero. `class="hero"` is on index.html
   and on no other page of this site (checked), so `.hero ...` is home-only by
   construction, `.hero ~ X` reaches the sections after it (both are children
   of main#main) and `body:has(.hero) X` reaches the header, the buy bar and
   anything else outside <main> on the home page alone.

   WHY THESE NUMBERS. The slot assigns 24px for panels, 16px for controls, and
   a SINGLE soft lift with no contact stop. The estate default this replaces is
   a 4px button and a two-stop shadow every site shares. The tint is this
   site's own ink, rgb(22,34,46), never neutral black.

   SPECIFICITY, NOT ORDER. modern_surface.py and footer_type.py re-append their
   blocks after this one on every build. Every rule here is anchored to .hero
   or to body, so it outranks their bare `.card` / `.step` / `.answer`
   selectors wherever the two meet, whatever the source order ends up being.
   ========================================================================= */
:root{
  --gtv-rc:24px;                              /* panels and cards */
  --gtv-rk:16px;                              /* buttons and controls */
  --gtv-e:cubic-bezier(.22,.61,.36,1);
  --gtv-d1:0 12px 30px rgba(22,34,46,.10);    /* the slot's one soft stop */
  --gtv-d2:0 18px 44px rgba(22,34,46,.15);    /* the same light, lifted 2px */
  --gtv-d3:0 26px 58px rgba(22,34,46,.20);    /* the hero plate, the tier */
}

/* ---- the hero ground -----------------------------------------------------
   The band this replaces ran porcelain -> #f3e2cb -> porcelain, a beige seam
   straight across the middle of the first screen. The amber is kept, but as a
   soft bloom anchored behind the product column, so the accent sits where the
   bottle is instead of ruling a line under the headline. */
.hero{background:
  radial-gradient(116% 84% at 78% 14%,rgba(247,140,1,.16),rgba(247,140,1,0) 56%),
  linear-gradient(180deg,#f8fafb 0%,#edf2f5 100%)}

/* ---- the motif: circulate ------------------------------------------------
   Two counter-rotating arcs, the inner one tighter, turning in opposite
   directions -- a slow circulation behind the bottle rather than a pulse.
   This is a supplement taken twice a day for weeks: the outer ring takes 58
   seconds to come round, the inner 41, so at any glance the two are simply
   somewhere, and nothing on the screen is asking to be looked at.

   They are pseudo-elements of the MEDIA COLUMN, never of the <img>, which is
   the LCP element and is preloaded. Both sit outside the product card by
   design: the outer ring is 120% of the column (526px against a 340x296 card)
   and the inner one is 72% scaled to 1.34 (423px), so both rims clear the
   card's opaque plate on every edge. An arc sized inside that plate would
   render as nothing at all.

   Sized with `scale` rather than by editing the width, so the geometry above
   the marker is untouched and this stays a paint change. Turned with
   `transform` inside the keyframes, which composes after the `translate`
   property that centres them, so the centring is not applied twice. New
   keyframe names: the sheet already owns gtvClarity and gtvSoften. */
.hero__media::before{
  border:1.5px solid rgba(247,140,1,.44);
  border-left-color:rgba(247,140,1,.04);
  border-bottom-color:rgba(247,140,1,.10);
  background:none;filter:none;opacity:1;
  animation:gtvArcOut 58s linear infinite}
.hero__media::after{
  border:1.5px solid rgba(206,221,233,.66);
  border-right-color:rgba(206,221,233,.05);
  border-top-color:rgba(206,221,233,.16);
  background:none;filter:none;opacity:1;scale:1.34;
  animation:gtvArcIn 41s linear infinite}
@keyframes gtvArcOut{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes gtvArcIn{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}

/* ---- the hero's own surfaces ---------------------------------------------
   The product plate is the one surface on this page that is NOT sitting on
   porcelain: it sits on the slate panel, and --gtv-d3 is tinted rgb(22,34,46),
   which is within a few points of the slate itself -- measured against the
   panel, that shadow darkens it by almost nothing and the plate reads as
   pasted on rather than lifted. Same light, same direction, same single stop,
   carried down to a darkened ink so it has something to say against #22384d.
   Every other surface on the page keeps --gtv-d1. */
.hero__card{border-radius:var(--gtv-rc);border-color:rgba(22,34,46,.10);
  box-shadow:0 26px 58px rgba(9,16,24,.44)}
.hero .answer{border-radius:var(--gtv-rc);box-shadow:var(--gtv-d1);
  border-color:rgba(22,34,46,.10);border-left-color:var(--amber)}
.hero .factpills li{border-radius:999px;background:rgba(255,255,255,.72);
  border-color:rgba(22,34,46,.12)}
.hero .figures{border-radius:var(--gtv-rc);overflow:hidden;
  background:rgba(255,255,255,.62);border-color:rgba(22,34,46,.12);
  box-shadow:var(--gtv-d1)}
.hero .figures div{border-left-color:rgba(22,34,46,.10)}

/* ---- controls ------------------------------------------------------------
   16px, and the pair reads as two weights: the buying CTA is the only
   gradient on the page and the secondary is a solid plate beside it. Type on
   the amber stays var(--ink): measured 5.45:1 against the gradient's darkest
   stop #e07d00, where white on the same amber is 2.4:1. */
body:has(.hero) .btn{
  border-radius:var(--gtv-rk);
  transition:background-color .18s var(--gtv-e),border-color .18s var(--gtv-e),
             color .18s var(--gtv-e),box-shadow .24s var(--gtv-e),
             transform .24s var(--gtv-e)}
body:has(.hero) .btn--amber{
  background-image:linear-gradient(176deg,#ffb04d 0%,#f78c01 48%,#e07d00 100%);
  border-color:#e07d00;box-shadow:var(--gtv-d1)}
body:has(.hero) .btn--amber:hover{
  background-image:linear-gradient(176deg,#ffc276 0%,#ff9a12 48%,#ef8600 100%);
  border-color:#ef8600;box-shadow:var(--gtv-d2);transform:translateY(-2px)}
body:has(.hero) .btn--ghost{background-color:#fff;background-image:none;
  border-color:rgba(22,34,46,.16);box-shadow:none}
body:has(.hero) .btn--ghost:hover{background-color:#fff;
  border-color:var(--slate);box-shadow:var(--gtv-d1);transform:translateY(-2px)}
body:has(.hero) .btn:not(.btn--amber):not(.btn--ghost):hover{
  box-shadow:var(--gtv-d1);transform:translateY(-2px)}
body:has(.hero) .btn:active{transform:translateY(0)}
body:has(.hero) .btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* ---- panels --------------------------------------------------------------
   One radius and one shadow across every reading surface on the page. */
.hero ~ * .card,
.hero ~ * .faq,
.hero ~ * .versus,
.hero ~ * .tablewrap,
.hero ~ * .callout,
.hero ~ * .alert,
.hero ~ * .byline,
.hero ~ * .final,
.hero ~ * .split__img,
.hero ~ * .split__img img,
.hero ~ * .badgewall,
.hero ~ * .steps,
.hero ~ * .shots figure,
.hero ~ * .rel a{border-radius:var(--gtv-rc)}
.hero ~ * .card,
.hero ~ * .faq,
.hero ~ * .versus,
.hero ~ * .tablewrap,
.hero ~ * .callout,
.hero ~ * .alert,
.hero ~ * .byline,
.hero ~ * .final,
.hero ~ * .badgewall,
.hero ~ * .steps,
.hero ~ * .shots figure,
.hero ~ * .rel a{box-shadow:var(--gtv-d1)}

/* A ruled list is ONE object. House rule 11's floor rounds and shadows every
   .step and every .badgewall cell, which inside a bordered stack draws a
   rounded, shadowed tile per row sitting inside another rounded box. The
   container takes the corner and clips to it; the rows go back to being
   rows. */
.hero ~ * .steps,
.hero ~ * .badgewall{overflow:hidden}
.hero ~ * .step,
.hero ~ * .badgewall figure{border-radius:0;box-shadow:none}
.hero ~ * .badgewall figure:hover{box-shadow:none;transform:none}

/* ---- anything clickable answers the pointer: 2px, and a focus ring */
.hero ~ * .rel a{transition:border-color .2s var(--gtv-e),
  box-shadow .24s var(--gtv-e),transform .24s var(--gtv-e)}
.hero ~ * .rel a:hover{border-color:var(--amber);box-shadow:var(--gtv-d2);
  transform:translateY(-2px)}
.hero ~ * .rel a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.hero ~ * .shots figure{transition:box-shadow .24s var(--gtv-e),
  transform .24s var(--gtv-e)}
.hero ~ * .shots figure:hover{box-shadow:var(--gtv-d2);transform:translateY(-2px)}
.hero ~ * .faq summary{transition:background-color .18s var(--gtv-e)}
.hero ~ * .faq summary:hover{background:rgba(247,140,1,.07)}
.hero ~ * .faq summary:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}

/* ---- the pricing row -----------------------------------------------------
   The flag is now a full-width bar in the 28px strip the block above the
   marker reserves in all three head bands, drawn by .card--pack::before so
   the two unflagged cards carry the same rail in a neutral tint and the row
   reads as three of one object. The recommended tier is the amber one, on a
   warm plate, raised 16px, and carrying the deepest of the three shadows.
   Nothing here touches the image slot, the head's height or the button's
   margin-top:auto. */
.hero ~ #pricing .card--pack{border-radius:var(--gtv-rc);border-top-width:1px;
  border-color:rgba(22,34,46,.12);box-shadow:var(--gtv-d1);
  transition:box-shadow .26s var(--gtv-e),transform .26s var(--gtv-e),
             border-color .26s var(--gtv-e)}
.hero ~ #pricing .card--pack::before{background:linear-gradient(180deg,#e9eff3,#dce6ed)}
.hero ~ #pricing .card--pack:hover{box-shadow:var(--gtv-d2);transform:translateY(-2px)}
.hero ~ #pricing .card--pack.featured{background:#fffcf5;
  border-color:rgba(247,140,1,.55);box-shadow:var(--gtv-d3)}
.hero ~ #pricing .card--pack.featured::before{
  background:linear-gradient(180deg,#ffb84f,#f78c01)}
.hero ~ #pricing .card--pack.featured:hover{
  box-shadow:0 30px 66px rgba(22,34,46,.24);transform:translateY(-2px)}
.hero ~ #pricing .pack__flag{background:none;color:var(--ink);
  font-size:.7188rem;letter-spacing:.14em}
.hero ~ #pricing .pack__perks li::after{
  border-bottom:1px dashed rgba(22,34,46,.22)}
.hero ~ #pricing .pack__perks li:last-child::after{border-bottom:0}

/* ---- every one of the above switched off, on request ------------------- */
@media (prefers-reduced-motion:reduce){
  body:has(.hero) .btn,
  .hero ~ * .rel a,
  .hero ~ * .shots figure,
  .hero ~ * .faq summary,
  .hero ~ #pricing .card--pack{transition:none}
  body:has(.hero) .btn:hover,
  body:has(.hero) .btn--amber:hover,
  body:has(.hero) .btn--ghost:hover,
  body:has(.hero) .btn:not(.btn--amber):not(.btn--ghost):hover,
  .hero ~ * .rel a:hover,
  .hero ~ * .shots figure:hover,
  .hero ~ #pricing .card--pack:hover,
  .hero ~ #pricing .card--pack.featured:hover{transform:none}
  .hero__media::before,.hero__media::after{animation: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 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 17 box-shadow declaration(s)
   and 0 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 (22,34,46), 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(22,34,46,.06), 0 6px 18px rgba(22,34,46,.07);
  --lift:0 2px 6px rgba(22,34,46,.09), 0 16px 34px rgba(22,34,46,.14);
}

.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.final,
.split__img,
.answer{box-shadow:var(--shadow)}

/* 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. */
.step,
.keypoints,
.callout,
.alert,
.byline,
.badgewall figure,
.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}