/* soddatide.com — SodaTide, U.S. authorized merchant desk.
   Design slot: row 283, batch11_assignments.py. All six levers are assigned
   there and all six are built here:

     Type    Sansita (display) / Shanti (text) — a flared, high-contrast
             display face over a humanist text face. Nothing else on the
             estate pairs these two.
     Layout  the hero puts the PRODUCT on the LEFT and the copy on the right,
             reversing the house default; every section below is a two-column
             band with its heading block in the left column and its content
             in the right.
     Cards   filled, borderless, 18px radius.
     Ground  deep aubergine panels on oat paper.
     Depth   a hairline 1px shadow and nothing else. No blur, no lift.
     Motion  the tide-crest hero motif (hero_motifs.py) plus a short rise.

   The colour comes off the bottle: a black cylinder with a white label, a
   violet band top and bottom, and a violet-magenta bloom at the centre. The
   oat paper is the one thing that is not on the label — it is there because
   an aubergine panel needs a warm ground to sit on, and a grey one would put
   this site next to every other purple supplement page.

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

/* ---- tokens */
:root{
  --ink:#241726;            /* body text */
  --ink-2:#55435a;          /* secondary */
  --ink-3:#77677c;          /* captions, meta */
  --aubergine:#3b1146;      /* the label's band, deepened for panels */
  --aubergine-d:#270a2f;    /* the deepest panel */
  --aubergine-2:#4e1a5d;
  --violet:#8d2bbf;         /* the label's bloom */
  --violet-d:#701f9a;
  --violet-l:#b25fdc;
  --wash:#f0e4f6;           /* violet wash */
  --paper:#f5efe2;          /* the page: oat */
  --panel:#fffaf0;          /* card fill: a warmer white than the page */
  --tint:#ece2d0;           /* a shade of the oat, for alternating bands */
  --line:#ddd0ba;
  --line-2:#c6b699;
  --on-dark:#f6ecf9;
  --on-dark-2:#d6bede;
  --good:#1f6b48;
  --warn:#8a5410;
  --wrap:1180px;
  --measure:720px;
  --radius:18px;            /* the slot's card radius, used everywhere */
  --radius-sm:10px;
  --hair:0 1px 0 rgba(59,17,70,.09);          /* the whole depth language */
  --hair-2:0 1px 0 rgba(59,17,70,.16);
  --navh:118px;
  --ease:cubic-bezier(.32,.72,.28,1);
  --display:"Sansita",Georgia,"Times New Roman",serif;
  --text:"Shanti",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---- base */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  overflow-x:clip;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:17.5px;line-height:1.76;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--violet-d);text-underline-offset:3px}
a:hover{color:var(--aubergine)}
h1,h2,h3,h4{font-family:var(--display);color:var(--aubergine);font-weight:700;line-height:1.14;margin:0 0 .5em}
h1{font-size:clamp(2.05rem,1.3rem + 2.3vw,3.2rem);letter-spacing:-.012em}
h2{font-size:clamp(1.55rem,1.2rem + 1.25vw,2.25rem);letter-spacing:-.008em}
h3{font-size:1.22rem;font-weight:700}
h4{font-size:1.05rem;font-weight:700}
p,li{font-size:1.0625rem}
p{margin:0 0 1.05em}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.skip{position:absolute;left:-9999px;top:0;background:var(--aubergine);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--violet);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it.
   15px is house rule 10's floor for an eyebrow and this sets it there. */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--text);font-size:15px;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--violet-d);
  margin:0 0 12px;
}
.eyebrow::before{
  content:"";width:22px;height:2px;background:var(--violet);border-radius:2px;
}

