/* vaepofil.com — VapoFil, licensed U.S. retail desk.
   Design slot: batch11_assignments.py row 287.

   Six levers, built as assigned:
     Type    Vidaloka (display) / Marvel (text). Vidaloka ships ONE weight, so
             headings never thicken; emphasis inside a heading changes COLOUR.
     Layout  hero copy left, product right; sections run full width and the
             reading matter is held to a centred measure inside them.
     Cards   hairline border, SQUARE corners, no fill. --radius is 0 everywhere.
     Depth   no box-shadow anywhere on the site. Separation comes from a 1px
             rule and a change of ground, and from nothing else.
     Ground  pale apricot, flat. No gradient on any surface, including the hero.
     Motion  the `vapour-coil` motif, written into hero_motifs.py.

   Palette is taken from the bottle: the label is black and royal blue, and the
   two blues here are the exact values in the vendor's own brand icon SVG
   (#0F2A5E, #2460FC). The apricot ground is the slot's, and setting the
   label's electric blue on warm apricot rather than on white or on steel is
   what keeps this desk off every other blue site on the estate.

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

/* ---- tokens */
:root{
  --ink:#191410;             /* body text, warm black to sit on apricot */
  --ink-2:#4a4038;
  --ink-3:#6d6157;
  --blue:#2460fc;            /* the label's arrow blue, from the brand icon */
  --blue-d:#1a46b8;
  --navy:#0f2a5e;            /* the icon's deep field */
  --navy-2:#173d84;
  --paper:#fdf1e6;           /* the page: pale apricot */
  --panel:#fffaf4;           /* the lighter apricot used for panels */
  --tint:#f8e5d3;            /* the deeper apricot band */
  --slab:#17140f;            /* the dark band */
  --on-dark:#fdf1e6;
  --line:#e2c8ad;            /* the hairline, an apricot two steps down */
  --line-2:#cfa87f;
  --wash:#e9eefc;            /* a cool blue tint, used only inside callouts */
  --good:#0f6b45;
  --warn:#8a4a12;
  --wrap:1180px;
  --measure:740px;
  --measure-wide:960px;
  --radius:0px;              /* the cards lever: square corners, sitewide */
  --navh:118px;
  --display:"Vidaloka",Georgia,"Times New Roman",serif;
  --text:"Marvel",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:18px;line-height:1.66;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-underline-offset:3px}
a:hover{color:var(--blue-d)}
h1,h2,h3,h4{font-family:var(--display);color:var(--navy);font-weight:400;line-height:1.14;margin:0 0 .5em}
h1{font-size:clamp(2.05rem,1.35rem + 2.3vw,3.15rem);letter-spacing:-.005em}
h2{font-size:clamp(1.6rem,1.24rem + 1.3vw,2.3rem);letter-spacing:-.004em}
h3{font-size:1.28rem}
h4{font-size:1.1rem}
/* Vidaloka has one weight, so a <b> inside a heading cannot get heavier.
   It changes colour instead, which is the same signal by another means. */
h1 b,h2 b,h3 b,h1 em,h2 em,h3 em{font-weight:400;font-style:normal;color:var(--blue-d)}
p,li{font-size:1.0556rem}
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(--navy);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--text);font-size:0.9444rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--blue-d);
  margin:0 0 12px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--blue)}

