/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Prata Fallback";src:local("Georgia");font-weight:400;size-adjust:108.66%;ascent-override:91.39%;descent-override:33.31%;line-gap-override:0.00%}
@font-face{font-family:"Encode Sans Fallback";src:local("Arial");font-weight:400;size-adjust:100.13%;ascent-override:102.86%;descent-override:21.97%;line-gap-override:0.00%}
@font-face{font-family:"Encode Sans Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:100.60%;ascent-override:102.38%;descent-override:21.87%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* theopticorepro.com — OptiCore Pro, the U.S. stocking partner's desk.
   Design slot: row 310 in _generators/batch8_assignments.py. Prata / Encode
   Sans, a pale-wheat ground banded in umber, the identity pinned to a vertical
   spine at the left page edge, and one centred column of destinations beneath a
   very large wordmark.

   TWO THINGS ABOUT THE TYPE, BOTH DELIBERATE.

   Prata ships ONE weight. fonts.googleapis.com/css2?family=Prata:wght@400;700
   returns 200 and serves a single 400 face, so a heading asking for 700 renders
   faux-bold — a synthetic smear the browser draws by fattening the outline. So
   every Prata heading here is set at 400 and takes its emphasis from SIZE and
   from letter-spacing instead. Nothing in this file asks Prata for a weight it
   does not have.

   And Prata is the DISPLAY face only. The eyebrows, the buttons, the menu, the
   table headers and the big figures that other desks set in their display face
   are set here in Encode Sans at 700 or 800, because those are the places a
   missing weight would have shown first.

   THE GROUND. Pale wheat #f7f0df with umber #6b4320 bands. The teal is the
   bottle's own — sampled off the OptiCore Pro cap and its gradient favicon,
   #0f6a72 taken down for type and #3aa9b2 kept bright for the arc around the
   product. The teal is kept OFF the ground entirely: it only ever reads in the
   hero arc, the rules, the links and the CTAs, which is what stops a wheat-and-
   teal desk resembling any other wheat desk on the estate.

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

/* ---- tokens */
:root{
  --ink:#2b2117;            /* body text, warm near-black */
  --ink-2:#5c4c3b;          /* secondary */
  --ink-3:#8a7663;          /* captions, meta */
  --umber:#6b4320;          /* the band */
  --umber-d:#3d2611;        /* deep band, footer slab */
  --umber-2:#8a5a2c;        /* lighter band edge */
  --teal:#0f6a72;           /* the bottle's cap, taken down for type */
  --teal-d:#0a4c53;
  --aqua:#3aa9b2;           /* the bottle's bright ring */
  --wash:#e2f0f0;           /* teal wash */
  --paper:#f7f0df;          /* the page: pale wheat */
  --panel:#fffdf7;
  --tint:#efe3c9;           /* wheat band */
  --line:#e2d4b8;
  --line-2:#c9b694;
  --good:#2f6b42;
  /* Kept one step off full saturation on purpose: brand_marks.py picks a site's
     accent as the most SATURATED :root token inside its lightness window, and
     at #8a4f10 this warning brown out-saturated the bottle's own aqua and would
     have been drawn into the logo. */
  --warn:#8a5518;
  --wrap:1180px;
  --measure:760px;
  --measure-wide:980px;
  --radius:4px;
  --radius-lg:8px;
  --shadow:0 1px 2px rgba(61,38,17,.06), 0 10px 26px rgba(61,38,17,.09);
  --shadow-lg:0 20px 54px rgba(61,38,17,.20);
  --navh:104px;
  --spine:10px;
  --display:"Prata","Prata Fallback",Georgia,"Times New Roman",serif;
  --text:"Encode Sans","Encode Sans 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);
  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(--teal-d);text-underline-offset:3px}
a:hover{color:var(--umber)}
/* Prata has a 400 face and nothing else. Every heading is set at 400 on
   purpose; the scale and the tracking carry the emphasis. */
h1,h2,h3,h4{font-family:var(--display);color:var(--umber-d);font-weight:400;line-height:1.18;margin:0 0 .5em}
h1{font-size:clamp(2.05rem,1.32rem + 2.3vw,3.15rem);letter-spacing:-.012em}
h2{font-size:clamp(1.52rem,1.2rem + 1.2vw,2.18rem);letter-spacing:-.008em}
h3{font-size:1.22rem}
h4{font-size:1.05rem}
p,li{font-size:1.0625rem}
p{margin:0 0 1.05em}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.skip{position:absolute;left:-9999px;top:0;background:var(--umber-d);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--aqua);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it. Encode Sans, not Prata:
   a single-weight serif at 13.5px in caps would have to be faux-bolded to read
   as a label at all. */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--text);font-size:.84375rem;font-weight:800;
  letter-spacing:.17em;text-transform:uppercase;color:var(--teal-d);
  margin:0 0 10px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--aqua)}

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

/* ---- header: the identity pinned to a vertical spine at the page edge.
   The masthead is full-bleed rather than wrapped, because the whole idea is
   that the spine and the identity touch. A centred .wrap would leave the spine
   at x=0 and the wordmark 150px away from it at 1440, which is the same bar
   every other desk has with a stripe drawn beside it. */
