/** Shopify CDN: Minification failed

Line 307:0 Unexpected "{"
Line 307:1 Expected identifier but found "%"
Line 308:10 Expected identifier but found whitespace
Line 308:11 Unexpected ".85"
Line 311:73 Unterminated string token
Line 314:1 Expected identifier but found "%"
Line 388:0 Unexpected "{"
Line 388:1 Expected identifier but found "%"
Line 389:6 Unexpected "2"
Line 390:76 Unterminated string token
... and 2 more hidden warnings

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:cart-template (INDEX:0) */
.tw-cartgone__inner { padding-block: clamp(60px,10cqw,140px); }
.tw-cartgone__h {
  font-family: var(--f-display);
  font-size: clamp(30px,5cqw,54px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.03em;
  word-spacing: .12em;
  margin-top: 12px;
}
.tw-cartgone__p {
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 52ch;
  margin-top: 14px;
}
.tw-cartgone__items { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.tw-cartgone__items li { font-family: var(--f-mono); font-size: 13px; }
.tw-cartgone__btn {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 15px 26px;
  border: 0;
  border-radius: 2px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  margin-top: 24px;
  cursor: pointer;
}
/* END_SECTION:cart-template */

/* START_SECTION:collection-template (INDEX:1) */
.tw-coll__inner { padding-block: clamp(30px,5.6cqw,64px) clamp(38px,7cqw,84px); }

/* ---- header ---- */
.tw-coll__label { display: flex; align-items: center; gap: 12px; }
.tw-coll__label-line { width: 32px; height: 1px; background: var(--rule); }
.tw-coll__h {
  font-family: var(--f-display);
  font-size: clamp(30px,6.1cqw,68px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.035em;
  max-width: 15ch;
  margin-top: 14px;
}
.tw-coll__desc {
  font-family: var(--f-body);
  font-size: clamp(16px,1.8cqw,19.5px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 54ch;
  margin-top: 18px;
}

/* ---- grid ----
   Hairline seams the same way tw-pdp-protocol draws them: the rule colour is
   the container ground and each cell paints over it. */
.tw-coll__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  margin-top: clamp(30px,5cqw,60px);
}
.tw-coll__card {
  --accent: var(--ink);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: background .18s;
}
.tw-coll__card--ignite { --accent: var(--ui-accent-ignite); }
.tw-coll__card--rebuild { --accent: var(--ui-accent-rebuild); }
.tw-coll__card:hover { background: var(--paper); }

.tw-coll__img {
  aspect-ratio: 1;
  background: var(--sunk);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.tw-coll__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tw-coll__img-ph {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rule);
  text-align: center;
  padding: 20px;
}

.tw-coll__body {
  padding: 24px 22px 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.tw-coll__title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 22px;
  line-height: 1.02;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.tw-coll__cdesc {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  flex: 1;
  margin-top: 10px;
  margin-bottom: 20px;
}
.tw-coll__footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 16px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.tw-coll__price {
  font-family: var(--f-mono);
  font-size: 16px;
  font-weight: 600;
}
.tw-coll__cta {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}

@container tw (max-width: 900px) {
  .tw-coll__grid { grid-template-columns: repeat(2, 1fr); }
}
@container tw (max-width: 620px) {
  .tw-coll__grid { grid-template-columns: 1fr; }
}
/* END_SECTION:collection-template */

/* START_SECTION:nutrition-facts (INDEX:7) */
/* No accent variable here on purpose: a Nutrition Facts panel is monochrome.
   The tw-nf--{sku} class is kept only as a hook and to label which bar the
   block belongs to in the editor, which matters on the bundle template where
   there are two of them. */

.tw-nf__inner { padding-block: clamp(26px,5cqw,56px); }
.tw-nf__h {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--rule);
}
.tw-nf__layout {
  display: grid;
  grid-template-columns: minmax(0,360px) minmax(0,1fr);
  gap: clamp(22px,4cqw,52px);
  align-items: start;
  margin-top: clamp(20px,3cqw,32px);
}

/* The panel is a facsimile of the printed label: black rules at fixed weights,
   condensed hierarchy, everything hard left and hard right. It reads as a
   label rather than as a table, which is the point. */
.tw-nf__panel {
  font-family: var(--f-display);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--ink);
  border-radius: 2px;
  padding: 12px 14px 14px;
  font-size: 13px;
  line-height: 1.3;
}
.tw-nf__title {
  font-size: clamp(26px,3.4cqw,34px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: .95;
}
.tw-nf__servings { font-size: 12.5px; margin-top: 5px; }
.tw-nf__serving { font-size: 12.5px; }
.tw-nf__serving b { font-weight: 900; }

.tw-nf__bar { background: var(--ink); margin: 6px 0; }
.tw-nf__bar--thick { height: 9px; }
.tw-nf__bar--mid { height: 4px; }

.tw-nf__cal { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.tw-nf__cal-l { font-size: 11px; line-height: 1.25; }
.tw-nf__cal-l b { font-size: 21px; font-weight: 900; letter-spacing: -.02em; }
.tw-nf__cal-v { font-size: 30px; font-weight: 900; letter-spacing: -.03em; line-height: 1; }

.tw-nf__dvhead { text-align: right; font-size: 11.5px; font-weight: 700; padding-bottom: 3px; }

.tw-nf__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  border-top: 1px solid var(--rule);
}
.tw-nf__row--i1 { padding-left: 14px; }
.tw-nf__row--i2 { padding-left: 28px; }
.tw-nf__n b { font-weight: 900; }
.tw-nf__n i { font-style: italic; }
.tw-nf__a { font-weight: 400; margin-left: 4px; }
.tw-nf__dv { font-weight: 900; white-space: nowrap; }

.tw-nf__foot {
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--muted);
  font-family: var(--f-mono);
}
.tw-nf__aside {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 46ch;
}

@container tw (max-width: 720px) {
  .tw-nf__layout { grid-template-columns: 1fr; }
}
/* END_SECTION:nutrition-facts */

/* START_SECTION:page-about (INDEX:8) */
body.tw-page .about-page { padding-top: 0; }

body.tw-page .about-hero { background: var(--surface); border-bottom: 1px solid var(--rule); }
body.tw-page .about-headline { font-family: var(--f-display); }
body.tw-page .about-section-label { color: var(--muted); font-family: var(--f-mono); }
body.tw-page .about-section-title { font-family: var(--f-display); }
body.tw-page .about-eyebrow { color: var(--ui-accent-ignite); font-family: var(--f-mono); }

body.tw-page .about-story { background: var(--paper); }
body.tw-page .about-img-placeholder { background: var(--sunk); border: 1px solid var(--rule); }
body.tw-page .about-pull-quote {
  color: var(--ink);
  border-left: 4px solid var(--ui-accent-ignite);
  font-family: var(--f-display);
}
body.tw-page .about-body p { color: var(--muted); max-width: 64ch; font-size: 18px; line-height: 1.65; }

body.tw-page .about-pillar { background: var(--sunk); }
body.tw-page .about-pillar-num { font-family: var(--f-display); }
body.tw-page .about-pillar-title { font-family: var(--f-display); }
body.tw-page .about-pillar-body { color: var(--muted); max-width: 64ch; }

body.tw-page .about-not { background: var(--surface); }
body.tw-page .about-not-item { background: var(--sunk); }
body.tw-page .about-not-x { color: var(--ui-accent-ignite); font-family: var(--f-display); }
body.tw-page .about-not-title { font-family: var(--f-display); }
body.tw-page .about-not-body { color: var(--muted); max-width: 64ch; }

body.tw-page .about-cta { background: var(--ui-accent-ignite-bg); color: var(--ui-accent-ignite-fg); }
body.tw-page .about-cta-headline { font-family: var(--f-display); }
{%- comment -%}
  opacity: .85 (previous pass) dragged this to 3.64:1 against the band - a
  regression, not a deliberate dim. Removed: pure --ui-accent-ignite-fg on
  --ui-accent-ignite-bg measures 4.49:1, just under the 5:1 body-text target.
  That pair is shared with the homepage's IGNITE product band (tw-pb), so
  nudging it is a sitewide brand-colour call, not a page-scoped fix - flagged
  to Alex rather than changed here.
{%- endcomment -%}
body.tw-page .about-cta-sub { color: var(--ui-accent-ignite-fg); max-width: 64ch; }
body.tw-page .about-cta .btn-primary {
  background: var(--paper-fixed);
  color: var(--ink-fixed);
  border-color: var(--paper-fixed);
}
body.tw-page .about-cta .btn-primary:hover {
  background: var(--paper-fixed);
  opacity: .82;
  transform: translateY(-1px);
}
/* END_SECTION:page-about */

/* START_SECTION:page-science (INDEX:12) */
body.tw-page .science-page { padding-top: 0; }

body.tw-page .sci-hero { background: var(--surface); }
body.tw-page .sci-hero::before {
  background: linear-gradient(135deg,
    transparent 0%,
    color-mix(in srgb, var(--ui-accent-ignite) 4%, transparent) 50%,
    color-mix(in srgb, var(--ui-accent-rebuild) 4%, transparent) 100%);
}
body.tw-page .sci-headline { font-family: var(--f-display); }
body.tw-page .sci-sub { color: var(--muted); max-width: 64ch; }
body.tw-page .sci-section-label { color: var(--muted); font-family: var(--f-mono); }
body.tw-page .sci-section-title { font-family: var(--f-display); }
body.tw-page .sci-body { color: var(--muted); max-width: 64ch; font-size: 18px; line-height: 1.65; }

body.tw-page .sci-concept { background: var(--paper); }
body.tw-page .sci-timeline-item::before { background: var(--rule); }
body.tw-page .ignite-dot-large {
  background: var(--ui-accent-ignite);
  border-color: var(--ui-accent-ignite);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-accent-ignite) 15%, transparent);
}
body.tw-page .rebuild-dot-large {
  background: var(--ui-accent-rebuild);
  border-color: var(--ui-accent-rebuild);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-accent-rebuild) 15%, transparent);
}
body.tw-page .sci-timeline-title { font-family: var(--f-display); }
body.tw-page .sci-timeline-body { color: var(--muted); max-width: 64ch; }

