/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Lustria Fallback";src:local("Georgia");font-weight:400;size-adjust:106.07%;ascent-override:90.03%;descent-override:30.83%;line-gap-override:0.00%}
@font-face{font-family:"Scada Fallback";src:local("Arial");font-weight:400;size-adjust:99.62%;ascent-override:95.87%;descent-override:29.01%;line-gap-override:0.00%}
@font-face{font-family:"Scada Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:96.42%;ascent-override:99.04%;descent-override:29.97%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* memohoneye.com — MemoHoney, the American MemoHoney authorized shop.

   Design slot row 269 (batch11_assignments.py): Lustria / Scada, a hero split
   60/40 with the product overlapping the section beneath it, lifted white
   cards on a tinted ground at 12px radius, a HARD OFFSET shadow 4px down and
   right with no blur anywhere, and a dusty-plum band sitting over warm bone.

   The three things that make this site itself:

   1. THE TYPE IS A SINGLE-WEIGHT SERIF. Lustria ships at 400 and nothing else,
      so every heading here is set at regular weight and earns its authority
      from size, colour and measure rather than from being heavy. Scada carries
      the running text and the only bold on the page. No site on this estate
      pairs a one-weight serif with a squarish humanist sans.

   2. NOTHING IS BLURRED. The depth language is one hard offset — 4px down,
      4px right, zero blur — taken from the way the label's honeycomb sits as a
      flat emboss rather than a glow. Every raised object on the site casts the
      same solid edge, and the buttons lose it when pressed.

   3. THE PLUM IS A SLAB, NOT A WASH. The hero is a dusty-plum block; the rest
      of the page is warm bone. The bottle stands in the plum and crosses the
      boundary into the bone beneath it, which is the whole composition.

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

/* ---- tokens */
:root{
  --ink:#2b211b;            /* body text, a warm near-black */
  --ink-2:#5b4d42;          /* secondary */
  --ink-3:#7d6f62;          /* captions, meta */
  --plum:#5e3f57;           /* the slab */
  --plum-d:#402a3b;
  --plum-2:#7a5670;
  --dark:#3a2435;           /* the deepest plum, for the hero field */
  --amber:#c08a1e;          /* the label's band, for fills and rules */
  --amber-d:#8a6210;        /* the same hue, dark enough to set text in */
  --amber-l:#e7c173;        /* the same hue on the plum */
  --wash:#f4e7cd;
  --paper:#f7f2e9;          /* the page: warm bone */
  --panel:#ffffff;
  --tint:#ece2d2;
  --line:#ddd0bc;
  --line-2:#bfae94;
  --good:#2f6b46;
  --warn:#8a5a10;
  --wrap:1180px;
  --measure:740px;
  --measure-wide:960px;
  --radius:12px;
  --radius-lg:12px;
  --shadow:4px 4px 0 #bfae94;      /* hard, 4px down and right, no blur */
  --shadow-lg:6px 6px 0 #5e3f57;
  --navh:112px;
  --display:"Lustria","Lustria Fallback",Georgia,"Times New Roman",serif;
  --text:"Scada","Scada 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.76;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--plum);text-underline-offset:3px}
a:hover{color:var(--amber-d)}
h1,h2,h3,h4{font-family:var(--display);color:var(--plum-d);font-weight:400;line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(1.95rem,1.26rem + 2.1vw,2.95rem);letter-spacing:-.01em}
h2{font-size:clamp(1.48rem,1.16rem + 1.15vw,2.1rem)}
h3{font-size:1.2rem}
h4{font-size:1.04rem}
p,li{font-size:1.0625rem}
p{margin:0 0 1.05em}
b,strong{font-weight:700}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.skip{position:absolute;left:-9999px;top:0;background:var(--plum-d);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--amber-d);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it. A hexagon tick, from
   the honeycomb the bottle is embossed with. */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--text);font-size:0.8438rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--amber-d);
  margin:0 0 10px;
}
.eyebrow::before{
  content:"";width:13px;height:15px;background:var(--amber);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}