.nav{position:sticky;top:0;z-index:100;background:var(--panel);border-bottom:1px solid var(--line)}
.nav__bar{
  display:flex;align-items:center;gap:20px;
  border-left:var(--spine) solid var(--umber);
  /* padding-BLOCK on the block axis and an explicit right value only. This
     element does not carry .wrap, but the habit is the point: `padding:12px 0`
     on a .wrap companion sets padding-inline to 0 and wipes the page gutter,
     invisibly above the container max-width (pitfall 46). */
  padding-block:12px;padding-right:20px;
}
.brand{display:flex;align-items:center;gap:13px;padding-left:20px;text-decoration:none;color:var(--umber-d)}
.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 carry class="brand__glyph" 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 — a masthead two
   different heights on one site (pitfall 16). */
.brand>svg{width:36px;height:36px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.bw b{font-family:var(--display);font-size:1.34rem;font-weight:400;letter-spacing:.005em}
.bw b em{font-style:normal;color:var(--teal)}
.bw small{font-size:0.9062rem;font-weight:600;color:var(--ink-3)}
.nav__rail{margin-left:auto;display:flex;align-items:center;gap:16px}
.nav__price{text-align:right;line-height:1.24}
.nav__price b{display:block;font-family:var(--text);font-size:1.12rem;font-weight:800;color:var(--umber-d)}
.nav__price span{font-size:.78125rem;font-weight:600;color:var(--ink-3)}
.nav__buy{min-height:46px;padding:11px 20px;font-size:.95rem}
.burger{
  display:none;width:48px;height:46px;background:transparent;border:1px solid var(--line-2);
  border-radius:var(--radius);cursor:pointer;padding:12px 11px;
}
.burger span{display:block;height:2px;background:var(--umber-d);margin:0 0 5px}
.burger span:last-child{margin:0}
/* the menu keeps the spine, one shade deeper */
.nav__strip{background:var(--tint);border-top:1px solid var(--line);border-left:var(--spine) solid var(--umber-d)}
.menu{
  display:flex;flex-wrap:wrap;gap:0 26px;list-style:none;margin:0;
  padding-block:0;padding-left:20px;padding-right:20px;
  align-items:center;min-height:44px;
}
.menu a{
  display:inline-block;padding-block:11px;font-family:var(--text);
  font-size:.9375rem;font-weight:700;color:var(--ink-2);text-decoration:none;
  border-bottom:3px solid transparent;
}
.menu a:hover{color:var(--umber-d)}
.menu a[aria-current="page"]{color:var(--umber-d);border-bottom-color:var(--aqua)}
.menu__more{display:none}

/* ---- hero: copy LEFT, the product RIGHT on the wheat */
.hero{position:relative;background:var(--paper);padding:52px 0 58px;overflow-x:clip}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:center;padding-block:0}
.hero__copy{display:flex;flex-direction:column;min-width:0}
.hero h1{margin:0 0 18px}
.hero h1 em{font-style:normal;color:var(--teal-d)}
.answer{
  background:var(--panel);border:1px solid var(--line);
  border-left:4px solid var(--aqua);border-radius:0 var(--radius) var(--radius) 0;
  padding:20px 24px;margin:0 0 18px;box-shadow:var(--shadow);
}
.answer p{margin:0 0 .75em;font-size:1.062rem}
.answer p:last-child{margin:0}
.hero__road{font-size:1rem;color:var(--ink-2);margin:0 0 20px;max-width:56ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 20px}
.hero__sub{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 18px;font-size:.96875rem;font-weight:600;color:var(--ink-2)}
.hero__sub span{display:inline-flex;align-items:center;gap:7px}
.hero__sub span::before{content:"\2713";color:var(--good);font-weight:800}
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0}
.factpills li{
  font-size:.90625rem;font-weight:600;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line);padding:7px 14px;border-radius:2px;
}
.factpills li b{color:var(--umber-d);font-weight:800}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.figures>*{min-width:0}
.figures div{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--aqua);padding:13px 15px}
.figures b{display:block;font-family:var(--display);font-size:1.55rem;font-weight:400;color:var(--umber-d);line-height:1.1}
.figures span{display:block;font-size:0.9062rem;font-weight:600;color:var(--ink-3);margin-top:3px}
.hero__media{position:relative;align-self:center}
.hero__card{position:relative;z-index:2;text-align:center;padding:10px}
.hero__card img{width:100%;max-width:450px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 24px 40px rgba(61,38,17,.30))}
.hero__cap{margin:14px 0 0;font-size:.84375rem;font-weight:600;color:var(--ink-3);text-align:center}
.trust__row{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none;font-size:.96875rem;font-weight:600;color:var(--ink-2)}
.trust__row li{display:inline-flex;align-items:center;gap:8px}
.trust__row li::before{content:"\2713";color:var(--good);font-weight:800}

/* ---- inner page head */
.phead{padding:34px 0 10px;background:var(--panel);border-bottom:1px solid var(--line)}
.crumbs{font-size:.90625rem;color:var(--ink-3);margin:0 0 14px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--teal-d)}
.phead h1{margin:0 0 16px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide)}
.lead{font-size:1.14rem;color:var(--ink-2);max-width:var(--measure)}

/* ---- topline strip: the five facts a buyer wants before reading anything —
   role, lot, dose and count, guarantee, order desk — above the navigation, so
   the menu does not have to carry them (hero.md, 18 Sep 2026).

   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. The lot and the dose are trimmed on phones, where five
   items wrap to three lines and eat most of a hundred pixels. */