body.tw-page .sci-ignite-section { background: var(--surface); }
body.tw-page .sci-rebuild-section { background: var(--paper); }
body.tw-page .sci-sku-header { border-bottom: 1px solid var(--rule); }
body.tw-page .sci-ignite-section .sci-sku-header {
  background: color-mix(in srgb, var(--ui-accent-ignite) 6%, transparent);
  border-left: 4px solid var(--ui-accent-ignite);
}
body.tw-page .sci-rebuild-section .sci-sku-header {
  background: color-mix(in srgb, var(--ui-accent-rebuild) 5%, transparent);
  border-left: 4px solid var(--ui-accent-rebuild);
}
body.tw-page .sci-sku-badge { font-family: var(--f-mono); }
body.tw-page .badge-ignite {
  background: color-mix(in srgb, var(--ui-accent-ignite) 15%, transparent);
  color: var(--ui-accent-ignite);
  border-color: color-mix(in srgb, var(--ui-accent-ignite) 30%, transparent);
}
body.tw-page .badge-rebuild {
  background: color-mix(in srgb, var(--ui-accent-rebuild) 15%, transparent);
  color: var(--ui-accent-rebuild);
  border-color: color-mix(in srgb, var(--ui-accent-rebuild) 25%, transparent);
}
body.tw-page .sci-sku-name { font-family: var(--f-display); }
body.tw-page .sci-sku-desc { color: var(--muted); max-width: 64ch; font-size: 18px; line-height: 1.65; }