/* ---- buttons: square, because the whole site is */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:14px 32px;
  font-family:var(--text);font-size:1.0556rem;font-weight:700;letter-spacing:.02em;
  border:0;border-radius:var(--radius);cursor:pointer;text-decoration:none;
  background:var(--navy);color:#fff;
  transition:background-color .18s ease,transform .18s ease;
}
.btn:hover{background:var(--navy-2);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--cyan,.btn--accent{background:var(--blue-d);color:#fff}
.btn--cyan:hover,.btn--accent:hover{background:var(--blue)}
.btn--lg{min-height:62px;padding:17px 38px;font-size:1.1667rem}
.btn--ghost{background:none;color:var(--navy);border:2px solid var(--line-2)}
.btn--ghost:hover{background:var(--tint);color:var(--navy)}
.btn--wide{width:100%}

/* ---- header: the identity centred, over a band carrying the price ladder */
.nav{position:sticky;top:0;z-index:100;background:var(--panel);border-bottom:1px solid var(--line)}
/* padding-BLOCK, never the shorthand: these rows also carry .wrap, and
   `padding:10px 0` sets padding-inline to 0 and wipes the page gutter.
   Invisible above the container max-width and no overflow test can see it
   (pitfall 46). */
.nav__top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding-block:11px}
/* The identity is the wordmark ALONE inside the anchor, with the role line as a
   sibling beneath it. brand_marks.py draws the `underline` construction as
   `.brand::after` at left:0/right:0, so anything else inside that anchor ends up
   ABOVE the rule and the rule reads as an underlined hyperlink under it. Keeping
   the anchor to the wordmark puts the tool's own rule exactly where the
   construction intends: under the name. Found in a screenshot, not by any
   geometry check -- the page measured clean with two rules on it. */
.ident{grid-column:2;display:flex;flex-direction:column;align-items:center;gap:7px}
.ident__role{font-size:0.9444rem;color:var(--ink-3);letter-spacing:.03em;text-align:center}
.brand{display:flex;flex-direction:column;align-items:center;
       text-decoration:none;color:var(--navy)}
/* Size the mark by ELEMENT as well as by class: brand_marks.py replaces the
   <svg> inside .brand and does not carry the class onto the replacement, so a
   rule keyed only to .brand__glyph stops applying the moment the tool runs
   (pitfall 16). The `underline` construction draws no glyph at all, and these
   rules are inert when there is none. */
.brand__glyph{width:30px;height:30px;flex:0 0 auto}
.brand>svg{width:30px;height:30px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;align-items:center;line-height:1.02;text-align:center}
.bw b{font-family:var(--display);font-size:1.72rem;font-weight:400;letter-spacing:.005em}
.bw b em{font-style:normal;color:var(--blue)}
/* The `underline` mark itself is brand_marks.py's `.brand::after`, not a rule
   drawn here. A second one under the wordmark shipped in the first build and
   the two read as a mistake; the tool owns the mark, so this file does not
   draw one. */
.bw small{font-size:0.9444rem;font-weight:400;color:var(--ink-3);letter-spacing:.03em}
.nav__rail{grid-column:3;display:flex;align-items:center;justify-content:flex-end;gap:12px}
.nav__price{display:none}
.nav__buy{min-height:44px;padding:10px 20px;font-size:1rem}
.burger{display:none;width:46px;height:44px;border:1px solid var(--line-2);background:none;
        border-radius:0;cursor:pointer;padding:11px 10px;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:2px;background:var(--navy)}
.burger span:last-child{width:70%}

/* the band under the identity: the pack ladder, which is the slot's header */
.util{background:var(--navy);color:#fff}
.util__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
           gap:6px 24px;padding-block:7px}
.util__item{font-size:0.9444rem;letter-spacing:.04em;color:#e3ebff}
.util__item+.util__item::before{content:"";display:inline-block;width:5px;height:5px;
  background:var(--blue);margin-right:22px;vertical-align:middle}
.util b{color:#fff;font-weight:700}
.util a{color:#fff}
.util a:hover{color:#bfd0ff}

.nav__strip{border-top:1px solid var(--line);background:var(--paper)}
/* Two deliberate ranks rather than an accidental wrap. Fifteen destinations do
   not fit on one 1180px line, and letting them wrap left thirteen on the first
   row and two orphans on the second. The zero-height break element forces the
   split at the group boundary, so the five primary destinations read as one
   rank and the ten secondary ones as another. */
.menu{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 22px;
      list-style:none;margin:0;padding-block:8px}
.menu__break{flex:0 0 100%;height:0;margin:0;padding:0}
.menu a{display:inline-block;padding:4px 0;font-size:1rem;font-weight:700;
        color:var(--ink-2);text-decoration:none;border-bottom:2px solid transparent}
.menu a:hover{color:var(--navy);border-bottom-color:var(--blue)}
.menu a[aria-current="page"]{color:var(--navy);border-bottom-color:var(--navy)}
.menu__more a{font-weight:400;color:var(--ink-3)}

/* ---- hero: copy left, product right, flat apricot ground, no shadow */
.hero{position:relative;background:var(--paper);padding:46px 0 52px;overflow-x:clip}
.hero__grid{position:relative;z-index:1;display:grid;
            grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:44px;align-items:center}
.hero__copy{min-width:0}
.hero h1{margin-bottom:16px}
.hero h1 em{font-style:normal;color:var(--blue-d)}
.answer{border-left:3px solid var(--blue);padding:2px 0 2px 20px;margin:0 0 18px}
.answer p{margin:0 0 .7em;font-size:1.1111rem;line-height:1.6}
.answer p:last-child{margin-bottom:0}
.hero__road{color:var(--ink-2);font-size:1rem;margin:0 0 20px;max-width:56ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 18px}
.hero__sub{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0 0 18px;padding:0}
.hero__sub span{font-size:0.9444rem;color:var(--ink-2)}
.hero__sub span::before{content:"";display:inline-block;width:9px;height:9px;
  border:2px solid var(--blue);margin-right:8px}
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0}
.factpills li{font-size:0.9444rem;color:var(--ink-2);border:1px solid var(--line);
              padding:5px 12px;background:var(--panel)}
.factpills li b{color:var(--navy);font-weight:700}
.figures{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line);
         border-bottom:1px solid var(--line);margin:0}
.figures div{flex:1 1 150px;padding:12px 16px 12px 0}
.figures div+div{border-left:1px solid var(--line);padding-left:16px}
.figures b{display:block;font-family:var(--display);font-size:1.7rem;font-weight:400;color:var(--navy);line-height:1.1}
.figures span{display:block;font-size:0.9444rem;color:var(--ink-3);line-height:1.35}
.hero__media{position:relative;align-self:center}
.hero__card{position:relative;z-index:2;text-align:center;padding:14px;
            background:var(--panel);border:1px solid var(--line)}
.hero__card img{width:100%;max-width:430px;height:auto;margin-inline:auto;position:relative;z-index:3}
.hero__cap{margin:10px 0 0;font-size:0.9444rem;color:var(--ink-3)}
.trust__row{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;margin:16px 0 0;padding:0}
.trust__row li{font-size:0.9444rem;color:var(--ink-2)}
.trust__row li::before{content:"";display:inline-block;width:9px;height:2px;
  background:var(--blue);margin-right:8px;vertical-align:middle}

/* ---- inner page head */
.phead{background:var(--paper);padding:34px 0 26px;border-bottom:1px solid var(--line)}
.crumbs{font-size:0.9444rem;color:var(--ink-3);margin:0 0 12px}
.crumbs a{color:var(--ink-2)}
.crumbs a:hover{color:var(--navy)}
.phead h1{margin-bottom:16px;max-width:19ch}
.phead .answer{max-width:var(--measure-wide)}
.lead{font-size:1.1111rem;color:var(--ink-2);max-width:62ch;margin:16px 0 0}

/* the phone hero. Copied above CRITICAL-END by critical_hero.py; kept here so
   a phone paints the phone hero on the first frame instead of laying out the
   desktop one and relaying when the async sheet lands. */
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__copy{display:contents}
  .hero h1{order:2}
  .hero .eyebrow{order:1}
  .answer{order:3}
  .hero__road{order:4}
  .hero__cta{order:5}
  .hero__sub{order:6}
  .factpills{order:7}
  .figures{order:8}
  .hero__media{order:9;margin:6px 0 20px}
}
@media (max-width:760px){
  .hero{padding:30px 0 38px}
  .hero__card img{max-width:320px}
  .nav__top{grid-template-columns:1fr auto 1fr}
  .burger{display:flex}
  .nav__buy{display:none}
  .menu{display:none;flex-direction:column;gap:0;padding-block:4px}
  .menu.open{display:flex}
  .menu a{padding:11px 0;border-bottom:1px solid var(--line)}
  .menu__break{display:none}
  .ident__role{font-size:0.8889rem}
  .util__row{gap:4px 14px}
  .util__item+.util__item::before{margin-right:12px}
}
/* --- hero responsive rules, copied into the critical block
   A phone painted the desktop hero from the inline block and then
   jumped when the async sheet arrived -- 692px on one site, CLS 0.95.
   These are COPIES: the originals stay below, so the cascade is
   unchanged and the first paint is already correct. */
@media (min-width: 981px){
  .hero__media{position:sticky;top:calc(var(--navh, 118px) + 14px);align-self:start; min-height:calc(100svh - var(--navh, 118px) - 28px); display:flex;flex-direction:column;align-items:center;justify-content:center}
}
@media (prefers-reduced-motion: reduce){
  .hero__media{position:relative;top:0;min-height:0}
}
@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;}
}