.util{background:var(--umber-d);color:#dcc9ae;font-size:.84375rem;line-height:1.5}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding-block:8px}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;min-width:0}
.util__item+.util__item::before{content:"";width:3px;height:3px;border-radius:50%;
  background:#8a6a45;flex:0 0 auto;margin-right:11px}
.util b{color:#fbf3e4;font-weight:700}
.util a{color:inherit;text-decoration:none}
.util a:hover{text-decoration:underline}
@media (max-width:760px){
  .util__item--trim{display:none}
  .util__row{gap:4px 14px}
}


/* ---- hero motif -- lens-clear ---------------------------------------- */
.hero{position:relative;overflow-x:clip;overflow-y:visible}
:where(.hero__media){position:relative}
.hero__card{position:relative;z-index:2}
.hero__card img{position:relative;z-index:3}
.hero{background:radial-gradient(118% 88% at 28% 24%,#fbf7ed 0%,#f7f0df 42%,#ede4d2 100%)}.hero__media::before{content:'';position:absolute;left:50%;top:-6%;width:150%;height:112%;translate:-50% 0;background:linear-gradient(102deg,transparent 0%,rgba(58,169,178,0.34) 34%,rgba(225,242,243,0.62) 50%,rgba(58,169,178,0.22) 66%,transparent 100%);filter:blur(18px);animation:lcClear 11s ease-in-out infinite;z-index:0;pointer-events:none}.hero__media::after{content:'';position:absolute;left:50%;top:44%;width:150%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1px solid rgba(15,106,114,0.26);border-top-color:rgba(58,169,178,0.82);border-right-color:rgba(58,169,178,0.44);animation:lcRing 26s linear infinite;z-index:0;pointer-events:none}@keyframes lcClear{0%{transform:translateX(-34%);opacity:0}16%{opacity:.9}58%{opacity:.62}100%{transform:translateX(34%);opacity:0}}@keyframes lcRing{to{rotate:360deg}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/* --- hero responsive rules, copied into the critical block
   A phone painted the desktop hero from the inline block and then
   jumped when the async sheet arrived -- 692px on one site, CLS 0.95.
   These are COPIES: the originals stay below, so the cascade is
   unchanged and the first paint is already correct.
   REGENERATED ON EVERY BUILD from the rules below the marker. Edit
   the originals; never this copy, which is overwritten. */
@media (max-width:980px){
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:6px 0 20px}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
}
@media (max-width:760px){
  .hero{padding:34px 0 42px}
}
@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 only: the hero's reading order, and the pricing row's rhythm.
   `.hero` is on index.html and on no other page of this site, so any selector
   beginning `.hero` is home-only by construction; the pricing rules carry
   body:has(.hero) because .card--pack also lives on pricing.html.

   GEOMETRY, so it belongs above the marker and is inlined into the first
   paint with the rest of the critical block. Measured before: the hero's buy
   button sat at y=948 on a 900px screen, 48px under the fold, so the money
   page's first screen had nothing to click. */
body:has(.hero) .pack__perks li{margin:0;padding:8px 0 8px 24px}
body:has(.hero) .pack__perks li+li{border-top:1px dashed var(--line-2)}
@media (min-width:981px){
  /* Desktop reading order: eyebrow, headline, the quick answer, THE BUTTONS,
     the payment line, then the evidence. The phone order is composed
     separately below 981px with display:contents and is left alone. */
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero .answer{order:3}
  .hero__cta{order:4}
  .hero__sub{order:5}
  .hero__road{order:6}
  .hero .factpills{order:7}
  .hero .figures{order:8}
  .hero{padding:34px 0 54px}
  .hero__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px}
  .hero h1{font-size:clamp(2.05rem,1.12rem + 2.05vw,2.8rem);margin:0 0 14px}
  .hero .answer{margin:0 0 20px}
  .hero__cta{margin:0 0 14px}
  .hero__sub{margin:0 0 24px}
  .hero__road{margin:0 0 18px}
  /* The recommended tier is raised with MARGIN, never transform: the reveal
     pass sets transform:none and would drop the lift on scroll. The two
     margins cancel, so the stretched height -- and therefore every offset
     inside the card, including the Add To Cart baseline -- is unchanged. */
  body:has(.hero) .card--pack.featured{margin-top:0;margin-bottom:0}
}
/* A 1024- or 1366-wide laptop is also 768 tall, and there the same stack runs
   ~30px longer because the copy column is narrower. Tightened, not redrawn. */
@media (min-width:981px) and (max-width:1199px){
  .hero{padding:22px 0 48px}
  .hero h1{margin:0 0 10px}
  .hero .answer{padding:17px 20px;margin:0 0 16px}
  .hero__cta{margin:0 0 12px}
}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/
/* ---- sections */
.sec{padding:60px 0;position:relative}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
/* the umber band */
.sec--dark{background:var(--umber-d);color:#ead9c2}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#e0cdb3}
.sec--dark .eyebrow{color:#8fd2d6}
.sec--dark .eyebrow::before{background:#8fd2d6}
.sec--dark a{color:#9fdde0}
.sec--band{background:linear-gradient(180deg,var(--tint),var(--paper))}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec__head{max-width:var(--measure);margin:0 0 26px}
.sec__head h2{margin:0 0 10px}
.sec__head p{color:var(--ink-2);margin:0}
.sec--dark .sec__head p{color:#e0cdb3}

/* one measure, centred; multi-column components keep the full wrap */
@media (min-width:1060px){
  .sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,.sec>.wrap>p,
  .sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
  .sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.pullquote,
  .sec>.wrap>blockquote{max-width:var(--measure);margin-inline:auto}
  .sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps{
    max-width:var(--measure-wide);margin-inline:auto}
}

/* ---- lists */
.ticks{list-style:none;margin:0 0 1.1em;padding:0}
.ticks li{position:relative;padding-left:28px;margin:0 0 .5em}
.ticks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--good);font-weight:800}
.sec--dark .ticks li::before{color:#7fc9a2}

/* ---- tables */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:1rem}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
/* Encode Sans, not Prata: a single-weight serif set small in a header row is
   exactly where a faux-bold would show. */
th{font-family:var(--text);font-weight:800;color:#fff;background:var(--umber);font-size:.9375rem;letter-spacing:.01em}
tbody tr:nth-child(even){background:#fbf6ea}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--umber-d)}
.tnote{font-size:.9375rem;color:var(--ink-3);margin:-.4em 0 1.2em}

/* ---- numbered steps */
.steps{display:grid;gap:16px;margin:0 0 1.2em;counter-reset:s}
.steps>*{min-width:0}
.step{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px 20px 70px}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:20px;top:19px;width:36px;height:36px;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--teal),var(--teal-d));color:#fff;
  font-family:var(--text);font-weight:800;font-size:1rem;border-radius:50%;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards */
.grid{display:grid;gap:18px}
/* A grid item's default min-width is auto, which floors at MIN-CONTENT. Any
   card holding a table or a nowrap chip therefore refuses to shrink below that
   floor and overhangs the phone silently, because body{overflow-x:clip} clips
   it away with nothing to scroll and nothing to report. min-width:0 belongs on
   the items at EVERY width, not only inside a media query. */
.grid>*{min-width:0}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--umber-2);border-radius:0 0 var(--radius) var(--radius);padding:22px 22px}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#4a2f14;border-color:#6b4826;border-top-color:var(--aqua)}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:1px solid #bfdede;border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--teal-d)}
.callout p:last-child{margin:0}
.alert{background:#fbf0dd;border:1px solid #e9d3ae;border-left:4px solid var(--warn);border-radius:0 var(--radius) var(--radius) 0;padding:20px 22px;margin:0 0 1.2em}
.alert b:first-child{display:block;margin-bottom:6px;color:var(--warn)}
.alert p:last-child{margin:0}
.pullquote{font-family:var(--display);font-size:1.32rem;font-weight:400;line-height:1.52;color:var(--umber-d);border-left:4px solid var(--aqua);padding:4px 0 4px 22px;margin:0 0 1.2em}
.pullquote cite{display:block;font-family:var(--text);font-size:.9375rem;font-style:normal;font-weight:400;color:var(--ink-3);margin-top:8px}
.keypoints{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--teal);border-radius:0 0 var(--radius) var(--radius);padding:20px 22px;margin:0 0 1.2em}
.keypoints>b{display:block;margin-bottom:8px}
.keypoints ul{margin:0;padding-left:20px}

/* ---- image beside copy */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center;margin:0 0 1.2em}
.split--flip .split__img{order:2}
/* Same family as .grid>* above. A .tablewrap holding a 520px-min table keeps
   its column 520px wide however narrow the grid gets unless the item is told
   it may shrink. */
.split__img,.split__body{min-width:0}
.split__img img{width:100%;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.split__body p:last-child{margin:0}

/* ---- stat band */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;text-align:center}
.stats>*{min-width:0}
.stats div b{display:block;font-family:var(--display);font-size:2.25rem;font-weight:400;color:#fff;line-height:1.1}
.stats div span{display:block;font-size:.9375rem;color:#e0cdb3;margin-top:4px}

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

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
/* .ing__dose is white-space:nowrap and some of these labels render past 200px
   wide, which sets the card's min-content floor. min-width:0 lets the card
   shrink; .ingcard__top already wraps, so the chip drops onto its own line. */
.inglist>*{min-width:0}
.ingcard{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 10px;min-width:0}
.ingcard__top h3{margin:0}
.ing__latin{font-size:.9375rem;font-style:italic;color:var(--ink-3)}
.ing__dose{margin-left:auto;font-size:.9375rem;font-weight:800;color:#fff;background:var(--umber);padding:4px 12px;border-radius:2px;white-space:nowrap}
.ingcard p:last-child{margin:0}

/* ---- add-to-cart pricing panel */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;margin:0 0 20px}
.prices>*{min-width:0}
.card--pack{display:flex;flex-direction:column;background:var(--panel);border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--radius-lg);overflow:hidden;position:relative;border-top-width:2px}
/* No lift on the featured card. A negative margin raises its box, which makes
   it taller than its siblings and trips the rule that a pricing row shares one
   height and one button baseline. The card is already unmistakable from its
   border, its shadow, its head band and its flag. */
.card--pack.featured{border-color:var(--teal);box-shadow:var(--shadow-lg)}
.pack__head{background:var(--tint);border-bottom:1px solid var(--line);padding:14px 20px;display:flex;align-items:center;gap:10px;min-width:0}
.card--pack.featured .pack__head{background:linear-gradient(98deg,var(--teal-d),var(--teal));border-bottom-color:var(--teal-d)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--display);font-size:1.16rem;font-weight:400}
.pack__head span{font-size:.8125rem;font-weight:700;color:var(--ink-3);margin-left:auto}
.pack__flag{position:absolute;right:0;top:0;background:var(--teal);color:#fff;font-family:var(--text);font-size:0.8438rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 13px;z-index:3;border-radius:0 0 0 var(--radius)}
.pack__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px;min-width:0}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);object-fit:contain;margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:2.4rem;font-weight:400;color:var(--umber-d);line-height:1;text-align:center}
.pack__per sup{font-size:1rem;font-weight:400;top:-.8em}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:700;color:var(--ink-3);margin:4px 0 12px}
.pack__tot{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0 0 14px;font-size:1rem}
.pack__tot b{font-weight:800;color:var(--umber-d)}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:.9375rem}
.pack__perks li{position:relative;padding-left:24px;margin:0 0 6px;color:var(--ink-2)}
.pack__perks li::before{content:"\2713";position:absolute;left:0;color:var(--good);font-weight:800}
.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:.84375rem;color:var(--ink-3)}
.buy__note{font-size:.9375rem;color:var(--ink-3);text-align:center;margin:0}