body.tw-page .sci-ingredient { background: var(--sunk); }
body.tw-page .sci-ingredient:hover { background: var(--chrome); }
body.tw-page .sci-ingredient-left { border-right: 1px solid var(--rule); }
body.tw-page .sci-ingredient-name { font-family: var(--f-display); }
{%- comment -%}
  Fix 2: ingredient names carry the SKU accent, scoped by ancestor section so
  every ingredient in a section gets it uniformly. Ignite's ui-accent-ignite
  (#C22E23) measures 4.45:1 on --sunk - just under the 4.5:1 floor - so this
  specific use darkens it 8% toward black (4.45 -> 5.09:1) rather than
  touching the --ui-accent-ignite token itself, which drives UI elements
  sitewide (nav, badges, buttons) at their own, already-passing ratios.
  Rebuild's ui-accent-rebuild clears 7.55:1 on the same ground untouched.
{%- endcomment -%}
body.tw-page .sci-ignite-section .sci-ingredient-name { color: color-mix(in srgb, var(--ui-accent-ignite) 92%, black); }
body.tw-page .sci-rebuild-section .sci-ingredient-name { color: var(--ui-accent-rebuild); }
body.tw-page .sci-ingredient-mechanism { color: var(--muted); font-family: var(--f-mono); }
body.tw-page .sci-ingredient-body { color: var(--muted); max-width: 64ch; font-size: 18px; line-height: 1.65; }
body.tw-page .sci-ingredient-cite { color: var(--faint); border-top: 1px solid var(--rule); }

body.tw-page .sci-sources { background: var(--surface); }
body.tw-page .sci-source { background: var(--sunk); }
body.tw-page .sci-source-ingredient { color: var(--muted); font-family: var(--f-mono); }
body.tw-page .sci-source-ref { color: var(--muted); max-width: 64ch; }
body.tw-page .sci-source-ref em { color: var(--faint); }
/* END_SECTION:page-science */

/* START_SECTION:tw-argument (INDEX:13) */
/* .tw-section in tw-base.css also sets background and color, at the same
   specificity, and loads later — so a bare .tw-arg lost and the band rendered
   on paper with near-white type. Doubling the class wins it back. */
.tw-section.tw-arg {
  background: var(--tw-arg-bg, var(--ink-fixed));
  color: var(--tw-arg-fg, var(--paper-fixed));
  padding-block: clamp(46px,8cqw,96px);
}
.tw-arg__lbl { color: var(--tw-arg-faint, var(--faint-fixed)); }
.tw-arg__h {
  font-family: var(--f-display);
  font-size: clamp(28px,4.6cqw,52px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.03em;
  word-spacing: .1em;
  margin-top: 16px;
  max-width: 18ch;
}

/* The two halves. Separation is the point, so the gap is generous and each
   half is topped by a rule and carries its own label. */
.tw-arg__parts {
  display: grid;
  gap: clamp(38px,5cqw,64px);
  margin-top: clamp(38px,5cqw,64px);
}
.tw-arg__part {
  display: grid;
  grid-template-columns: minmax(0,180px) minmax(0,1fr);
  gap: clamp(18px,3cqw,48px);
  padding-top: clamp(22px,3cqw,32px);
  border-top: 1px solid rgba(255,255,255,.22);
}
.tw-arg__part-lbl {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tw-arg-faint, var(--faint-fixed));
}
/* This band is always dark, whatever the page theme, so the labels take the
   dark-ground brand values rather than var(--ui-accent-ignite)/var(--ui-accent-rebuild) — see the
   --*-fixed group in tw-base.css for why. */
.tw-arg__part--ignite .tw-arg__part-lbl { color: var(--tw-arg-ignite, var(--ignite-fixed)); }
.tw-arg__part--rebuild .tw-arg__part-lbl { color: var(--tw-arg-rebuild, var(--rebuild-fixed)); }

.tw-arg__body {
  font-family: var(--f-body);
  font-size: clamp(17px,1.9cqw,20px);
  line-height: 1.75;
  color: var(--tw-arg-body, var(--body-fixed));
  max-width: 60ch;
}
.tw-arg__body p + p { margin-top: 22px; }
.tw-arg__body strong,
.tw-arg__body b {
  color: var(--tw-arg-fg, var(--paper-fixed));
  font-weight: 500;
}
.tw-arg__body a { text-underline-offset: 3px; }

@container tw (max-width: 780px) {
  .tw-arg__part { grid-template-columns: 1fr; gap: 14px; }
}
/* END_SECTION:tw-argument */

/* START_SECTION:tw-buy-rail (INDEX:14) */
.tw-buy {
  padding-block: clamp(46px,8cqw,96px);
  --flag: var(--tw-flag, var(--ui-accent-ignite));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tw-buy { --flag: var(--ui-accent-ignite); }
}
:root[data-theme="dark"] .tw-buy { --flag: var(--ui-accent-ignite); }

.tw-buy__head { display: flex; flex-direction: column; align-items: flex-start; }
.tw-buy__h {
  font-family: var(--f-display);
  font-size: clamp(26px,4.2cqw,44px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.03em;
  word-spacing: .12em;
  margin-top: 22px;
}
.tw-buy__intro {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 52ch;
  margin-top: 24px;
}
.tw-buy__form { margin: 0; }

.tw-buy__tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 40px;
}
.tw-tier {
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 40px 34px 38px;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.tw-tier--flag { border-color: var(--flag); }
.tw-tier__ribbon {
  position: absolute;
  top: -1px;
  right: -1px;
  background: var(--flag);
  color: #fff;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 0 3px 0 3px;
}
.tw-tier__k {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}
.tw-tier__n {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 21px;
  text-transform: uppercase;
  letter-spacing: -.02em;
  word-spacing: .1em;
  margin-top: 20px;
}
.tw-tier__d {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 18px;
  flex: 1;
  max-width: 30ch;
}
.tw-tier__p {
  font-family: var(--f-mono);
  font-size: 38px;
  font-weight: 600;
  margin-top: 26px;
  letter-spacing: -.02em;
}
.tw-tier__p small { font-size: 11.5px; font-weight: 400; color: var(--faint); letter-spacing: .04em; }
.tw-tier__pk {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  display: block;
  margin-bottom: 5px;
}
.tw-tier__split { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.tw-tier__chip {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 18px 12px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--muted);
}
.tw-tier__chip--ignite { border-color: var(--ui-accent-ignite); color: var(--ui-accent-ignite); }
.tw-tier__chip--rebuild { border-color: var(--ui-accent-rebuild); color: var(--ui-accent-rebuild); }
.tw-tier__chip b {
  display: block;
  font-size: 21px;
  font-weight: 600;
  margin-top: 8px;
  letter-spacing: -.01em;
}

/* A tier with no chips says what it contains instead, so it carries weight. */
.tw-tier__note {
  font-family: var(--f-mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink);
  margin-top: 16px;
}

/* The quiet caption under the chips: the computed per-unit price. */
.tw-tier__perbar {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--faint);
  margin-top: 14px;
  font-variant-numeric: tabular-nums;
}
.tw-tier__cta {
  width: 100%;
  margin-top: 26px;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 18px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.tw-tier--flag .tw-tier__cta { background: var(--flag); border-color: var(--flag); color: #fff; }

.tw-buy__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 18px;
  max-width: 620px;
}
.tw-field { display: block; }
.tw-field__l {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 6px;
}
.tw-field__i {
  width: 100%;
  font-family: var(--f-mono);
  font-size: 13px;
  padding: 12px 13px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
}
.tw-field__i::placeholder { color: var(--faint); }

.tw-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.tw-buy__note {
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 20px;
}

/* Two contact forms can share a page, so a confirmation only shows on the form
   the visitor actually posted — return_to anchors the response to that form. */
/* Shown whenever the form posted. Never gated on :target — Shopify drops the
   fragment from return_to, which is what kept this hidden on every page. */
.tw-form__ok,
.tw-form__err {
  display: block;
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .04em;
  padding: 16px 18px;
  border-radius: 2px;
  margin-bottom: 22px;
}
.tw-form__ok { border: 1px solid var(--ui-accent-rebuild); color: var(--ui-accent-rebuild); }
.tw-form__err { border: 1px solid var(--ui-accent-ignite); color: var(--ui-accent-ignite); }
.tw-form__ok[hidden],
.tw-form__err[hidden] { display: none; }

/* The repeat purchase comes first under the thumb. */
@container tw (max-width: 880px) {
  .tw-buy__tiers { grid-template-columns: 1fr; }
  .tw-tier--flag { order: -1; }
}
@container tw (max-width: 640px) {
  .tw-buy__fields { grid-template-columns: 1fr; }
}
/* END_SECTION:tw-buy-rail */

/* START_SECTION:tw-hero-thesis (INDEX:15) */
.tw-hero {
  /* Defined here first — dark only ever redefines these, never introduces them. */
  --ig: var(--tw-ignite, var(--ui-accent-ignite));
  --rb: var(--tw-rebuild, var(--ui-accent-rebuild));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tw-hero { --ig: var(--ui-accent-ignite); --rb: var(--ui-accent-rebuild); }
}
:root[data-theme="dark"] .tw-hero { --ig: var(--ui-accent-ignite); --rb: var(--ui-accent-rebuild); }

.tw-hero__inner {
  padding-block: clamp(30px,5.6cqw,64px) 0;
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: clamp(26px,4cqw,52px);
  align-items: center;
}
/* Two columns only when there is artwork to put in the second one. */
.tw-hero__inner:has(.tw-hero__art) { grid-template-columns: minmax(0,0.85fr) minmax(0,1fr); }
.tw-hero__art { min-width: 0; }
.tw-hero__img { display: block; width: 100%; height: auto; }

@container tw (max-width: 860px) {
  .tw-hero__inner:has(.tw-hero__art) { grid-template-columns: minmax(0,1fr); }
}

.tw-hero__h {
  font-family: var(--f-display);
  font-size: clamp(30px,6.1cqw,68px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.035em;
  word-spacing: .14em;
  max-width: 15ch;
  margin-top: 14px;
}
.tw-hero__inner:has(.tw-hero__art) .tw-hero__h { max-width: 12ch; }
.tw-hero__inner:has(.tw-hero__art) .tw-hero__sub { max-width: 42ch; }
/* Italic in the editor paints IGNITE red; bold paints REBUILD green. */
.tw-hero__h em,
.tw-hero__h i { font-style: normal; color: var(--ig); }
.tw-hero__h b,
.tw-hero__h strong { font-weight: 900; color: var(--rb); }

.tw-hero__sub {
  font-family: var(--f-body);
  font-size: clamp(16px,1.8cqw,19.5px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 54ch;
  margin-top: 18px;
}
/* END_SECTION:tw-hero-thesis */

/* START_SECTION:tw-local (INDEX:16) */
.tw-local {
  padding-block: clamp(10px,3cqw,30px) clamp(20px,3cqw,40px);
  --accent: var(--tw-local-accent, var(--ui-accent-ignite));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tw-local { --accent: var(--ui-accent-ignite); }
}
:root[data-theme="dark"] .tw-local { --accent: var(--ui-accent-ignite); }

.tw-local__card {
  border: 1px solid var(--ink);
  border-radius: 4px;
  padding: clamp(24px,4cqw,40px);
  display: grid;
  grid-template-columns: 1fr minmax(0, 340px);
  gap: clamp(20px,4cqw,44px);
  align-items: start;
}
.tw-local__k {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.tw-local__h {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(24px,3.6cqw,38px);
  text-transform: uppercase;
  letter-spacing: -.03em;
  word-spacing: .12em;
  margin-top: 11px;
}
.tw-local__p {
  font-family: var(--f-body);
  font-size: clamp(16px,1.8cqw,18.5px);
  line-height: 1.6;
  color: var(--muted);
  margin-top: 13px;
  max-width: 52ch;
}
.tw-local__sig {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 16px;
}

.tw-local__form { margin: 0; display: grid; gap: 12px; }
.tw-field { display: block; }
.tw-field__l {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 6px;
}
.tw-field__i {
  width: 100%;
  font-family: var(--f-mono);
  font-size: 13px;
  padding: 12px 13px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
}
.tw-field__i--area { resize: vertical; line-height: 1.5; }
.tw-field__i::placeholder { color: var(--faint); }

.tw-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.tw-local__btn {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 16px 26px;
  border: 0;
  border-radius: 2px;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
}

.tw-form__ok,
.tw-form__err {
  display: block;
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .04em;
  padding: 16px 18px;
  border-radius: 2px;
}
.tw-form__ok { border: 1px solid var(--ui-accent-rebuild); color: var(--ui-accent-rebuild); }
.tw-form__err { border: 1px solid var(--ui-accent-ignite); color: var(--ui-accent-ignite); }
.tw-form__ok[hidden],
.tw-form__err[hidden] { display: none; }

@container tw (max-width: 780px) {
  .tw-local__card { grid-template-columns: 1fr; }
}
/* END_SECTION:tw-local */

/* START_SECTION:tw-pdp-doses (INDEX:17) */
.tw-dose { --accent: var(--tw-accent, var(--ui-accent-ignite)); }
.tw-dose--rebuild { --accent: var(--tw-accent, var(--ui-accent-rebuild)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tw-dose { --accent: var(--ui-accent-ignite); }
  :root:not([data-theme="light"]) .tw-dose--rebuild { --accent: var(--ui-accent-rebuild); }
}
:root[data-theme="dark"] .tw-dose { --accent: var(--ui-accent-ignite); }
:root[data-theme="dark"] .tw-dose--rebuild { --accent: var(--ui-accent-rebuild); }

.tw-dose__inner { margin-top: clamp(36px,6cqw,72px); padding-bottom: clamp(26px,5cqw,56px); }
.tw-dose__h {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--rule);
}
.tw-dose__table { display: grid; margin-top: 4px; }
.tw-dose__row {
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,1.35fr);
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.tw-dose__n { font-family: var(--f-display); font-weight: 600; font-size: 17px; }
.tw-dose__why { font-family: var(--f-body); font-size: 16.5px; color: var(--muted); line-height: 1.55; }

.tw-dose__ref {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  vertical-align: super;
  text-decoration: none;
  margin-left: 5px;
  padding: 1px 4px;
  border-radius: 2px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
}

.tw-dose__allergens {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 18px;
}

.tw-dose__sci {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding: 15px 18px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--surface);
}
.tw-dose__sci p { font-family: var(--f-body); font-size: 15px; color: var(--muted); max-width: 52ch; }
.tw-dose__sci a {
  flex: none;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 11px 16px;
  border-radius: 2px;
  border: 1px solid currentColor;
  color: var(--accent);
}

.tw-dose__storage {
  margin-top: 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--faint);
}

/* The why text wraps to a full-width row beneath the name on narrow screens,
   where there is no amount column left to justify a second column. */
@container tw (max-width: 640px) {
  .tw-dose__row { grid-template-columns: 1fr; gap: 4px; }
}
/* END_SECTION:tw-pdp-doses */

/* START_SECTION:tw-pdp-main (INDEX:18) */
.tw-pdp {
  padding-block: clamp(26px,5cqw,56px) 0;
  --accent: var(--tw-accent, var(--ui-accent-ignite));
  /* The art panel is a wash of the same SKU label colour the drawn wrapper
     uses, so there is no second set of hex to keep in step. */
  --sku: var(--sku-ignite);
}
.tw-pdp--rebuild {
  --accent: var(--tw-accent, var(--ui-accent-rebuild));
  --sku: var(--sku-rebuild);
}
/* A two-bar product picks neither side: ink, which is already a token. */
.tw-pdp--bundle {
  --accent: var(--tw-accent, var(--ink));
  --sku: var(--ink);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tw-pdp { --accent: var(--ui-accent-ignite); }
  :root:not([data-theme="light"]) .tw-pdp--rebuild { --accent: var(--ui-accent-rebuild); }
  :root:not([data-theme="light"]) .tw-pdp--bundle { --accent: var(--ink); }
  :root:not([data-theme="light"]) .tw-pdp__img { filter: brightness(.72) saturate(.92); }
}
:root[data-theme="dark"] .tw-pdp { --accent: var(--ui-accent-ignite); }
:root[data-theme="dark"] .tw-pdp--rebuild { --accent: var(--ui-accent-rebuild); }
:root[data-theme="dark"] .tw-pdp--bundle { --accent: var(--ink); }
:root[data-theme="dark"] .tw-pdp__img { filter: brightness(.72) saturate(.92); }

.tw-pdp__crumb {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}
.tw-pdp__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(26px,5cqw,64px);
  margin-top: 22px;
  align-items: start;
}
.tw-pdp__art {
  border-radius: 4px;
  padding: clamp(28px,5cqw,60px) 20px;
  display: grid;
  place-items: center;
  background: linear-gradient(168deg,
    color-mix(in srgb, var(--sku) 18%, var(--surface)),
    color-mix(in srgb, var(--sku) 34%, var(--surface)));
}
.tw-pdp__img { display: block; width: 100%; height: auto; max-width: 320px; }

.tw-pdp__h {
  font-family: var(--f-display);
  font-size: clamp(34px,5.8cqw,62px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.035em;
  word-spacing: .14em;
  color: var(--accent);
}
.tw-pdp__lede {
  font-family: var(--f-body);
  font-size: clamp(16.5px,1.8cqw,19px);
  line-height: 1.55;
  color: var(--muted);
  margin-top: 13px;
  max-width: 44ch;
}
.tw-pdp__when {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 8px 13px;
  border-radius: 2px;
  margin-top: 18px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}

/* ---- badges (shared markup with tw-product-block) ---- */
.tw-badges { display: flex; flex-wrap: wrap; gap: 7px; margin: 20px 0 0; padding: 0; list-style: none; }
.tw-badge {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 8px 13px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--muted);
}
.tw-badges--light .tw-badge--key { border-color: var(--accent); color: var(--accent); }

/* ---- variant radio cards ---- */
.tw-pdp__form { margin: 0; }
.tw-variants { margin: 26px 0 0; padding: 0; border: 0; display: grid; gap: 8px; }
.tw-variant {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 13px;
  align-items: center;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 14px 15px;
  cursor: pointer;
  background: var(--surface);
  transition: border-color .16s, background .16s;
}
.tw-variant:hover { border-color: var(--muted); }
.tw-variant__radio { position: absolute; opacity: 0; width: 0; height: 0; }
.tw-variant__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--faint);
  position: relative;
}
.tw-variant:has(.tw-variant__radio:checked) { border-color: var(--accent); background: var(--paper); }
.tw-variant:has(.tw-variant__radio:checked) .tw-variant__dot { border-color: var(--accent); }
.tw-variant:has(.tw-variant__radio:checked) .tw-variant__dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--accent);
}
/* Keyboard focus has to be visible even though the input itself is hidden. */
.tw-variant:has(.tw-variant__radio:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.tw-variant__name { font-family: var(--f-display); font-weight: 600; font-size: 14.5px; display: block; }
.tw-variant__note {
  display: block;
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--faint);
  letter-spacing: .03em;
  margin-top: 3px;
}
.tw-variant__save {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 3px 6px;
  border-radius: 2px;
  margin-left: 7px;
  background: color-mix(in srgb, var(--ui-accent-rebuild) 18%, transparent);
  color: var(--ui-accent-rebuild);
}
/* The reference price that the saving badge was derived from. Same size and
   weight as the per-unit caption it sits beside — it is the other half of the
   same sum, not a footnote to it, and it should not read as small print. */