/* ---- buttons: square-shouldered, and the hard offset is the whole effect */
.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:.01em;
  border:0;border-radius:var(--radius);cursor:pointer;text-decoration:none;
  background:var(--plum);color:#fff;box-shadow:var(--shadow);
  transition:transform .14s ease,box-shadow .14s ease,background .18s ease;
}
.btn:hover{background:var(--plum-d);color:#fff}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #bfae94}
.btn--amber{background:var(--amber-d)}
.btn--amber:hover{background:#6f4f0c;color:#fff}
.btn--lg{min-height:62px;padding:17px 38px;font-size:1.06rem}
.btn--ghost{background:none;color:var(--plum-d);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--wash);color:var(--plum-d)}
.btn--wide{width:100%}

/* ---- header: identity on top, a tinted strip beneath it carrying the lot,
   the dose and the menu. The strip is INSIDE the header, so the whole
   masthead travels together when the chrome moves with the reader. */
.nav{position:sticky;top:0;z-index:100;background:var(--panel);border-bottom:1px solid var(--line)}
/* padding-BLOCK, never the shorthand: this element also carries .wrap, and
   `padding:14px 0` would set padding-inline to 0 and wipe the page gutter.
   Invisible above the container max-width, and no overflow test can see it
   (pitfall 46). */
.nav__top{display:flex;align-items:center;gap:20px;padding-block:14px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--plum-d)}
.brand__glyph{width:38px;height:38px;flex:0 0 auto}
/* Size the mark by ELEMENT as well as by class. brand_marks.py rewrites the
   <svg> inside .brand and does not carry class="brand__glyph" onto the
   replacement, so a rule keyed only to that class stops applying the moment
   the tool runs and the glyph renders at its intrinsic size — a masthead two
   different heights on one site (pitfall 16). */
.brand>svg{width:38px;height:38px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.1}
.bw b{font-family:var(--display);font-size:1.42rem;font-weight:400;letter-spacing:-.01em}
.bw b em{font-style:normal;color:var(--amber-d)}
.bw small{font-family:var(--text);font-size:0.9062rem;font-weight:400;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(--display);font-size:1.16rem;font-weight:400;color:var(--plum-d)}
.nav__price span{font-size:.78125rem;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(--plum-d);margin:0 0 5px}
.burger span:last-child{margin:0}

/* the tinted strip: lot and dose on the left, the menu on the right */
.nav__strip{background:var(--tint);border-top:1px solid var(--line)}
/* Two explicit rows. The lot-and-dose line and the nine-item menu do not
   fit together on a 1,136px measure, so a single flex row wrapped the menu
   onto its own line and left it right-aligned under a wide empty gap. */
.nav__strip>.wrap{display:block}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;padding-block:9px;font-size:.8438rem;color:var(--ink-2);border-bottom:1px solid #d9cbb4}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.util__item+.util__item::before{content:"";width:9px;height:10px;background:var(--line-2);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);flex:0 0 auto;margin-right:9px}
.util__item b{color:var(--plum-d);font-weight:700}
.util__item a{color:inherit;text-decoration:none}
.util__item a:hover{text-decoration:underline}
.menu{
  display:flex;flex-wrap:wrap;gap:0 26px;list-style:none;margin:0;padding:0;
  align-items:center;min-height:44px;
}
.menu a{
  display:inline-block;padding:11px 0;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(--plum-d)}
.menu a[aria-current="page"]{color:var(--plum-d);border-bottom-color:var(--amber)}
.menu__more{display:none}

/* ---- hero: copy 60, product 40, and the bottle crosses the slab's edge */
.hero{position:relative;background:var(--dark);color:#f0e6ec;padding:52px 0 0;overflow-x:clip}
/* The foot of the slab is the page's own bone. The product column sits
   above it, so the bottle stands in the plum and in the bone at once and
   crosses the boundary as the hero scrolls past. Lifting the boundary is
   what makes that overlap possible while the product stays in the FIRST
   screen: this hero runs ~1,095px at 1440x900, so a bottom-aligned bottle
   would not appear until y=965 and the first screenful would be empty. */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;
  background:var(--paper);z-index:0;pointer-events:none}