/* ---- captioned images */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 1.2em}
.shots>*{min-width:0}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.shots img{width:100%}
.shots figcaption{padding:16px 18px}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--umber-d)}
.shots figcaption span{font-size:.9375rem;color:var(--ink-2)}
figure.portrait img{width:var(--figw,320px);margin-inline:auto}

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

/* ---- star distribution */
.meter{margin:0 0 1.2em}
.meter__row{display:grid;grid-template-columns:76px minmax(0,1fr) 52px;gap:12px;align-items:center;margin:0 0 8px;font-size:.9375rem}
.meter__bar{height:10px;background:var(--line);border-radius:999px;overflow:hidden;min-width:0}
.meter__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--aqua),var(--teal-d))}
.stars{color:#b8801f;letter-spacing:1px}
.stars i{font-style:normal;opacity:.34}

/* ---- FAQ. Padding on <summary>, which is the click target (pitfall 73). */
.faq{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);margin:0 0 1.2em}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:17px 48px 17px 20px;cursor:pointer;position:relative;list-style:none;font-family:var(--display);font-weight:400;font-size:1.1rem;color:var(--umber-d)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;translate:0 -50%;font-family:var(--text);font-size:1.3rem;font-weight:400;color:var(--teal-d)}
.faq details[open] summary::after{content:"\2212"}
.faq__body{padding:0 20px 18px}
.faq__body p:last-child,.faq__body ul:last-child{margin-bottom:0}