.tw-variant__ref { color: var(--muted); }
.tw-variant__price { font-family: var(--f-mono); font-size: 15.5px; font-weight: 600; }

.tw-pdp__cta {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 17px;
  border: 0;
  border-radius: 2px;
  margin-top: 16px;
  cursor: pointer;
  color: #fff;
  background: var(--accent);
  transition: opacity .18s;
}
.tw-pdp__cta:hover { opacity: .88; }

.tw-pdp__email { margin-top: 12px; }
.tw-field__l {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 6px;
}
.tw-field__i {
  width: 100%;
  font-family: var(--f-mono);
  font-size: 13px;
  padding: 12px 13px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
}
.tw-field__i::placeholder { color: var(--faint); }

.tw-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.tw-pdp__note {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--faint);
  text-align: center;
  margin-top: 10px;
}
.tw-pdp__local {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 13px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--muted);
}
.tw-pdp__local a { color: var(--ink); text-underline-offset: 3px; }

.tw-form__ok,
.tw-form__err {
  display: block;
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .04em;
  padding: 16px 18px;
  border-radius: 2px;
  margin-top: 20px;
}
.tw-form__ok { border: 1px solid var(--ui-accent-rebuild); color: var(--ui-accent-rebuild); }
.tw-form__err { border: 1px solid var(--ui-accent-ignite); color: var(--ui-accent-ignite); }
.tw-form__ok[hidden],
.tw-form__err[hidden] { display: none; }