.hero h1{color:#fff;margin:0 0 18px}
.hero .eyebrow{color:var(--amber-l)}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:46px;align-items:start}
.hero__copy{display:flex;flex-direction:column;min-width:0;padding-bottom:56px}
.answer{
  background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-left:5px solid var(--amber);border-radius:var(--radius);
  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:#e0d2da;margin:0 0 20px;max-width:58ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 18px}
.hero__sub{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 18px;font-size:0.9688rem;color:#e0d2da}
.hero__sub span{display:inline-flex;align-items:center;gap:7px}
.hero__sub span::before{content:"\2713";color:var(--amber-l);font-weight:700}
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0}
/* Solid fill, not an outline. These pills are the last light text in the
   copy column before the bone band at the foot of the slab, and a
   transparent pill whose row wrapped one line further would have put
   light text on a light ground. Filled, they read on either. */
.factpills li{
  font-size:0.9062rem;color:#eadfe6;background:#472f41;border:1px solid #6a4b62;
  padding:7px 14px;border-radius:999px;
}
.factpills li b{color:var(--amber-l);font-weight:700}
.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0}
.figures div{background:#472f41;border:1px solid #6a4b62;padding:13px 15px;border-radius:var(--radius)}
.figures b{display:block;font-family:var(--display);font-size:1.5rem;font-weight:400;color:var(--amber-l);line-height:1.15}
.figures span{display:block;font-size:0.9062rem;color:#d6c6d0;margin-top:3px}

/* the product column: bottom-aligned, then pulled DOWN past the slab's edge so
   the bottle stands in both grounds at once. The overlap is the composition,
   so it is the same number in every motion state. */
.hero__media{position:relative;z-index:3;align-self:start;margin-bottom:-96px}
.hero__card{position:relative;z-index:2;text-align:center;padding:6px}
.hero__card img{width:100%;max-width:400px;height:auto;margin-inline:auto}
/* The sticky product column travels down onto the bone band at the foot
   of the slab, so this caption has to read on BOTH grounds. A light
   colour alone measured about 1.2:1 against the bone. Its own dark pill
   keeps it at 9:1 wherever the column is. */
.hero__cap{margin:12px auto 0;font-size:.8125rem;color:#eadfe6;text-align:center;
  background:#3a2435;padding:5px 14px;border-radius:999px;display:inline-block}
.trust__row{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none;font-size:0.9062rem;color:#e0d2da}
.trust__row li{display:inline-flex;align-items:center;gap:8px}
.trust__row li::before{content:"\2713";color:var(--amber-l);font-weight:700}
/* `.btn--ghost` is plum text inside a --line-2 keyline, which is right on
   the bone page and close to invisible on the plum slab. Measured at 1440
   against --dark #3a2435: plum #402a3b reads 1.24:1, the light amber
   #e7c173 reads 8.26:1. Desktop and phone both take the light version,
   because the hero is dark at every width. */
.hero .btn--ghost{color:var(--amber-l);box-shadow:inset 0 0 0 2px #8a6f84}
.hero .btn--ghost:hover{background:#4b3145;color:#fff;box-shadow:inset 0 0 0 2px var(--amber-l)}

/* the first section after the hero leaves room for the overlapping bottle */
.sec--underhero{padding-top:104px}

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

/* --- hero responsive rules, copied into the critical block
   A phone painted the desktop hero from the inline block and then
   jumped when the async sheet arrived -- 692px on one site, CLS 0.95.
   These are COPIES: the originals stay below, so the cascade is
   unchanged and the first paint is already correct. */
@media (max-width:980px){
  .hero{padding:40px 0 0}
  .hero__grid{grid-template-columns:1fr;gap:22px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero::after{display:none}
  .hero__media{order:3;margin:4px 0 8px;align-self:auto;min-height:0}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
}
/* The copy of the width query below was taken BEFORE the sticky column was
   re-cut, and critical_hero.py appends its copies once rather than
   refreshing them. Left stale, a desktop first paint would bottom-align
   the product from the inline block and then centre it when the async
   sheet landed -- a shift on the widest screens, which is the half of
   pitfall 47 nobody looks at. Kept identical to the original below. */
@media (min-width: 981px){
  .hero__grid{align-items: start;}
  .hero__media{position: sticky; top: calc(var(--navh, 112px) + 14px); align-self: start; min-height: calc(100vh - var(--navh, 112px) - 28px); min-height: calc(100svh - var(--navh, 112px) - 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 -- heat-bloom ---------------------------------------- */
.hero{position:relative;overflow-x:clip;overflow-y:visible}
:where(.hero__media){position:relative}
.hero__card{position:relative;z-index:2}
.hero__card img{position:relative;z-index:3}
.hero{background:radial-gradient(118% 92% at 72% 6%,#523631 0%,#3a2435 46%,#3a2435 100%)}.hero__media::before{content:'';position:absolute;left:50%;top:50%;width:146%;aspect-ratio:1.42;translate:-50% -50%;border-radius:50%;z-index:0;pointer-events:none;background:radial-gradient(closest-side,rgba(192,138,30,0.58),rgba(192,138,30,0.30) 44%,transparent 76%);filter:blur(20px);animation:mheBloom 12s cubic-bezier(.26,.74,.32,1) infinite}.hero__media::after{content:'';position:absolute;left:50%;top:50%;width:128%;aspect-ratio:1.12;translate:-50% -50%;z-index:0;pointer-events:none;background:rgba(192,138,30,0.52);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%,50% 0,50% 2.6%,4.5% 26.3%,4.5% 73.7%,50% 97.4%,95.5% 73.7%,95.5% 26.3%,50% 2.6%);animation:mheCell 17s ease-out infinite backwards;animation-delay:2.4s}@keyframes mheBloom{0%,100%{opacity:0;transform:scale(.52)}24%{opacity:.80;transform:scale(.92)}60%{opacity:.42;transform:scale(1.10)}}@keyframes mheCell{0%{opacity:0;transform:scale(.60)}28%{opacity:.58;transform:scale(.86)}100%{opacity:0;transform:scale(1.16)}}
@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 */
.sec{padding:62px 0;position:relative}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--plum-d);color:#e6dae2}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#e0d2da}
.sec--dark .eyebrow{color:var(--amber-l)}
.sec--dark .eyebrow::before{background:var(--amber-l)}
.sec--dark a{color:var(--amber-l)}
.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:#e0d2da}

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

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

/* ---- tables */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow)}
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}
th{font-family:var(--text);font-weight:700;color:#fff;background:var(--plum);font-size:.9375rem}
tbody tr:nth-child(even){background:#fbf8f2}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--plum-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}
.step{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px 20px 70px}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:20px;top:19px;width:36px;height:40px;
  display:grid;place-items:center;
  background:var(--amber);color:#2b211b;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  font-family:var(--display);font-weight:400;font-size:1.05rem;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: lifted white on the tinted ground, 12px, one hard offset */
.grid{display:grid;gap:20px}
.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-radius:var(--radius);box-shadow:var(--shadow);padding:24px 22px 22px}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#4c3244;border-color:#6a4b62;box-shadow:4px 4px 0 #2c1b28}
.sec--dark .card h3{color:#fff}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:1px solid #e3cfa4;border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--plum-d)}
.callout p:last-child{margin:0}
.alert{background:#fdf3e6;border:1px solid #eedcbc;border-left:5px solid var(--warn);border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em}
.alert b:first-child{display:block;margin-bottom:6px;color:var(--warn)}
.alert p:last-child{margin:0}
.pullquote{font-family:var(--display);font-size:1.3rem;line-height:1.52;color:var(--plum-d);border-left:5px solid var(--amber);padding:4px 0 4px 22px;margin:0 0 1.2em}
.pullquote cite{display:block;font-family:var(--text);font-size:.9375rem;font-style:normal;color:var(--ink-3);margin-top:8px}
.keypoints{background:var(--panel);border:1px solid var(--line);border-top:5px solid var(--amber);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px;margin:0 0 1.2em}
.keypoints>b{display:block;margin-bottom:8px;color:var(--plum-d)}
.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}
/* A grid item's default min-width is auto, which floors at MIN-CONTENT. A
   .tablewrap holding a 520px-min table therefore keeps its column 520px wide
   however narrow the grid is. min-width:0 is the fix, and it belongs on the
   items at every width rather than only in the media query. */
.split__img,.split__body{min-width:0}
.split__img img{width:100%;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow)}
.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 div b{display:block;font-family:var(--display);font-size:2.2rem;font-weight:400;color:var(--amber-l);line-height:1.15}
.stats div span{display:block;font-size:.9375rem;color:#d6c6d0;margin-top:4px}

/* ---- label versus research */
.versus{display:grid;grid-template-columns:1.1fr 1fr 1fr;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);box-shadow:var(--shadow);margin:0 0 1.2em}
.versus>div{padding:13px 16px;border-bottom:1px solid var(--line);font-size:.98rem}
.versus>div:nth-child(3n+1){font-weight:700;background:#faf6ef}
.versus__h{background:var(--plum)!important;color:#fff;font-family:var(--text);font-weight:700;font-size:.92rem}

/* ---- ingredient cards */
.inglist{display:grid;gap:18px}
/* Same family as the .split fix above: .ingcard is a grid ITEM and its default
   min-width is auto, so the card cannot shrink below its min-content and the
   nowrap dose chip sets the floor. */
.inglist>*{min-width:0}
.ingcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 24px}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 10px}
.ingcard__top h3{margin:0}
.ing__latin{font-size:.9375rem;font-style:italic;color:var(--ink-3)}
.ing__dose{margin-left:auto;font-size:.9375rem;font-weight:700;color:#2b211b;background:var(--wash);border:1px solid #e3cfa4;padding:4px 12px;border-radius:999px;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:22px;align-items:stretch;margin:0 0 20px}
.card--pack{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;position:relative}
.card--pack.featured{border-color:var(--plum);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}
.card--pack.featured .pack__head{background:var(--plum);border-bottom-color:var(--plum)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--display);font-size:1.14rem;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(--amber);color:#2b211b;font-family:var(--text);font-size:0.8438rem;font-weight:700;letter-spacing:.07em;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}
.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.35rem;font-weight:400;color:var(--plum-d);line-height:1;text-align:center}
.pack__per sup{font-size:1rem;top:-.7em}
.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:700}
.pack__was{color:var(--ink-3);text-decoration:line-through}
.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:700}
.card--pack>.pack__body>.btn{margin-top:auto}
.pack__marks{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;margin:12px 0 0;font-size:.8125rem;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:22px;margin:0 0 1.2em}
.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);box-shadow:var(--shadow);overflow:hidden}
.shots img{width:100%}
.shots figcaption{padding:16px 18px}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--plum-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 figure{margin:0;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 16px}
.badgewall img{width:74px;height:74px;object-fit:contain;margin:0 auto 10px}
.badgewall b{display:block;font-size:.98rem;margin-bottom:4px;color:var(--plum-d)}
.badgewall span{font-size:.875rem;color:var(--ink-2)}

/* ---- star distribution */
.meter{margin:0 0 1.2em}
.meter__row{display:grid;grid-template-columns:76px 1fr 52px;gap:12px;align-items:center;margin:0 0 8px;font-size:.9375rem}
.meter__bar{height:12px;background:var(--tint);border:1px solid var(--line);overflow:hidden}
.meter__bar i{display:block;height:100%;background:var(--amber)}
.stars{color:var(--amber-d);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);box-shadow:var(--shadow);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-size:1.08rem;color:var(--plum-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.34rem;color:var(--amber-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` also lowers the element's MIN-CONTENT,
   which is what stops an 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:5px solid var(--amber);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 24px;margin:0 0 1.2em}
.byline__mark{flex:0 0 auto;width:54px;height:60px;display:grid;place-items:center;background:var(--plum);color:#fff;font-family:var(--display);font-size:1.04rem;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.byline b{display:block;margin-bottom:6px;color:var(--plum-d)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{background:var(--panel);border:1px solid var(--line);border-top:5px solid var(--amber);border-radius:var(--radius);box-shadow:var(--shadow);padding:30px 32px}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:center}
.final__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:20px;text-align:left}
.rel a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px;text-decoration:none;color:var(--ink);transition:transform .14s ease,box-shadow .14s ease}
.rel a:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #bfae94}
.rel b{display:block;font-family:var(--display);font-size:1.08rem;color:var(--plum-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:.9688rem;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font-family:var(--text);font-size:16px;padding:13px 14px;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--panel);color:var(--ink)}
.field textarea{min-height:140px;resize:vertical}
.field small{display:block;font-size:0.9062rem;color:var(--ink-3);margin-top:5px}

/* ---- 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);box-shadow:var(--shadow);padding:20px 24px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px;color:var(--plum-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:22px}
.posts article{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 24px}
.posts h3{margin:0 0 8px}
.posts p{font-size:1.062rem;color:var(--ink-2)}
.dtable{min-width:520px}

/* ---- footer: a pale slab carrying the dose and the lot, then the grouped
   destinations beneath it, then the seals, then the legal rail. */
.fcta{position:relative;background:var(--plum-d);color:#fff;padding:52px 0}
.fcta h2,.fcta__h{color:#fff}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center}
.fcta__eye{display:inline-block;font-family:var(--text);font-size:.78125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-l);margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.66rem;font-weight:400;line-height:1.26;margin:0 0 10px}
.fcta p{color:#e0d2da}
.fcta__sm{font-size:.9375rem;color:#c9b6c3;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:var(--amber-l)}
.fcta__img img{width:280px}
footer{background:var(--paper)}
.fslab{background:var(--wash);border-bottom:1px solid var(--line)}
/* padding-BLOCK, never the shorthand. This element also carries .wrap, and
   `padding:22px 0` would set padding-inline to 0 and wipe the page gutter for
   the whole footer slab. Invisible above the container max-width, and no
   overflow test can see it (pitfall 46). */
.fslab__in{display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px;padding-block:22px}
.fslab__mark{display:flex;align-items:center;gap:12px}
.fslab__mark img{width:60px;height:60px;border-radius:12px}
.fslab__name{font-family:var(--display);font-size:1.5rem;color:var(--plum-d);line-height:1.1}
.fslab__name span{color:var(--amber-d)}
.fslab dl{display:flex;flex-wrap:wrap;gap:6px 30px;margin:0}
.fslab dt{font-family:var(--text);font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.fslab dd{margin:0 0 0 0;font-size:1rem;color:var(--plum-d);font-weight:700}
.fslab__pair{display:flex;flex-direction:column}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:26px;padding:40px 0 30px}
.frole{font-size:.9375rem;color:var(--ink-2);margin:0 0 14px}
.fcard p{font-size:1.062rem;color:var(--ink-2);margin:0 0 .7em}
.fcard b{color:var(--plum-d)}
.fh{font-family:var(--text);font-size:.8125rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.fgrid ul{list-style:none;margin:0 0 20px;padding:0}
.fgrid li{margin:0}
/* inline-block, not block: the box shrink-wraps so the hover underline stays
   the width of the words, and the negative margin gives the row height back
   (pitfall 82). */
footer li a{display:inline-block;padding-block:5px;margin-block:-5px;font-size:.9688rem;color:var(--ink-2);text-decoration:none}
footer li a:hover{color:var(--amber-d)}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:20px 0;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;gap:16px;padding:0 0 26px}
.fpay img{width:230px;height:auto}
.fpay span{font-size:.9375rem;color:var(--ink-3)}
.disc{background:var(--tint);border-top:1px solid var(--line);padding:28px 0 32px}
.disc p,.disc li{font-size:.9375rem;color:var(--ink-2)}
.disc b{color:var(--plum-d)}
.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:18px;position:relative}
.disc__list li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:10px;background:var(--amber);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:.9375rem}

/* ---- sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:block;background:var(--plum-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 22px}
.buybar__t{font-size:.9375rem;min-width:0}
.buybar__t b{display:block;font-size:1rem}
.buybar__t span{color:#cdb9c7}
.buybar .btn{margin-left:auto;flex:0 0 auto;box-shadow:3px 3px 0 #2c1b28}

/* ---- 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:1100px){
  .fgrid{grid-template-columns:1fr 1fr 1fr;gap:24px}
}
@media (max-width:980px){
  :root{--navh:104px}
  .hero{padding:40px 0 0}
  .hero__grid{grid-template-columns:1fr;gap:22px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  /* No bone band on a phone: the hero is one column there, the product
     sits above the copy rather than beside it, and a light strip at the
     foot of the slab would land under running text instead of under the
     bottle. The caption keeps its own pill either way. */
  .hero::after{display:none}
  .hero__media{order:3;margin:4px 0 8px;align-self:auto;min-height:0}
  .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;margin-bottom:34px}
  .sec--underhero{padding-top:46px}
  .nav__price{display:none}
  .nav__strip>.wrap{display:block}
  .menu{display:none;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 12px;margin:0}
  .menu.open{display:flex}
  .menu__more{display:block}
  .menu a{padding:12px 0;border-bottom:1px solid var(--line-2);border-bottom-width:1px}
  .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:1fr}
  .fcta__img{display:none}
  .final--media{grid-template-columns:1fr;gap:20px}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:46px 0}
  .util__item--trim{display:none}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr}
  .card--pack.featured{order:-1}
  .shots,.shots.s2{grid-template-columns:1fr}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel,.posts{grid-template-columns:1fr}
  .split,.split--flip .split__img{grid-template-columns:minmax(0,1fr);order:0}
  .versus{grid-template-columns:1fr}
  .versus>div:nth-child(3n+1){border-top:2px solid var(--line-2)}
  /* The dose chip is white-space:nowrap and margin-left:auto, so on a narrow
     card it is pushed to the right of a line with no room for it and overhangs
     the card edge. On a phone let it sit at the start of its own line. */
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .figures{grid-template-columns:1fr;gap:8px}
  .fgrid{grid-template-columns:1fr 1fr;gap:22px}
  .fslab__in{gap:14px 24px}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:440px){
  .fgrid{grid-template-columns:1fr}
  .badgewall{grid-template-columns:1fr}
}

/* ---- hero: the bottle stands on a flat plate ----------------------------
   No card, no glow and no blur anywhere: the depth language of this site is a
   hard edge, so the product gets a flat elliptical plate beneath it rather
   than a drop shadow. Transform only, NEVER opacity: the bottle is the LCP
   element and an element starting at opacity:0 is not recorded as painted. */
.hero__card{isolation:isolate}
.hero__card::after{
  content:"";position:absolute;left:50%;bottom:16px;translate:-50% 0;
  width:56%;height:14px;border-radius:50%;
  background:rgba(58,36,53,.20);
  z-index:0;pointer-events:none;
}

/* ---- hero: sticky, centred product column ------------------------------
   The product column holds its place under the header 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 tucks the
   product under the bar at one width and leaves a gap at another.

   NO min-height here, and align-self stays `end`, because on this site the
   product column is deliberately BOTTOM-aligned and pulled 96px below the
   slab. A full-screen sticky box would centre the bottle inside it and the
   overlap that the whole hero is built around would disappear.

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

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

/* --- pack cards read as one repeated object ----------------------------
   A pricing row is three cards that have to share their edges, their image
   slot and their button baseline. The vendor pack shots are three different
   shapes, so without these 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. */
.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 ==== */

/* ==== 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}
footer .fslab dt{font-size:16px}
/* ==== end footer type floor ==== */

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

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

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

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

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