/* ---- references and byline */
.refs{margin:0 0 1.2em}
.refs ol{padding-left:22px;margin:0}
.refs li{font-size:1.062rem;color:var(--ink-2);margin:0 0 .6em}
/* The reference list prints each source's full URL as the link TEXT, and a URL
   is one unbreakable token. `anywhere` rather than `break-word` because it also
   lowers the element's MIN-CONTENT, which is what stops the ancestor being
   sized by the longest URL in the list. */
.refs li,.refs li a{overflow-wrap:anywhere}

.byline{display:flex;gap:18px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px;margin:0 0 1.2em}
.byline__mark{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;background:linear-gradient(140deg,var(--umber),var(--umber-d));color:#fff;font-family:var(--text);font-weight:800;font-size:1.06rem;border-radius:var(--radius)}
.byline>div{min-width:0}
.byline b{display:block;margin-bottom:6px;color:var(--umber-d)}
.byline p{font-size:.96875rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--teal);border-radius:0 0 var(--radius) var(--radius);padding:30px 32px}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:center}
.final--media>*{min-width:0}
.final__img img{width:210px}
.final h2{margin:0 0 10px}
.final__price{font-weight:700;color:var(--ink-2)}
.final__sm{font-size:.9375rem;color:var(--ink-3);margin:12px 0 0}

/* ---- related */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;text-align:left}
.rel>*{min-width:0}
.rel a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;text-decoration:none;color:var(--ink);transition:border-color .18s ease,transform .18s ease}
.rel a:hover{border-color:var(--teal);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--display);font-size:1.1rem;font-weight:400;color:var(--umber-d);margin-bottom:5px}
.rel span{font-size:.9375rem;color:var(--ink-2)}

/* ---- forms. 16px minimum or iOS Safari zooms on focus (pitfall 86). */
.form{display:grid;gap:16px;max-width:var(--measure)}
.field label{display:block;font-weight:700;font-size:.96875rem;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font-family:var(--text);font-size:16px;padding:13px 14px;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--panel);color:var(--ink)}
.field textarea{min-height:140px;resize:vertical}
.field small{display:block;font-size:.9375rem;color:var(--ink-3);margin-top:5px}

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

/* ---- footer: one centred column of destinations under a very large wordmark.
   The wordmark is the largest type anywhere on this site and it is the whole
   footer idea, so nothing sits beside it. Everything below it runs down one
   centred column: the destinations as five labelled rows, then the desk's own
   contact block, then the seals and the card row, then the umber legal slab. */