/* ---- hero motif -- vapour-coil ---------------------------------------- */
.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:#fdf1e6}.hero__media::before{content:'';position:absolute;left:54%;top:50%;width:126%;aspect-ratio:1/.30;translate:-50% -50%;z-index:1;pointer-events:none;border-radius:50%;filter:blur(13px);background:linear-gradient(94deg,transparent 4%,rgba(36,96,252,0.42) 34%,rgba(36,96,252,0.30) 56%,transparent 92%);-webkit-mask:linear-gradient(90deg,transparent,#000 26%,#000 100%);mask:linear-gradient(90deg,transparent,#000 26%,#000 100%);animation:vfCoil 12s cubic-bezier(.38,.05,.5,.98) infinite}.hero__media::after{content:'';position:absolute;left:54%;top:50%;width:126%;aspect-ratio:1/.30;translate:-50% -50%;z-index:1;pointer-events:none;border-radius:50%;filter:blur(13px);background:linear-gradient(86deg,transparent 8%,rgba(36,96,252,0.34) 38%,rgba(36,96,252,0.24) 60%,transparent 96%);-webkit-mask:linear-gradient(90deg,transparent,#000 26%,#000 100%);mask:linear-gradient(90deg,transparent,#000 26%,#000 100%);animation:vfCoil 12s cubic-bezier(.38,.05,.5,.98) infinite;animation-delay:-6s}@keyframes vfCoil{0%{transform:translateY(168%) rotate(-10deg) scaleX(.58);opacity:0}14%{opacity:.55}50%{transform:translateY(0) rotate(0deg) scaleX(1.06);opacity:.72}86%{opacity:.40}100%{transform:translateY(-168%) rotate(10deg) scaleX(.58);opacity:0}}
@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: full width, with the reading matter on a centred measure */
.sec{padding:56px 0;border-top:1px solid var(--line)}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--slab);color:var(--on-dark);border-top:0}
.sec--dark h2,.sec--dark h3,.sec--dark h4{color:#fff}
.sec--dark p,.sec--dark li{color:#efe2d4}
.sec--dark .eyebrow{color:#7f9dff}
.sec--dark .eyebrow::before{background:#7f9dff}
.sec--dark a{color:#b9cbff}
.sec--center .sec__head{text-align:center;margin-inline:auto}
.sec__head{max-width:var(--measure);margin:0 auto 30px}
.sec__head h2{margin-bottom:10px}
.sec__head p{color:var(--ink-2);margin:0}
.sec--dark .sec__head p{color:#e0d2c4}

/* the centred measure: running text is held narrow inside a full-width band,
   while the grids, tables and price rows keep the whole container. */
.sec>.wrap>p,.sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>h3,.sec>.wrap>h4,
.sec>.wrap>.callout,.sec>.wrap>.alert,.sec>.wrap>.keypoints,.sec>.wrap>.pullquote{
  max-width:var(--measure);margin-inline:auto}
.sec>.wrap>.tablewrap,.sec>.wrap>.versus{max-width:var(--measure-wide);margin-inline:auto}

.ticks{list-style:none;margin:0 0 1.05em;padding:0}
.ticks li{position:relative;padding-left:26px;margin-bottom:9px}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:2px;background:var(--blue)}
.sec--dark .ticks li::before{background:#7f9dff}

/* ---- tables */
.tablewrap{overflow-x:auto;border:1px solid var(--line);margin:0 0 1.05em}
table{width:100%;border-collapse:collapse;background:var(--panel);min-width:520px}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:1.0556rem;vertical-align:top}
th{font-family:var(--text);font-weight:700;color:var(--navy);background:var(--tint);
   font-size:0.9444rem;letter-spacing:.09em;text-transform:uppercase}
tbody tr:nth-child(even){background:var(--paper)}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--navy)}
.tnote{font-size:0.9444rem;color:var(--ink-3);max-width:var(--measure-wide);margin-inline:auto}
.dtable{min-width:440px}

/* ---- steps */
.steps{display:grid;gap:0;border:1px solid var(--line);background:var(--panel);
       max-width:var(--measure-wide);margin:0 auto 1.05em}
.step{position:relative;padding:20px 22px 20px 64px;counter-increment:st}
.step+.step{border-top:1px solid var(--line)}
.step::before{content:counter(st);position:absolute;left:22px;top:19px;
  font-family:var(--display);font-size:1.5rem;color:var(--blue-d);line-height:1}
.steps{counter-reset:st}
.step h3{margin-bottom:6px}
.step p:last-child{margin-bottom:0}

/* ---- cards: hairline border, square, NO fill, NO shadow */
.grid{display:grid;gap:18px}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{border:1px solid var(--line);background:none;padding:22px 22px 20px;position:relative}
.card h3{margin-bottom:8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{border-color:#4a3f33;background:none}
.sec--tint .card{background:var(--panel)}

.callout{border:1px solid var(--line-2);background:var(--panel);padding:18px 20px;margin:0 0 1.05em}
.callout b:first-child{display:block;font-family:var(--display);font-size:1.18rem;
  font-weight:400;color:var(--navy);margin-bottom:6px}
.callout p:last-child{margin-bottom:0}
.alert{border:1px solid var(--warn);border-left-width:4px;background:var(--panel);padding:18px 20px;margin:0 0 1.05em}
.alert b:first-child{display:block;font-family:var(--display);font-size:1.18rem;
  font-weight:400;color:var(--warn);margin-bottom:6px}
.alert p:last-child{margin-bottom:0}
.pullquote{border:0;border-left:3px solid var(--blue);margin:0 0 1.05em;padding:4px 0 4px 22px;
  font-family:var(--display);font-size:1.35rem;line-height:1.36;color:var(--navy)}
.pullquote cite{display:block;font-family:var(--text);font-size:0.9444rem;
  font-style:normal;color:var(--ink-3);margin-top:8px}
.keypoints{border:1px solid var(--line);border-top:3px solid var(--blue);padding:18px 20px;margin:0 0 1.05em}
.keypoints>b{display:block;font-family:var(--display);font-size:1.18rem;font-weight:400;
  color:var(--navy);margin-bottom:8px}
.keypoints ul{margin:0;padding-left:20px}

/* ---- split */
.split{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
       gap:28px;align-items:center;max-width:var(--measure-wide);margin:0 auto 1.05em}
/* A flip moves the image to the SECOND column, so the ratio has to move with
   it or the body inherits the narrow .86fr side. Measured at 1440 on
   who-its-for.html: the body column came out at 400px and the two cards inside
   it at 191px each. */
.split--flip{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr)}
.split--flip .split__img{order:2}
.split__img img{width:100%;border:1px solid var(--line)}
.split__body p:last-child{margin-bottom:0}
/* A nested card grid takes its column count from the stylesheet, not from the
   width of the column it is sitting in, so a g2 inside a split body divides
   ~530px between two cards. Collapse every nested grid to one column: the
   split is already the two-column arrangement (pitfall: nested_grids.py). */
.split__body .grid.g2,.split__body .grid.g3,.split__body .grid.g4{grid-template-columns:1fr}

/* ---- numbers */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
       border:1px solid #4a3f33;max-width:var(--measure-wide);margin-inline:auto}
.stats div{padding:20px 18px}
.stats div+div{border-left:1px solid #4a3f33}
.stats div b{display:block;font-family:var(--display);font-size:2.1rem;font-weight:400;color:#fff;line-height:1.1}
.stats div span{display:block;font-size:0.9444rem;color:#e0d2c4;line-height:1.35}

/* ---- label versus research */
.versus{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr) minmax(0,1.6fr);
        border:1px solid var(--line);border-bottom:0;margin:0 0 1.05em;background:var(--panel)}
.versus>div{padding:12px 14px;border-bottom:1px solid var(--line);font-size:1.0556rem}
.versus>div:nth-child(3n+1){border-right:1px solid var(--line)}
.versus>div:nth-child(3n+2){border-right:1px solid var(--line)}
.versus__h{font-weight:700;color:var(--navy);background:var(--tint);
  font-size:0.9444rem;letter-spacing:.09em;text-transform:uppercase}

/* ---- ingredient cards */
.inglist{display:grid;gap:0;border:1px solid var(--line);background:var(--panel);
         max-width:var(--measure-wide);margin:0 auto 1.05em}
.inglist>*+*{border-top:1px solid var(--line)}
.ingcard{padding:22px 24px}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:10px;
              padding-bottom:10px;border-bottom:1px solid var(--line)}
.ingcard__top h3{margin:0}
.ing__latin{font-style:italic;color:var(--ink-3);font-size:1rem}
.ing__dose{margin-left:auto;font-family:var(--display);font-size:1.3rem;color:var(--blue-d)}
.ingcard p:last-child{margin-bottom:0}

/* ---- the add-to-cart panel */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0 0 18px}
.card--pack{border:1px solid var(--line);background:var(--panel);position:relative;padding:0}
.card--pack.featured{border:2px solid var(--blue)}
.pack__head{padding:14px 18px;border-bottom:1px solid var(--line);background:var(--tint)}
.card--pack.featured .pack__head{background:var(--navy)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{display:block;font-family:var(--display);font-size:1.35rem;font-weight:400;color:var(--navy)}
.pack__head span{display:block;font-size:0.9444rem;color:var(--ink-3)}
.pack__flag{position:absolute;top:-1px;right:-1px;background:var(--blue);color:#fff;
  font-size:0.8889rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px}
.pack__body{padding:18px}
.card--pack img{width:100%;height:auto;margin:0 auto 12px}
.pack__per{font-family:var(--display);font-size:3rem;line-height:1;color:var(--navy);margin:0}
.pack__per sup{font-size:.45em;vertical-align:super}
.pack__unit{display:block;font-size:0.9444rem;color:var(--ink-3);margin-bottom:8px}
.pack__tot{margin:0 0 12px}
.pack__tot b{color:var(--navy)}
.pack__was{color:var(--ink-3);text-decoration:line-through;margin-left:8px}
.pack__perks{list-style:none;margin:0 0 16px;padding:0}
.pack__perks li{position:relative;padding-left:22px;font-size:1rem;margin-bottom:6px}
.pack__perks li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--blue)}
.card--pack>.pack__body>.btn{margin-bottom:10px}
.pack__marks{font-size:0.8889rem;color:var(--ink-3);margin:0}
.buy__note{font-size:0.9444rem;color:var(--ink-3);max-width:var(--measure-wide);margin-inline:auto}

/* ---- figures that carry content */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0 0 1.05em}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:var(--measure-wide);margin-inline:auto}
.shots figure{margin:0;border:1px solid var(--line);background:var(--panel)}
.shots img{width:100%;height:auto;border-bottom:1px solid var(--line)}
.shots figcaption{padding:14px 16px}
.shots figcaption b{display:block;font-family:var(--display);font-size:1.18rem;font-weight:400;
  color:var(--navy);margin-bottom:5px}
.shots figcaption span{display:block;font-size:1rem;color:var(--ink-2);line-height:1.5}
figure.portrait img{width:100%;max-width:var(--figw,340px);margin-inline:auto}

.badgewall{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;
           border:1px solid var(--line);background:var(--panel);
           max-width:var(--measure-wide);margin:0 auto 1.05em}
.badgewall figure{margin:0;padding:18px 16px;text-align:center;border-right:1px solid var(--line)}
.badgewall figure:last-child{border-right:0}
.badgewall img{width:74px;height:74px;margin:0 auto 10px}
.badgewall b{display:block;font-family:var(--display);font-size:1.05rem;font-weight:400;color:var(--navy);margin-bottom:4px}
.badgewall span{display:block;font-size:0.9444rem;color:var(--ink-3);line-height:1.4}

/* ---- meters */
.meter{max-width:var(--measure);margin:0 auto 1.05em}
.meter__row{display:grid;grid-template-columns:78px 1fr 52px;align-items:center;gap:12px;margin-bottom:9px;font-size:1rem}
.meter__bar{display:block;height:12px;background:var(--tint);border:1px solid var(--line)}
.meter__bar i{display:block;height:100%;background:var(--blue)}
.stars{color:var(--blue);letter-spacing:2px}
.stars i{color:var(--line-2);font-style:normal}

/* ---- FAQ */
.faq{border:1px solid var(--line);background:var(--panel);max-width:var(--measure-wide);margin:0 auto}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{list-style:none;cursor:pointer;padding:16px 46px 16px 20px;position:relative;
  font-family:var(--display);font-size:1.18rem;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:20px;top:50%;width:12px;height:12px;
  border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:translateY(-70%) rotate(45deg)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq__body{padding:0 20px 18px}
.faq__body p:last-child,.faq__body ul:last-child{margin-bottom:0}

/* ---- sources and byline */
.refs{max-width:var(--measure-wide);margin:0 auto 1.05em}
.refs ol{padding-left:22px;margin:0}
.refs li{font-size:1rem;color:var(--ink-2);margin-bottom:10px;line-height:1.5}
.refs li a{word-break:break-word;font-size:.94em}
.byline{display:flex;gap:16px;border:1px solid var(--line);border-top:3px solid var(--blue);
        background:var(--panel);padding:20px 22px;max-width:var(--measure-wide);margin:0 auto}
.byline__mark{flex:0 0 auto;width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  background:var(--navy);color:#fff;font-family:var(--display);font-size:1.1rem}
.byline b{display:block;color:var(--navy);margin-bottom:6px}
.byline p{margin:0;font-size:1rem;color:var(--ink-2)}

/* ---- closing CTA */
.final{border:1px solid var(--line);background:var(--panel);padding:30px}
.final--media{display:grid;grid-template-columns:210px minmax(0,1fr);gap:28px;align-items:center}
.final__img img{width:100%;border:1px solid var(--line)}
.final h2{margin-bottom:10px}
.final__price{font-weight:700;color:var(--navy);margin-bottom:16px}
.final__sm{font-size:0.9444rem;color:var(--ink-3);margin:12px 0 0}
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--line);background:var(--panel)}
.rel a{display:block;padding:18px 20px;text-decoration:none;border-right:1px solid var(--line);text-align:left}
.rel a:last-child{border-right:0}
.rel a:hover{background:var(--tint)}
.rel b{display:block;font-family:var(--display);font-size:1.18rem;font-weight:400;color:var(--navy);margin-bottom:5px}
.rel span{display:block;font-size:1rem;color:var(--ink-2);line-height:1.45}

/* ---- forms */
.form{max-width:var(--measure);margin-inline:auto}
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;color:var(--navy);margin-bottom:6px;font-size:1rem}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1px solid var(--line-2);
  background:var(--panel);font-family:var(--text);font-size:1.0556rem;color:var(--ink);border-radius:0}