/* ---- sticky mobile buy bar ---- */
.tw-bb {
  display: none;
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--surface);
  border-top: 1px solid var(--rule);
  padding: 11px clamp(18px,4cqw,40px) calc(11px + env(safe-area-inset-bottom));
  gap: 12px;
  align-items: center;
  box-shadow: 0 -8px 24px -14px rgba(0,0,0,.35);
  margin-top: clamp(26px,5cqw,56px);
}
.tw-bb__l { flex: 1; min-width: 0; }
.tw-bb__n {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.tw-bb__p { font-family: var(--f-mono); font-size: 12px; color: var(--faint); margin-top: 2px; }
.tw-bb__b {
  flex: none;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 14px 20px;
  border: 0;
  border-radius: 2px;
  color: #fff;
  background: var(--accent);
  cursor: pointer;
}

@container tw (max-width: 900px) {
  .tw-pdp__grid { grid-template-columns: 1fr; }
}
@container tw (max-width: 700px) {
  .tw-bb { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .tw-variant,
  .tw-pdp__cta { transition: none; }
}
/* END_SECTION:tw-pdp-main */

/* START_SECTION:tw-pdp-protocol (INDEX:19) */
.tw-prot { --accent: var(--tw-accent, var(--ui-accent-ignite)); }
.tw-prot--rebuild { --accent: var(--tw-accent, var(--ui-accent-rebuild)); }
.tw-prot--bundle { --accent: var(--tw-accent, var(--ink)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tw-prot { --accent: var(--ui-accent-ignite); }
  :root:not([data-theme="light"]) .tw-prot--rebuild { --accent: var(--ui-accent-rebuild); }
  :root:not([data-theme="light"]) .tw-prot--bundle { --accent: var(--ink); }
}
:root[data-theme="dark"] .tw-prot { --accent: var(--ui-accent-ignite); }
:root[data-theme="dark"] .tw-prot--rebuild { --accent: var(--ui-accent-rebuild); }
:root[data-theme="dark"] .tw-prot--bundle { --accent: var(--ink); }

.tw-prot__inner { margin-top: clamp(36px,6cqw,72px); }
.tw-prot__h {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--rule);
}
.tw-prot__p {
  font-family: var(--f-body);
  font-size: clamp(17px,1.8cqw,19px);
  line-height: 1.65;
  max-width: 62ch;
  margin-top: 18px;
  color: var(--muted);
}
.tw-prot__p b,
.tw-prot__p strong { color: var(--ink); font-weight: 400; }

.tw-prot__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 18px;
  border-radius: 3px;
  overflow: hidden;
}
.tw-prot__cell { background: var(--surface); padding: 20px 18px; }
.tw-prot__t {
  font-family: var(--f-mono);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--accent);
}
.tw-prot__d { font-family: var(--f-body); font-size: 15px; color: var(--muted); margin-top: 7px; }