footer{background:var(--paper);border-top:1px solid var(--line)}
.fmark{text-align:center;padding-block:46px 8px}
.fbrand{font-family:var(--display);font-size:clamp(2.6rem,7.4vw,5.6rem);font-weight:400;color:var(--umber-d);letter-spacing:-.012em;line-height:1}
.fbrand span{color:var(--teal)}
.frole{font-size:.96875rem;color:var(--ink-2);margin:12px 0 0}
.fcol{max-width:820px;padding-block:24px 8px;text-align:center}
.frow{padding-block:11px;border-top:1px solid var(--line);min-width:0}
.frow:first-child{border-top:0}
.fh{display:block;font-family:var(--text);font-size:.8125rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 6px}
.frow ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:0 6px}
.frow li{margin:0;display:inline-flex;align-items:center}
.frow li+li::before{content:"\00b7";color:var(--line-2);margin-right:6px}
/* inline-block, not block: the box shrink-wraps so the hover underline stays
   the width of the words, and the negative margin gives the row height back
   (pitfall 82). */
footer li a{display:inline-block;padding-block:5px;margin-block:-5px;font-size:.96875rem;color:var(--ink-2);text-decoration:none}
footer li a:hover{color:var(--teal-d)}
.fcard{max-width:820px;padding-block:22px;text-align:center;border-top:1px solid var(--line)}
.fcard p{font-size:1.062rem;color:var(--ink-2);margin:0 0 .7em}
.fcard b{color:var(--umber-d)}
.fseals{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;padding-block:20px;border-top:1px solid var(--line)}
.fseals img{width:44px;height:44px;object-fit:contain}
.fseals span{font-size:.9375rem;color:var(--ink-3)}
.fpay{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;padding-block:0 26px}
.fpay img{width:230px;height:auto}
.fpay span{font-size:.9375rem;color:var(--ink-3)}
.disc{background:var(--umber-d);color:#e0cdb3;padding:28px 0 32px}
.disc p,.disc li{font-size:.9375rem;color:#e0cdb3}
.disc b{color:#fbf3e4}
.disc a{color:#9fdde0}
.disc__list{columns:2;column-gap:38px;list-style:none;margin:14px 0 0;padding:0}
.disc__list li{break-inside:avoid;margin:0 0 9px;padding-left:16px;position:relative}
.disc__list li::before{content:"";position:absolute;left:0;top:.66em;width:8px;height:2px;background:var(--aqua)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid #6b4826;font-size:.9375rem}

/* ---- closing guarantee band, above the footer */
.fcta{background:linear-gradient(140deg,var(--umber) 0%,var(--umber-d) 100%);color:#fff;padding:52px 0}
.fcta h2,.fcta__h{color:#fff}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center}
.fcta__box>*{min-width:0}
.fcta__eye{display:inline-block;font-family:var(--text);font-size:.84375rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:#8fd2d6;margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.7rem;font-weight:400;line-height:1.26;margin:0 0 10px}
.fcta p{color:#e0cdb3}
.fcta__sm{font-size:.9375rem;color:#c8b092;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:#9fdde0}
.fcta__img img{width:280px}

/* ---- sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--umber-d);color:#fff;transform:translateY(105%);transition:transform .25s ease}
.buybar.show{transform:none}
.buybar__in{display:flex;align-items:center;gap:18px;max-width:var(--wrap);margin-inline:auto;padding:12px 20px}
.buybar__t{font-size:.9375rem;min-width:0}
.buybar__t b{display:block;font-size:1rem}
.buybar__t span{color:#dcc9ae}
.buybar .btn{margin-left:auto;flex:0 0 auto}

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

/* ---- responsive */
@media (max-width:1180px){
  .nav__bar{padding-right:16px}
}
@media (max-width:980px){
  :root{--navh:96px}
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:6px 0 20px}
  .answer{order:4}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
  .trust__row{order:9}
  .factpills{order:10}
  .figures{order:11}
  .nav__price{display:none}
  .menu{display:none;flex-direction:column;align-items:stretch;gap:0;padding-block:6px 12px}
  .menu.open{display:flex}
  .menu__more{display:block}
  .menu a{padding-block:12px;border-bottom:1px solid var(--line-2)}
  .menu a[aria-current="page"]{border-bottom-color:var(--line-2)}
  .burger{display:block}
  .nav__buy{display:none}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .fcta__box{grid-template-columns:minmax(0,1fr)}
  .fcta__img{display:none}
  .final--media{grid-template-columns:minmax(0,1fr);gap:20px}
}
@media (max-width:760px){
  :root{--spine:6px}
  body{font-size:16.5px}
  .sec{padding:44px 0}
  .hero{padding:34px 0 42px}
  .brand{padding-left:14px}
  .menu{padding-left:14px;padding-right:16px}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:minmax(0,1fr)}
  .prices{grid-template-columns:minmax(0,1fr)}
  .card--pack.featured{order:-1}
  .shots,.shots.s2{grid-template-columns:minmax(0,1fr)}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel,.posts{grid-template-columns:minmax(0,1fr)}
  .split,.split--flip .split__img{grid-template-columns:minmax(0,1fr);order:0}
  .versus{grid-template-columns:minmax(0,1fr)}
  .versus>div:nth-child(3n+1){border-top:2px solid var(--line-2)}
  /* The dose chip is white-space:nowrap and margin-left:auto, so on a narrow
     card it is pushed to the right of a line with no room for it and overhangs
     the 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:minmax(0,1fr);gap:8px}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:440px){
  .badgewall{grid-template-columns:minmax(0,1fr)}
}

/* ---- hero: the product breathes on the wheat ------------------------------
   Transform only, NEVER opacity: the bottle is the LCP element and an element
   starting at opacity:0 is not recorded as painted (hero.md).

   The float goes on the CARD. The <img> is preloaded and animating it is what
   hero.md rules out. */
.hero__card{isolation:isolate}
.hero__card::before{
  content:"";position:absolute;left:50%;top:48%;translate:-50% -50%;
  width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(58,169,178,.26),transparent 70%);
  z-index:0;pointer-events:none;
}
.hero__card::after{
  content:"";position:absolute;left:50%;bottom:30px;translate:-50% 0;
  width:54%;height:18px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(61,38,17,.34),transparent 74%);
  filter:blur(5px);z-index:0;pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .hero__card{animation:ocFloat 8.5s ease-in-out infinite}
  @keyframes ocFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
}


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

   --navh is measured and published by site.js: this masthead is two rows and
   its height changes between breakpoints, so a hardcoded offset would tuck the
   product under the bar at one width and float it 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, 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 three vendor pack shots are all 1125x1125 but
   the bottles inside them are at three different scales, so without a fixed
   slot the artwork renders at three visual sizes.

   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 on
   every build and CLS gets worse (pitfall 91). */
.card--pack{display:flex;flex-direction:column}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);
  object-fit:contain;margin-inline:auto;margin-bottom:14px}
.card--pack>.btn{margin-top:auto}

/* ==== fix_layout_breaks.py ==== */
/* A figure alone on its row, and components whose own
   background fights the band they sit in. Appended: each
   rule below is correct in isolation and only their
   combination fails, so the originals stay as written. */
.shots.s2>figure:last-child:nth-child(odd){grid-column:1/-1;max-width:calc((100% - 20px) / 2);margin-inline:auto}
/* ==== end fix_layout_breaks.py ==== */

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

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

/*!SITE-HOME-PAINT-START*/
/* ---- theopticorepro.com, home-page surface -------------------------------
   Slot: panels at 18px and controls at 12px, ONE soft wide lift and no
   contact stop, a notched corner flag on the pricing row, and a hero motif
   from the "settle" family.

   PAINT ONLY. border-radius, box-shadow, background, colour, transform,
   transition and animation move no box, so this sits below the marker and
   needs a restamp rather than a rebuild.

   Everything is scoped body:has(.hero) -- that class is on index.html alone --
   and every selector is written one step past modern_surface.py's bare `.card`
   list, because that pass re-appends its block AFTER this one on every build.
   Specificity, never source order. */
body:has(.hero){
  --oc-rc:18px;                              /* panels  */
  --oc-rk:12px;                              /* controls */
  /* Tinted with this desk's own umber ink (61,38,17), never neutral black. */
  --oc-lift:0 12px 30px rgba(61,38,17,.13);
  --oc-lift-hi:0 18px 44px rgba(61,38,17,.19);
  --oc-teal:0 12px 30px rgba(10,76,83,.30);
  --oc-teal-hi:0 18px 42px rgba(10,76,83,.38);
}

/* --- curve. Two radii on purpose: a card and a button are different objects
   and stop reading as the same rounded rectangle. */
body:has(.hero) .card,
body:has(.hero) .answer,
body:has(.hero) .callout,
body:has(.hero) .alert,
body:has(.hero) .ingcard,
body:has(.hero) .final,
body:has(.hero) .byline,
body:has(.hero) .faq,
body:has(.hero) .step,
body:has(.hero) .tablewrap,
body:has(.hero) .versus,
body:has(.hero) .rel a,
body:has(.hero) .shots figure,
body:has(.hero) .badgewall figure,
body:has(.hero) .split__img img,
body:has(.hero) .figures div{border-radius:var(--oc-rc)}

body:has(.hero) .btn,
body:has(.hero) .burger{border-radius:var(--oc-rk)}

/* The 2px chips were the other half of the dated signature. */
body:has(.hero) .factpills li,
body:has(.hero) .ing__dose{border-radius:999px}

/* --- shade. A single soft stop, wide and low. No contact shadow: this ground
   is wheat, and a tight dark stop under every panel reads as printed-on. */
body:has(.hero) .card,
body:has(.hero) .answer,
body:has(.hero) .callout,
body:has(.hero) .alert,
body:has(.hero) .ingcard,
body:has(.hero) .final,
body:has(.hero) .byline,
body:has(.hero) .faq,
body:has(.hero) .versus,
body:has(.hero) .tablewrap,
body:has(.hero) .step,
body:has(.hero) .rel a,
body:has(.hero) .shots figure,
body:has(.hero) .badgewall figure,
body:has(.hero) .figures div,
body:has(.hero) .split__img img{box-shadow:var(--oc-lift)}

/* --- motion. 2px on anything a pointer can act on, and a focus ring that is
   not simply the hover state repeated. */
body:has(.hero) .btn,
body:has(.hero) .rel a,
body:has(.hero) .shots figure,
body:has(.hero) .badgewall figure,
body:has(.hero) .card--pack{
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,
             border-color .2s ease,background-color .2s ease,filter .2s ease;
}
body:has(.hero) .btn:hover,
body:has(.hero) .rel a:hover,
body:has(.hero) .shots figure:hover,
body:has(.hero) .badgewall figure:hover,
body:has(.hero) .card--pack:hover{transform:translateY(-2px)}
body:has(.hero) .rel a:hover,
body:has(.hero) .shots figure:hover,
body:has(.hero) .badgewall figure:hover{box-shadow:var(--oc-lift-hi)}
body:has(.hero) .btn:active{transform:translateY(0)}
body:has(.hero) .btn:focus-visible,
body:has(.hero) .rel a:focus-visible{outline:3px solid var(--aqua);outline-offset:3px}

/* --- the two weights. The gradient is the BUYING button and nothing else;
   the secondary stays a solid panel with a hairline, so the pair reads as a
   primary and a second choice rather than as two colours. */
body:has(.hero) .btn--teal{
  background:linear-gradient(104deg,var(--teal-d) 0%,var(--teal) 54%,#1a8b94 100%);
  box-shadow:var(--oc-teal);
}
body:has(.hero) .btn--teal:hover{box-shadow:var(--oc-teal-hi);filter:brightness(1.06)}
body:has(.hero) .btn--ghost{
  background:var(--panel);color:var(--umber-d);
  box-shadow:inset 0 0 0 1px var(--line-2),var(--oc-lift);
}
body:has(.hero) .btn--ghost:hover{
  background:var(--panel);color:var(--teal-d);filter:none;
  box-shadow:inset 0 0 0 1px var(--teal),var(--oc-lift-hi);
}

/* --- the pricing row. Nothing here touches the engineered baseline: the head
   band, the fixed image box, the per-item heights and the button's
   margin-top:auto are all left exactly as they were. */
body:has(.hero) .card--pack{
  border-radius:var(--oc-rc);
  box-shadow:inset 0 0 0 1px var(--line),var(--oc-lift);
}
body:has(.hero) .card--pack:hover{
  box-shadow:inset 0 0 0 1px var(--line-2),var(--oc-lift-hi);
}
body:has(.hero) .card--pack.featured{
  border-color:var(--teal);
  background:linear-gradient(180deg,#edf8f8 0%,var(--panel) 38%);
  box-shadow:inset 0 0 0 1px rgba(15,106,114,.34),0 20px 48px rgba(10,76,83,.26);
}
body:has(.hero) .card--pack.featured:hover{
  box-shadow:inset 0 0 0 1px rgba(15,106,114,.52),0 26px 58px rgba(10,76,83,.34);
}

/* --- ribbon: a corner flag, notched at the foot, hanging off the head band.
   Absolutely positioned, so its padding moves nothing. */
body:has(.hero) .pack__flag{
  right:18px;top:0;border-radius:0;
  padding:8px 13px 16px;
  background:linear-gradient(180deg,var(--teal) 0%,var(--teal-d) 100%);
  box-shadow:0 8px 16px rgba(10,76,83,.26);
  clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 8px),0 100%);
}
body:has(.hero) .card--pack.featured .pack__flag{
  background:linear-gradient(180deg,var(--umber-2) 0%,var(--umber) 100%);
  box-shadow:0 8px 16px rgba(61,38,17,.30);
}

/* --- hero motif, "settle" family: a soft halo that breathes up once over
   18s and then holds, on the media column's ::after -- never on the <img>,
   which is the LCP element and is preloaded.

   It re-dresses the ring that pseudo-element already carried rather than
   adding a fifth decoration to the hero: same box, same 150% width (already
   half again wider than the 470px product card, so it reads outside it), the
   spin replaced by one slow settle and a radial halo behind it. Transform and
   opacity only. ONE iteration -- a supplement taken daily for weeks should
   not have a hero that pulses at the reader forever.

   `ocSettle` is a new name: lcClear, lcRing and ocFloat are already taken in
   this stylesheet. */
body:has(.hero) .hero__media::after{
  border:1px solid rgba(15,106,114,.15);
  background:radial-gradient(closest-side,
    rgba(58,169,178,.22) 0%,
    rgba(58,169,178,.115) 44%,
    rgba(58,169,178,.05) 68%,
    rgba(58,169,178,0) 79%);
  opacity:.62;
  animation:ocSettle 18s cubic-bezier(.18,.72,.3,1) 1 both;
}
@keyframes ocSettle{
  0%{transform:scale(.74);opacity:0}
  20%{opacity:.92}
  58%{transform:scale(1.07);opacity:.78}
  100%{transform:scale(1);opacity:.62}
}
/* and the lens sweep keeps its place at a supplement's pace. */
body:has(.hero) .hero__media::before{animation-duration:26s}

@media (prefers-reduced-motion:reduce){
  body:has(.hero) .btn,
  body:has(.hero) .rel a,
    body:has(.hero) .shots figure,
  body:has(.hero) .badgewall figure,
  body:has(.hero) .card--pack{transition:none}
  body:has(.hero) .btn:hover,
  body:has(.hero) .rel a:hover,
    body:has(.hero) .shots figure:hover,
  body:has(.hero) .badgewall figure:hover,
  body:has(.hero) .card--pack:hover{transform:none}
  body:has(.hero) .hero__media::after,
  body:has(.hero) .hero__media::before{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 16 box-shadow declaration(s)
   and 2 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 (43,33,23), 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(43,33,23,.06), 0 6px 18px rgba(43,33,23,.07);
  --lift:0 2px 6px rgba(43,33,23,.09), 0 16px 34px rgba(43,33,23,.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,
.keypoints,
.alert,
.byline,
.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}