/* ---- buttons: a soft capsule, echoing the capsule the product is */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--text);font-weight:700;font-size:1.02rem;line-height:1.2;
  padding:15px 26px;border-radius:999px;border:0;cursor:pointer;
  text-decoration:none;text-align:center;
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.btn--violet{background:var(--violet);color:#fff;box-shadow:var(--hair-2)}
.btn--violet:hover{background:var(--violet-d);color:#fff;transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--aubergine);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--tint);color:var(--aubergine)}
.btn--lg{padding:17px 32px;font-size:1.06rem}
.btn--wide{width:100%}

/* ---- the topline strip */
.util{background:var(--aubergine-d);color:var(--on-dark)}
.util__row{
  display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;
  padding-block:9px;font-size:15px;line-height:1.5;
}
.util__item{display:inline-flex;align-items:center;gap:7px;color:var(--on-dark-2)}
.util__item b{color:#fff;font-weight:700}
.util__item a{color:#fff;text-decoration:none}
.util__item a:hover{color:var(--violet-l)}

/* ---- the header: the name in tracked capitals, a thin rule, then the links.
   That stacking is the slot, and it is why the brand row and the menu row are
   two separate bands rather than one flex line. */
.nav{
  position:sticky;top:0;z-index:120;background:var(--paper);
  box-shadow:var(--hair-2);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
.nav__top{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding-block:14px 12px;
}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--aubergine)}
.brand svg{width:40px;height:40px;flex:none}
.bw{display:flex;flex-direction:column;line-height:1.05}
.bw b{
  font-family:var(--display);font-size:1.34rem;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;color:var(--aubergine);
}
.bw b em{font-style:normal;color:var(--violet)}
.bw small{
  font-size:13.5px;letter-spacing:.06em;color:var(--ink-3);
  margin-top:3px;text-transform:none;font-weight:400;
}
.nav__rail{display:flex;align-items:center;gap:16px}
.nav__price{display:none;text-align:right;line-height:1.25}
.nav__price b{display:block;font-family:var(--display);font-size:1.12rem;color:var(--aubergine)}
.nav__price span{font-size:14px;color:var(--ink-3)}
.nav__buy{padding:12px 22px;font-size:.98rem}

/* the thin rule the slot asks for, drawn as the strip's own top edge */
.nav__strip{border-top:1px solid var(--line)}
.menu{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:2px 22px;align-items:center;
}
.menu a{
  display:inline-block;padding:11px 0;text-decoration:none;color:var(--ink-2);
  font-size:15.5px;font-weight:700;letter-spacing:.02em;
  border-bottom:2px solid transparent;
}
.menu a:hover{color:var(--violet-d);border-bottom-color:var(--violet-l)}
.menu a[aria-current="page"]{color:var(--aubergine);border-bottom-color:var(--violet)}
.menu__more a{font-weight:400;color:var(--ink-3)}

.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:44px;padding:0 11px;background:transparent;border:0;cursor:pointer;
}
.burger span{display:block;height:2px;border-radius:2px;background:var(--aubergine)}

/* ---- hero: the PRODUCT on the LEFT, the copy on the right.
   The DOM keeps the copy first so the H1 is the first thing in the reading
   order and the first thing a phone paints; `order` moves the media column
   left at desktop widths. Reversing the DOM instead would bury the H1 below
   a 500px image on every phone, which is pitfall 86 with extra steps. */
.hero{position:relative;overflow-x:clip;overflow-y:visible;padding:44px 0 56px;background:var(--paper)}
.hero__grid{
  display:grid;grid-template-columns:1.02fr 1.18fr;gap:46px;align-items:center;
}
.hero__copy{order:2;min-width:0}
.hero__media{order:1;min-width:0;position:relative}
.hero h1{margin:0 0 18px}
.answer{
  background:var(--panel);border-radius:var(--radius);padding:20px 24px;
  box-shadow:var(--hair);margin:0 0 20px;
}
.answer p{margin:0 0 .7em;font-size:1.09rem;line-height:1.66}
.answer p:last-child{margin-bottom:0}
.answer b{color:var(--aubergine)}
.hero__road{color:var(--ink-2);margin:0 0 22px;font-size:1.02rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 18px}
.hero__sub{
  display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 18px;
  font-size:15.5px;color:var(--ink-2);
}
.hero__sub span{display:inline-flex;align-items:center;gap:8px}
.hero__sub span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--violet)}
.factpills{
  list-style:none;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:9px;
}
.factpills li{
  background:var(--tint);border-radius:999px;padding:8px 16px;
  font-size:14.5px;color:var(--ink-2);
}
.factpills b{color:var(--aubergine);font-weight:700}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0}
.figures>div{background:var(--panel);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--hair)}
.figures b{display:block;font-family:var(--display);font-size:1.5rem;color:var(--violet-d);line-height:1.1}
.figures span{display:block;font-size:14px;color:var(--ink-3);margin-top:5px;line-height:1.45}