@container tw (max-width: 700px) {
  .tw-prot__grid { grid-template-columns: 1fr; }
}
/* END_SECTION:tw-pdp-protocol */

/* START_SECTION:tw-product-block (INDEX:20) */
/* Self-contained coloured band: it brings its own ground and foreground, so it
   reads correctly in both themes without a theme-conditional override. */
.tw-pb {
  background: var(--tw-pb-bg, var(--ui-accent-ignite-bg));
  color: var(--tw-pb-fg, var(--ui-accent-ignite-fg));
  padding-block: clamp(46px,8cqw,100px);
}
/* Both grounds need a fallback, not just Ignite's: with the overrides left
   blank a Rebuild band would otherwise inherit the red one. */
.tw-pb--rebuild {
  background: var(--tw-pb-bg, var(--ui-accent-rebuild-bg));
  color: var(--tw-pb-fg, var(--ui-accent-rebuild-fg));
}
.tw-pb__grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(28px,6cqw,76px);
  align-items: center;
}
.tw-pb--rebuild .tw-pb__grid { grid-template-columns: 1fr 300px; }
.tw-pb--rebuild .tw-pb__art { order: 2; }

/* ---- copy ---- */
/* Reused, not reinvented: this class already carried the band's small
   uppercase line. It inherits the band's own --ui-accent-*-fg through
   `color`, so it needs no colour of its own. */