.field textarea{min-height:140px;resize:vertical}
.field small{display:block;font-size:0.9444rem;color:var(--ink-3);margin-top:5px}

/* ---- blog */
.article{max-width:var(--measure);margin-inline:auto}
.article h2{margin-top:1.5em}
.article h3{margin-top:1.2em}
.postmeta{font-size:1rem;color:var(--ink-3);margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.toc{border:1px solid var(--line);border-left:3px solid var(--blue);background:var(--panel);padding:18px 20px;margin:0 0 26px}
.toc b{display:block;font-family:var(--display);font-size:1.18rem;font-weight:400;color:var(--navy);margin-bottom:8px}
.toc ol{margin:0;padding-left:20px}
.toc li{margin-bottom:5px;font-size:1rem}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.posts article{border:1px solid var(--line);background:var(--panel);padding:22px}
.posts h3{margin-bottom:8px}
.posts p{margin-bottom:0;font-size:1rem;color:var(--ink-2)}
.article .final--media{grid-template-columns:150px minmax(0,1fr);gap:20px;padding:22px}
.article .final h2{margin-top:0;font-size:1.45rem}

/* ---- the closing guarantee band */
.fcta{background:var(--slab);color:var(--on-dark);padding:48px 0}
.fcta h2,.fcta__h{color:#fff}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:34px;align-items:center}
.fcta__eye{display:inline-block;font-size:0.9444rem;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:#7f9dff;margin-bottom:10px}
.fcta__h{font-family:var(--display);font-size:clamp(1.55rem,1.2rem + 1.2vw,2.15rem);
  line-height:1.16;margin:0 0 12px}
.fcta p{color:#efe2d4}
.fcta__sm{font-size:0.9444rem;color:#cbbcae;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:#b9cbff}
.fcta__img img{width:100%;border:1px solid #4a3f33}

/* ---- footer: the contact card overlaps the index block beneath it */
footer{background:var(--paper)}
.fctop{background:var(--tint);padding:38px 0 0}
.fcard{position:relative;z-index:2;background:var(--panel);border:1px solid var(--line-2);
       border-top:4px solid var(--blue);padding:26px 28px;margin-bottom:-64px;
       display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 28px}
.fbrand{font-family:var(--display);font-size:1.75rem;color:var(--navy);line-height:1.05}
.fbrand span{color:var(--blue)}
.frole{font-size:1rem;color:var(--ink-2);margin:6px 0 0}
.fcard p{margin:0 0 4px;font-size:1rem;line-height:1.55}
.fcard b{display:block;color:var(--navy);font-size:1rem}
.findex{background:var(--paper);border-top:1px solid var(--line);padding:100px 0 34px}
.fgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 28px}
.fh{font-family:var(--text);font-size:0.9444rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--navy);margin:0 0 10px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.fgrid ul{list-style:none;margin:0 0 18px;padding:0}
.fgrid li{margin-bottom:2px}
footer li a{display:block;padding:6px 0;font-size:1rem;color:var(--ink-2);text-decoration:none}
footer li a:hover{color:var(--blue-d)}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;
  border-top:1px solid var(--line);padding-top:20px;margin-top:14px}
.fseals img{width:46px;height:46px}
.fseals span{font-size:1rem;color:var(--ink-3);flex:1 1 240px}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding-top:16px;margin-top:14px;border-top:1px solid var(--line)}
.fpay img{width:230px;height:41px}
.fpay span{font-size:1rem;color:var(--ink-3);flex:1 1 240px}
.disc{background:var(--slab);color:#e6d9cb;padding:26px 0}
.disc p,.disc li{font-size:1rem;color:#d6c8ba;line-height:1.55}
.disc b{color:#fff}
.disc__list{list-style:none;margin:14px 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 28px}
.disc__list li{position:relative;padding-left:18px;margin-bottom:6px}
.disc__list li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:2px;background:#7f9dff}
.copy{font-size:1rem;color:#bdae9f;margin:10px 0 0}

/* ---- the sticky buy bar. Present at EVERY width: house rule 8 is about the
   click, not about reading space, so the bar renders on desktop too. */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:block;
  background:var(--navy);color:#fff;border-top:2px solid var(--blue);
  transform:translateY(105%);transition:transform .26s ease}
.buybar.show{transform:translateY(0)}
.buybar__in{max-width:var(--wrap);margin-inline:auto;padding:10px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.buybar__t b{display:block;font-size:1.0556rem;color:#fff}
.buybar__t span{display:block;font-size:0.9444rem;color:#c6d5ff}
.buybar .btn{min-height:46px;padding:11px 24px;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}
}

/* ---- breakpoints */
@media (max-width:1100px){
  .rel{grid-template-columns:1fr}
  .rel a{border-right:0;border-bottom:1px solid var(--line)}
  .rel a:last-child{border-bottom:0}
}
@media (max-width:980px){
  .fcta__box{grid-template-columns:1fr;gap:22px}
  .fcta__img{max-width:250px}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fcard{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prices{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .card--pack.featured{order:-1}
  .shots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .badgewall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .badgewall figure:nth-child(3n){border-right:0}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats div:nth-child(2n+1){border-left:0}
  .split,.split--flip .split__img{grid-template-columns:1fr;order:0}
  .grid.g3,.grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .versus{grid-template-columns:1fr}
  .versus>div:nth-child(3n+1),.versus>div:nth-child(3n+2){border-right:0}
  .versus__h{display:none}
}
@media (max-width:760px){
  .sec{padding:40px 0}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .shots{grid-template-columns:1fr}
  .posts{grid-template-columns:1fr}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .badgewall figure:nth-child(3n){border-right:1px solid var(--line)}
  .badgewall figure:nth-child(2n){border-right:0}
  .stats{grid-template-columns:1fr}
  .stats div+div{border-left:0;border-top:1px solid #4a3f33}
  .final--media,.article .final--media{grid-template-columns:1fr;gap:18px}
  .final__img{max-width:190px}
  .fgrid,.fcard{grid-template-columns:1fr}
  .fcard{margin-bottom:-48px}
  .findex{padding-top:78px}
  .disc__list{grid-template-columns:1fr}
  .buybar__in{padding:9px 16px;gap:12px}
  .buybar__t span{display:none}
  .figures div+div{border-left:0;border-top:1px solid var(--line);padding-left:0}
  .figures div{flex:1 1 100%}
}
@media (max-width:440px){
  .buybar__t b{font-size:1rem}
  .buybar .btn{padding:11px 16px}
  .meter__row{grid-template-columns:66px 1fr 44px;gap:8px}
}

/* hero__card float, the one piece of motion on the card itself */
@media (prefers-reduced-motion:no-preference){
  .hero__card{animation:vfFloat 9s ease-in-out infinite}
}
@keyframes vfFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* the sticky product column, applied by hero_sticky.py and kept here so a
   rebuild produces the same geometry */
@media (min-width: 981px){
  .hero__grid{align-items:start}
  .hero__media{position:sticky;top:calc(var(--navh, 118px) + 14px);align-self:start;
    min-height:calc(100svh - var(--navh, 118px) - 28px);
    display:flex;flex-direction:column;align-items:center;justify-content:center}
}
@media (prefers-reduced-motion: reduce){
  .hero__media{position:relative;top:0;min-height:0}
}


/* ---- hero: 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 ==== */

/* brand mark: underline construction */
.brand{position:relative}.brand::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:3px;border-radius:2px;background:#2460fc}

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 0 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 (25,20,16), 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(25,20,16,.06), 0 6px 18px rgba(25,20,16,.07);
  --lift:0 2px 6px rgba(25,20,16,.09), 0 16px 34px rgba(25,20,16,.14);
}

.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.final,
.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. */
.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.final,
.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 ==== */

/* ==== 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 ==== */