.hero__card{
  position:relative;z-index:2;background:var(--panel);border-radius:26px;
  padding:26px 26px 20px;box-shadow:var(--hair-2);
}
.hero__card img{position:relative;z-index:3;margin-inline:auto;width:100%;height:auto}
.hero__cap{
  margin:14px 0 0;text-align:center;font-size:14.5px;color:var(--ink-3);
}

/* ---- sections: two columns, the heading block beside the content.
   This is the slot's layout lever and it runs the whole page. */
.sec{padding:56px 0;position:relative}
.sec>.wrap{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:34px 48px;align-items:start}
.sec__head{position:sticky;top:calc(var(--navh) + 18px)}
.sec__head h2{margin:0 0 .45em}
.sec__head p{color:var(--ink-2);font-size:1rem;margin:0}
.sec>.wrap>:not(.sec__head){grid-column:2}
.sec--center>.wrap{grid-template-columns:minmax(0,1fr)}
.sec--center>.wrap>:not(.sec__head){grid-column:1}
.sec--center .sec__head{position:static;text-align:center;max-width:var(--measure);margin-inline:auto}
.sec--center .eyebrow{justify-content:center}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--aubergine);color:var(--on-dark)}
.sec--dark h2,.sec--dark h3,.sec--dark h4{color:#fff}
.sec--dark .eyebrow{color:var(--violet-l)}
.sec--dark .eyebrow::before{background:var(--violet-l)}
.sec--dark p,.sec--dark li{color:var(--on-dark-2)}
.sec--dark .sec__head p{color:var(--on-dark-2)}
.sec--dark a{color:#fff}
.sec--deep{background:var(--aubergine-d);color:var(--on-dark)}
.sec--deep h2,.sec--deep h3{color:#fff}
.sec--deep .eyebrow{color:var(--violet-l)}
.sec--deep .eyebrow::before{background:var(--violet-l)}
.sec--deep p,.sec--deep li{color:var(--on-dark-2)}
.sec--deep .sec__head p{color:var(--on-dark-2)}
.sec--deep a{color:#fff}

/* ---- page heads */
.phead{padding:38px 0 26px;background:var(--paper)}
.phead .answer{max-width:760px}
.crumbs{font-size:14.5px;color:var(--ink-3);margin:0 0 14px}
.crumbs a{color:var(--ink-2)}
.lead{font-size:1.14rem;color:var(--ink-2);max-width:var(--measure);margin:0}

/* ---- cards: FILLED, no border, 18px radius. The slot's card lever. */
.card,.step,.ingcard,.callout,.alert,.keypoints,.rel a,.posts article{
  background:var(--panel);border:0;border-radius:var(--radius);
  box-shadow:var(--hair);
}
.card{padding:24px 26px}
.card h3{margin:0 0 .5em}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps{display:grid;gap:18px}
.step{padding:22px 24px;position:relative;counter-increment:st}
.step h3{margin:0 0 .45em;display:flex;align-items:baseline;gap:11px}
.step h3::before{
  content:counter(st);font-family:var(--display);font-size:.95rem;color:#fff;
  background:var(--violet);border-radius:999px;min-width:26px;height:26px;
  display:inline-flex;align-items:center;justify-content:center;flex:none;
}
.steps{counter-reset:st}
.step p:last-child{margin-bottom:0}

.callout{padding:20px 24px;margin:0 0 20px;background:var(--wash)}
.callout b{display:block;font-family:var(--display);color:var(--aubergine);margin-bottom:.35em;font-size:1.1rem}
.callout p:last-child{margin-bottom:0}
.alert{padding:20px 24px;margin:0 0 20px;background:#fbf1e2}
.alert b{display:block;font-family:var(--display);color:var(--warn);margin-bottom:.35em;font-size:1.1rem}
.alert p:last-child{margin-bottom:0}
.keypoints{padding:20px 24px;margin:0 0 20px;background:var(--tint)}
.keypoints b{display:block;font-family:var(--display);color:var(--aubergine);margin-bottom:.4em;font-size:1.1rem}
.keypoints ul{margin:0;padding-left:20px}

.ticks{list-style:none;margin:0 0 1.05em;padding:0}
.ticks li{position:relative;padding-left:28px;margin-bottom:.55em}
.ticks li::before{
  content:"";position:absolute;left:4px;top:.62em;width:11px;height:6px;
  border-left:2px solid var(--violet);border-bottom:2px solid var(--violet);
  transform:rotate(-45deg);
}
.sec--dark .ticks li::before,.sec--deep .ticks li::before{border-color:var(--violet-l)}

.pullquote{
  margin:0 0 20px;padding:4px 0 4px 22px;border-left:3px solid var(--violet);
  font-family:var(--display);font-size:1.24rem;line-height:1.5;color:var(--aubergine);
}
.pullquote cite{display:block;font-family:var(--text);font-size:15px;font-style:normal;color:var(--ink-3);margin-top:.6em}

/* ---- tables */
.tablewrap{overflow-x:auto;background:var(--panel);border-radius:var(--radius);box-shadow:var(--hair);margin:0 0 14px}
table{border-collapse:collapse;width:100%;min-width:520px}
th,td{padding:13px 16px;text-align:left;vertical-align:top;font-size:16px;line-height:1.55}
thead th{
  background:var(--aubergine);color:#fff;font-family:var(--text);font-weight:700;
  font-size:15px;letter-spacing:.05em;text-transform:uppercase;
}
tbody tr+tr td{border-top:1px solid var(--line)}
.tnote{font-size:15px;color:var(--ink-3);margin:0 0 1.05em}

/* ---- the versus grid */
.versus{display:grid;grid-template-columns:1.1fr 1fr 1.6fr;gap:1px;background:var(--line);
  border-radius:var(--radius);overflow:hidden;margin:0 0 20px}
.versus>div{background:var(--panel);padding:14px 16px;font-size:16px;line-height:1.55}
.versus__h{background:var(--aubergine)!important;color:#fff;font-weight:700;font-size:15px;
  letter-spacing:.05em;text-transform:uppercase}

/* ---- ingredient cards */
.inglist{display:grid;gap:20px}
.ingcard{padding:24px 26px}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;margin-bottom:.7em}
.ingcard__top h3{margin:0}
.ing__latin{font-style:italic;color:var(--ink-3);font-size:15px}
.ing__dose{
  margin-left:auto;background:var(--wash);color:var(--violet-d);border-radius:999px;
  padding:5px 14px;font-size:14.5px;font-weight:700;
}
.ingcard p:last-child{margin-bottom:0}

/* ---- pack cards */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 16px}
.card--pack{position:relative;padding:0;overflow:hidden;display:flex;flex-direction:column}
.card--pack.featured{box-shadow:0 1px 0 rgba(59,17,70,.16),inset 0 0 0 2px var(--violet)}
.pack__flag{
  position:absolute;top:14px;right:14px;z-index:2;background:var(--violet);color:#fff;
  border-radius:999px;padding:5px 13px;font-size:13.5px;font-weight:700;
}
.pack__head{background:var(--tint);padding:18px 22px}
.pack__head b{display:block;font-family:var(--display);font-size:1.3rem;color:var(--aubergine)}
.pack__head span{font-size:14.5px;color:var(--ink-3)}
.pack__body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.pack__body img{margin:0 auto 14px}
.pack__per{font-family:var(--display);font-size:2.6rem;color:var(--violet-d);margin:0;line-height:1}
.pack__per sup{font-size:1.1rem;top:-.8em;position:relative}
.pack__unit{display:block;font-size:14.5px;color:var(--ink-3);margin-bottom:10px}
.pack__tot{margin:0 0 12px;font-size:1rem}
.pack__tot b{color:var(--aubergine)}
.pack__was{color:var(--ink-3);text-decoration:line-through;margin-left:7px}
.pack__perks{list-style:none;margin:0 0 18px;padding:0}
.pack__perks li{position:relative;padding-left:22px;font-size:15.5px;margin-bottom:.4em;color:var(--ink-2)}
.pack__perks li::before{content:"";position:absolute;left:2px;top:.6em;width:9px;height:5px;
  border-left:2px solid var(--violet);border-bottom:2px solid var(--violet);transform:rotate(-45deg)}
.pack__marks{margin:10px 0 0;font-size:13.5px;color:var(--ink-3);text-align:center}
.buy__note{font-size:15px;color:var(--ink-3);margin:0}

/* ---- meters */
.meter{display:grid;gap:10px;margin:0 0 18px}
.meter__row{display:grid;grid-template-columns:76px 1fr 48px;gap:12px;align-items:center;font-size:15.5px}
.meter__bar{display:block;height:10px;border-radius:999px;background:var(--tint);overflow:hidden}
.meter__bar i{display:block;height:100%;background:var(--violet);border-radius:999px}
.sec--dark .meter__bar,.sec--deep .meter__bar{background:rgba(255,255,255,.16)}

/* ---- stats band */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.stats>div{text-align:left}
.stats b{display:block;font-family:var(--display);font-size:2.2rem;color:#fff;line-height:1.05}
.stats span{display:block;font-size:15px;color:var(--on-dark-2);margin-top:6px;line-height:1.45}

/* ---- figures that carry content */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots figure{margin:0;background:var(--panel);border-radius:var(--radius);box-shadow:var(--hair);overflow:hidden}
.shots img{width:100%;height:auto}
.shots figcaption{padding:16px 18px 18px}
.shots figcaption b{display:block;font-family:var(--display);color:var(--aubergine);margin-bottom:.3em;font-size:1.06rem}
.shots figcaption span{display:block;font-size:15px;color:var(--ink-2);line-height:1.55}
.shots figure.portrait img{width:var(--figw,320px);max-width:100%;margin-inline:auto}

.badgewall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.badgewall figure{margin:0;background:var(--panel);border-radius:var(--radius);box-shadow:var(--hair);padding:18px}
.badgewall img{margin:0 0 10px}
.badgewall b{display:block;font-family:var(--display);color:var(--aubergine);font-size:1.02rem;margin-bottom:.25em}
.badgewall span{display:block;font-size:14.5px;color:var(--ink-2);line-height:1.5}

/* ---- split */
.split{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:28px;align-items:center;margin:0 0 20px}
.split--flip .split__img{order:2}
.split__img img{border-radius:var(--radius);box-shadow:var(--hair)}
.split__body p:last-child{margin-bottom:0}

/* ---- FAQ */
.faq{display:grid;gap:12px}
.faq details{background:var(--panel);border-radius:var(--radius);box-shadow:var(--hair);overflow:hidden}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 22px;font-family:var(--display);
  font-size:1.1rem;color:var(--aubergine);position:relative;padding-right:52px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:24px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--violet);border-bottom:2px solid var(--violet);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq__body{padding:0 22px 20px}
.faq__body p:last-child{margin-bottom:0}

/* ---- reviews roster */
.roster{display:grid;gap:16px}
.roster__row{
  background:var(--panel);border-radius:var(--radius);box-shadow:var(--hair);
  padding:18px 22px;display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:8px 22px;
}
.roster__who b{display:block;font-family:var(--display);color:var(--aubergine);font-size:1.06rem}
.roster__who span{display:block;font-size:14.5px;color:var(--ink-3)}
.roster__row p{margin:0;font-size:16px}
.stars{color:var(--violet);letter-spacing:.1em}
.stars i{font-style:normal;color:var(--line-2)}

/* ---- Q&A block for answer engines */
.qa{background:var(--panel);border-radius:var(--radius);box-shadow:var(--hair);padding:22px 24px}
.qa>p:first-child{margin-top:0}
.qa .tablewrap{box-shadow:none;background:transparent;margin-bottom:0}
.qa table{min-width:420px}

/* ---- references and byline */
.refs ol{margin:0 0 20px;padding-left:22px}
.refs li{font-size:15.5px;line-height:1.6;margin-bottom:.6em;color:var(--ink-2)}
.byline{
  display:grid;grid-template-columns:58px minmax(0,1fr);gap:18px;align-items:start;
  background:var(--tint);border-radius:var(--radius);padding:20px 24px;box-shadow:var(--hair);
}
.byline__mark{
  width:58px;height:58px;border-radius:50%;background:var(--aubergine);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:1.18rem;letter-spacing:.06em;
}
.byline b{display:block;font-family:var(--display);color:var(--aubergine);font-size:1.08rem;margin-bottom:.35em}
.byline p{margin:0;font-size:15.5px;color:var(--ink-2);line-height:1.62}

/* ---- related */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.rel a{display:block;padding:20px 22px;text-decoration:none}
.rel b{display:block;font-family:var(--display);color:var(--aubergine);font-size:1.08rem;margin-bottom:.3em}
.rel span{display:block;font-size:15.5px;color:var(--ink-2);line-height:1.55}

/* ---- the closing CTA */
.fcta{background:var(--aubergine);color:var(--on-dark);padding:52px 0}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:34px;align-items:center}
.fcta__eye{
  display:inline-block;font-size:15px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--violet-l);margin-bottom:12px;
}
.fcta__h{font-family:var(--display);font-size:clamp(1.5rem,1.2rem + 1.1vw,2.1rem);color:#fff;margin:0 0 .5em;line-height:1.18}
.fcta p{color:var(--on-dark-2)}
.fcta a{color:#fff}
.fcta__sm{font-size:15px;margin:14px 0 0}
.fcta__img img{border-radius:var(--radius);margin-inline:auto}

.final{background:var(--panel);border-radius:var(--radius);box-shadow:var(--hair);padding:26px 28px}
.final--media{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:26px;align-items:center}
.final h2{margin:0 0 .45em}
.final__price{font-size:1rem;color:var(--ink-2)}
.final__sm{font-size:14.5px;color:var(--ink-3);margin:12px 0 0}
.final__img img{border-radius:var(--radius);margin-inline:auto}

/* ---- forms */
.form{display:grid;gap:16px}
.field{display:grid;gap:7px}
.field label{font-size:15.5px;font-weight:700;color:var(--aubergine)}
.field input,.field textarea,.field select{
  font-family:var(--text);font-size:16px;padding:13px 15px;border-radius:var(--radius-sm);
  border:1px solid var(--line-2);background:var(--panel);color:var(--ink);width:100%;
}
.field textarea{min-height:140px;resize:vertical}

/* ---- the buy bar. Declared at the TOP LEVEL and visible at every width:
   house rule 8 is about the CLICK, not about reading space, and a bar that
   is display:none outside a phone query has no desktop CTA to hand over to. */
.buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:130;display:flex;
  background:var(--aubergine-d);color:var(--on-dark);
  transform:translateY(105%);transition:transform .3s var(--ease);
  box-shadow:0 -1px 0 rgba(0,0,0,.2);
}
.buybar.show{transform:translateY(0)}
.buybar__in{
  width:100%;max-width:var(--wrap);margin-inline:auto;padding:12px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.buybar__t b{display:block;font-family:var(--display);color:#fff;font-size:1.06rem}
.buybar__t span{display:block;font-size:14.5px;color:var(--on-dark-2)}
.buybar .btn{flex:none}

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

/* ---- responsive: the hero first, because this is the block that decides
   mobile CLS. critical_hero.py copies these above CRITICAL-END. */
@media (max-width:1020px){
  .hero__grid{grid-template-columns:1fr;gap:26px}
  .hero__copy{order:1}
  .hero__media{order:2;margin:2px 0 8px}
  .hero{padding:32px 0 40px}
  .hero__card{padding:20px 20px 16px}
  .figures{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .figures>div{padding:13px 14px}
  .figures b{font-size:1.28rem}
}
@media (max-width:560px){
  .hero__grid{gap:22px}
  .figures{grid-template-columns:1fr}
  .answer{padding:17px 18px}
}
/* --- 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;}
}


/* ---- hero motif -- tide-crest ---------------------------------------- */
.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(186deg,#f5efe2,#e2ccdc 48%,#f5efe2)}.hero__media::before{content:'';position:absolute;left:50%;bottom:-2%;width:148%;aspect-ratio:1/.30;translate:-50% 0;z-index:0;pointer-events:none;border-radius:46% 46% 30% 30%;filter:blur(17px);background:linear-gradient(0deg,rgba(141,43,191,0.46),rgba(141,43,191,0.30) 46%,transparent 92%);-webkit-mask-image:linear-gradient(90deg,#000 0,#000 54%,transparent 80%);mask-image:linear-gradient(90deg,#000 0,#000 54%,transparent 80%);animation:stdFlood 14s cubic-bezier(.36,.02,.36,1) infinite}.hero__media::after{content:'';position:absolute;left:50%;bottom:2%;width:148%;aspect-ratio:1/.066;translate:-50% 0;z-index:1;pointer-events:none;border-radius:50%;filter:blur(6px);background:linear-gradient(0deg,transparent,rgba(141,43,191,0.58) 55%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 0,#000 48%,transparent 76%);mask-image:linear-gradient(90deg,#000 0,#000 48%,transparent 76%);animation:stdCrest 14s cubic-bezier(.36,.02,.36,1) infinite;animation-delay:-1.4s}@keyframes stdFlood{0%,100%{transform:translateY(30%) scaleX(1.05);opacity:.16}50%{transform:translateY(-186%) scaleX(.93);opacity:.62}}@keyframes stdCrest{0%,100%{transform:translateY(40%) scaleX(1.02);opacity:0}18%{opacity:.5}50%{transform:translateY(-860%) scaleX(.9);opacity:.72}82%{opacity:.42}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/*!CRITICAL-END*/

/* ---- everything below here loads async */

@media (min-width:1080px){
  .nav__price{display:block}
}

@media (max-width:1020px){
  .sec>.wrap{grid-template-columns:minmax(0,1fr)}
  .sec>.wrap>:not(.sec__head){grid-column:1}
  .sec__head{position:static}
  .g3,.shots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prices{grid-template-columns:1fr;max-width:520px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fcta__box{grid-template-columns:1fr}
  .fcta__img{order:-1;max-width:260px}
  .badgewall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .versus{grid-template-columns:1fr}
  .versus__h:not(:first-child){display:none}
  .versus>div{padding:12px 15px}
}

@media (max-width:860px){
  .nav__top{padding-block:12px 10px}
  .bw b{font-size:1.14rem;letter-spacing:.22em}
  .nav__strip{position:static}
  .menu{
    display:none;flex-direction:column;align-items:stretch;gap:0;
    padding-bottom:10px;
  }
  .menu.open{display:flex}
  .menu a{padding:12px 2px;border-bottom:1px solid var(--line)}
  .menu li:last-child a{border-bottom:0}
  .util__item--trim{display:none}
}
@media (min-width:861px){
  .burger{display:none}
}

@media (max-width:720px){
  body{font-size:17px}
  .sec{padding:40px 0}
  .g2,.g3,.shots,.shots.s2{grid-template-columns:1fr}
  .split,.split--flip .split__img{grid-template-columns:1fr;order:0}
  .split{gap:18px}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .roster__row{grid-template-columns:1fr;gap:6px}
  .final--media{grid-template-columns:1fr}
  .final__img{max-width:190px}
  .stats{grid-template-columns:1fr}
  .buybar__in{padding:10px 16px;gap:12px}
  .buybar__t span{display:none}
  .buybar .btn{padding:12px 18px;font-size:.95rem}
  .card,.ingcard{padding:20px 20px}
  .meter__row{grid-template-columns:66px 1fr 42px}
}

@media (max-width:420px){
  .wrap{padding-inline:16px}
  .buybar__in{padding-inline:16px}
  .bw small{display:none}
}

/* ---- the footer: an index whose group headings sit inside filled chips.
   The chip is the slot's footer lever, and it is why every group heading is
   an inline-block with its own background rather than a bare caps line.
   Sizes here already meet house rule 10 (16px running text, 15px headings);
   footer_type.py appends its floor below and finds nothing to raise. */
footer{background:var(--aubergine);color:var(--on-dark);padding:52px 0 0;font-size:16px;line-height:1.7}
footer a{color:#fff;text-decoration:none}
footer a:hover{color:var(--violet-l);text-decoration:underline}
.findex{display:grid;grid-template-columns:minmax(0,1.35fr) repeat(4,minmax(0,1fr));gap:30px 26px}
.findex__card p{color:var(--on-dark-2);font-size:16px}
.findex__card p b{color:#fff}
.fbrand{
  font-family:var(--display);font-size:1.5rem;color:#fff;letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:10px;
}
.fbrand span{color:var(--violet-l)}
.frole{color:var(--on-dark-2);font-size:16px}
.findex__col ul{list-style:none;margin:0;padding:0}
.findex__col li{margin-bottom:9px}
.findex__col a{font-size:16px}
/* the filled chip */
.fchip{
  display:inline-block;background:var(--violet);color:#fff;border-radius:999px;
  padding:6px 15px;margin:0 0 14px;font-size:15px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
}
.findex__col .fchip+.fchip{margin-top:20px}

.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:38px;
  padding-top:26px;border-top:1px solid rgba(255,255,255,.16)}
.fseals img{border-radius:8px;background:#fff;padding:3px}
.fseals span{font-size:16px;color:var(--on-dark-2);flex:1;min-width:240px}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:20px}
.fpay span{font-size:16px;color:var(--on-dark-2);flex:1;min-width:240px}

.disc{background:var(--aubergine-d);margin-top:38px;padding:30px 0 34px}
.disc p,.disc li{font-size:16px;color:var(--on-dark-2);line-height:1.72}
.disc p b{color:#fff}
.disc__list{margin:16px 0 0;padding-left:22px}
.disc__list li{margin-bottom:.5em}
.copy{margin:18px 0 0;font-size:16px;color:var(--on-dark-2)}

@media (max-width:1020px){
  .findex{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .findex{grid-template-columns:1fr}
  footer{padding-top:40px}
}

/* ---- blog */
.article{max-width:820px;margin-inline:auto}
.postmeta{font-size:15.5px;color:var(--ink-3);margin:0 0 20px}
.toc{background:var(--tint);border-radius:var(--radius);padding:20px 24px;margin:0 0 28px;box-shadow:var(--hair)}
.toc b{display:block;font-family:var(--display);color:var(--aubergine);margin-bottom:.5em;font-size:1.08rem}
.toc ol{margin:0;padding-left:22px}
.toc li{margin-bottom:.35em;font-size:16px}
.article h2{margin-top:1.5em}
.article h3{margin-top:1.3em}
.article figure{margin:26px 0;background:var(--panel);border-radius:var(--radius);box-shadow:var(--hair);overflow:hidden}
.article figure img{width:100%;height:auto}
.article figure.portrait img{width:var(--figw,300px);max-width:100%;margin-inline:auto}
.article figcaption{padding:14px 18px 16px;font-size:15px;color:var(--ink-2);line-height:1.55}
.article .final--media{grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:20px;margin:30px 0}
.article .final h2{font-size:1.4rem;margin-top:0}
.posts{display:grid;gap:20px}
.posts article{padding:24px 26px}
.posts h2{margin:0 0 .4em;font-size:1.3rem}
.posts h2 a{text-decoration:none}
.posts p{margin:0 0 .6em;font-size:16px}
.posts .postmeta{margin:0}
@media (max-width:720px){
  .article .final--media{grid-template-columns:1fr}
}


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

   --navh is measured and published by site.js: nav heights run 66-99px across
   the estate and change when a bar compacts, and a hardcoded offset tucks the
   product under the bar on the taller ones.

   min-height makes the sticky box a full screen tall so the shot can be
   CENTRED inside it. Without it the box is only as tall as the image and
   `top` merely pins it under the header, which is what the old house rule did.

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

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

/* --- pack cards read as one repeated object ----------------------------
   A pricing row is three cards that have to share their edges, their image
   slot and their button baseline. The vendor product shots are different
   shapes (one site shipped 200x243, 200x105 and 200x65 side by side) and the
   blurbs are different lengths, so without these three rules the images
   render at three sizes and the three CTAs sit at three heights.

   The height lives here and not on the <img> attributes on purpose: those
   must keep stating each file's true ratio, or fix_img_dims.py rewrites them
   and CLS gets worse. Override per site with --pack-img. */
.card--pack{display:flex;flex-direction:column}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);
  object-fit:contain;margin-inline:auto;margin-bottom:14px}
.card--pack>.btn{margin-top:auto}

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

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

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

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 21 box-shadow declaration(s)
   and 0 of them layered, so every panel read flat however generous
   the radius was. Two stops -- a tight contact shadow and a wide
   ambient one -- is what makes a surface look raised. The tint is
   this site's own ink (36,23,38), not neutral black.

   Paint only: border-radius, box-shadow and transform change no
   geometry, so this is safe below the critical marker and needs a
   restamp rather than a rebuild. */
:root{
  --radius-sm:12px;
  --shadow:0 1px 2px rgba(36,23,38,.06), 0 6px 18px rgba(36,23,38,.07);
  --lift:0 2px 6px rgba(36,23,38,.09), 0 16px 34px rgba(36,23,38,.14);
}

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

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

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

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