.tw-pb__eyebrow {
  font-family: var(--f-mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .7;
}
.tw-pb__title {
  font-family: var(--f-display);
  font-size: clamp(30px,5.6cqw,60px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.035em;
  word-spacing: .14em;
  margin-top: 11px;
}
/* Each authored line is its own block, so the break sits where the copy says
   at every width instead of wherever the column runs out. The inherited
   text-wrap:balance from .tw-section h1..h4 is deliberately left alone: it now
   applies per span, and a span that fits on one line gives it nothing to do.
   Every other heading keeps balance untouched. */
.tw-pb__title-l { display: block; }
.tw-pb__claim {
  font-family: var(--f-body);
  font-size: clamp(17px,2.2cqw,23px);
  line-height: 1.5;
  margin-top: 16px;
  max-width: 46ch;
  opacity: .92;
}

/* ---- spec highlights ---- */
.tw-pb__spec {
  margin: 26px 0 0;
  border-top: 1px solid rgba(255,255,255,.28);
  max-width: 560px;
}
.tw-pb__row {
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.tw-pb__k {
  font-family: var(--f-mono);
  font-size: 13.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0;
}
.tw-pb__sub {
  font-family: var(--f-mono);
  font-size: 12.5px;
  opacity: .72;
  letter-spacing: .03em;
  display: block;
  margin-top: 3px;
  text-transform: none;
}
.tw-pb__allergens {
  margin: 10px 0 0;
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .82;
}

/* ---- badges ---- */
.tw-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.tw-badge {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 8px 13px;
  border: 1px solid currentColor;
  border-radius: 2px;
  opacity: .8;
}
.tw-badges--band .tw-badge--key { opacity: 1; }

/* ---- CTA ---- */
.tw-pb__btn {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 15px 28px;
  border-radius: 2px;
  text-decoration: none;
  margin-top: 28px;
  border: 1px solid currentColor;
  transition: opacity .18s, transform .18s;
}
.tw-pb__btn:hover { opacity: .82; transform: translateY(-1px); }
/* Always on a coloured band, which is dark in both themes, so the label takes
   the non-inverting --ink-fixed rather than --ink. */
.tw-pb__btn--solid { background: #fff; color: var(--ink-fixed); border-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .tw-pb__btn { transition: none; }
  .tw-pb__btn:hover { transform: none; }
}

@container tw (max-width: 860px) {
  .tw-pb__grid,
  .tw-pb--rebuild .tw-pb__grid { grid-template-columns: 1fr; }
  .tw-pb--rebuild .tw-pb__art { order: 0; }
}
@container tw (max-width: 700px) {
  .tw-bar { max-width: 190px; }
}
/* END_SECTION:tw-product-block */

/* START_SECTION:tw-quote (INDEX:21) */
.tw-quote { padding-block: clamp(46px,8cqw,96px); }
.tw-quote__fig { margin: 0; }
.tw-quote__q {
  margin: 0;
  font-family: var(--f-body);
  font-size: clamp(28px,5cqw,46px);
  line-height: 1.22;
  font-style: italic;
  font-weight: 300;
  max-width: 20ch;
  letter-spacing: -.01em;
}
.tw-quote__cap {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 22px;
}
@container tw (max-width: 700px) {
  .tw-quote__q { max-width: 14ch; }
}
/* END_SECTION:tw-quote */

/* START_SECTION:tw-timeline (INDEX:22) */
.tw-tl {
  --ig: var(--tw-ignite, var(--ui-accent-ignite));
  --rb: var(--tw-rebuild, var(--ui-accent-rebuild));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tw-tl { --ig: var(--ui-accent-ignite); --rb: var(--ui-accent-rebuild); }
}
:root[data-theme="dark"] .tw-tl { --ig: var(--ui-accent-ignite); --rb: var(--ui-accent-rebuild); }

.tw-tl__inner {
  /* Tightened with the hero so the rail reaches the first viewport. */
  margin-top: clamp(26px,4.6cqw,52px);
  padding-bottom: clamp(38px,7cqw,84px);
}
.tw-tl__rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
}
.tw-tl__cell {
  padding: 24px 18px 28px;
  border-right: 1px solid var(--rule);
  position: relative;
}
.tw-tl__cell:last-child { border-right: 0; }

.tw-tl__cell::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(1);
  transform-origin: left;
}
/* The hidden start state is added by script only when animation is possible,
   so a JS failure leaves the accent bars fully drawn. */
.tw-tl__rail--anim .tw-tl__cell::before {
  transform: scaleX(0);
  transition: transform .7s cubic-bezier(.2,.7,.3,1);
  transition-delay: var(--tw-stagger, 0ms);
}
.tw-tl__rail--anim .tw-tl__cell--lit::before { transform: scaleX(1); }

.tw-tl__cell--ignite::before { background: var(--ig); }
.tw-tl__cell--rebuild::before { background: var(--rb); }

.tw-tl__time {
  font-family: var(--f-mono);
  font-size: clamp(26px,4.2cqw,44px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
}
.tw-tl__unit { font-size: .4em; letter-spacing: .12em; }
.tw-tl__cell--ignite .tw-tl__time { color: var(--ig); }
.tw-tl__cell--rebuild .tw-tl__time { color: var(--rb); }

.tw-tl__name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 18px;
}
.tw-tl__name b {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tw-tl__tag {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}
.tw-tl__cta {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 5px;
}
.tw-tl__cell--ignite .tw-tl__cta { color: var(--ig); }
.tw-tl__cell--rebuild .tw-tl__cta { color: var(--rb); }

.tw-tl__note {
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 20px;
  max-width: 30ch;
}
.tw-tl__foot {
  margin-top: clamp(18px,2.6cqw,28px);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--faint);
}
.tw-tl__foot b,
.tw-tl__foot strong { color: var(--ink); font-weight: 500; }

/* The rail becomes a vertical spine: accent moves from the top edge to a
   3px left border, so the sequence still reads top-to-bottom. */
@container tw (max-width: 700px) {
  .tw-tl__rail { grid-template-columns: 1fr; border-top: 0; }
  .tw-tl__cell {
    border-right: 0;
    border-left: 3px solid var(--rule);
    padding: 18px 0 22px 18px;
  }
  .tw-tl__cell::before { display: none; }
  .tw-tl__cell--ignite { border-left-color: var(--ig); }
  .tw-tl__cell--rebuild { border-left-color: var(--rb); }
  .tw-tl__note { max-width: 38ch; }
}

@media (prefers-reduced-motion: reduce) {
  .tw-tl__rail--anim .tw-tl__cell::before { transform: scaleX(1); transition: none; }
}
/* END_SECTION:tw-timeline */