/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Outfit Fallback";src:local("Arial");font-weight:400;size-adjust:100.15%;ascent-override:99.85%;descent-override:25.96%;line-gap-override:0.00%}
@font-face{font-family:"Outfit Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:95.77%;ascent-override:104.42%;descent-override:27.15%;line-gap-override:0.00%}
@font-face{font-family:"Public Sans Fallback";src:local("Arial");font-weight:400;size-adjust:105.60%;ascent-override:89.96%;descent-override:21.31%;line-gap-override:0.00%}
@font-face{font-family:"Public Sans Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:99.78%;ascent-override:95.21%;descent-override:22.55%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* ==========================================================================
   ALKATIDE — alkatidedaily.com
   Component system taken from the nucentixx.com reference: rounded cards,
   a product-on-a-card hero, floating stat chips, a Quick Facts table, numbered
   steps, alternating split sections.
   Palette re-derived from the bottle — rose/raspberry wordmark on a magenta
   gradient, white label, blush base band. Nothing teal survives from the
   reference; colour always comes from the product.
   Type: Outfit (geometric display) + Public Sans (neutral body). Both unused
   elsewhere in this family — see the uniqueness ledger.
   ========================================================================== */

/* ---- 1. DESIGN TOKENS ---------------------------------------------------- */
:root{
  /* blush ground + ink */
  --paper:      #fffafb;
  --tint:       #fdeff3;
  --tint2:      #fbe2ea;
  --card:       #ffffff;
  --ink:        #2a1620;
  --ink-dk:     #1b0d14;
  --muted:      #6d5560;
  --faint:      #7b6972;
  --line:       #f3dae2;
  --line-soft:  #f9ebf0;

  /* the wordmark rose — the lead */
  --rose:       #c43a5d;
  --rose-dk:    #c62a53;
  --rose-dp:    #97183a;
  --rose-lt:    #fde8ee;
  --rose-line:  #f7c4d3;

  /* the deeper magenta the wordmark fades into */
  --plum:       #a81f57;
  --plum-dk:    #78103c;

  /* a warm signal colour for guarantees, from the gold seal */
  --gold:       #9a6e1b;
  --gold-lt:    #fdf3e0;
  --gold-line:  #f2ddb6;

  --shadow:   0 18px 40px -22px rgba(42,22,32,.42);
  --shadow-sm:0 8px 22px -16px rgba(42,22,32,.34);
  --ease:     cubic-bezier(.22,1,.36,1);

  /* generous radii are the reference's most recognisable trait */
  --r-s: 12px; --r: 18px; --r-l: 28px;

  --display:'Outfit','Outfit Fallback',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --sans:'Public Sans','Public Sans Fallback',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --wrap: 1180px; --prose: 68ch; --measure: 760px; --measure-wide: 980px;
}

/* ---- 2. RESET / BASE ----------------------------------------------------- */
*{box-sizing:border-box;min-width:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:92px}
body{
  margin:0;font-family:var(--sans);font-size:17px;line-height:1.72;
  color:var(--ink);background:var(--paper);overflow-x:clip;max-width:100%;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video,iframe,table,figure{max-width:100%}
img{height:auto;display:block}
a{color:var(--rose-dk);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink-dk);font-weight:700;
  line-height:1.15;letter-spacing:-.015em;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5vw,3.4rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.45rem)}
h3{font-size:1.28rem;line-height:1.28}
h4{font-size:1.04rem}
p{margin:0 0 1.1em}
strong,b{font-weight:700}
hr{border:0;border-top:1px solid var(--line);margin:0}
::selection{background:var(--rose-lt)}
table{border-collapse:collapse}
section[id]{scroll-margin-top:92px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.prose{max-width:var(--prose)}
.center{text-align:center}
.center .prose{margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:var(--rose-dk);
  padding:10px 16px;border-radius:var(--r-s);z-index:2000}
.skip:focus{left:12px;top:12px}

/* ---- 3. SHARED ATOMS ----------------------------------------------------- */
.eyebrow{display:inline-block;font-family:var(--display);font-weight:700;font-size:0.8438rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--rose-dk);margin-bottom:.9rem}
.note{font-size:0.9062rem;color:var(--faint);line-height:1.62}
.lead{font-size:1.18rem;line-height:1.62;color:var(--muted)}

/* the reference's dark capsule badge, recoloured to the plum band */
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--plum-dk);color:#f8d7e2;
  font-family:var(--display);font-weight:700;font-size:0.8438rem;letter-spacing:.09em;
  text-transform:uppercase;padding:9px 16px;border-radius:999px;margin-bottom:18px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--display);font-weight:700;font-size:1rem;padding:.92em 1.7em;
  border-radius:999px;cursor:pointer;border:1px solid transparent;min-height:46px;
  transition:transform .14s var(--ease),background .2s ease,box-shadow .2s ease;
  text-decoration:none;line-height:1;text-align:center}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn--cta{background:var(--rose);color:#fff;box-shadow:0 10px 24px -12px rgba(232,68,110,.75)}
.btn--cta:hover{background:var(--rose-dk);color:#fff}
.btn--ghost{background:#fff;color:var(--rose-dk);border-color:var(--rose-line)}
.btn--ghost:hover{background:var(--rose-lt);color:var(--rose-dp)}
.btn--dark{background:var(--ink-dk);color:#fff}
.btn--dark:hover{background:#000;color:#fff}
.btn--lg{font-size:1.06rem;padding:1.02em 2em}
.btn--block{display:flex;width:100%}

.sec{padding:74px 0;border-top:1px solid var(--line-soft)}
.sec--tint{background:var(--tint)}
.sec--rose{background:linear-gradient(165deg,var(--tint) 0%,var(--tint2) 100%)}
.sec--tight{padding:52px 0}
.sec__head{max-width:var(--prose);margin-bottom:34px}
.sec--center .sec__head{margin-inline:auto;text-align:center}

/* ---- 4. TOPLINE + NAV ---------------------------------------------------- */
.util{background:var(--ink-dk);color:#e7c9d5;font-size:0.9062rem}
.util__row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-block:8px;flex-wrap:wrap}
.util__item b{color:#fff}
.util__tel{color:#f6b9cc;font-weight:700;white-space:nowrap}
.util__tel:hover{color:#fff;text-decoration:none}
@media(max-width:700px){.util__row{justify-content:center;text-align:center;font-size:0.9062rem;gap:6px 14px;padding-block:7px}
  /* keep the bar to one line on a phone: role, guarantee, phone */
  .util__item:nth-child(2),.util__item:nth-child(3){display:none}}

.nav{position:sticky;top:0;z-index:60;background:rgba(255,250,251,.95);
  backdrop-filter:saturate(150%) blur(9px);border-bottom:1px solid var(--line);
  transition:box-shadow .3s ease}
.nav--stuck{box-shadow:var(--shadow-sm)}
/* Phone only: slide the header away while the reader is going down and the buy
   bar is up, and bring it straight back on any upward scroll. Scoped to the
   same breakpoint as the JS so a desktop viewport can never be left with a
   header translated off-screen. Transform only -- composited, no layout. */
@media(max-width:920px){
  .nav{transition:transform .28s var(--ease),box-shadow .3s ease;will-change:transform}
  .nav--away{transform:translateY(-100%)}
}
@media(prefers-reduced-motion:reduce){.nav{transition:none}}
.nav__row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:13px}
/* the wordmark is a text node plus a span; a flex gap would split it */
.brand{display:inline-flex;align-items:center;gap:0;font-family:var(--display);
  font-weight:800;font-size:1.42rem;letter-spacing:-.02em;color:var(--ink-dk)}
.brand:hover{text-decoration:none}
.brand span{color:var(--rose)}
.brand svg{width:30px;height:30px;flex:none;margin-right:9px}
.menu{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0}
.menu a{font-size:.93rem;font-weight:600;color:var(--muted)}
.menu a:hover,.menu a[aria-current="page"]{color:var(--rose-dk);text-decoration:none}
.nav__cta{display:flex;align-items:center;gap:12px}
.burger{display:none;background:none;border:0;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
.burger span{width:22px;height:2px;background:var(--ink);display:block;border-radius:2px}
@media(max-width:1060px){
  .menu{display:none;gap:0}
  .menu.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:var(--paper);border-bottom:1px solid var(--line);padding:8px 22px;
    box-shadow:var(--shadow);max-height:78vh;overflow:auto}
  .menu.open li{border-top:1px solid var(--line-soft)}
  .menu.open a{display:block;padding:13px 0;min-height:44px}
  .burger{display:flex;min-height:44px;min-width:44px;align-items:center;justify-content:center}
}
@media(max-width:560px){.nav__cta .btn{display:none}}

/* ---- 5. STICKY BUY BAR --------------------------------------------------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--ink-dk);color:#fff;
  transform:translateY(105%);transition:transform .3s var(--ease);box-shadow:0 -6px 24px rgba(0,0,0,.2)}
.buybar.show{transform:translateY(0)}
.buybar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:var(--wrap);margin-inline:auto;padding:11px 22px}
.buybar__t{font-size:.96rem;line-height:1.3}
.buybar__t b{font-family:var(--display);font-size:1.04rem;display:block}
.buybar__t .from{color:#f6b9cc;font-weight:700}
.buybar .btn{white-space:nowrap}
@media(max-width:560px){.buybar__t{font-size:0.9062rem}.buybar__t b{font-size:.94rem}}

/* ---- 6. HERO ------------------------------------------------------------- */
.hero{background:linear-gradient(162deg,#fff7f9 0%,var(--tint) 58%,var(--tint2) 100%);
  position:relative;overflow-x:clip;overflow-y:visible}
.hero__grid{display:grid;grid-template-columns:1.04fr .96fr;gap:46px;align-items:center;padding-block:60px 68px}
.hero h1 span{color:var(--rose-dk)}
/* the H1 carries the keyword on line one and the product on line two;
   the second line is smaller and lighter so the hierarchy still reads */
.hero h1 small{display:block;margin-top:.34em;font-size:.38em;font-weight:600;
  letter-spacing:0;line-height:1.3;color:var(--muted)}
@media(max-width:560px){.hero h1 small{font-size:.46em}}
.hero__sub{font-size:1.14rem;color:var(--muted);margin:0 0 22px;max-width:52ch}
.ticks{list-style:none;padding:0;margin:20px 0 26px;display:grid;gap:11px}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-weight:500}
.ticks .ck{flex:0 0 22px;height:22px;border-radius:50%;background:var(--rose);color:#fff;
  display:grid;place-items:center;font-size:.76rem;margin-top:3px;font-weight:700}
.hero__cta{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.pay{display:flex;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap}
.pay img{height:24px;width:auto}
.pay span{font-size:0.9062rem;color:var(--rose-dk);font-weight:700}

.hero__media{position:relative;text-align:center}
.hero__card{background:linear-gradient(168deg,#fff,var(--tint));border:1px solid var(--line);
  border-radius:var(--r-l);padding:24px 28px;box-shadow:var(--shadow);display:inline-block}
.hero__card img{margin:0 auto;filter:drop-shadow(0 22px 30px rgba(151,24,58,.22))}
/* floating stat chips — the reference's signature flourish */
.floaty{position:absolute;background:#fff;border:1px solid var(--line);border-radius:var(--r-s);
  padding:10px 14px;box-shadow:var(--shadow);font-family:var(--display);font-weight:700;
  font-size:0.9062rem;line-height:1.2;color:var(--ink-dk)}
.floaty small{display:block;color:var(--rose-dk);font-size:0.9062rem;letter-spacing:.06em;
  text-transform:uppercase;font-weight:700;margin-top:2px}
.floaty--tl{top:10px;left:-6px}
.floaty--br{bottom:14px;right:-6px}
@media(max-width:920px){
  .hero__grid{grid-template-columns:1fr;gap:34px;padding-block:44px 52px}
  /* On a phone the two-column grid collapses, so the left column's children are
     promoted to grid items with display:contents and ordered individually.
     Reading order becomes: eyebrow, headline, Quick Answer, product shot, then
     the supporting copy. DOM order is untouched -- the Quick Answer still
     follows the H1 for parsers and for the speakable selector. */
  .hero__copy{display:contents}
  .hero__copy > .pill{order:1}
  .hero__copy > h1{order:2}
  .hero__copy > .answer{order:4}
  .hero__media{order:3}
  .hero__copy > .hero__cta{order:6}
  .hero__copy > .hero__rating{order:6}
  .hero__copy > .pay{order:8}
  .hero__copy > .hero__sub{order:8}
  .hero__copy > .ticks{order:5}
  .hero__grid{gap:20px}
  .hero__card{padding:16px 18px}
  .hero__card img{max-width:250px}
  .floaty{display:none}
}

/* ---- 7. QUICK ANSWER (AEO) ----------------------------------------------- */
.answer{background:#fff;border:1px solid var(--rose-line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);padding:20px 24px;margin:22px 0 0}
.answer .tag{display:block;font-family:var(--display);font-weight:800;font-size:0.8438rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--rose-dk);margin-bottom:.5em}
.answer p{margin:0;font-size:1.062rem}
/* In the hero the answer is not a card: the approved layout runs it as two
   flowing paragraphs straight under the H1. The wrapper stays -- it is the
   speakable selector and the AEO block -- only the card styling and the
   label come off. */
.hero .answer{background:none;border:0;box-shadow:none;padding:0;margin:18px 0 0}
.hero .answer .tag{display:none}
.hero .answer p{font-size:1.062rem;color:var(--muted);margin:0 0 .85em;max-width:56ch}
.hero .answer p:last-child{margin-bottom:0}
.hero .answer p b{color:var(--ink-dk)}
.hero__rating{display:flex;align-items:center;gap:9px;margin:16px 0 0;
  font-size:.95rem;color:var(--muted)}
.hero__rating b{color:var(--ink-dk)}


/* ---- hero motif -- soft-float ---------------------------------------- */
.hero{position:relative;overflow-x:clip;overflow-y:visible}
:where(.hero__media){position:relative}
.hero__card{position:relative;z-index:2}
.hero__card img{position:relative;z-index:3}
.hero{background:linear-gradient(176deg,#fffafb,#f5d5dd 62%,#fffafb)}.hero__card{animation:btFloat 8s ease-in-out infinite}.hero__media::before{content:'';position:absolute;left:50%;bottom:6%;width:54%;height:14px;translate:-50% 0;border-radius:50%;background:rgba(129,27,54,0.35);filter:blur(9px);animation:btShadow 8s ease-in-out infinite;z-index:1}@keyframes btFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}@keyframes btShadow{0%,100%{opacity:.4;scale:1}50%{opacity:.22;scale:.88}}
@media(prefers-reduced-motion:reduce){.hero__card,.hero__media::before,.hero__media::after{animation:none!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. */
@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;}
}



/*!SITE-HOME-CRIT-START*/
/* HOME PAGE ONLY -- class="hero" is on index.html and nowhere else, so every
   selector below is anchored to it.

   Measured at 1440x900 before this block: the hero CTA sat at y=1092, 192px
   under the fold, so the money page opened with nothing to click. The desktop
   reading order becomes eyebrow, headline, quick answer, BUTTONS, payment
   line, evidence. Order only -- the DOM is untouched, and the phone
   composition (display:contents at max-width:920px) is deliberately not
   touched: this query starts at 921px, where that one stops. */
@media (min-width:921px){
  .hero .hero__copy{display:flex;flex-direction:column;align-items:stretch}
  /* A hero block a later pass adds -- hero_restore.py rebuilds .hero__sub and
     the fact blocks on every build -- has order:0 by default and would land
     ABOVE the eyebrow. This floor puts anything unnamed between the payment
     line and the evidence instead, so the buttons cannot be pushed down. */
  .hero .hero__copy > *{order:6;margin-top:16px;margin-bottom:0}
  /* the eyebrow is inline-flex; a stretched flex item would run the pill the
     full width of the column */
  .hero .hero__copy > .pill{order:1;align-self:flex-start;margin:0 0 16px}
  .hero .hero__copy > h1{order:2;margin:0 0 18px}
  .hero .hero__copy > .answer{order:3;margin:0}
  .hero .hero__copy > .hero__cta{order:4;margin:22px 0 0}
  .hero .hero__copy > .pay{order:5;margin:14px 0 0}
  .hero .hero__copy > .ticks{order:7;margin:26px 0 0}
}
@media (min-width:981px){
  /* The product column is a full screen tall from 981px up and the plate is
     centred inside it, so the two stat chips -- pinned to the COLUMN's top and
     bottom edges -- floated about 170px away from the plate they annotate and
     read as loose furniture. Pin them to the plate instead: it is 450px tall
     and centred, so its corners sit 225px either side of the column midpoint.
     Both chips are absolutely positioned, so nothing else moves. */
  .hero .floaty--tl{top:calc(50% - 215px)}
  .hero .floaty--br{bottom:calc(50% - 211px)}
}
/* The dashed separators in the pricing cards are drawn on absolutely
   positioned pseudo-elements, which take no space at all: the three cards keep
   the heights and the button offsets they were engineered with. The only
   geometry here is position:relative, which lays out identically to static. */
body:has(.hero) .price__each,
body:has(.hero) .price__tot,
body:has(.hero) .price__ship{position:relative}
/*!SITE-HOME-CRIT-END*/
/*!CRITICAL-END*/
/* the reference's Quick Facts table */
.qa{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);overflow:hidden;max-width:820px;margin:0 auto}
.qa__h{background:var(--rose-lt);padding:15px 22px;font-family:var(--display);font-weight:800;
  font-size:1rem;color:var(--ink-dk);border-bottom:1px solid var(--line)}
.qa dl{margin:0;display:grid;grid-template-columns:34% 1fr}
.qa dt,.qa dd{padding:13px 22px;border-bottom:1px solid var(--line-soft);margin:0}
.qa dt{font-weight:700;color:var(--ink-dk)}
.qa dd{color:var(--muted)}
.qa dl>:nth-last-child(-n+2){border-bottom:0}
@media(max-width:620px){
  .qa dl{grid-template-columns:1fr}
  .qa dt{padding-bottom:0;border-bottom:0}
  .qa dd{padding-top:4px}
}

/* ---- 8. CARDS / GRIDS ---------------------------------------------------- */
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:940px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:26px;box-shadow:var(--shadow-sm)}
.card .ic{width:58px;height:58px;border-radius:var(--r-s);background:var(--rose-lt);
  display:grid;place-items:center;margin-bottom:15px;overflow:hidden}
.card .ic img{height:40px;width:40px;object-fit:contain}
.card h3{margin-bottom:.4em}
.card p{margin:0;color:var(--muted);font-size:1.062rem}

/* ---- 9. SPLIT / STEPS / BAND --------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.split--rev .split__media{order:2}
.split__media img{border-radius:var(--r);box-shadow:var(--shadow);margin:0 auto}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:28px}.split--rev .split__media{order:0}}
.chips{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px}
.chips li{display:flex;gap:10px}
.chips .ck{color:var(--rose);font-weight:800;flex:none}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;counter-reset:s}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);padding:26px 24px}
.step__n{counter-increment:s;width:40px;height:40px;border-radius:50%;background:var(--rose);
  color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:800;
  margin-bottom:14px}
.step__n::before{content:counter(s)}
@media(max-width:880px){.steps{grid-template-columns:1fr}}

/* a standalone graphic on a rounded card, matched to the artwork's ground */
.band{max-width:980px;margin:0 auto;border-radius:var(--r-l);overflow:hidden;
  box-shadow:var(--shadow);border:1px solid var(--line);background:#fff}
.band img{width:100%;display:block}
.band--sm{max-width:820px}
.band__cap{padding:14px 22px;font-size:.87rem;color:var(--muted);border-top:1px solid var(--line-soft);
  background:var(--tint)}

/* ---- 10. SHOTS (image + heading + copy, never a bare grid) --------------- */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.shots figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow-sm)}
.shots img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--tint)}
.shots figcaption{padding:18px 20px}
.shots figcaption b{display:block;font-family:var(--display);font-size:1.04rem;
  color:var(--ink-dk);margin-bottom:.35em}
.shots figcaption span{font-size:.92rem;color:var(--muted)}
@media(max-width:940px){.shots{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.shots{grid-template-columns:1fr}}

/* ---- 11. INGREDIENTS ----------------------------------------------------- */
.inglist{display:grid;gap:20px}
.ing{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;
  box-shadow:var(--shadow-sm)}
.ing__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;margin-bottom:.7em}
.ing__top h3{margin:0}
.ing__dose{font-family:var(--display);font-weight:700;font-size:0.8438rem;background:var(--rose-lt);
  color:var(--rose-dp);border:1px solid var(--rose-line);border-radius:999px;padding:5px 12px}
.ing__lat{font-size:.88rem;color:var(--faint);font-style:italic}
.ing p{margin:0 0 .8em}
.ing__cite{font-size:.86rem;color:var(--muted)}

/* ---- 12. PRICING --------------------------------------------------------- */
.prices{display:grid;grid-template-columns:1fr 1.14fr 1fr;gap:22px;align-items:center;
  padding-top:16px}
.price{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:28px 22px 24px;
  text-align:center;box-shadow:var(--shadow-sm);position:relative;
  display:flex;flex-direction:column}
.price--best{border:2px solid var(--rose);padding:36px 26px 30px;
  background:linear-gradient(180deg,#fff 0%,var(--tint) 100%);
  box-shadow:0 30px 62px -26px rgba(232,68,110,.62);transform:translateY(-10px);z-index:1}
.price--ordered{border-color:var(--rose-line)}
.price__badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--rose);
  color:#fff;font-family:var(--display);font-weight:800;font-size:0.9062rem;letter-spacing:.12em;
  text-transform:uppercase;padding:7px 15px;border-radius:999px;white-space:nowrap;
  box-shadow:0 8px 18px -8px rgba(151,24,58,.7)}
.price--ordered .price__badge{background:var(--plum);box-shadow:none;font-size:0.9062rem}
.price img{margin:0 auto 14px;height:auto}
.price h3{margin-bottom:.2em}
.price--best h3{font-size:1.6rem}
.price__supply{font-size:.88rem;color:var(--faint);margin-bottom:.9em}
.price__each{font-family:var(--display);font-weight:800;font-size:2.5rem;color:var(--rose-dp);line-height:1}
.price--best .price__each{font-size:3.1rem}
.price__each small{font-size:0.9062rem;font-weight:600;color:var(--muted);display:block;margin-top:4px}
.price__was{color:var(--faint);text-decoration:line-through;font-size:.92rem}
.price__tot{font-weight:700;margin:.5em 0 1em}
.price__save{display:inline-block;background:var(--tint);color:var(--rose-dp);border:1px solid var(--rose-line);
  border-radius:999px;font-family:var(--display);font-weight:800;font-size:0.8438rem;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 10px;margin-left:6px;vertical-align:2px}
.price--best .price__save{background:#fff}
.price .btn--block{margin-top:auto}
.price__ship{font-size:0.9062rem;color:var(--rose-dk);font-weight:600;margin-top:.8em;margin-bottom:0}
@media(max-width:1040px){.prices{grid-template-columns:1fr 1.1fr 1fr;gap:14px}
  .price{padding:24px 16px 20px}
  .price--best{padding:30px 18px 24px}
  .price--best .price__each{font-size:2.6rem}}
@media(max-width:860px){.prices{grid-template-columns:1fr;gap:26px;align-items:stretch;padding-top:18px}
  .price{padding:28px 22px 24px}
  .price--best{transform:none;padding:34px 24px 28px;order:1}
  .price--ordered{order:2}
  .price--basic{order:3}}

/* ---- 13. REVIEWS / STATS ------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;text-align:center;
  box-shadow:var(--shadow-sm)}
.stat b{display:block;font-family:var(--display);font-weight:800;font-size:2.2rem;color:var(--rose-dk);line-height:1}
.stat span{font-size:.88rem;color:var(--muted)}
@media(max-width:880px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

.rbars{display:grid;gap:9px;max-width:460px}
.rbar{display:grid;grid-template-columns:44px 1fr 46px;align-items:center;gap:11px;font-size:.9rem}
.rbar .track{height:9px;background:var(--tint2);border-radius:999px;overflow:hidden}
.rbar .fill{height:100%;background:var(--rose);border-radius:999px}

.rev{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;
  box-shadow:var(--shadow-sm)}
.rev__top{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:baseline;margin-bottom:.6em}
.rev__who{font-family:var(--display);font-weight:700;color:var(--ink-dk)}
.rev__meta{font-size:.84rem;color:var(--faint)}
.rev__stars{color:var(--gold);letter-spacing:.08em}
.rev p{margin:0;color:var(--muted)}

/* ---- 14. FAQ ------------------------------------------------------------- */
.faq{display:grid;gap:12px;max-width:860px;margin-inline:auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r); padding: 0 22px;box-shadow:var(--shadow-sm)}
.faq summary{font-family:var(--display);font-weight:700;color:var(--ink-dk);cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--rose);font-weight:800;flex:none;font-size:1.2rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .faq__b{padding-top:.9em;color:var(--muted)}
.faq .faq__b p:last-child{margin-bottom:0}

/* ---- 15. CALLOUTS / ALERTS ----------------------------------------------- */
.callout{background:var(--tint);border:1px solid var(--line);border-left:4px solid var(--rose);
  border-radius:0 var(--r) var(--r) 0;padding:22px 26px}
.callout p:last-child{margin-bottom:0}
.alert{background:var(--gold-lt);border:1px solid var(--gold-line);border-left:4px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0;padding:22px 26px}
.alert p:last-child{margin-bottom:0}
.flag{display:inline-block;font-family:var(--display);font-weight:700;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;background:var(--rose-lt);color:var(--rose-dp);
  border:1px solid var(--rose-line);border-radius:999px;padding:5px 12px;margin-bottom:1rem}

/* ---- 16. TABLES ---------------------------------------------------------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff;
  box-shadow:var(--shadow-sm)}
.dtable{width:100%;font-size:1rem;min-width:520px}
.dtable th,.dtable td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--line-soft);
  vertical-align:top}
.dtable thead th{background:var(--rose-lt);font-family:var(--display);font-weight:700;
  color:var(--ink-dk);font-size:0.9062rem;letter-spacing:.06em;text-transform:uppercase}
.dtable tbody tr:last-child td{border-bottom:0}
.facttab{width:100%;font-size:.95rem}
.facttab th,.facttab td{padding:12px 0;text-align:left;border-bottom:1px solid var(--line-soft)}
.facttab th{width:38%;font-weight:700;color:var(--ink-dk)}

/* ---- 17. FORMS ----------------------------------------------------------- */
.formcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:30px;
  box-shadow:var(--shadow-sm)}
.form__row{display:grid;gap:16px;margin-bottom:16px}
@media(min-width:660px){.form__row--2{grid-template-columns:1fr 1fr}}
.form label{display:block;font-weight:700;font-size:.9rem;margin-bottom:6px;color:var(--ink-dk)}
.form input,.form select,.form textarea{width:100%;font-family:inherit;font-size:1rem;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--paper);
  color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--rose);
  outline-offset:1px;background:#fff}
.form textarea{min-height:130px;resize:vertical}
.form__hint{font-size:.84rem;color:var(--faint);margin-top:6px}
.form__msg{margin-top:14px;padding:12px 16px;border-radius:var(--r-s);background:var(--rose-lt);
  border:1px solid var(--rose-line);font-size:.92rem;display:none}
.form__msg.show{display:block}

/* ---- 18. TRUST STRIP ----------------------------------------------------- */
.trust{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust__row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:26px 40px;
  padding-block:22px}
.trust__item{display:flex;align-items:center;gap:10px;font-size:0.9062rem;font-weight:600;color:var(--muted)}
.trust__item img{height:42px;width:auto}
.badgewall{display:flex;flex-wrap:wrap;gap:18px;justify-content:center}
.badgewall img{height:60px;width:auto}

/* ---- 19. FINAL CTA ------------------------------------------------------- */
.final{background:linear-gradient(155deg,var(--plum) 0%,var(--plum-dk) 100%);color:#fbe4ec;
  border-radius:var(--r-l);padding:48px 44px;position:relative;overflow:hidden}
.final h2{color:#fff}
.final p{color:#f3c9d8;max-width:56ch;margin:0 auto 1.5em}
.final b,.final strong{color:#fff}
.final--media{display:grid;grid-template-columns:.82fr 1.18fr;gap:40px;align-items:center;text-align:left}
.final--media h2{text-align:left}
.final--media p{margin:0 0 1.4em;max-width:54ch}
.final--media .final__img img{width:100%;max-width:320px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 20px 34px rgba(0,0,0,.42))}
.final__price{font-family:var(--display);font-weight:800;font-size:2rem;color:#ffd9e6;margin:.2em 0 .7em}
@media(max-width:880px){
  .final--media{grid-template-columns:1fr;gap:26px;text-align:center;padding:0}
  .final--media h2{text-align:center}
  .final--media p{margin-inline:auto}
  .final{padding:38px 24px}
}

/* ---- 20. RELATED / BYLINE / REFS ----------------------------------------- */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.rel a{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;
  box-shadow:var(--shadow-sm);text-align:left;display:block;color:var(--ink)}
.rel a:hover{text-decoration:none;border-color:var(--rose-line);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--display);color:var(--ink-dk);margin-bottom:.35em}
.rel span{font-size:.92rem;color:var(--muted)}
@media(max-width:880px){.rel{grid-template-columns:1fr}}

.byline{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:20px 24px;margin-top:2.4em;box-shadow:var(--shadow-sm)}
.byline img{flex:0 0 68px;border-radius:50%;border:1px solid var(--line)}
.byline b{display:block;font-family:var(--display);color:var(--ink-dk);margin-bottom:.4em}
.byline p{margin:0;font-size:0.9062rem;color:var(--muted)}

.refs{font-size:.88rem;color:var(--muted)}
.refs ol{padding-left:1.3em;display:grid;gap:.6em}
.refs a{word-break:break-word}

.crumbs{font-size:0.9062rem;color:var(--faint);padding:14px 0 0;margin:0}
.crumbs a{color:var(--muted)}

.article{max-width:var(--prose);margin-inline:auto}
.article h2{margin-top:1.6em}
.article h3{margin-top:1.3em}
.dropcap::first-letter{float:left;font-family:var(--display);font-weight:800;font-size:3.1rem;
  line-height:.86;padding:.06em .1em 0 0;color:var(--rose-dk)}
.pullquote{border-left:4px solid var(--rose);padding-left:20px;margin:1.6em 0;
  font-family:var(--display);font-size:1.16rem;color:var(--ink-dk)}
.pullquote p{margin:0 0 .4em}
/* an attributed line needs its attribution to read as one, not as body copy */
.pullquote cite{display:block;font-family:var(--sans);font-style:normal;font-weight:600;
  font-size:.86rem;color:var(--muted);letter-spacing:.02em}

/* ---- 21. FOOTER ---------------------------------------------------------- */
footer{background:var(--ink-dk);color:#d9bcc8;padding:54px 0 30px;font-size:.92rem}
footer h4{color:#fff;font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:1em}
footer a{color:#f0c9d8}
footer a:hover{color:#fff}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;margin-bottom:34px}
@media(max-width:940px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.fgrid{grid-template-columns:1fr}}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.6em}
.fbrand{font-family:var(--display);font-weight:800;font-size:1.4rem;color:#fff;margin-bottom:.5em}
.fbadges{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.fbadges img{height:38px;width:auto}
.fnap{border-top:1px solid rgba(255,255,255,.14);padding-top:24px;font-size:0.9062rem;line-height:1.75}
.fpay{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:20px 0;
  border-top:1px solid rgba(255,255,255,.14);margin-top:22px;font-size:.84rem}
.fpay img{height:24px;width:auto}
.disc{border-top:1px solid rgba(255,255,255,.14);margin-top:22px;padding-top:22px;
  font-size:0.9062rem;line-height:1.7;color:#bfa0ad}
.disc p{margin-bottom:.9em}
.copy{color:#9d8290}

/* ---- 22. BLOG ------------------------------------------------------------ */
.postmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 1.8em;
  padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:.88rem;color:var(--muted)}
.postmeta b{color:var(--ink-dk)}
.postmeta .sep{color:var(--line)}
.postmeta time{white-space:nowrap}

.toc{background:var(--tint);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 26px;margin:0 0 2.2em}
.toc h2{font-family:var(--display);font-size:.76rem!important;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rose-dk);margin:0 0 1em}
.toc ol{margin:0;padding-left:1.25em;display:grid;gap:.45em;font-size:.95rem}
.toc a{color:var(--ink)}
.toc a:hover{color:var(--rose-dk)}

.article figure{margin:2em 0}
.article figure img{width:100%;border-radius:var(--r);border:1px solid var(--line)}
.article figcaption{margin-top:.7em;font-size:0.9062rem;color:var(--faint);text-align:center}
/* a fixed cap matching the authored width attribute, so the reserved box and the
   painted box are identical before and after the async stylesheet lands */
.article figure.portrait img{width:100%;max-width:var(--figw,440px);margin-inline:auto}

.keypoints{background:var(--rose-lt);border:1px solid var(--rose-line);border-left:4px solid var(--rose);
  border-radius:0 var(--r) var(--r) 0;padding:22px 26px;margin:0 0 2em}
/* direct child only: a <b> inside a bullet is emphasis and must stay inline */
.keypoints>b{display:block;font-family:var(--display);font-size:.76rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--rose-dp);margin-bottom:1em}
.keypoints ul{margin:0;padding-left:1.2em;display:grid;gap:.5em}
.keypoints li b{color:var(--rose-dp)}

/* the closing CTA reused mid-article: same component, narrower column */
.article .final--media{grid-template-columns:168px minmax(0,1fr);gap:24px;padding:30px 28px}
.article .final--media .final__img img{max-width:168px}
.article .final--media h2{font-size:1.6rem;line-height:1.22;margin:0 0 .5em}
.article .final--media .final__price{font-size:1.4rem;margin:.3em 0 .7em}
@media(max-width:620px){
  .article .final--media{grid-template-columns:1fr;text-align:center;padding:30px 22px}
  .article .final--media h2{text-align:center;font-size:1.45rem}
}

.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.posts article{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}
.posts img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center 38%;background:var(--tint)}
.posts .pbody{padding:24px 26px;display:flex;flex-direction:column;flex:1}
.posts h3{margin:0 0 .45em;font-size:1.12rem}
.posts h3 a{color:var(--ink-dk)}
.posts h3 a:hover{color:var(--rose-dk)}
.posts p{margin:0 0 1em;color:var(--muted);font-size:1.062rem}
.posts .pmeta{margin-top:auto;font-size:.79rem;color:var(--faint)}
@media(max-width:940px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.posts{grid-template-columns:1fr}}

/* ---- 23. MOTION ---------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---- 24. HERO ENTRANCE ---------------------------------------------------
   Runs once on load, staggered by a --d delay set per element. No scroll
   observer: the hero is above the fold, so it should be moving before any
   JavaScript has had a chance to run. Everything is opacity and transform,
   which the compositor handles without repainting. */
.anim{opacity:0;animation:riseIn .62s var(--ease) forwards;animation-delay:var(--d,0ms)}
.anim--pop{animation-name:popIn;animation-duration:.72s}
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:translateY(18px) scale(.965)}to{opacity:1;transform:none}}

/* the product card keeps a slow drift once it has arrived */
.hero__card{animation:cardFloat 7s ease-in-out 1.2s infinite}
.hero__card.anim{animation:popIn .72s var(--ease) forwards var(--d,0ms),
                           cardFloat 7s ease-in-out 1.4s infinite}
@keyframes cardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* the floating chips fade in last and drift against the card */
.floaty{opacity:0;animation:riseIn .6s var(--ease) forwards}
.floaty--tl{animation-delay:.62s}
.floaty--br{animation-delay:.76s}
.hero__media:hover .floaty--tl{transform:translateY(-3px)}
.hero__media:hover .floaty--br{transform:translateY(3px)}
.floaty{transition:transform .4s var(--ease)}

/* a soft blush glow behind the product, drifting on its own cycle */
.hero__media::before{content:"";position:absolute;inset:8% 6% 12%;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,rgba(232,68,110,.20),rgba(232,68,110,0) 68%);
  filter:blur(26px);z-index:0;animation:glowPulse 9s ease-in-out infinite}
/* the card needs a stacking context above the glow; the floaty chips are
   already absolutely positioned and must stay that way */
.hero__card{position:relative;z-index:1}
.floaty{z-index:2}
@keyframes glowPulse{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}

@media(prefers-reduced-motion:reduce){
  .anim,.floaty{opacity:1;animation:none}
  .hero__card,.hero__card.anim,.hero__media::before{animation:none}
}

/* NOTE: --measure is in px, not ch, on purpose. `ch` resolves against the
   element's own font-size, so .note at .86rem and .lead at 1.18rem landed on
   different pixel widths from the same token -- which is precisely the ragged
   left edge this section exists to remove. */
/* ---- 25. SINGLE-COLUMN MEASURE ------------------------------------------
   Sections mix full-width components with single-column prose. Without this,
   prose ran the full 1180px wrap (~132 characters a line) while .sec__head and
   the constrained tablewraps sat at 707-860px hard against the left edge, so a
   single column showed four different left margins on a wide screen.

   Single-column content now gets a measure and is centred. Multi-column
   components are excluded by not being listed: they keep the full wrap. */
.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}

/* structured blocks read by scanning rather than by line, so they take the
   wider measure -- a seven-column table at 72ch would scroll needlessly */
.sec > .wrap > .tablewrap,
.sec > .wrap > .faq,
.sec > .wrap > .steps{max-width:var(--measure-wide);margin-inline:auto}

/* an inline max-width in the markup still wins on width; this makes sure such
   a block is centred rather than left-hugging */
.sec > .wrap > [style*="max-width"]{margin-inline:auto}

/* .sec--center already centres its head and its text; keep that intact */
.sec--center > .wrap > .sec__head{margin-inline:auto}

@media(max-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,
  .sec > .wrap > .tablewrap,.sec > .wrap > .faq,.sec > .wrap > .steps{
    max-width:100%}
}


/* ---- 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; }
}

/* The FAQ click target is <summary>, not <details>. Keeping the
   vertical padding on details made the row LOOK ~56px and respond
   as ~30px, under the 44px minimum. Moving it here changes nothing
   visually and makes the whole row tappable. */
.faq summary{padding:18px 0}

/* The footer column link is the thing you tap, and it was 17px tall in
   35px of row pitch -- under the 24px WCAG AA floor. The padding grows the
   hit area to ~33px and the negative margin gives the space straight back,
   so the footer renders identically. inline-block (not block) keeps the
   hover underline the width of the words. See fix_footer_tap.py. */
footer li a{display:inline-block;padding-block:4px;margin-block:-4px}

/* ==== directional chrome (fix_chrome_scroll.py) ==== */
.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*/
/* HOME PAGE ONLY, paint only: radius, shadow, background, transition and one
   pseudo-element motif. Nothing here moves a box.

   Last in the file AND scoped through body:has(.hero), which outranks the
   bare .card / .price selectors earlier in the sheet -- so modern_surface.py
   re-appending its block on the next build cannot take these back.

   Slot: radius 20 card / 14 control, depth "tight contact + wide ambient",
   ribbon "full-width bar", motif family "orbit". */
:root{
  --at-r-card:20px;
  --at-r-ctl:14px;
  --at-depth-1:0 1px 2px rgba(42,22,32,.07), 0 10px 28px rgba(42,22,32,.11);
  --at-depth-2:0 2px 4px rgba(42,22,32,.10), 0 18px 44px rgba(42,22,32,.17);
  --at-depth-cta:0 1px 2px rgba(151,24,58,.24), 0 10px 28px rgba(151,24,58,.30);
  --at-depth-cta-h:0 2px 4px rgba(151,24,58,.28), 0 18px 44px rgba(151,24,58,.38);
  --at-ring:rgba(196,58,93,.16);
  --at-arc:rgba(196,58,93,.62);
}

/* ---- surfaces: one radius, one two-stop depth tinted with this site's ink */
body:has(.hero) .card,
body:has(.hero) .step,
body:has(.hero) .callout,
body:has(.hero) .alert,
body:has(.hero) .faq,
body:has(.hero) .tablewrap,
body:has(.hero) .qa,
body:has(.hero) .final,
body:has(.hero) .shots figure,
body:has(.hero) .band{border-radius:var(--at-r-card);box-shadow:var(--at-depth-1)}

/* ---- controls: 14px, the buying CTA on a gradient, the second button solid */
body:has(.hero) .btn{
  border-radius:var(--at-r-ctl);
  transition:transform .18s var(--ease),box-shadow .22s ease,
             background-color .2s ease,color .2s ease;
}
body:has(.hero) .btn--cta{
  background-image:linear-gradient(135deg,var(--rose) 0%,var(--plum) 56%,var(--plum-dk) 100%);
  box-shadow:var(--at-depth-cta);
}
body:has(.hero) .btn--ghost{
  background-image:none;
  box-shadow:0 1px 2px rgba(42,22,32,.08);
}
body:has(.hero) input,
body:has(.hero) select,
body:has(.hero) textarea{border-radius:var(--at-r-ctl)}

/* a pointer gets a 2px lift and a deeper shadow; a keyboard gets a ring */
@media (hover:hover){
  body:has(.hero) .btn:hover{transform:translateY(-2px)}
  body:has(.hero) .btn--cta:hover{
    background-image:linear-gradient(135deg,var(--rose-dk) 0%,var(--plum) 52%,var(--plum-dk) 100%);
    box-shadow:var(--at-depth-cta-h);
  }
  body:has(.hero) .btn--ghost:hover{box-shadow:var(--at-depth-1)}
}
body:has(.hero) .btn:focus-visible,
body:has(.hero) .menu a:focus-visible,
body:has(.hero) .faq summary:focus-visible{
  outline:3px solid var(--rose-dk);outline-offset:3px;
}

/* ---- the hero plate and its chips ------------------------------------- */
body:has(.hero) .hero__card{
  border-radius:var(--at-r-card);
  box-shadow:0 2px 6px rgba(42,22,32,.10), 0 30px 64px rgba(151,24,58,.20);
}
body:has(.hero) .floaty{
  border-radius:var(--at-r-ctl);
  box-shadow:var(--at-depth-1);
}

/* ---- hero motif: orbit ------------------------------------------------- */
/* A thin ring around the product plate with one bright arc travelling it,
   once every 34 seconds. It lives on a pseudo-element of the media column,
   never on the <img> -- that is the LCP element and is preloaded. It is sized
   580px against a 458px plate so it reads OUTSIDE the card rather than
   disappearing behind an opaque surface, and it sits at z-index:0, under the
   plate (2) and under the existing contact shadow (1). The ring is drawn with
   a radial mask, so the whole disc is transparent except a 2px band.
   Name is unique in this sheet: btFloat, btShadow, cardFloat, glowPulse,
   popIn and riseIn are all taken. */
body:has(.hero) .hero__media::after{
  content:'';
  position:absolute;left:50%;top:50%;
  width:min(116%,580px);aspect-ratio:1/1;
  translate:-50% -50%;
  border-radius:50%;
  background-image:
    conic-gradient(from 0deg,
      rgba(196,58,93,0) 0 56%,
      var(--at-arc) 77%,
      rgba(168,31,87,.10) 88%,
      rgba(196,58,93,0) 100%),
    linear-gradient(var(--at-ring),var(--at-ring));
  -webkit-mask-image:radial-gradient(closest-side,
      rgba(0,0,0,0) calc(100% - 2px), #000 calc(100% - 2px));
  mask-image:radial-gradient(closest-side,
      rgba(0,0,0,0) calc(100% - 2px), #000 calc(100% - 2px));
  animation:atOrbitArc 34s linear infinite;
  pointer-events:none;
  z-index:0;
}
@keyframes atOrbitArc{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* On a phone the media column is the plate and nothing else, so 116% of it
   reaches past the column into the headline above. 330px still reads outside
   a 286px plate and stays inside the 343px column. */
@media (max-width:920px){
  body:has(.hero) .hero__media::after{width:min(100%,330px)}
}

/* ---- pricing: full-width ribbon, a recommended tier in its own colour,
        dashed separators between the feature rows --------------------------
   Every separator is an absolutely positioned pseudo-element sitting in a gap
   that already exists, and the ribbon is absolute as it always was, so the
   three cards keep the exact button offsets they were engineered with. */
body:has(.hero) .price{
  border-radius:var(--at-r-card);
  box-shadow:var(--at-depth-1);
  transition:transform .2s var(--ease),box-shadow .22s ease;
}
body:has(.hero) .price--best{
  background-image:linear-gradient(180deg,#fff 0%,var(--rose-lt) 74%,#ffe9f0 100%);
  border-color:var(--rose-dp);
  box-shadow:0 2px 6px rgba(151,24,58,.16), 0 26px 56px rgba(151,24,58,.26);
}
body:has(.hero) .price__badge{
  left:0;right:0;top:-26px;
  transform:none;
  border-radius:var(--at-r-ctl);
  padding:9px 14px;
  line-height:1.2;
  background-image:linear-gradient(135deg,var(--rose) 0%,var(--plum) 60%,var(--plum-dk) 100%);
  box-shadow:0 1px 2px rgba(151,24,58,.22), 0 10px 24px rgba(151,24,58,.34);
}
body:has(.hero) .price--ordered .price__badge{
  background-image:linear-gradient(135deg,var(--plum) 0%,var(--plum-dk) 100%);
  box-shadow:0 1px 2px rgba(42,22,32,.10), 0 10px 24px rgba(42,22,32,.16);
}
body:has(.hero) .price__each::before,
body:has(.hero) .price__tot::before,
body:has(.hero) .price__ship::before{
  content:'';position:absolute;left:12%;right:12%;height:1px;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,
    var(--rose-line) 0 6px, rgba(0,0,0,0) 6px 13px);
}
body:has(.hero) .price__each::before{top:-8px}
body:has(.hero) .price__tot::before{top:-10px}
body:has(.hero) .price__ship::before{top:-6px}
@media (hover:hover) and (min-width:861px){
  body:has(.hero) .price--basic:hover,
  body:has(.hero) .price--ordered:hover{transform:translateY(-2px);box-shadow:var(--at-depth-2)}
  body:has(.hero) .price--best:hover{transform:translateY(-12px)}
}

/* ---- everything above switches off when less motion is asked for ------- */
@media (prefers-reduced-motion:reduce){
  body:has(.hero) .hero__media::after{animation:none}
  body:has(.hero) .btn,
  body:has(.hero) .price{transition:none}
  body:has(.hero) .btn:hover,
  body:has(.hero) .price--basic:hover,
  body:has(.hero) .price--ordered:hover{transform: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{font-size:16px}
footer h4{font-size:15px}
footer .disc{font-size:16px}
footer .fnap{font-size:16px}
footer .fpay{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 39 box-shadow declaration(s)
   and 4 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 (42,22,32), 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{
  --shadow:0 1px 2px rgba(42,22,32,.06), 0 6px 18px rgba(42,22,32,.07);
  --lift:0 2px 6px rgba(42,22,32,.09), 0 16px 34px rgba(42,22,32,.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. */
.keypoints,
.callout,
.alert,
.faq,
.article figure{border-radius:var(--r)}

/* A surface a reader can click answers the pointer. 2px
   registers without reflowing the row beside it. */
.rel a,
.posts article,
.shots figure,
.posts h3 a{transition:box-shadow .2s ease, transform .2s ease}
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.posts h3 a:hover{box-shadow:var(--lift);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.posts h3 a:hover{transform:none}
}
/* ==== end modern surface ==== */
.review-foot{margin:0;padding:.6rem 0;font-size:.92rem}.review-foot a{font-weight:600}