/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Hubot Sans Fallback";src:local("Arial");font-weight:400;size-adjust:102.26%;ascent-override:106.59%;descent-override:31.29%;line-gap-override:0.00%}
@font-face{font-family:"Hubot Sans Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:104.20%;ascent-override:104.61%;descent-override:30.71%;line-gap-override:0.00%}
@font-face{font-family:"Charis SIL Fallback";src:local("Georgia");font-weight:400;size-adjust:101.40%;ascent-override:117.97%;descent-override:43.34%;line-gap-override:0.00%}
@font-face{font-family:"Charis SIL Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:93.75%;ascent-override:127.61%;descent-override:46.88%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* ==========================================================================
   gelaetide.com  -  the Gelatide retail desk
   --------------------------------------------------------------------------
   Slot (build_set.json row 227): characterful grotesk display over a text
   serif; an offset hero whose product stands across the boundary between two
   grounds; cards carrying one accent rule down their left edge; a duotone
   split with the hero on the accent ramp and the body on neutral paper;
   three-stop depth; motion from the drift family.

   Type     Hubot Sans (variable width and weight) for display, Charis SIL
            for every word read at length. Neither family is held anywhere
            else on the estate at the time of writing.
   Colour   Off the bottle, not the reference. The violet ramp is the
            GELATIDE wordmark (sampled 3c0084 to 3c00d8, lifted to 5b21d6 so
            white type on it clears 8:1). Lavender is the mist printed behind
            the three claim icons. Amber is the bottle itself, lifted until it
            can carry a button; it is the only warm colour on the site and it
            is spent on the buying call to action.
   Motif    bead-drift. Seven soft beads rise past the dropper bottle, each
            on its own clock and its own sideways sway, while a halo behind
            it breathes. Drops that lift: a liquid product for digestion and
            fat metabolism, read as warmth and lightness rising, never as a
            generic fade. Slow on purpose: the drops are taken daily for
            weeks. Keyframes carry the slot prefix gelaet.
   Split    Everything that moves a box, all above-the-fold paint and every
            responsive rule of the hero sit ABOVE the critical marker, which
            is inlined into every page at build time. Below it: paint only.
   Rules    No brace, no custom-property reference and no at-rule keyword is
            written inside a comment in this file. Three checkers read
            comments as code and have failed sites on them (pitfalls 107,
            121, and the critical_hero comment trap). The one exception is
            the hero_sticky.py block just above the critical marker, copied
            verbatim from that tool so it finds itself already applied; it
            names only the nav-height property, which the tokens define.
   ========================================================================== */

:root{
  --ink:#1d1030;
  --ink-2:#3a2e4f;
  --muted:#5b5070;
  --paper:#f6f4fa;
  --card:#ffffff;
  --tint:#efe8fc;
  --tint-2:#e4d9fb;
  --line:#e3dcef;
  --line-2:#cfc3e8;
  --violet:#5b21d6;
  --violet-2:#7a45f0;
  --violet-deep:#2c0d78;
  --night:#1a0b3b;
  --night-2:#261253;
  --lav:#c9b0fc;
  --lav-2:#ebe2ff;
  --amber:#f2a64e;
  --amber-2:#e2782a;
  --amber-ink:#8a4a0f;
  --on-dark:#f5f1ff;
  --on-dark-2:#cdc0f0;
  --good:#1f6a3a;
  --good-bg:#e3f3e6;
  --caution:#8a4a0f;
  --caution-bg:#fdf0de;
  --display:"Hubot Sans","Hubot Sans Fallback","Arial Narrow","Segoe UI",system-ui,sans-serif;
  --text:"Charis SIL","Charis SIL Fallback",Charter,"Bitstream Charter",Georgia,serif;
  --wrap:1200px;
  --measure:720px;
  --radius:18px;
  --radius-sm:12px;
  --radius-lg:28px;
  --shadow:0 1px 2px rgba(29,16,48,.08),0 6px 14px rgba(29,16,48,.07),0 20px 44px rgba(29,16,48,.09);
  --lift:0 2px 4px rgba(29,16,48,.10),0 10px 22px rgba(29,16,48,.12),0 30px 60px rgba(29,16,48,.17);
  --glow:0 1px 2px rgba(138,74,15,.25),0 8px 20px rgba(226,120,42,.35),0 18px 40px rgba(242,166,78,.28);
  --navh:72px;
  --ease:cubic-bezier(.22,.7,.2,1);
}

/* ---- reset and base ---------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{min-width:0}
html{font-size:100%;-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
body{margin:0;overflow-x:clip;background:var(--paper);color:var(--ink-2);font-family:var(--text);font-size:1.0625rem;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video,table{max-width:100%}
img{display:block;height:auto}
a{color:var(--violet);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--violet-deep)}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.3em}
li{margin:0 0 .35em}
b,strong{font-weight:700;color:var(--ink)}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);margin:0 0 .5em;line-height:1.1;font-stretch:108%;letter-spacing:-.01em;overflow-wrap:break-word}
h1{font-size:clamp(2.15rem,1.25rem + 3.1vw,3.6rem);font-weight:800;line-height:1.03}
h2{font-size:clamp(1.7rem,1.15rem + 1.9vw,2.6rem);font-weight:760}
h3{font-size:clamp(1.14rem,1.05rem + .35vw,1.3rem);font-weight:720;line-height:1.22;font-stretch:104%}
h4{font-size:1.05rem;font-weight:700}
figure{margin:0}
table{border-collapse:collapse}
button{font:inherit}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;background:var(--night);color:#fff;border-radius:var(--radius-sm);font-family:var(--display);font-weight:700}
.skip:focus{top:12px;color:#fff}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

/* ---- layout primitives ----------------------------------------------- */
.wrap{width:min(var(--wrap),100% - 32px);margin-inline:auto}
.wrap--narrow{width:min(880px,100% - 32px)}
.measure{max-width:var(--measure)}
.sec{position:relative;padding-block:clamp(56px,3vw + 40px,100px)}
.sec--tight{padding-block:clamp(40px,2vw + 28px,64px)}
.sec__head{max-width:780px;margin:0 0 clamp(26px,2vw + 16px,44px)}
.sec__head--center{margin-inline:auto;text-align:center}
.sec__head h2{margin-bottom:.35em}
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;font-family:var(--display);font-size:.875rem;font-weight:700;font-stretch:92%;letter-spacing:.14em;text-transform:uppercase;line-height:1.3}
.eyebrow::before{content:"";width:22px;height:4px;border-radius:4px;flex:none}
.lead{font-size:clamp(1.08rem,1rem + .3vw,1.2rem);line-height:1.62;margin:0}
.grid{display:grid;gap:clamp(16px,1.4vw + 8px,26px);grid-template-columns:minmax(0,1fr)}
/* two components stacked in one section never touch: every block after the
   first gets the same breathing room (a table's note keeps its own) */
.sec>.wrap>:not(.sec__head)+:not(.tnote):not(.price-note){margin-top:clamp(24px,1.6vw + 14px,40px)}
.stack>*+*{margin-top:18px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:22px}
.cta-row--center{justify-content:center}

/* ---- buttons: gradient primary, solid secondary --------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;max-width:100%;min-height:48px;padding:12px 22px;border:2px solid transparent;border-radius:var(--radius-sm);font-family:var(--display);font-size:1rem;font-weight:720;font-stretch:104%;line-height:1.15;text-decoration:none;text-align:center;cursor:pointer;white-space:nowrap}
@media (max-width:520px){
  .btn--lg{white-space:normal}
}
.btn svg{width:18px;height:18px;flex:none}
.btn--lg{min-height:56px;padding:15px 28px;font-size:1.0625rem}
.btn--block{display:flex;width:100%}
.btn--cta{background:linear-gradient(135deg,#ffc176 0%,var(--amber) 45%,var(--amber-2) 100%);color:var(--ink);box-shadow:var(--glow)}
.btn--solid{background:var(--violet-deep);color:#fff}
.btn--ghost{background:#fff;color:var(--violet-deep);border-color:var(--line-2)}
/* The contrast guard sits at (0,2,0) so no context rule on an anchor can
   repaint the label to its own fill colour (hero.md, trap 1). */
.btn.btn--cta{color:var(--ink)}
.btn.btn--solid{color:#fff}
.btn.btn--ghost{color:var(--violet-deep)}

/* ---- topline --------------------------------------------------------- */
.util{background:var(--night);color:var(--on-dark-2);font-family:var(--display);font-size:.90625rem;font-stretch:96%;line-height:1.3}
.util__row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 18px;min-height:40px;padding-block:8px}
.util__item{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.util__item b{color:#fff;font-weight:700}
.util__item svg{width:15px;height:15px;color:var(--amber)}
.util a{color:#fff;font-weight:700;text-decoration:none;padding-block:13px;margin-block:-13px}
.util a:hover{color:var(--amber)}

/* ---- the masthead ---------------------------------------------------
   Solid white, never translucent: a backdrop filter on a sticky full-width
   header makes it the containing block for the fixed-position drawer and
   traps it in a 110px stub. */
.nav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.nav__row{display:flex;align-items:center;gap:18px;height:var(--navh);flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:11px;flex:none;min-height:44px;text-decoration:none;color:var(--ink)}
.brand svg{width:40px;height:40px;flex:none}
.brand__t{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:var(--display);font-size:1.5rem;font-weight:800;font-stretch:118%;letter-spacing:-.02em;color:var(--ink)}
.brand__name em{font-style:normal;color:var(--violet)}
.brand__sub{margin-top:4px;font-family:var(--display);font-size:.84375rem;font-weight:700;font-stretch:90%;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.menu{display:flex;align-items:center;gap:4px;list-style:none;margin:0 auto;padding:0}
.menu li{margin:0}
.menu a{position:relative;display:flex;align-items:center;min-height:44px;padding:8px 12px;border-radius:10px;font-family:var(--display);font-size:.98rem;font-weight:620;font-stretch:98%;color:var(--ink);text-decoration:none;white-space:nowrap}
.menu a:hover{color:var(--violet);background:var(--tint)}
.menu a[aria-current="page"]{color:var(--violet)}
.menu a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--amber),var(--amber-2))}
.menu__more{display:none}
.nav__end{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
.nav__cta{min-height:44px;padding:10px 20px}
.burger{display:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;width:46px;height:46px;padding:0;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:#fff;cursor:pointer}
.burger span{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink)}
.nav.nav--scrolled{box-shadow:0 1px 2px rgba(29,16,48,.06),0 8px 22px rgba(29,16,48,.08)}

/* ---- THE HOME HERO -------------------------------------------------
   The offset hero. Two grounds: the violet ramp above and neutral paper below.
   The copy column (eyebrow, H1, Quick Answer, buying call) sits on the upper
   ground. The base (ticks, sub line, trust figure, pills, figures) opens the
   lower ground right under the buying call, behind a seam that crests under
   the bottle. The bottle column spans both rows, so the bottle stands across
   the seam. From 981px the bottle is LEFT (5 parts) and the copy RIGHT (7
   parts). Below 981px the copy column dissolves into the grid (display
   contents) and the order becomes eyebrow, H1, bottle, Quick Answer, CTA,
   then the paper base. */
.hero{position:relative;overflow-x:clip;overflow-y:visible;clip-path:inset(0);isolation:isolate;color:var(--on-dark);background:radial-gradient(46% 52% at 22% 30%,rgba(201,176,252,.36) 0%,rgba(201,176,252,0) 70%),radial-gradient(40% 50% at 96% 4%,rgba(242,166,78,.18) 0%,rgba(242,166,78,0) 72%),linear-gradient(200deg,#23085c 0%,#3a12a0 48%,#5b21d6 100%);padding-block:clamp(26px,3vw + 12px,54px) 0}
.hero__ground{position:absolute;left:0;right:0;bottom:-1px;z-index:0;display:block;width:100%;height:clamp(48px,6vw,96px);pointer-events:none}
.hero__ground path{fill:var(--paper)}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}
.hero__copy{display:contents}
.hero__eyebrow{order:1;display:inline-flex;align-items:center;gap:10px;margin:0;font-family:var(--display);font-size:.875rem;font-weight:700;font-stretch:92%;letter-spacing:.16em;text-transform:uppercase;color:var(--lav)}
.hero__eyebrow svg{width:18px;height:18px;color:var(--amber)}
.hero h1{order:2;margin:0;color:#fff;font-size:clamp(2.15rem,1.25rem + 2.6vw,3.3rem);letter-spacing:-.015em;font-stretch:102%}
.hero h1 .hl{background:linear-gradient(95deg,#ffd29b 0%,var(--amber) 55%,#ff9a52 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__media{order:3;position:relative;z-index:2;width:100%;max-width:420px;margin-inline:auto}
.answer{order:4;position:relative;margin:0;padding:20px 22px 18px 26px;border-radius:var(--radius);background:#fff;color:var(--ink-2);box-shadow:0 1px 2px rgba(12,4,30,.20),0 10px 26px rgba(12,4,30,.22),0 30px 60px rgba(12,4,30,.20)}
.answer::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:4px;border-radius:0 4px 4px 0;background:linear-gradient(180deg,var(--violet-2),var(--violet))}
.answer .qtag{display:inline-block;margin:0 0 8px;padding:4px 11px;border-radius:999px;background:var(--tint);color:var(--violet-deep);font-family:var(--display);font-size:.875rem;font-weight:720;letter-spacing:.1em;text-transform:uppercase}
.answer p{margin:0 0 .6em;font-size:1.0625rem;line-height:1.62}
.answer p:last-child{margin-bottom:0}
.answer p.first{color:var(--ink)}
.hero__cta{order:5;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero__cta .btn--solid{background:#fff;color:var(--violet-deep)}
.hero__cta .btn.btn--solid{color:var(--violet-deep)}

/* the lower ground: paper, full bleed, from the seam to the foot of the hero.
   The seam svg is 100vw wide and sits on the base's top edge; both paint
   behind everything in the grid (the grid is the stacking context), so the
   bottle, which is later in the stack, stands in front of them. */
.hero__base{order:6;position:relative;display:flex;flex-direction:column;gap:18px;margin-top:clamp(30px,6vw,46px);padding:clamp(20px,3vw,30px) 0 clamp(44px,5vw,70px);color:var(--ink-2)}
.hero__base::before{content:"";position:absolute;z-index:-1;left:calc(50% - 50vw);width:100vw;top:-1px;bottom:-2px;background:radial-gradient(60% 90% at 70% 0%,rgba(201,176,252,.22) 0%,rgba(201,176,252,0) 70%),var(--paper)}
.hero__seam{position:absolute;z-index:-1;left:calc(50% - 50vw);width:100vw;max-width:none;bottom:100%;height:clamp(34px,7.4vw,118px);display:block;pointer-events:none}
.hero__seam path{fill:var(--paper)}
.ticks{display:grid;grid-template-columns:minmax(0,1fr);gap:10px 18px;list-style:none;margin:0;padding:0}
.ticks li{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--display);font-size:1.0625rem;font-weight:660;font-stretch:98%;line-height:1.3;color:var(--ink)}
.ticks svg{flex:none;width:26px;height:26px;padding:4px;border-radius:50%;background:linear-gradient(135deg,var(--violet-2),var(--violet));color:#fff}
@media (min-width:600px){
  .ticks{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.hero__sub{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0;font-family:var(--display);font-size:1rem;font-stretch:96%;line-height:1.4;color:var(--muted)}
.hero__sub span{white-space:normal}
.hero__trust{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.hero__marks{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0;padding:12px 16px 12px 20px;border-radius:var(--radius-sm);background:#fff;box-shadow:var(--shadow);position:relative}
.hero__marks::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 4px 4px 0;background:linear-gradient(180deg,var(--violet-2),var(--violet))}
.hero__marks figcaption{flex:1 1 100%;margin:0;font-size:.9375rem;line-height:1.45;color:var(--muted)}
.hero__marks figcaption b{color:var(--ink);font-family:var(--display);font-weight:740}
.hero__seals{display:flex;gap:8px;align-items:center}
.hero__seals img{width:46px;height:46px}
.hero__pay{width:200px;height:auto;border-radius:8px}
.hero__rating{display:flex;flex-direction:column;font-family:var(--display);font-size:1rem;line-height:1.3;color:var(--muted);text-decoration:none}
.hero__rating:hover{color:var(--ink)}
.hero__rating b{color:var(--ink);font-size:1.05rem;font-weight:760}
.hero__rating .stars{color:var(--amber-2);letter-spacing:2px}
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.factpills li{margin:0;padding:7px 14px;border-radius:999px;border:1px solid var(--line-2);background:#fff;font-family:var(--display);font-size:1rem;font-stretch:96%;line-height:1.25;color:var(--ink-2)}
.factpills li b{color:var(--violet-deep);font-weight:760}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.figures>div{padding:14px 10px 12px;border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);text-align:center}
.figures b{display:block;font-family:var(--display);font-size:clamp(1.5rem,1.1rem + 1.2vw,2.05rem);font-weight:800;font-stretch:112%;line-height:1;color:var(--violet)}
.figures span{display:block;margin-top:6px;font-family:var(--display);font-size:1rem;font-stretch:94%;line-height:1.25;color:var(--muted)}

/* the stage: the bottle standing free, a halo behind it, a shadow under it.
   width is explicit because hero_sticky.py turns the media column into a
   centred flex box, where a stage holding only an absolutely placed image
   would otherwise shrink to nothing. The chips live INSIDE the stage so they
   keep their place on the bottle wherever the column sits. */
.hero__stage{position:relative;width:100%;aspect-ratio:4/5;isolation:isolate}
.hero__stage img{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover;object-position:88% 50%}
.hero__stage::before{content:"";position:absolute;z-index:0;left:4%;right:4%;top:6%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.55) 0%,rgba(235,226,255,.34) 34%,rgba(201,176,252,.14) 58%,rgba(201,176,252,0) 71%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.hero__stage::after{content:"";position:absolute;z-index:1;left:22%;right:14%;bottom:6.5%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(29,16,48,.34),rgba(29,16,48,0))}
/* phones and tablets: the three chips float as a row of tiles across the
   foot of the stage, overlapping its edge; the column reserves their room */
.hero__media{margin-bottom:68px}
.hero__chips{position:absolute;left:0;right:0;top:calc(100% - 30px);z-index:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;list-style:none;margin:0;padding:0}
.hero__chips li{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin:0;padding:10px 10px 11px;border-radius:14px;background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(12,4,30,.18),0 8px 20px rgba(12,4,30,.18);font-family:var(--display);font-size:1.0625rem;line-height:1.2}
.hero__chips li b{display:block;font-weight:760;font-size:1.0625rem;font-stretch:96%}
.hero__chips li small{display:none;font-size:1rem;color:var(--muted)}
.hero__chips .ico{width:34px;height:34px;margin:0;border-radius:10px}
.hero__chips .ico svg{width:18px;height:18px}

/* the motif: seven beads rising, each on its own clock, a halo breathing.
   The field is sized well beyond the stage (trap 10) and sits between the
   halo and the bottle, so the label is never crossed. Its foot is near the
   seam, so the beads leave the paper and rise into the violet. It reaches
   further to the outer side than to the copy side. Each bead is a column
   exactly as tall as the field, parked below it: translating the column by
   its own full height carries the bead from the floor to the top, in
   transform alone. Its dot sways on a second, unrelated clock. */
.hero__drift{position:absolute;z-index:1;left:-26%;right:-10%;top:-12%;bottom:14%;pointer-events:none}
.hero__drift i{position:absolute;top:100%;height:100%;width:16px;opacity:0;animation:gelaetRise 16s linear infinite;will-change:transform,opacity}
.hero__drift i::before{content:"";position:absolute;left:0;top:0;width:var(--d,10px);height:var(--d,10px);border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0%,var(--c,#ebe2ff) 45%,rgba(201,176,252,0) 72%);box-shadow:0 0 14px 2px var(--g,rgba(201,176,252,.45));animation:gelaetSway 7s ease-in-out infinite alternate}
.hero__drift i:nth-child(1){left:4%;--d:12px;animation-duration:17s;animation-delay:-2s}
.hero__drift i:nth-child(2){left:15%;--d:8px;--c:#ffd29b;--g:rgba(242,166,78,.5);animation-duration:13s;animation-delay:-9s}
.hero__drift i:nth-child(3){left:27%;--d:14px;animation-duration:21s;animation-delay:-14s}
.hero__drift i:nth-child(4){left:70%;--d:9px;--c:#ffd29b;--g:rgba(242,166,78,.5);animation-duration:15s;animation-delay:-5s}
.hero__drift i:nth-child(5){left:80%;--d:13px;animation-duration:19s;animation-delay:-11s}
.hero__drift i:nth-child(6){left:89%;--d:7px;animation-duration:12s;animation-delay:-3s}
.hero__drift i:nth-child(7){left:96%;--d:11px;--c:#ffd29b;--g:rgba(242,166,78,.5);animation-duration:23s;animation-delay:-17s}
.hero__drift i:nth-child(2)::before{animation-duration:5.5s}
.hero__drift i:nth-child(3)::before{animation-duration:9s;animation-delay:-3s}
.hero__drift i:nth-child(5)::before{animation-duration:6.5s;animation-delay:-2s}
.hero__drift i:nth-child(6)::before{animation-duration:8s}
.hero__stage::before{animation:gelaetHalo 9s var(--ease) infinite}
@keyframes gelaetRise{0%{transform:translate3d(0,0,0);opacity:0}12%{opacity:.95}80%{opacity:.75}100%{transform:translate3d(0,-100%,0);opacity:0}}
@keyframes gelaetSway{0%{transform:translate3d(-9px,0,0)}100%{transform:translate3d(9px,0,0)}}
@keyframes gelaetHalo{0%,100%{transform:scale(.94);opacity:.78}50%{transform:scale(1.06);opacity:1}}

/* phones: chips sit in a row under the bottle; small screens trim the strip */
@media (max-width:599px){
  .hero__sub{flex-direction:column;gap:4px}
  .hero__sub>[aria-hidden]{display:none}
  .hero__trust{gap:12px}
  .hero__pay{width:172px}
  .figures{gap:8px}
  .figures>div{padding:12px 6px 10px}
}
@media (min-width:600px) and (max-width:980px){
  .hero__media{max-width:440px}
}
/* from 981px: bottle column left across both rows, copy right on the violet,
   the base spanning the full width with its blocks in the copy column */
@media (min-width:981px){
  .hero{padding-block:clamp(34px,2.4vw + 10px,56px) 0}
  .hero__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,4vw,72px);row-gap:0}
  .hero__copy{display:flex;flex-direction:column;gap:18px;grid-column:2;grid-row:1}
  .hero .hero__copy>*{order:0}
  .hero__media{grid-column:1;grid-row:1/span 2;max-width:470px;margin-inline:0 auto}
  .hero__stage{z-index:1}
  .hero__media{margin-bottom:0}
  .hero__base{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,4vw,72px);row-gap:18px;align-content:start;margin-top:clamp(40px,3.4vw,54px);padding-top:clamp(24px,2.2vw,34px)}
  .hero__base>*{grid-column:2}
  .hero__base>.hero__seam{grid-column:auto}
  .hero__chips{position:absolute;inset:0;top:0;z-index:3;display:block;pointer-events:none}
  .hero__chips li{position:absolute;flex-direction:row;align-items:center;gap:10px;padding:8px 14px 8px 8px;pointer-events:auto;max-width:222px}
  .hero__chips li small{display:block}
  .hero__chips li:nth-child(1){left:max(-6%, calc((100vw - min(1200px, 100vw - 32px)) / -2 + 8px));top:8%}
  .hero__chips li:nth-child(2){right:-7%;top:38%}
  .hero__chips li:nth-child(3){left:max(-4%, calc((100vw - min(1200px, 100vw - 32px)) / -2 + 8px));bottom:9%}
}

/* ---- inner-page opener: the same ramp, compact ---------------------- */
.phero{position:relative;overflow:hidden;isolation:isolate;color:var(--on-dark);background:radial-gradient(46% 70% at 88% 20%,rgba(201,176,252,.34) 0%,rgba(201,176,252,0) 70%),linear-gradient(158deg,#23085c 0%,#3a12a0 52%,#5b21d6 100%);padding-block:clamp(22px,2vw + 12px,40px) clamp(70px,5vw + 36px,104px)}
.phero .hero__ground{height:clamp(40px,5vw,78px)}
.phero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}
.phero .crumbs{margin:0 0 14px;color:var(--on-dark-2)}
.phero .crumbs a{color:#fff}
.phero .hero__eyebrow{margin-bottom:12px}
.phero h1{margin:0 0 18px;color:#fff;font-size:clamp(2rem,1.3rem + 2.4vw,3.05rem)}
.phero .answer{max-width:760px}
.phero__lead{margin:18px 0 0;max-width:720px;font-size:1.1rem;color:var(--on-dark)}
.phero__aside{display:none}
.phero__aside img{width:100%;height:auto}
@media (min-width:981px){
  .phero__grid{grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:56px}
  .phero__grid--solo{grid-template-columns:minmax(0,1fr)}
  .phero__aside{display:block;position:relative;max-width:330px;margin:10px 0 0 auto}
}
.crumbs{font-family:var(--display);font-size:.95rem;font-stretch:96%;line-height:1.4}
.crumbs a{text-decoration:none;font-weight:700}
.crumbs span{opacity:.7;margin:0 6px}

/* ---- section grounds and dividers -------------------------------------- */
.sec--paper{background:var(--paper)}
.sec--white{background:#fff}
.sec--tint{background-color:var(--tint)}
.sec--band{background:var(--night);color:var(--on-dark-2)}
/* The strip is painted in the upper ground and its bottom tenth in the lower
   one: every shape's path covers that tenth completely, so the anti-aliased
   last row of the curve blends into its own colour instead of leaving a
   hairline across the page at fractional heights. */
.dv{position:relative;z-index:1;display:block;height:clamp(34px,4.6vw,76px);margin-block:-1px;line-height:0;background:linear-gradient(180deg,var(--dv-from) 0 90%,var(--dv-to) 90%)}
.dv svg{display:block;width:100%;height:100%}
.dv path{fill:currentColor}
.dv--from-paper{--dv-from:var(--paper)}
.dv--from-white{--dv-from:#fff}
.dv--from-tint{--dv-from:var(--tint)}
.dv--from-band{--dv-from:var(--night)}
.dv--to-paper{--dv-to:var(--paper);color:var(--paper)}
.dv--to-white{--dv-to:#fff;color:#fff}
.dv--to-tint{--dv-to:var(--tint);color:var(--tint)}
.dv--to-band{--dv-to:var(--night);color:var(--night)}

/* ---- cards: one accent rule down the left edge --------------------------- */
.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){
  .g2,.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .g3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.card{position:relative;display:flex;flex-direction:column;padding:24px 22px 22px 28px;border-radius:var(--radius);background:var(--card)}
.card::before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:4px;border-radius:0 4px 4px 0}
.card h3{margin:0 0 .4em}
.card p{margin:0 0 .7em}
.card p:last-child{margin-bottom:0}
.card__foot{margin-top:auto;padding-top:12px;font-family:var(--display);font-size:.9375rem;font-stretch:96%;line-height:1.35}
.ico{display:inline-grid;place-items:center;flex:none;width:50px;height:50px;border-radius:15px;margin-bottom:16px}
.ico svg{width:24px;height:24px}
.card--row{flex-direction:row;gap:16px;align-items:flex-start}
.card--row .ico{margin-bottom:0}
/* icon cards on a phone: icon left, words right, so six cards do not cost
   six screens; from 768px the icon sits on top again */
.card--ico{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:start}
.card--ico>.ico{grid-column:1;grid-row:1/span 4;margin:0}
.card--ico>:not(.ico){grid-column:2}
@media (min-width:768px){
  .card--ico{display:flex}
  .card--ico>.ico{margin:0 0 16px}
}
.tag{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:4px 10px;border-radius:999px;font-family:var(--display);font-size:.875rem;font-weight:720;font-stretch:94%;letter-spacing:.04em;line-height:1.3}

/* ingredient card */
.ingcard{position:relative;display:flex;flex-direction:column;padding:24px 22px 22px 28px;border-radius:var(--radius);background:var(--card)}
.ingcard::before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:4px;border-radius:0 4px 4px 0}
.ingcard__top{display:flex;align-items:flex-start;gap:14px;margin-bottom:12px}
.ingcard__top .ico{margin:0;width:46px;height:46px;border-radius:14px}
.ingcard h3{margin:0 0 2px}
.ing__latin{margin:0;font-style:italic;font-size:.98rem;color:var(--muted)}
.ing__amt{display:block;margin:0 0 12px;padding:9px 12px;border-radius:10px;font-family:var(--display);font-size:.95rem;font-stretch:96%;line-height:1.3}
.ing__amt span{display:block;margin-bottom:2px;font-size:.84375rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ing__role{margin:0 0 12px}
.ing__dose{margin-top:auto;padding-top:10px;font-family:var(--display);font-size:.9375rem;font-stretch:96%;line-height:1.35}

/* stat band */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (min-width:900px){
  .stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
}
.stat{position:relative;padding:22px 18px 20px;border-radius:var(--radius);text-align:left}
.stat__n{display:block;font-family:var(--display);font-size:clamp(2rem,1.3rem + 2.2vw,3.2rem);font-weight:800;font-stretch:118%;line-height:1;letter-spacing:-.02em}
.stat__l{display:block;margin-top:10px;font-family:var(--display);font-size:1rem;font-weight:700;line-height:1.25}
.stat__s{display:block;margin-top:6px;font-size:.95rem;line-height:1.45}

/* numbered steps */
.steps{display:grid;gap:18px;grid-template-columns:minmax(0,1fr);list-style:none;margin:0;padding:0;counter-reset:step}
@media (min-width:768px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1100px){
  .steps--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.step{position:relative;display:flex;flex-direction:column;margin:0;padding:26px 22px 22px 28px;border-radius:var(--radius);background:var(--card);counter-increment:step}
.step::before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:4px;border-radius:0 4px 4px 0}
.step__n{display:inline-grid;place-items:center;width:46px;height:46px;margin-bottom:14px;border-radius:50%;font-family:var(--display);font-size:1.2rem;font-weight:800;font-stretch:110%;line-height:1}
.step__n::before{content:counter(step,decimal-leading-zero)}
.step__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.step__top .step__n{margin-bottom:0}
.step__top .ico{width:42px;height:42px;margin:0;border-radius:12px}
.step__top .ico svg{width:21px;height:21px}
.step h3{margin:0 0 .35em}
.step p{margin:0}

/* vertical timeline */
.timeline{position:relative;list-style:none;margin:0;padding:0 0 0 34px}
.timeline::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:3px;border-radius:3px}
.timeline>li{position:relative;margin:0 0 18px;padding:20px 22px 18px 24px;border-radius:var(--radius);background:var(--card)}
.timeline>li:last-child{margin-bottom:0}
.timeline>li::before{content:"";position:absolute;left:-31px;top:24px;width:17px;height:17px;border-radius:50%}
.tl__when{display:inline-block;margin-bottom:6px;font-family:var(--display);font-size:.9rem;font-weight:760;letter-spacing:.1em;text-transform:uppercase}
.timeline h3{margin:0 0 .3em}
.timeline p{margin:0}

/* image-and-text split: copy starts level with the picture (rule 12 D) */
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(22px,3vw,54px);align-items:start}
.split+.split{margin-top:clamp(36px,4vw,64px)}
.split__img{position:relative;padding:10px;border-radius:var(--radius);background:#fff}
.split__img img{width:100%;height:auto;border-radius:12px}
.split__img figcaption{padding:12px 8px 4px}
.split__copy h3{margin-top:0}
@media (min-width:768px){
  .split{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .split--rev{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
  .split--rev .split__img{order:2}
  .split--rev .split__copy{order:1}
  .split__img{width:100%;max-width:min(100%,var(--imgw,100%));margin-inline:auto}
  .split--band{grid-template-columns:minmax(0,1fr)}
  .split--band .split__img{max-width:100%}
  .split--tall{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
  .split--tall.split--rev{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
}

/* framed figure and figure rows */
.fig{padding:10px;border-radius:var(--radius);background:#fff}
.fig img{width:100%;height:auto;border-radius:12px}
.fig figcaption,.shots figcaption{padding:12px 8px 4px;font-size:.98rem;line-height:1.55}
.fig figcaption b,.shots figcaption b,.split__img figcaption b{display:block;margin-bottom:3px;font-family:var(--display);font-size:1.02rem;font-weight:740;color:var(--ink)}
.fig--narrow{max-width:520px;margin-inline:auto}
.shots{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
@media (min-width:700px){
  .shots{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.shots figure{padding:10px;border-radius:var(--radius);background:#fff}
.shots img{width:100%;height:auto;border-radius:12px}
.shots>figure:last-child:nth-child(odd){grid-column:1/-1;max-width:calc((100% - 18px) / 2);margin-inline:auto}

/* comparison table inside a card */
.tablewrap{overflow-x:auto;border-radius:var(--radius);background:#fff;-webkit-overflow-scrolling:touch}
.dtable{width:100%;min-width:560px;font-size:1rem;line-height:1.5}
.dtable caption{padding:16px 18px 4px;text-align:left;font-family:var(--display);font-size:1rem;font-weight:740;color:var(--ink);caption-side:top}
.dtable th,.dtable td{padding:13px 16px;text-align:left;vertical-align:top}
.dtable th{font-family:var(--display);font-size:.9375rem;font-weight:740;font-stretch:94%;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.dtable td:first-child{font-weight:600}
.tnote{margin:12px 2px 0;font-size:.95rem;line-height:1.55}

/* FAQ accordion */
.faq{padding:6px 20px;border-radius:var(--radius);background:#fff}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{position:relative;display:block;padding:18px 44px 18px 0;list-style:none;cursor:pointer;font-family:var(--display);font-size:1.08rem;font-weight:720;font-stretch:102%;line-height:1.35;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%}
.faq__b{padding:0 6px 18px 0}
.faq__b p{margin:0 0 .7em}
.faq__b p:last-child{margin-bottom:0}
.faq--wide{max-width:980px;margin-inline:auto}

/* callout panels */
.callout{position:relative;display:flex;gap:16px;align-items:flex-start;padding:20px 22px 18px 26px;border-radius:var(--radius)}
.callout::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:4px;border-radius:0 4px 4px 0}
.callout .ico{width:42px;height:42px;margin:0;border-radius:12px}
.callout .ico svg{width:21px;height:21px}
.callout__b{flex:1}
.callout__b>b:first-child{display:block;margin-bottom:4px;font-family:var(--display);font-size:1.05rem;font-weight:740}
.callout__b p{margin:0 0 .6em}
.callout__b p:last-child{margin-bottom:0}
.alert{position:relative;display:flex;gap:16px;align-items:flex-start;padding:20px 22px 18px 26px;border-radius:var(--radius)}

/* prose panel: long reading in a measure, inside a card */
.prose{max-width:var(--measure);padding:clamp(22px,2vw + 12px,38px);border-radius:var(--radius);background:#fff}
.prose--center{margin-inline:auto}
.prose h3{margin:1.3em 0 .45em}
.prose h3:first-child{margin-top:0}
.prose>*:last-child{margin-bottom:0}
.pull{margin:1.4em 0;padding:4px 0 4px 20px;font-family:var(--display);font-size:1.25rem;font-weight:700;font-stretch:104%;line-height:1.35}

/* key points, pros and cons, scorecard */
.keypoints{position:relative;padding:22px 22px 18px 28px;border-radius:var(--radius)}
.keypoints::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:4px;border-radius:0 4px 4px 0}
.keypoints>b{display:block;margin-bottom:8px;font-family:var(--display);font-size:1.05rem;font-weight:760}
.keypoints ul{margin:0;padding-left:1.15em}
.proscons{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
@media (min-width:768px){
  .proscons{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.proscons ul{list-style:none;margin:0;padding:0}
.proscons li{position:relative;margin:0 0 10px;padding-left:34px}
.proscons li::before{position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:1.0625rem;font-weight:800;line-height:1}
.pc--pro li::before{content:"+"}
.pc--con li::before{content:"\2212"}
.facts{padding:6px 0 0;border-radius:var(--radius);background:#fff;overflow:hidden}
.facts__h{padding:14px 20px 10px;font-family:var(--display);font-size:1.05rem;font-weight:760}
.facttab{width:100%;font-size:1rem}
.facttab th,.facttab td{padding:12px 20px;text-align:left}
.facttab td{text-align:right;font-family:var(--display);font-weight:740;white-space:nowrap}

/* pricing: the add-to-cart panel shared by home and pricing */
.pricing{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;max-width:440px;margin-inline:auto;align-items:stretch}
.pricing .tier:nth-child(1){order:3}
.pricing .tier:nth-child(2){order:1}
.pricing .tier:nth-child(3){order:2}
@media (min-width:1024px){
  .pricing{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;gap:24px;padding-top:18px}
  .pricing .tier:nth-child(n){order:0}
  .tier--feature{margin-top:-18px}
}
.tier{position:relative;display:flex;flex-direction:column;padding:26px 22px 22px;border:2px solid transparent;border-radius:var(--radius);background:#fff;text-align:center}
.tier__flag{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);padding:6px 16px;border-radius:999px;font-family:var(--display);font-size:.875rem;font-weight:760;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.tier__head{margin-bottom:12px}
.tier__name{display:block;font-family:var(--display);font-size:1.45rem;font-weight:800;font-stretch:112%;line-height:1.1}
.tier__supply{display:block;margin-top:4px;font-family:var(--display);font-size:.98rem;font-stretch:96%}
.tier__well{position:relative;display:flex;align-items:center;justify-content:center;height:clamp(190px,15vw,224px);margin:0 0 16px;padding:10px;border-radius:var(--radius-sm);overflow:hidden}
.tier__well img{width:auto;height:100%;max-width:100%;object-fit:contain;transform:translateX(var(--shift,0)) scale(var(--zoom,1.24))}
.tier__price{display:flex;align-items:baseline;justify-content:center;gap:6px;font-family:var(--display);line-height:1}
.tier__price b{font-size:clamp(2.4rem,1.8rem + 1.5vw,3.1rem);font-weight:800;font-stretch:112%}
.tier__price span{font-size:1rem;font-weight:700}
.tier__total{margin:10px 0 2px;font-family:var(--display);font-size:1.02rem;font-weight:700}
.tier__was{margin:0;font-size:.95rem;line-height:1.4}
.tier__was s{text-decoration-thickness:1.5px}
.tier__ship{margin:8px 0 12px;font-family:var(--display);font-size:.98rem;font-weight:720}
.tier__rows{list-style:none;margin:0 0 18px;padding:14px 0 0;text-align:left;font-size:1rem;line-height:1.45}
.tier__rows li{position:relative;margin:0 0 8px;padding-left:26px}
.tier__rows li::before{content:"";position:absolute;left:2px;top:6px;width:14px;height:8px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(-45deg)}
.tier>.btn{margin-top:auto}
.tier__pay{display:block;width:176px;max-width:100%;height:auto;margin:14px auto 0}
.tier__note{margin:10px 0 0;font-size:.9375rem;line-height:1.45}
.price-note{max-width:820px;margin:22px auto 0;text-align:center;font-size:.95rem;line-height:1.55}
/* pack cards read as one repeated object -- the image slot and the button
   baseline are set by .tier__well and .tier>.btn above, at source, so the
   shared pack_cards pass has nothing to append on this site. */

/* seal wall */
.seals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (min-width:700px){
  .seals{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1024px){
  .seals{grid-template-columns:repeat(5,minmax(0,1fr))}
}
.seal{display:flex;flex-direction:column;align-items:center;padding:18px 14px 16px;border-radius:var(--radius);background:#fff;text-align:center}
.seal img{width:84px;height:84px;margin-bottom:10px}
.seal b{display:block;font-family:var(--display);font-size:1rem;font-weight:760;line-height:1.25}
.seal p{margin:6px 0 0;font-size:.95rem;line-height:1.45}
.trust{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 22px}
.trust img{width:64px;height:64px}

/* reviews */
.rsum{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:stretch}
@media (min-width:900px){
  .rsum{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
}
.rscore{padding:26px 24px;border-radius:var(--radius);text-align:center}
.rscore__n{display:block;font-family:var(--display);font-size:clamp(3rem,2rem + 3vw,4.4rem);font-weight:800;font-stretch:118%;line-height:1}
.rscore .stars{display:block;margin:8px 0 6px;font-size:1.3rem;letter-spacing:3px}
.rscore p{margin:6px 0 0;font-size:1.0625rem}
.rbars{padding:22px 24px;border-radius:var(--radius);background:#fff}
.rbar{display:grid;grid-template-columns:44px minmax(0,1fr) 48px;gap:12px;align-items:center;margin:0 0 10px;font-family:var(--display);font-size:.98rem}
.rbar__track{height:10px;border-radius:999px;overflow:hidden}
.rbar__fill{display:block;height:100%;border-radius:999px}
.themes{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
@media (min-width:768px){
  .themes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.pulls{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:768px){
  .pulls{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.pullq{margin:0;padding:22px 22px 18px;border-radius:var(--radius);background:#fff}
.pullq p{margin:0 0 8px;font-family:var(--display);font-size:1.3rem;font-weight:740;font-stretch:104%;line-height:1.3}
.pullq cite{font-style:normal;font-size:.95rem}

/* byline, sources, related, final CTA, guarantee panel */
.byline{display:flex;gap:18px;align-items:flex-start;margin-top:26px;padding:22px 24px;border-radius:var(--radius);background:#fff}
.byline__mark{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:16px}
.byline__mark svg{width:30px;height:30px}
.byline b{display:block;margin-bottom:4px;font-family:var(--display);font-size:1.05rem;font-weight:760}
.byline p{margin:0;font-size:1rem;line-height:1.6}
.refs ol{margin:0;padding-left:1.4em;font-size:.98rem;line-height:1.55}
.refs li{margin:0 0 10px;overflow-wrap:anywhere}
.rel{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:768px){
  .rel{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.rel a{position:relative;display:block;padding:20px 20px 18px 26px;border-radius:var(--radius);background:#fff;text-decoration:none}
.rel a::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:4px;border-radius:0 4px 4px 0}
.rel b{display:block;margin-bottom:4px;font-family:var(--display);font-size:1.08rem;font-weight:740;color:var(--ink)}
.rel span{display:block;font-size:.98rem;line-height:1.5;color:var(--muted)}
.final{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:center;padding:clamp(24px,3vw,44px);border-radius:var(--radius-lg);overflow:hidden}
.final__img{max-width:300px;margin-inline:auto}
.final__img img{width:100%;height:auto}
.final h2{margin:0 0 .35em}
.final p{margin:0 0 .8em}
.final__price{font-family:var(--display);font-size:1.05rem;font-weight:720}
.final__sm{margin:14px 0 0;font-size:.95rem}
@media (min-width:860px){
  .final--media{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:40px}
}
.guar{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:center;padding:clamp(22px,3vw,40px);border-radius:var(--radius)}
.guar img{width:150px;height:150px;margin-inline:auto}
@media (min-width:768px){
  .guar{grid-template-columns:170px minmax(0,1fr);gap:32px}
}
.guar__n{display:block;font-family:var(--display);font-size:clamp(2.6rem,1.8rem + 2.6vw,3.8rem);font-weight:800;font-stretch:118%;line-height:1}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips li{display:inline-flex;align-items:center;gap:8px;margin:0;padding:7px 14px;border-radius:999px;font-family:var(--display);font-size:1rem;font-stretch:96%;line-height:1.25}
.note{font-size:.95rem;line-height:1.55}

/* forms (inputs at 16px or more, or iOS zooms the page: pitfall 86) */
.formcard{padding:clamp(20px,2vw + 10px,32px);border-radius:var(--radius);background:#fff}
.form{display:grid;gap:14px}
.form label{display:block;margin-bottom:6px;font-family:var(--display);font-size:1rem;font-weight:700;color:var(--ink)}
.form input,.form select,.form textarea{width:100%;min-height:48px;padding:11px 14px;border:1.5px solid var(--line-2);border-radius:var(--radius-sm);background:#fff;color:var(--ink);font-family:var(--text);font-size:1rem}
.form textarea{min-height:130px}

/* blog */
.article{max-width:var(--measure);margin-inline:auto}
.article h2{margin:1.6em 0 .5em;scroll-margin-top:100px}
.article h3{margin:1.3em 0 .4em}
.article figure{margin:1.6em 0;padding:10px;border-radius:var(--radius);background:#fff}
.article figure img{width:100%;height:auto;border-radius:12px}
.article figure.portrait{max-width:var(--figw,420px);margin-inline:auto}
.article .final{margin:2em 0}
.postmeta{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 22px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-family:var(--display);font-size:.95rem;font-stretch:96%}
.toc{margin:0 0 28px;padding:18px 22px 14px 26px;border-radius:var(--radius);position:relative}
.toc b{display:block;margin-bottom:6px;font-family:var(--display);font-weight:760}
.toc ol{margin:0;padding-left:1.2em}
.posts{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
@media (min-width:640px){
  .posts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  .posts{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.posts article{display:flex;flex-direction:column;padding:10px 10px 18px;border-radius:var(--radius);background:#fff}
.posts article img{width:100%;height:auto;border-radius:12px}
.posts h3{margin:14px 10px 6px}
.posts h3 a{color:var(--ink);text-decoration:none}
.posts p{margin:0 10px}

/* the sticky bottom bar, on desktop and phone (house rule 8) */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:60;transform:translateY(110%);transition:transform .32s var(--ease)}
.buybar.show{transform:none}
.buybar__in{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:66px;padding-block:9px}
.buybar__t{display:flex;flex-direction:column;font-family:var(--display);font-size:.98rem;line-height:1.3}
.buybar__t b{font-size:1.05rem;font-weight:780}
.buybar .btn{flex:none;min-height:46px}
@media (max-width:560px){
  .buybar__t span{display:none}
}

/* footer geometry */
.ft{position:relative}
.ft__wave{display:block;width:100%;height:clamp(40px,5vw,84px)}
.ft__wave path{fill:var(--paper)}
.ft__main{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;padding-block:18px 34px}
@media (min-width:700px){
  .ft__main{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1100px){
  .ft__main{grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:34px}
}
.ft__logo{display:inline-flex;align-items:center;gap:12px;margin-bottom:12px;text-decoration:none}
.ft__logo svg{width:44px;height:44px;flex:none}
.ft__name{font-family:var(--display);font-size:1.75rem;font-weight:800;font-stretch:118%;letter-spacing:-.02em;line-height:1}
.ft__role{font-family:var(--display);font-size:1rem;font-weight:720;letter-spacing:.03em;line-height:1.45}
.ft__brand p{margin:0 0 12px;font-size:1rem;line-height:1.6}
.ft-h{margin:0 0 12px;font-family:var(--display);font-size:.9375rem;font-weight:760;font-stretch:94%;letter-spacing:.12em;text-transform:uppercase}
.ft__col ul{list-style:none;margin:0;padding:0}
.ft__col li{margin:0}
.ft__col a{display:inline-block;padding:6px 0;font-size:1rem;line-height:1.4;text-decoration:none}
.ft__trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 14px;padding-block:22px}
.ft__trust img.ft__seal{width:48px;height:48px}
.ft__trust img.ft__pay{width:230px;height:auto;border-radius:8px}
.ft__disc{padding-block:26px 30px}
.ft__disc p,.ft__disc li{font-size:1rem;line-height:1.6}
.ft__disc ul{margin:10px 0 0;padding-left:1.2em;columns:1}
@media (min-width:900px){
  .ft__disc ul{columns:2;column-gap:40px}
}
.ft__disc li{break-inside:avoid}
.ft__legal{padding-block:18px 96px;font-size:1rem;text-align:center}

/* reveal: set up here so the async sheet never hides content already shown */
.js .reveal{opacity:0;transform:translate3d(0,16px,0);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* nav sheds, never wraps: tighten, then collapse into the burger */
@media (max-width:1300px){
  .menu a{padding:8px 9px;font-size:.95rem}
}
@media (max-width:1179px){
  .burger{display:inline-flex}
  .menu{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:10px 16px 18px;max-height:calc(100vh - var(--navh));overflow-y:auto;background:#fff;border-top:1px solid var(--line);box-shadow:0 18px 40px rgba(29,16,48,.18)}
  .nav--open .menu{display:flex}
  .menu a{min-height:48px;padding:12px 10px;font-size:1.02rem;border-radius:10px}
  .menu a[aria-current="page"]::after{left:10px;right:auto;width:28px;bottom:6px}
  .menu__more{display:block}
}
@media (max-width:760px){
  :root{--navh:64px}
  .brand svg{width:34px;height:34px}
  .brand__name{font-size:1.3rem}
  .util__item--trim{display:none}
}
@media (max-width:520px){
  .util__item--wide{display:none}
}
@media (max-width:430px){
  .nav__cta{display:none}
}
@media (max-width:399px){
  .brand__sub{display:none}
}

/* motion off for anyone who asks: the gradient stays, the movement stops,
   and the media column keeps position relative so the rings keep their
   containing block (pitfall 107) */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero__stage::before,.hero__drift i,.hero__drift i::before{animation:none}
  .hero__drift{display:none}
  .hero__media{position:relative;top:0}
  .js .reveal{opacity:1;transform:none;transition:none}
  .buybar{transition:none}
}

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

/* ==========================================================================
   PAINT. Colour, surface, depth and hover. Nothing below this line moves a
   box, so it can arrive late without shifting anything.
   ========================================================================== */

/* eyebrows and section heads */
.eyebrow{color:var(--violet)}
.eyebrow::before{background:linear-gradient(90deg,var(--amber),var(--amber-2))}
.sec__head .lead,.lead{color:var(--muted)}
.sec--band h2,.sec--band h3,.sec--band b,.sec--band strong{color:#fff}
.sec--band .eyebrow{color:var(--lav)}
.sec--band .lead,.sec--band .sec__head .lead{color:var(--on-dark-2)}
.sec--band a{color:#fff}
.sec--tint{background-image:radial-gradient(30% 40% at 88% 50%,rgba(201,176,252,.5) 0%,rgba(201,176,252,0) 72%),radial-gradient(26% 36% at 8% 55%,rgba(255,210,155,.32) 0%,rgba(255,210,155,0) 72%)}

/* cards and their left rule */
.card,.ingcard,.step,.timeline>li,.faq,.tablewrap,.fig,.shots figure,.split__img,.prose,.seal,.rbars,.pullq,.byline,.rel a,.formcard,.posts article,.tier,.facts,.article figure{box-shadow:var(--shadow)}
.card::before,.ingcard::before,.step::before,.rel a::before,.answer::before{background:linear-gradient(180deg,var(--violet-2),var(--violet))}
.card--amber::before{background:linear-gradient(180deg,var(--amber),var(--amber-2))}
.card h3,.ingcard h3,.step h3{color:var(--ink)}
.card__foot{color:var(--muted)}
.ico{background:linear-gradient(140deg,var(--violet-2) 0%,var(--violet) 55%,var(--violet-deep) 100%);color:#fff;box-shadow:0 2px 4px rgba(44,13,120,.25),0 8px 18px rgba(91,33,214,.28)}
.ico--amber{background:linear-gradient(140deg,#ffc176 0%,var(--amber) 50%,var(--amber-2) 100%);color:var(--ink);box-shadow:0 2px 4px rgba(138,74,15,.22),0 8px 18px rgba(226,120,42,.28)}
.sec--band .card,.sec--band .step,.sec--band .ingcard{background:var(--night-2);box-shadow:0 1px 2px rgba(0,0,0,.3),0 10px 26px rgba(0,0,0,.28);color:var(--on-dark-2)}
.sec--band .card::before,.sec--band .step::before{background:linear-gradient(180deg,var(--amber),var(--amber-2))}
.sec--band .card p,.sec--band .step p{color:var(--on-dark-2)}

/* hover: 2 to 3px of lift and the wider shadow, on anything clickable */
.card,.ingcard,.step,.fig,.shots figure,.seal,.rel a,.posts article,.tier,.pullq,.split__img{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.card:hover,.ingcard:hover,.step:hover,.fig:hover,.shots figure:hover,.seal:hover,.rel a:hover,.posts article:hover,.tier:hover,.split__img:hover{transform:translateY(-3px);box-shadow:var(--lift)}
.card::before,.ingcard::before,.rel a::before{transition:transform .25s var(--ease)}
.card:hover::before,.ingcard:hover::before,.rel a:hover::before{transform:scaleY(1.12)}
.btn{transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s ease,filter .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn--cta:hover{box-shadow:0 2px 4px rgba(138,74,15,.3),0 12px 26px rgba(226,120,42,.42),0 24px 50px rgba(242,166,78,.34);filter:saturate(1.08)}
.btn--solid:hover{background:var(--violet)}
.btn.btn--solid:hover{color:#fff}
.hero__cta .btn--solid:hover{background:var(--lav-2)}
.hero__cta .btn.btn--solid:hover{color:var(--violet-deep)}
.btn--ghost:hover{border-color:var(--violet);background:var(--tint)}
.hero__chips li{transition:transform .25s var(--ease)}
.hero__chips li:hover{transform:translateY(-2px)}

/* tags, by what each ingredient is */
.tag--leaf{background:#e3f3e6;color:#1f6a3a}
.tag--stim{background:#fdebd6;color:#8a4a0f}
.tag--seed{background:#f3ecd9;color:#6b5412}
.tag--root{background:#f7e3ee;color:#8c2458}
.tag--heat{background:#fde3dc;color:#a3321b}
.tag--aroma{background:#fbe4f0;color:#9b1f5c}
.tag--violet{background:var(--tint);color:var(--violet-deep)}
.ing__latin{color:var(--muted)}
.ing__amt{background:var(--paper);color:var(--ink-2)}
.ing__amt span{color:var(--muted)}
.ing__dose{border-top:1px dashed var(--line-2);color:var(--muted)}

/* stat band */
.stat{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.stat__n{color:var(--amber)}
.stat__l{color:#fff}
.stat__s{color:var(--on-dark-2)}
.sec--paper .stat,.sec--white .stat,.sec--tint .stat{background:#fff;box-shadow:var(--shadow)}
.sec--paper .stat__n,.sec--white .stat__n,.sec--tint .stat__n{color:var(--violet)}
.sec--paper .stat__l,.sec--white .stat__l,.sec--tint .stat__l{color:var(--ink)}
.sec--paper .stat__s,.sec--white .stat__s,.sec--tint .stat__s{color:var(--muted)}

/* steps and timeline */
.step__n{background:linear-gradient(140deg,var(--violet-2),var(--violet-deep));color:#fff;box-shadow:0 6px 16px rgba(91,33,214,.3)}
.sec--band .step__n{background:linear-gradient(140deg,#ffc176,var(--amber-2));color:var(--ink)}
.timeline::before{background:linear-gradient(180deg,var(--violet-2),var(--amber))}
.timeline>li::before{background:#fff;box-shadow:0 0 0 4px var(--violet),0 4px 10px rgba(91,33,214,.3)}
.tl__when{color:var(--violet)}

/* figures */
.fig figcaption,.shots figcaption,.split__img figcaption{color:var(--muted)}

/* table */
.dtable caption{color:var(--ink)}
.dtable th{background:var(--tint);color:var(--violet-deep)}
.dtable td{border-top:1px solid var(--line);color:var(--ink-2)}
.dtable tbody tr:nth-child(even) td{background:#fbfaff}
.dtable td.is-hl,.dtable th.is-hl,.dtable tbody tr td.is-hl{background:#fff6ea}
.tnote{color:var(--muted)}

/* FAQ */
.faq summary:hover{color:var(--violet)}
.faq summary::after{background:var(--tint) no-repeat center/12px 12px;background-image:linear-gradient(var(--violet),var(--violet)),linear-gradient(var(--violet),var(--violet));background-size:12px 2px,2px 12px;transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq__b{color:var(--ink-2)}

/* callouts */
.callout,.alert{background:#fff;box-shadow:var(--shadow)}
.callout::before{background:linear-gradient(180deg,var(--violet-2),var(--violet))}
.callout--note{background:var(--lav-2);box-shadow:none}
.callout--good{background:var(--good-bg);box-shadow:none}
.callout--good::before{background:var(--good)}
.callout--warn,.alert{background:var(--caution-bg);box-shadow:none}
.callout--warn::before{background:linear-gradient(180deg,var(--amber),var(--amber-2))}
.callout--good .ico{background:linear-gradient(140deg,#3fa36a,var(--good))}
.callout__b>b:first-child{color:var(--ink)}

/* prose, pull quotes, key points, pros and cons */
.pull{border-left:4px solid var(--amber);color:var(--violet-deep)}
.keypoints{background:var(--lav-2)}
.keypoints::before{background:linear-gradient(180deg,var(--amber),var(--amber-2))}
.keypoints>b{color:var(--violet-deep)}
.pc--pro li::before{background:var(--good-bg);color:var(--good)}
.pc--con li::before{background:var(--caution-bg);color:var(--caution)}
.facts__h{color:var(--ink);border-bottom:1px solid var(--line)}
.facttab th,.facttab td{border-top:1px solid var(--line)}
.facttab td{color:var(--violet)}

/* pricing paint */
.tier__flag{background:linear-gradient(135deg,var(--violet-2),var(--violet-deep));color:#fff;box-shadow:0 6px 16px rgba(91,33,214,.35)}
.tier--feature{border-color:var(--violet);box-shadow:0 2px 4px rgba(91,33,214,.12),0 14px 30px rgba(91,33,214,.18),0 36px 70px rgba(29,16,48,.18)}
.tier__name{color:var(--ink)}
.tier__supply{color:var(--muted)}
.tier__well{background:radial-gradient(circle at 50% 42%,#ffffff 0%,var(--lav-2) 62%,var(--tint-2) 100%)}
.tier__price b{color:var(--ink)}
.tier__price span{color:var(--muted)}
.tier__total{color:var(--ink)}
.tier__was{color:var(--muted)}
.tier__ship{color:var(--good)}
.tier__ship--paid{color:var(--muted)}
.tier__rows{border-top:1px solid var(--line);color:var(--ink-2)}
.tier__rows li::before{color:var(--violet)}
.tier__note,.price-note{color:var(--muted)}

/* seals, trust, reviews */
.seal b{color:var(--ink)}
.seal p{color:var(--muted)}
.rscore{background:linear-gradient(160deg,var(--violet-deep),var(--violet));color:var(--on-dark-2);box-shadow:var(--lift)}
.rscore__n{color:#fff}
.rscore .stars{color:var(--amber)}
.rbar{color:var(--ink)}
.rbar__track{background:var(--tint)}
.rbar__fill{background:linear-gradient(90deg,var(--violet-2),var(--violet))}
.pullq p{color:var(--violet-deep)}
.pullq cite{color:var(--muted)}

/* byline, related, final, guarantee */
.byline__mark{background:linear-gradient(140deg,var(--violet-2),var(--violet-deep));color:#fff}
.byline b{color:var(--ink)}
.refs li{color:var(--ink-2)}
.refs a{color:var(--violet);overflow-wrap:anywhere}
.final{background:linear-gradient(150deg,var(--night) 0%,var(--violet-deep) 100%);color:var(--on-dark-2);box-shadow:var(--lift)}
.final h2{color:#fff}
.final__price{color:var(--amber)}
.final a:not(.btn){color:#fff}
.guar{background:#fff;box-shadow:var(--shadow)}
.guar__n{color:var(--violet)}
.chips li{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.note{color:var(--muted)}

/* forms */
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--violet);outline:3px solid var(--lav);outline-offset:0}

/* blog */
.postmeta{color:var(--muted)}
.toc{background:var(--lav-2)}
.toc b{color:var(--violet-deep)}

/* bottom bar */
.buybar{background:var(--night);color:var(--on-dark-2);box-shadow:0 -1px 0 rgba(255,255,255,.08),0 -10px 30px rgba(12,4,30,.3)}
.buybar__t b{color:#fff}

/* footer paint: running text at 16px and column heads at 15px (rule 10) */
.ft{background:var(--night);color:var(--on-dark-2)}
.ft__name{color:#fff}
.ft__name em{font-style:normal;color:var(--lav)}
.ft__role{color:var(--amber)}
.ft-h{color:var(--amber)}
.ft__col a{color:var(--on-dark)}
.ft__col a:hover{color:var(--amber)}
.ft__brand a{color:#fff}
.ft__trust{border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}
.ft__disc b{color:#fff}
.ft__legal{color:var(--on-dark-2);border-top:1px solid rgba(255,255,255,.1)}
.ft__legal a{color:#fff}

@media (prefers-reduced-motion:reduce){
  .card:hover,.ingcard:hover,.step:hover,.fig:hover,.shots figure:hover,.seal:hover,.rel a:hover,.posts article:hover,.tier:hover,.split__img:hover,.btn:hover,.hero__chips li:hover{transform:none}
  .card:hover::before,.ingcard:hover::before,.rel a:hover::before{transform:none}
}

/* ==== 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(110%)}
/* ==== end directional chrome ==== */

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

/* ==== fix_layout_breaks.py ==== */
/* A figure alone on its row, and components whose own
   background fights the band they sit in. Appended: each
   rule below is correct in isolation and only their
   combination fails, so the originals stay as written. */
.sec--band .btn--cta,.sec--band .btn--cta p,.sec--band .btn--cta li,.sec--band .btn--cta td,.sec--band .btn--cta th,.sec--band .btn--cta caption{color:var(--ink)}
.sec--band .card,.sec--band .card p,.sec--band .card li,.sec--band .card td,.sec--band .card th,.sec--band .card caption{color:var(--ink)}
.sec--band .step,.sec--band .step p,.sec--band .step li,.sec--band .step td,.sec--band .step th,.sec--band .step caption{color:var(--ink)}
.sec--band .ico--amber,.sec--band .ico--amber p,.sec--band .ico--amber li,.sec--band .ico--amber td,.sec--band .ico--amber th,.sec--band .ico--amber caption{color:var(--ink)}
/* ==== end fix_layout_breaks.py ==== */

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

/* ==== gelaetide figures pass ==== */
.final__img{margin:0;padding:10px 10px 12px;border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);text-align:center}
.final__img figcaption{margin:8px 4px 0;font-size:.9375rem;line-height:1.45;color:var(--muted)}
.final__img figcaption b{display:block;font-family:var(--display);font-size:1rem;font-weight:740;color:var(--ink)}
.guar__fig{margin:0;text-align:center}
.guar__fig figcaption{max-width:210px;margin:10px auto 0;font-size:.9375rem;line-height:1.45;color:var(--ink-2)}
.guar__fig figcaption b{display:block;font-family:var(--display);font-size:1rem;font-weight:740;color:var(--ink)}
@media (min-width:768px){
  .guar{grid-template-columns:210px minmax(0,1fr)}
}
.payfig{position:relative;max-width:560px;margin:26px auto 0;padding:16px 20px 14px 26px;border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);text-align:center}
.payfig::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:4px;border-radius:0 4px 4px 0;background:linear-gradient(180deg,var(--amber),var(--amber-2))}
.payfig__img{display:block;width:300px;max-width:100%;height:auto;margin:0 auto}
.payfig figcaption{margin:10px 0 0;font-size:.9375rem;line-height:1.5;color:var(--ink-2)}
.payfig figcaption b{display:block;font-family:var(--display);font-size:1rem;font-weight:740;color:var(--ink)}
.dtable--kv,.dtable--refs{min-width:0}
.dtable--kv th[scope=row],.dtable--refs th[scope=row]{width:30%;min-width:130px;white-space:normal;text-transform:none;letter-spacing:0;font-size:1rem;color:var(--ink)}
.dtable--refs td{overflow-wrap:anywhere}
.dtable--refs td:first-child{width:2.5em;white-space:nowrap;overflow-wrap:normal;font-family:var(--display);font-weight:760;color:var(--violet)}
.dtable--refs td:last-child{font-size:.98rem;line-height:1.55;font-weight:400}
/* ==== end gelaetide figures pass ==== */