/** Shopify CDN: Minification failed

Line 16:84 Unexpected "?"
Line 24:63 Unterminated string token
Line 32:29 Unterminated string token
Line 36:32 Unterminated string token
Line 51:65 Unterminated string token
Line 73:28 Unterminated string token
Line 75:81 Unterminated string token
Line 77:73 Unterminated string token
Line 94:13 Unterminated string token
Line 101:64 Unterminated string token
... and 486 more hidden warnings

**/
where can i upload this, i can only see where i can manually include within page fly?
ok great, i do want to change the buttons though to be black text, green full, black outline.... for first button then second button something a bit different, also thinga like why magnesium above a heading should have a fill, it should just be in the sage text colour, with 1pt space between letters and bold.

Can you amend this within just the styling block and my other blocks stay the same? I also want to ensure you produce the blocks with the correct wording and layouts but fix anything that doesnt feel right. Also when creating the block content, can you just leave spacef for the images to be placed in? does thtat make it more editable friendly or no because its all hardcoded to that block?
and the tone of voice remember needs to be like this 
eurus, is the attached correct as to how and where i placed it 
ok this method worked and its great, its a fast way to get the template functioning but also editable. what i need though is it too look correct, can you copy the home page sections from this document for a start? i want to see what it could look like and can always alter the text later.. also is attached what you just produced for me, see how the formatting is off completey? I also want the eyebrow text to be a colour whether thats green or blue..

Absolutely. And that's actually how we should work from now on.

One response = one complete file.

No "replace this bit" or "find this line." Just:

Copy → Paste → Save

That's much less error-prone.

For the Hero going forward

I'll provide the entire updated:

sections/magneglow-hero.liquid

including:

✅ Updated button styling (2px border, 12px radius)
✅ Correct sage eyebrow (#A9B8A3)
✅ White eyebrow on dark backgrounds
✅ Improved typography
✅ Better spacing
✅ Product positioning
✅ Responsive layout
✅ All Shopify settings and schema

You'll delete everything in the file, paste mine, and click Save.

Going forward

Every section I build will be delivered like this:

📄 File:
sections/magneglow-benefits.liquid

↓
[complete file]

or

📄 File:
assets/magneglow.css

↓
[complete file]

Never partial snippets.

One thing I'd like to change

Now that I know this workflow works, I'd also like to make the code much cleaner.

Instead of a 1,000-line Hero file, I'll split responsibilities like this:

assets/
    magneglow.css        ← ALL styling

sections/
    magneglow-hero.liquid
    magneglow-benefits.liquid
    magneglow-comparison.liquid
    magneglow-cta.liquid

Each section will be only 200–300 lines, and all the styling will live in one place. That means changing button styles, colors, spacing, or typography later is a single edit.

I think we should start fresh

Rather than patching the current Hero repeatedly, I recommend we rebuild it properly to match your concept exactly.

I'll produce:

assets/magneglow.css (complete design system)
sections/magneglow-hero.liquid (complete file)

Those two files will give you a polished, editorial Hero that matches your reference much more closely and establish the design language for every other MagneGlow section.

I think that's the cleanest foundation for the rest of the site.

ok yes lets start fresh
Step 1 — Replace the complete global stylesheet

Open:

Shopify Admin → Online Store → Themes → Edit code → Assets → magneglow.css

Delete everything currently inside the file, paste the complete code below, and save.

/* ==========================================================
   MAGNEGLOW GLOBAL DESIGN SYSTEM
   Premium magnesium pool minerals
   Version 1.0
========================================================== */

/* ==========================================================
   1. DESIGN TOKENS
========================================================== */

:root {
  /* Brand colors */
  --mg-black: #111111;
  --mg-white: #ffffff;
  --mg-off-white: #f7f8f5;
  --mg-pale-gray: #eef1ef;
  --mg-line: #d9ddda;

  --mg-sage: #a9b8a3;
  --mg-water-blue: #b7d7de;
  --mg-mineral-blue: #3c7893;

  /* Text */
  --mg-text: #111111;
  --mg-text-soft: #555b58;
  --mg-text-muted: #737976;

  /* Layout */
  --mg-page-width: 1440px;
  --mg-content-width: 1180px;
  --mg-page-padding: clamp(20px, 4vw, 64px);

  --mg-section-spacing: clamp(72px, 9vw, 144px);
  --mg-section-spacing-small: clamp(48px, 6vw, 96px);

  /* Borders and corners */
  --mg-border-width: 2px;
  --mg-radius-small: 8px;
  --mg-radius: 12px;
  --mg-radius-large: 20px;
  --mg-radius-pill: 999px;

  /* Typography */
  --mg-heading-weight: 500;
  --mg-body-weight: 400;
  --mg-label-weight: 700;

  /* Motion */
  --mg-transition: 180ms ease;
}


/* ==========================================================
   2. BASE
========================================================== */

html {
  scroll-behavior: smooth;
}

body {
  color: var(--mg-text);
  background-color: var(--mg-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mg-section,
.mg-section *,
.mg-section *::before,
.mg-section *::after {
  box-sizing: border-box;
}

.mg-section {
  position: relative;
  width: 100%;
  padding-top: var(--mg-section-spacing);
  padding-bottom: var(--mg-section-spacing);
}

.mg-section--small {
  padding-top: var(--mg-section-spacing-small);
  padding-bottom: var(--mg-section-spacing-small);
}

.mg-section--flush {
  padding-top: 0;
  padding-bottom: 0;
}

.mg-section img {
  max-width: 100%;
}

.mg-container {
  width: min(
    calc(100% - (var(--mg-page-padding) * 2)),
    var(--mg-page-width)
  );
  margin-right: auto;
  margin-left: auto;
}

.mg-container--narrow {
  width: min(
    calc(100% - (var(--mg-page-padding) * 2)),
    var(--mg-content-width)
  );
  margin-right: auto;
  margin-left: auto;
}


/* ==========================================================
   3. BACKGROUNDS
========================================================== */

.mg-bg-white {
  color: var(--mg-text);
  background-color: var(--mg-white);
}

.mg-bg-off-white {
  color: var(--mg-text);
  background-color: var(--mg-off-white);
}

.mg-bg-gray {
  color: var(--mg-text);
  background-color: var(--mg-pale-gray);
}

.mg-bg-sage {
  color: var(--mg-white);
  background-color: var(--mg-sage);
}

.mg-bg-water-blue {
  color: var(--mg-text);
  background-color: var(--mg-water-blue);
}

.mg-bg-blue {
  color: var(--mg-white);
  background-color: var(--mg-mineral-blue);
}

.mg-bg-black {
  color: var(--mg-white);
  background-color: var(--mg-black);
}


/* ==========================================================
   4. TYPOGRAPHY
========================================================== */

.mg-display,
.mg-heading-xl,
.mg-heading-lg,
.mg-heading-md,
.mg-heading-sm {
  margin-top: 0;
  color: inherit;
  font-weight: var(--mg-heading-weight);
  text-wrap: balance;
}

.mg-display {
  margin-bottom: 28px;
  font-size: clamp(52px, 6vw, 98px);
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.mg-heading-xl {
  margin-bottom: 24px;
  font-size: clamp(44px, 5vw, 78px);
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.mg-heading-lg {
  margin-bottom: 22px;
  font-size: clamp(36px, 4vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.mg-heading-md {
  margin-bottom: 18px;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.mg-heading-sm {
  margin-bottom: 14px;
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.mg-copy-large {
  max-width: 720px;
  margin-top: 0;
  margin-bottom: 0;
  color: inherit;
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.6;
}

.mg-copy {
  max-width: 680px;
  margin-top: 0;
  margin-bottom: 0;
  color: inherit;
  font-size: 16px;
  line-height: 1.65;
}

.mg-copy-small {
  margin-top: 0;
  margin-bottom: 0;
  color: var(--mg-text-soft);
  font-size: 14px;
  line-height: 1.6;
}

.mg-muted {
  color: var(--mg-text-muted);
}

.mg-display em,
.mg-heading-xl em,
.mg-heading-lg em,
.mg-heading-md em,
.mg-heading-sm em,
.mg-accent-word {
  color: var(--mg-sage);
  font-style: normal;
  font-weight: inherit;
}


/* ==========================================================
   5. EYEBROWS
========================================================== */

.mg-eyebrow {
  display: block;
  margin: 0 0 20px;
  color: var(--mg-sage);
  font-size: 12px;
  font-weight: var(--mg-label-weight);
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mg-eyebrow--blue {
  color: var(--mg-mineral-blue);
}

.mg-eyebrow--white,
.mg-bg-sage .mg-eyebrow,
.mg-bg-blue .mg-eyebrow,
.mg-bg-black .mg-eyebrow {
  color: var(--mg-white);
}


/* ==========================================================
   6. BUTTONS
========================================================== */

.mg-button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-width: var(--mg-border-width);
  border-style: solid;
  border-radius: var(--mg-radius);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.035em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  appearance: none;
  transition:
    color var(--mg-transition),
    background-color var(--mg-transition),
    border-color var(--mg-transition),
    transform var(--mg-transition),
    opacity var(--mg-transition);
}

.mg-button:hover {
  transform: translateY(-2px);
}

.mg-button:focus-visible {
  outline: 3px solid rgba(60, 120, 147, 0.35);
  outline-offset: 3px;
}

.mg-button--primary {
  border-color: var(--mg-black);
  color: var(--mg-black);
  background-color: var(--mg-sage);
}

.mg-button--primary:hover {
  border-color: var(--mg-black);
  color: var(--mg-black);
  background-color: var(--mg-white);
}

.mg-button--black {
  border-color: var(--mg-black);
  color: var(--mg-white);
  background-color: var(--mg-black);
}

.mg-button--black:hover {
  border-color: var(--mg-black);
  color: var(--mg-black);
  background-color: var(--mg-white);
}

.mg-button--white {
  border-color: var(--mg-white);
  color: var(--mg-black);
  background-color: var(--mg-white);
}

.mg-button--white:hover {
  border-color: var(--mg-white);
  color: var(--mg-white);
  background-color: transparent;
}

.mg-button--outline {
  border-color: currentColor;
  color: inherit;
  background-color: transparent;
}

.mg-button--outline:hover {
  border-color: var(--mg-black);
  color: var(--mg-black);
  background-color: var(--mg-sage);
}

.mg-button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 36px;
}


/* ==========================================================
   7. EDITORIAL LINKS
========================================================== */

.mg-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0 5px;
  border-bottom: 2px solid currentColor;
  color: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition:
    gap var(--mg-transition),
    opacity var(--mg-transition);
}

.mg-link:hover {
  gap: 14px;
  opacity: 0.72;
}


/* ==========================================================
   8. SECTION HEADINGS
========================================================== */

.mg-section-heading {
  display: grid;
  gap: 22px;
  max-width: 820px;
  margin-bottom: clamp(42px, 6vw, 84px);
}

.mg-section-heading--center {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.mg-section-heading--center .mg-copy,
.mg-section-heading--center .mg-copy-large {
  margin-right: auto;
  margin-left: auto;
}


/* ==========================================================
   9. SPLIT LAYOUTS
========================================================== */

.mg-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(40px, 7vw, 110px);
}

.mg-split--wide-image {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.mg-split--wide-content {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.mg-split--top {
  align-items: start;
}

.mg-split--reverse .mg-split__content {
  order: 2;
}

.mg-split--reverse .mg-split__media {
  order: 1;
}


/* ==========================================================
   10. IMAGES
========================================================== */

.mg-image {
  display: block;
  width: 100%;
  height: auto;
}

.mg-image-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mg-image-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--mg-radius-large);
  background-color: var(--mg-pale-gray);
}

.mg-product-image {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 28px 40px rgba(0, 0, 0, 0.15));
}


/* ==========================================================
   11. CARDS
========================================================== */

.mg-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.mg-card-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mg-card-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mg-card {
  padding: clamp(26px, 3vw, 42px);
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius-large);
  color: var(--mg-text);
  background-color: var(--mg-white);
}

.mg-card__number {
  display: block;
  margin-bottom: 42px;
  color: var(--mg-sage);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.mg-card__icon {
  display: block;
  width: 42px;
  height: 42px;
  margin-bottom: 34px;
  object-fit: contain;
}

.mg-card h3 {
  margin: 0 0 14px;
  color: inherit;
  font-size: clamp(21px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.mg-card p {
  margin: 0;
  color: var(--mg-text-soft);
  font-size: 15px;
  line-height: 1.65;
}


/* ==========================================================
   12. FEATURE ROWS
========================================================== */

.mg-feature-list {
  border-top: 1px solid var(--mg-line);
}

.mg-feature-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--mg-line);
}

.mg-feature-row__number {
  color: var(--mg-sage);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.mg-feature-row h3 {
  margin: 0 0 8px;
  color: inherit;
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 500;
  line-height: 1.2;
}

.mg-feature-row p {
  max-width: 640px;
  margin: 0;
  color: var(--mg-text-soft);
  font-size: 15px;
  line-height: 1.65;
}


/* ==========================================================
   13. BENEFIT STRIP
========================================================== */

.mg-benefit-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--mg-line);
  border-bottom: 1px solid var(--mg-line);
}

.mg-benefit-strip__item {
  min-height: 130px;
  padding: 28px;
  border-right: 1px solid var(--mg-line);
}

.mg-benefit-strip__item:last-child {
  border-right: 0;
}

.mg-benefit-strip__item h3 {
  margin: 0 0 8px;
  color: inherit;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
}

.mg-benefit-strip__item p {
  margin: 0;
  color: var(--mg-text-soft);
  font-size: 13px;
  line-height: 1.55;
}


/* ==========================================================
   14. CTA SECTIONS
========================================================== */

.mg-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
  padding: clamp(42px, 6vw, 82px);
  border-radius: var(--mg-radius-large);
  background-color: var(--mg-off-white);
}

.mg-cta--sage {
  color: var(--mg-white);
  background-color: var(--mg-sage);
}

.mg-cta--blue {
  color: var(--mg-white);
  background-color: var(--mg-mineral-blue);
}

.mg-cta--black {
  color: var(--mg-white);
  background-color: var(--mg-black);
}

.mg-cta h2 {
  max-width: 820px;
  margin: 0;
  color: inherit;
  font-size: clamp(34px, 4vw, 62px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.mg-cta p {
  max-width: 680px;
  margin: 18px 0 0;
  color: inherit;
  font-size: 16px;
  line-height: 1.65;
}


/* ==========================================================
   15. COMPARISON TABLE
========================================================== */

.mg-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius);
}

.mg-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background-color: var(--mg-white);
}

.mg-table th,
.mg-table td {
  padding: 22px;
  border-right: 1px solid var(--mg-line);
  border-bottom: 1px solid var(--mg-line);
  color: var(--mg-text);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  vertical-align: top;
}

.mg-table th {
  background-color: var(--mg-off-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.mg-table th:last-child,
.mg-table td:last-child {
  border-right: 0;
}

.mg-table tr:last-child td {
  border-bottom: 0;
}

.mg-table .mg-table__featured {
  background-color: rgba(169, 184, 163, 0.18);
}


/* ==========================================================
   16. FAQ
========================================================== */

.mg-faq {
  border-top: 1px solid var(--mg-line);
}

.mg-faq details {
  border-bottom: 1px solid var(--mg-line);
}

.mg-faq summary {
  position: relative;
  padding: 25px 48px 25px 0;
  color: var(--mg-text);
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 500;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.mg-faq summary::-webkit-details-marker {
  display: none;
}

.mg-faq summary::after {
  position: absolute;
  top: 50%;
  right: 3px;
  font-size: 25px;
  font-weight: 300;
  line-height: 1;
  content: "+";
  transform: translateY(-50%);
}

.mg-faq details[open] summary::after {
  content: "−";
}

.mg-faq__answer {
  max-width: 780px;
  padding: 0 48px 26px 0;
  color: var(--mg-text-soft);
  font-size: 15px;
  line-height: 1.7;
}

.mg-faq__answer p:first-child {
  margin-top: 0;
}

.mg-faq__answer p:last-child {
  margin-bottom: 0;
}


/* ==========================================================
   17. FORMS
========================================================== */

.mg-form {
  display: grid;
  gap: 20px;
}

.mg-field {
  display: grid;
  gap: 9px;
}

.mg-field label {
  color: var(--mg-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.mg-field input,
.mg-field select,
.mg-field textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius-small);
  color: var(--mg-text);
  background-color: var(--mg-white);
  font: inherit;
}

.mg-field textarea {
  min-height: 140px;
  resize: vertical;
}

.mg-field input:focus,
.mg-field select:focus,
.mg-field textarea:focus {
  border-color: var(--mg-mineral-blue);
  outline: 3px solid rgba(60, 120, 147, 0.16);
}


/* ==========================================================
   18. DISCLAIMERS AND SMALL PRINT
========================================================== */

.mg-disclaimer {
  max-width: 900px;
  margin: 24px 0 0;
  color: var(--mg-text-muted);
  font-size: 12px;
  line-height: 1.6;
}


/* ==========================================================
   19. DIVIDERS
========================================================== */

.mg-divider {
  width: 100%;
  height: 1px;
  border: 0;
  margin: 0;
  background-color: var(--mg-line);
}


/* ==========================================================
   20. ACCESSIBILITY
========================================================== */

.mg-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .mg-section *,
  .mg-section *::before,
  .mg-section *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ==========================================================
   21. TABLET
========================================================== */

@media screen and (max-width: 989px) {
  :root {
    --mg-section-spacing: clamp(64px, 10vw, 96px);
  }

  .mg-split,
  .mg-split--wide-image,
  .mg-split--wide-content {
    grid-template-columns: 1fr;
  }

  .mg-split--reverse .mg-split__content,
  .mg-split--reverse .mg-split__media {
    order: initial;
  }

  .mg-card-grid,
  .mg-card-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mg-cta {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .mg-benefit-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mg-benefit-strip__item:nth-child(2) {
    border-right: 0;
  }

  .mg-benefit-strip__item:nth-child(-n + 2) {
    border-bottom: 1px solid var(--mg-line);
  }
}


/* ==========================================================
   22. MOBILE
========================================================== */

@media screen and (max-width: 599px) {
  :root {
    --mg-page-padding: 20px;
    --mg-radius-large: 16px;
  }

  .mg-display {
    font-size: clamp(44px, 13vw, 60px);
  }

  .mg-heading-xl {
    font-size: clamp(40px, 11vw, 56px);
  }

  .mg-button-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }

  .mg-button-row .mg-button {
    width: 100%;
  }

  .mg-card-grid,
  .mg-card-grid--four,
  .mg-card-grid--two {
    grid-template-columns: 1fr;
  }

  .mg-feature-row {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
  }

  .mg-benefit-strip {
    grid-template-columns: 1fr;
  }

  .mg-benefit-strip__item {
    border-right: 0;
    border-bottom: 1px solid var(--mg-line);
  }

  .mg-benefit-strip__item:last-child {
    border-bottom: 0;
  }

  .mg-cta {
    padding: 38px 24px;
  }
}

This establishes the correct sage #A9B8A3, keeps sage eyebrow text unchanged on light backgrounds, automatically uses white eyebrow text on sage, mineral-blue, or black backgrounds, and gives buttons a 2px border with 12px rounded corners.

ok now for the hero liquid
Creating image
these were the reference files
ok yes, provide me with each of the homepage sections, section by section

Perfect. I actually think this is the point where we stop "building pages" and start building the MagneGlow Shopify theme.

Looking at your concept board, I don't want to approximate it—I want to recreate it professionally.

My plan

We'll build the homepage exactly like this:

01 Hero
02 Benefits of MagneGlow
03 The Makeup of MagneGlow
04 Compare the Experience
05 Pool Water Comfort
06 Compatibility
07 FAQ
08 Final CTA
09 Footer

Every section will be:

✓ Shopify OS2.0 native
✓ Theme Editor editable
✓ Uses our global CSS
✓ Mobile-first
✓ Fast
✓ US SEO optimized
✓ FTC/FDA compliant
✓ Pixel-close to your mockup
Here's how I'll deliver them

Every reply will contain only ONE thing.

Example:

SECTION 01

sections/magneglow-hero.liquid

(copy & paste)

+
Assets required

+
Any CSS additions

Then...

SECTION 02

sections/magneglow-benefits.liquid

and so on.

No mixing multiple sections.

I'll also create all supporting graphics

Not placeholders.

Proper brand assets like:

molecule graphics
water ripple backgrounds
mineral crystal macros
transparent mineral piles
magnesium icons
compatibility icons
premium editorial illustrations

All matching the MagneGlow brand.

The quality target

We're not building a pool store.

We're building something that feels like:

Apple
Oura
Dyson
WHOOP
Aesop
Tesla Energy

Minimal.

Architectural.

Editorial.

Science-led.

One improvement I'd like to make

Looking at your concepts, I can already see ways to improve them without changing the design language—for example:

Better spacing rhythm
More consistent typography scale
Stronger visual hierarchy
Better mobile behavior
Cleaner Shopify implementation
Faster loading by reducing duplicate code
More reusable components

The goal is that someone lands on the site and immediately feels it's a premium consumer brand, not a typical pool supplier.

I recommend we build each section to production quality, not just "good enough."

That means every section will include:

Complete Liquid file (copy/paste)
Any CSS additions (or updates to magneglow.css when needed)
A list of required images/icons
High-resolution custom assets where they're needed
Fully editable Shopify schema
Responsive behavior for desktop, tablet, and mobile

We'll start with Section 01 – Hero, and once you're happy with it, we'll move through the rest of the homepage one section at a time. This approach will give you a polished, consistent theme instead of a collection of disconnected sections.

ok
Edit
ok but ensure that those images ar eoverlayed separatel ie the bag and the water and the molecules, as i want to be able to change them, also please use the brand green not the darker one.. can yu generate all these htmls in sepaate blocks now for the homeoage quickly so i can copy and paste an see it come togetehre
Edit
yes, now provide me with each html block coding for me to copy into the liquids

Below are the complete Shopify Liquid files. Create each file under Online Store → Themes → Edit code → Sections, paste the matching block, and save.

All hero imagery remains separate and editable:

Water background
Product bag
Molecule overlay
Mineral pile

The brand sage throughout is #A9B8A3.

01 — Hero

File: sections/magneglow-hero.liquid

<section
  id="MagneGlowHero-{{ section.id }}"
  class="mghero"
  style="
    --mg-bg: {{ section.settings.background_color }};
    --mg-text: {{ section.settings.text_color }};
    --mg-sage: {{ section.settings.sage_color }};
    --mg-media-bg: {{ section.settings.media_background }};
  "
>
  <div class="mghero__grid">
    <div class="mghero__content">
      <div class="mghero__content-inner">
        {% if section.settings.eyebrow != blank %}
          <p class="mghero__eyebrow">{{ section.settings.eyebrow | escape }}</p>
        {% endif %}

        <h1 class="mghero__heading">
          {{ section.settings.heading_line_1 | escape }}<br>
          {{ section.settings.heading_line_2 | escape }}<br>
          <span>{{ section.settings.highlighted_word | escape }}</span>
          {{ section.settings.heading_line_3 | escape }}<br>
          {{ section.settings.heading_line_4 | escape }}
        </h1>

        {% if section.settings.body != blank %}
          <div class="mghero__body">{{ section.settings.body }}</div>
        {% endif %}

        <div class="mghero__statements">
          {% if section.settings.statement_1 != blank %}
            <p><span>✓</span>{{ section.settings.statement_1 | escape }}</p>
          {% endif %}

          {% if section.settings.statement_2 != blank %}
            <p><span>✓</span>{{ section.settings.statement_2 | escape }}</p>
          {% endif %}
        </div>

        <div class="mghero__actions">
          {% if section.settings.primary_label != blank %}
            <a
              class="mghero__button"
              href="{{ section.settings.primary_link | default: '#' }}"
            >
              {{ section.settings.primary_label | escape }}
              <span aria-hidden="true">→</span>
            </a>
          {% endif %}

          {% if section.settings.secondary_label != blank %}
            <a
              class="mghero__link"
              href="{{ section.settings.secondary_link | default: '#' }}"
            >
              {{ section.settings.secondary_label | escape }}
              <span aria-hidden="true">→</span>
            </a>
          {% endif %}
        </div>
      </div>
    </div>

    <div class="mghero__visual">
      {% if section.settings.water_image != blank %}
        {{
          section.settings.water_image
          | image_url: width: 2400
          | image_tag:
            class: 'mghero__water',
            widths: '750, 1100, 1500, 2000, 2400',
            sizes: '(min-width: 990px) 52vw, 100vw',
            loading: 'eager',
            fetchpriority: 'high'
        }}
      {% endif %}

      {% if section.settings.molecule_image != blank %}
        {{
          section.settings.molecule_image
          | image_url: width: 1000
          | image_tag:
            class: 'mghero__molecule',
            widths: '400, 700, 1000',
            loading: 'eager'
        }}
      {% endif %}

      {% if section.settings.product_image != blank %}
        {{
          section.settings.product_image
          | image_url: width: 1600
          | image_tag:
            class: 'mghero__bag',
            widths: '600, 900, 1200, 1600',
            sizes: '(min-width: 990px) 35vw, 70vw',
            loading: 'eager',
            fetchpriority: 'high'
        }}
      {% endif %}

      {% if section.settings.mineral_image != blank %}
        {{
          section.settings.mineral_image
          | image_url: width: 1200
          | image_tag:
            class: 'mghero__minerals',
            widths: '400, 700, 900, 1200',
            loading: 'eager'
        }}
      {% endif %}
    </div>
  </div>
</section>

{% stylesheet %}
  .mghero {
    overflow: hidden;
    color: var(--mg-text);
    background: var(--mg-bg);
  }

  .mghero *,
  .mghero *::before,
  .mghero *::after {
    box-sizing: border-box;
  }

  .mghero__grid {
    display: grid;
    min-height: 790px;
    grid-template-columns: 48% 52%;
  }

  .mghero__content {
    display: flex;
    align-items: center;
    padding: clamp(70px, 8vw, 130px) clamp(30px, 6vw, 96px);
  }

  .mghero__content-inner {
    width: 100%;
    max-width: 690px;
    margin-left: auto;
  }

  .mghero__eyebrow {
    margin: 0 0 24px;
    color: var(--mg-sage);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .mghero__heading {
    margin: 0;
    color: var(--mg-text);
    font-size: clamp(58px, 5.8vw, 100px);
    font-weight: 600;
    line-height: 0.91;
    letter-spacing: -0.065em;
  }

  .mghero__heading span {
    color: var(--mg-sage);
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 10px;
  }

  .mghero__body {
    max-width: 590px;
    margin-top: 40px;
    font-size: clamp(17px, 1.25vw, 21px);
    line-height: 1.62;
  }

  .mghero__body p {
    margin: 0;
  }

  .mghero__statements {
    display: grid;
    gap: 11px;
    margin-top: 28px;
  }

  .mghero__statements p {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
  }

  .mghero__statements span {
    color: var(--mg-sage);
  }

  .mghero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    margin-top: 38px;
  }

  .mghero__button {
    display: inline-flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 15px 27px;
    border: 2px solid var(--mg-sage);
    border-radius: 12px;
    color: #111111;
    background: var(--mg-sage);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
    transition: 180ms ease;
  }

  .mghero__button:hover {
    border-color: #111111;
    background: #ffffff;
    transform: translateY(-2px);
  }

  .mghero__link {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 9px 0 6px;
    border-bottom: 2px solid currentColor;
    color: var(--mg-text);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-decoration: none;
    text-transform: uppercase;
  }

  .mghero__visual {
    position: relative;
    min-height: 790px;
    overflow: hidden;
    background: var(--mg-media-bg);
    isolation: isolate;
  }

  .mghero__water {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mghero__molecule {
    position: absolute;
    z-index: 2;
    top: 4%;
    right: -5%;
    width: min(50%, 480px);
    height: auto;
  }

  .mghero__bag {
    position: absolute;
    z-index: 3;
    right: 8%;
    bottom: 4%;
    width: min(60%, 620px);
    max-height: 80%;
    object-fit: contain;
    filter: drop-shadow(0 32px 35px rgba(0, 0, 0, 0.2));
  }

  .mghero__minerals {
    position: absolute;
    z-index: 4;
    right: 43%;
    bottom: 0;
    width: min(42%, 430px);
    height: auto;
    filter: drop-shadow(0 22px 25px rgba(0, 0, 0, 0.15));
  }

  @media screen and (max-width: 989px) {
    .mghero__grid {
      min-height: 0;
      grid-template-columns: 1fr;
    }

    .mghero__content {
      padding: 80px 28px;
    }

    .mghero__content-inner {
      max-width: 760px;
      margin: 0 auto;
    }

    .mghero__visual {
      min-height: 680px;
    }
  }

  @media screen and (max-width: 599px) {
    .mghero__content {
      padding: 64px 20px;
    }

    .mghero__heading {
      font-size: clamp(47px, 14vw, 66px);
    }

    .mghero__actions {
      align-items: stretch;
      flex-direction: column;
    }

    .mghero__button {
      width: 100%;
    }

    .mghero__visual {
      min-height: 510px;
    }

    .mghero__bag {
      right: 3%;
      width: 72%;
    }

    .mghero__minerals {
      right: 40%;
      width: 50%;
    }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "MagneGlow hero",
  "settings": [
    {
      "type": "text",
      "id": "eyebrow",
      "label": "Eyebrow",
      "default": "Premium magnesium pool minerals"
    },
    {
      "type": "text",
      "id": "heading_line_1",
      "label": "Heading line 1",
      "default": "Your pool"
    },
    {
      "type": "text",
      "id": "heading_line_2",
      "label": "Heading line 2",
      "default": "deserves"
    },
    {
      "type": "text",
      "id": "highlighted_word",
      "label": "Highlighted word",
      "default": "more"
    },
    {
      "type": "text",
      "id": "heading_line_3",
      "label": "Heading line 3",
      "default": "than"
    },
    {
      "type": "text",
      "id": "heading_line_4",
      "label": "Heading line 4",
      "default": "ordinary salt."
    },
    {
      "type": "richtext",
      "id": "body",
      "label": "Body",
      "default": "<p>MagneGlow is a purposefully formulated magnesium pool mineral blend designed for modern saltwater pool systems.</p>"
    },
    {
      "type": "text",
      "id": "statement_1",
      "label": "Statement 1",
      "default": "Five minerals. One considered formula."
    },
    {
      "type": "text",
      "id": "statement_2",
      "label": "Statement 2",
      "default": "A completely different approach to pool water."
    },
    {
      "type": "text",
      "id": "primary_label",
      "label": "Primary button",
      "default": "Discover the formula"
    },
    {
      "type": "url",
      "id": "primary_link",
      "label": "Primary link"
    },
    {
      "type": "text",
      "id": "secondary_label",
      "label": "Secondary link label",
      "default": "Why magnesium?"
    },
    {
      "type": "url",
      "id": "secondary_link",
      "label": "Secondary link"
    },
    {
      "type": "image_picker",
      "id": "water_image",
      "label": "Water background"
    },
    {
      "type": "image_picker",
      "id": "molecule_image",
      "label": "Molecule overlay"
    },
    {
      "type": "image_picker",
      "id": "product_image",
      "label": "Product bag"
    },
    {
      "type": "image_picker",
      "id": "mineral_image",
      "label": "Mineral pile"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Content background",
      "default": "#F7F8F5"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text",
      "default": "#111111"
    },
    {
      "type": "color",
      "id": "sage_color",
      "label": "Brand sage",
      "default": "#A9B8A3"
    },
    {
      "type": "color",
      "id": "media_background",
      "label": "Media background",
      "default": "#DCECF0"
    }
  ],
  "presets": [
    {
      "name": "MagneGlow hero"
    }
  ]
}
{% endschema %}
02 — Four Benefits

File: sections/magneglow-benefits.liquid

<section
  id="MagneGlowBenefits-{{ section.id }}"
  class="mgbenefits"
  style="
    --mg-benefits-bg: {{ section.settings.background }};
    --mg-benefits-sage: {{ section.settings.sage }};
  "
>
  <div class="mgbenefits__grid">
    {% for block in section.blocks %}
      <article class="mgbenefits__item" {{ block.shopify_attributes }}>
        {% if block.settings.icon != blank %}
          {{
            block.settings.icon
            | image_url: width: 160
            | image_tag:
              class: 'mgbenefits__icon',
              widths: '80, 120, 160',
              loading: 'lazy'
          }}
        {% else %}
          <div class="mgbenefits__symbol" aria-hidden="true">
            {% case forloop.index %}
              {% when 1 %}◯
              {% when 2 %}≋
              {% when 3 %}✦
              {% else %}◇
            {% endcase %}
          </div>
        {% endif %}

        <h2>{{ block.settings.heading | escape }}</h2>
        <p>{{ block.settings.text | escape }}</p>

        <span class="mgbenefits__number">
          {{ forloop.index | prepend: '0' }}
        </span>
      </article>
    {% endfor %}
  </div>
</section>

{% stylesheet %}
  .mgbenefits {
    background: var(--mg-benefits-bg);
  }

  .mgbenefits *,
  .mgbenefits *::before,
  .mgbenefits *::after {
    box-sizing: border-box;
  }

  .mgbenefits__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid #dfe3df;
    border-bottom: 1px solid #dfe3df;
  }

  .mgbenefits__item {
    position: relative;
    min-height: 330px;
    padding: 46px clamp(24px, 3.5vw, 54px);
    border-right: 1px solid #dfe3df;
    text-align: center;
  }

  .mgbenefits__item:last-child {
    border-right: 0;
  }

  .mgbenefits__icon {
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto 28px;
    object-fit: contain;
  }

  .mgbenefits__symbol {
    margin-bottom: 25px;
    color: var(--mg-benefits-sage);
    font-size: 43px;
    line-height: 1;
  }

  .mgbenefits h2 {
    max-width: 220px;
    margin: 0 auto 14px;
    color: #111111;
    font-size: clamp(20px, 1.8vw, 27px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.025em;
  }

  .mgbenefits p {
    max-width: 240px;
    margin: 0 auto;
    color: #555b58;
    font-size: 14px;
    line-height: 1.65;
  }

  .mgbenefits__number {
    position: absolute;
    bottom: 31px;
    left: clamp(24px, 3.5vw, 54px);
    color: var(--mg-benefits-sage);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
  }

  @media screen and (max-width: 989px) {
    .mgbenefits__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mgbenefits__item:nth-child(2n) {
      border-right: 0;
    }

    .mgbenefits__item:nth-child(-n + 2) {
      border-bottom: 1px solid #dfe3df;
    }
  }

  @media screen and (max-width: 599px) {
    .mgbenefits__grid {
      grid-template-columns: 1fr;
    }

    .mgbenefits__item {
      min-height: 290px;
      border-right: 0;
      border-bottom: 1px solid #dfe3df;
    }

    .mgbenefits__item:last-child {
      border-bottom: 0;
    }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "MagneGlow benefits",
  "settings": [
    {
      "type": "color",
      "id": "background",
      "label": "Background",
      "default": "#FFFFFF"
    },
    {
      "type": "color",
      "id": "sage",
      "label": "Brand sage",
      "default": "#A9B8A3"
    }
  ],
  "blocks": [
    {
      "type": "benefit",
      "name": "Benefit",
      "limit": 4,
      "settings": [
        {
          "type": "image_picker",
          "id": "icon",
          "label": "Icon"
        },
        {
          "type": "text",
          "id": "heading",
          "label": "Heading",
          "default": "Softer-feeling water"
        },
        {
          "type": "textarea",
          "id": "text",
          "label": "Text",
          "default": "A more comfortable-feeling swimming experience."
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "MagneGlow benefits",
      "blocks": [
        {
          "type": "benefit",
          "settings": {
            "heading": "Softer-feeling water",
            "text": "A more comfortable-feeling swimming experience."
          }
        },
        {
          "type": "benefit",
          "settings": {
            "heading": "Mineral-rich experience",
            "text": "Premium magnesium pool minerals for mineral-rich water."
          }
        },
        {
          "type": "benefit",
          "settings": {
            "heading": "Clear, balanced water",
            "text": "Supports clear, balanced pool water when used as directed."
          }
        },
        {
          "type": "benefit",
          "settings": {
            "heading": "Designed for modern pools",
            "text": "Made for modern saltwater pool systems."
          }
        }
      ]
    }
  ]
}
{% endschema %}
03 — Formula / Mineral Makeup

File: sections/magneglow-formula.liquid

<section
  id="MagneGlowFormula-{{ section.id }}"
  class="mgformula"
  style="
    --mg-formula-bg: {{ section.settings.background }};
    --mg-formula-sage: {{ section.settings.sage }};
    --mg-formula-blue: {{ section.settings.blue }};
  "
>
  <div class="mgformula__container">
    <div class="mgformula__intro">
      <div>
        <p class="mgformula__eyebrow">
          {{ section.settings.eyebrow | escape }}
        </p>

        <h2>
          {{ section.settings.heading_line_1 | escape }}<br>
          <span>{{ section.settings.heading_line_2 | escape }}</span>
        </h2>
      </div>

      <div class="mgformula__copy">
        {{ section.settings.body }}
      </div>
    </div>

    <div class="mgformula__minerals">
      {% for block in section.blocks %}
        <article class="mgformula__mineral" {{ block.shopify_attributes }}>
          <div
            class="mgformula__circle"
            style="background: {{ block.settings.circle_color }};"
          >
            {{ block.settings.symbol | escape }}
          </div>

          <h3>{{ block.settings.name | escape }}</h3>
        </article>
      {% endfor %}
    </div>

    {% if section.settings.ripple_image != blank %}
      <div class="mgformula__ripple">
        {{
          section.settings.ripple_image
          | image_url: width: 2400
          | image_tag:
            class: 'mgformula__ripple-image',
            widths: '750, 1200, 1800, 2400',
            loading: 'lazy'
        }}
      </div>
    {% endif %}
  </div>
</section>

{% stylesheet %}
  .mgformula {
    overflow: hidden;
    padding: clamp(80px, 9vw, 145px) 0 0;
    background: var(--mg-formula-bg);
  }

  .mgformula *,
  .mgformula *::before,
  .mgformula *::after {
    box-sizing: border-box;
  }

  .mgformula__container {
    width: min(calc(100% - 48px), 1440px);
    margin: 0 auto;
  }

  .mgformula__intro {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.7fr);
    align-items: end;
    gap: clamp(44px, 8vw, 130px);
  }

  .mgformula__eyebrow {
    margin: 0 0 20px;
    color: var(--mg-formula-sage);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .mgformula h2 {
    margin: 0;
    color: #111111;
    font-size: clamp(46px, 5vw, 80px);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.055em;
  }

  .mgformula h2 span {
    color: var(--mg-formula-sage);
  }

  .mgformula__copy {
    color: #555b58;
    font-size: 16px;
    line-height: 1.7;
  }

  .mgformula__copy p {
    margin: 0;
  }

  .mgformula__minerals {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    margin-top: clamp(55px, 7vw, 95px);
  }

  .mgformula__mineral {
    text-align: center;
  }

  .mgformula__circle {
    display: flex;
    width: min(100%, 165px);
    aspect-ratio: 1;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 50%;
    color: #111111;
    font-size: clamp(32px, 3vw, 48px);
    font-weight: 600;
    letter-spacing: -0.04em;
    box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.55);
  }

  .mgformula__mineral h3 {
    margin: 15px 0 0;
    color: #111111;
    font-size: 14px;
    font-weight: 600;
  }

  .mgformula__ripple {
    height: clamp(260px, 36vw, 520px);
    margin-top: 70px;
    overflow: hidden;
  }

  .mgformula__ripple-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media screen and (max-width: 989px) {
    .mgformula__intro {
      grid-template-columns: 1fr;
      align-items: start;
    }

    .mgformula__minerals {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media screen and (max-width: 599px) {
    .mgformula__container {
      width: min(calc(100% - 40px), 1440px);
    }

    .mgformula__minerals {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "MagneGlow formula",
  "settings": [
    {
      "type": "text",
      "id": "eyebrow",
      "label": "Eyebrow",
      "default": "The makeup of MagneGlow"
    },
    {
      "type": "text",
      "id": "heading_line_1",
      "label": "Heading line 1",
      "default": "Five minerals."
    },
    {
      "type": "text",
      "id": "heading_line_2",
      "label": "Heading line 2",
      "default": "One considered formula."
    },
    {
      "type": "richtext",
      "id": "body",
      "label": "Body",
      "default": "<p>MagneGlow combines carefully selected pool minerals to create a premium mineral-rich swimming experience designed for modern saltwater pool systems.</p>"
    },
    {
      "type": "image_picker",
      "id": "ripple_image",
      "label": "Water ripple image"
    },
    {
      "type": "color",
      "id": "background",
      "label": "Background",
      "default": "#F7F8F5"
    },
    {
      "type": "color",
      "id": "sage",
      "label": "Brand sage",
      "default": "#A9B8A3"
    },
    {
      "type": "color",
      "id": "blue",
      "label": "Mineral blue",
      "default": "#B7D7DE"
    }
  ],
  "blocks": [
    {
      "type": "mineral",
      "name": "Mineral",
      "limit": 5,
      "settings": [
        {
          "type": "text",
          "id": "symbol",
          "label": "Symbol",
          "default": "Mg"
        },
        {
          "type": "text",
          "id": "name",
          "label": "Name",
          "default": "Magnesium"
        },
        {
          "type": "color",
          "id": "circle_color",
          "label": "Circle color",
          "default": "#E5EBDD"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "MagneGlow formula",
      "blocks": [
        {
          "type": "mineral",
          "settings": {
            "symbol": "Mg",
            "name": "Magnesium",
            "circle_color": "#E5EBDD"
          }
        },
        {
          "type": "mineral",
          "settings": {
            "symbol": "Na",
            "name": "Sodium",
            "circle_color": "#E3F1F4"
          }
        },
        {
          "type": "mineral",
          "settings": {
            "symbol": "K",
            "name": "Potassium",
            "circle_color": "#DCEEF3"
          }
        },
        {
          "type": "mineral",
          "settings": {
            "symbol": "B",
            "name": "Boron",
            "circle_color": "#EEF1EC"
          }
        },
        {
          "type": "mineral",
          "settings": {
            "symbol": "Si",
            "name": "Silica",
            "circle_color": "#E2F1F5"
          }
        }
      ]
    }
  ]
}
{% endschema %}
04 — Image-Led Lifestyle Panels

File: sections/magneglow-lifestyle-panels.liquid

<section
  id="MagneGlowLifestyle-{{ section.id }}"
  class="mglifestyle"
>
  <div class="mglifestyle__grid">
    {% for block in section.blocks %}
      <article class="mglifestyle__panel" {{ block.shopify_attributes }}>
        {% if block.settings.image != blank %}
          {{
            block.settings.image
            | image_url: width: 2000
            | image_tag:
              class: 'mglifestyle__image',
              widths: '750, 1100, 1500, 2000',
              sizes: '(min-width: 990px) 50vw, 100vw',
              loading: 'lazy'
          }}
        {% endif %}

        <div
          class="mglifestyle__overlay"
          style="opacity: {{ block.settings.overlay | divided_by: 100.0 }};"
        ></div>

        <div class="mglifestyle__content">
          <p class="mglifestyle__eyebrow">
            {{ block.settings.eyebrow | escape }}
          </p>

          <h2>{{ block.settings.heading | newline_to_br }}</h2>

          <p class="mglifestyle__text">
            {{ block.settings.text | escape }}
          </p>

          {% if block.settings.button_label != blank %}
            <a
              class="mglifestyle__button"
              href="{{ block.settings.button_link | default: '#' }}"
            >
              {{ block.settings.button_label | escape }}
              <span aria-hidden="true">→</span>
            </a>
          {% endif %}
        </div>
      </article>
    {% endfor %}
  </div>
</section>

{% stylesheet %}
  .mglifestyle *,
  .mglifestyle *::before,
  .mglifestyle *::after {
    box-sizing: border-box;
  }

  .mglifestyle__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mglifestyle__panel {
    position: relative;
    min-height: 720px;
    overflow: hidden;
    isolation: isolate;
  }

  .mglifestyle__image,
  .mglifestyle__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .mglifestyle__image {
    z-index: 1;
    object-fit: cover;
    transition: transform 700ms ease;
  }

  .mglifestyle__panel:hover .mglifestyle__image {
    transform: scale(1.025);
  }

  .mglifestyle__overlay {
    z-index: 2;
    background: #000000;
  }

  .mglifestyle__content {
    position: absolute;
    z-index: 3;
    right: clamp(28px, 5vw, 78px);
    bottom: clamp(40px, 7vw, 96px);
    left: clamp(28px, 5vw, 78px);
    max-width: 650px;
    color: #ffffff;
  }

  .mglifestyle__eyebrow {
    margin: 0 0 16px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .mglifestyle h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(48px, 5.2vw, 82px);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.055em;
  }

  .mglifestyle__text {
    max-width: 590px;
    margin: 20px 0 0;
    color: #ffffff;
    font-size: 18px;
    line-height: 1.55;
  }

  .mglifestyle__button {
    display: inline-flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 28px;
    padding: 15px 25px;
    border: 2px solid #ffffff;
    border-radius: 12px;
    color: #111111;
    background: #ffffff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
  }

  .mglifestyle__button:hover {
    color: #ffffff;
    background: transparent;
  }

  @media screen and (max-width: 989px) {
    .mglifestyle__grid {
      grid-template-columns: 1fr;
    }

    .mglifestyle__panel {
      min-height: 620px;
    }
  }

  @media screen and (max-width: 599px) {
    .mglifestyle__panel {
      min-height: 560px;
    }

    .mglifestyle h2 {
      font-size: clamp(45px, 13vw, 62px);
    }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "MagneGlow lifestyle panels",
  "blocks": [
    {
      "type": "panel",
      "name": "Lifestyle panel",
      "limit": 2,
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Background image"
        },
        {
          "type": "range",
          "id": "overlay",
          "label": "Dark overlay",
          "min": 0,
          "max": 70,
          "step": 5,
          "unit": "%",
          "default": 25
        },
        {
          "type": "text",
          "id": "eyebrow",
          "label": "Eyebrow",
          "default": "For people who use their pool"
        },
        {
          "type": "textarea",
          "id": "heading",
          "label": "Heading",
          "default": "Swim more.\nStay longer."
        },
        {
          "type": "textarea",
          "id": "text",
          "label": "Text",
          "default": "Morning laps. Weekend swims. Time in the water should never feel like an afterthought."
        },
        {
          "type": "text",
          "id": "button_label",
          "label": "Button label",
          "default": "Explore MagneGlow"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "MagneGlow lifestyle panels",
      "blocks": [
        {
          "type": "panel",
          "settings": {
            "eyebrow": "For people who use their pool",
            "heading": "Swim more.\nStay longer.",
            "text": "Morning laps. Weekend swims. Time in the water should never feel like an afterthought.",
            "button_label": "Explore MagneGlow"
          }
        },
        {
          "type": "panel",
          "settings": {
            "eyebrow": "And the people you share it with",
            "heading": "One pool.\nA hundred reasons to get in.",
            "text": "The serious swimmer. The Sunday floater. The family that keeps coming back to the water.",
            "button_label": "Discover the experience"
          }
        }
      ]
    }
  ]
}
{% endschema %}
05 — Science-Led Split Section

File: sections/magneglow-science-split.liquid

<section
  id="MagneGlowScience-{{ section.id }}"
  class="mgscience"
  style="
    --mg-science-bg: {{ section.settings.background }};
    --mg-science-sage: {{ section.settings.sage }};
  "
>
  <div class="mgscience__grid">
    <div class="mgscience__content">
      <div class="mgscience__content-inner">
        <p class="mgscience__eyebrow">
          {{ section.settings.eyebrow | escape }}
        </p>

        <h2>{{ section.settings.heading | newline_to_br }}</h2>

        <div class="mgscience__body">
          {{ section.settings.body }}
        </div>

        {% if section.settings.button_label != blank %}
          <a
            class="mgscience__button"
            href="{{ section.settings.button_link | default: '#' }}"
          >
            {{ section.settings.button_label | escape }}
            <span aria-hidden="true">→</span>
          </a>
        {% endif %}
      </div>
    </div>

    <div class="mgscience__media">
      {% if section.settings.image != blank %}
        {{
          section.settings.image
          | image_url: width: 2200
          | image_tag:
            class: 'mgscience__image',
            widths: '750, 1200, 1700, 2200',
            sizes: '(min-width: 990px) 50vw, 100vw',
            loading: 'lazy'
        }}
      {% endif %}
    </div>
  </div>
</section>

{% stylesheet %}
  .mgscience {
    background: var(--mg-science-bg);
  }

  .mgscience *,
  .mgscience *::before,
  .mgscience *::after {
    box-sizing: border-box;
  }

  .mgscience__grid {
    display: grid;
    min-height: 700px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mgscience__content {
    display: flex;
    align-items: center;
    padding: clamp(70px, 8vw, 130px);
  }

  .mgscience__content-inner {
    max-width: 720px;
    margin-left: auto;
  }

  .mgscience__eyebrow {
    margin: 0 0 18px;
    color: var(--mg-science-sage);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .mgscience h2 {
    margin: 0;
    color: #111111;
    font-size: clamp(48px, 5vw, 80px);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.055em;
  }

  .mgscience__body {
    max-width: 660px;
    margin-top: 26px;
    color: #111111;
    font-size: clamp(18px, 1.5vw, 23px);
    line-height: 1.55;
  }

  .mgscience__body p {
    margin: 0;
  }

  .mgscience__button {
    display: inline-flex;
    min-height: 56px;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 34px;
    padding: 16px 28px;
    border: 2px solid #111111;
    border-radius: 12px;
    color: #111111;
    background: transparent;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
  }

  .mgscience__button:hover {
    background: #ffffff;
  }

  .mgscience__media {
    min-height: 700px;
  }

  .mgscience__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media screen and (max-width: 989px) {
    .mgscience__grid {
      grid-template-columns: 1fr;
    }

    .mgscience__content {
      padding: 80px 28px;
    }

    .mgscience__content-inner {
      margin: 0;
    }

    .mgscience__media {
      min-height: 560px;
    }
  }

  @media screen and (max-width: 599px) {
    .mgscience__content {
      padding: 65px 20px;
    }

    .mgscience__media {
      min-height: 430px;
    }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "MagneGlow science split",
  "settings": [
    {
      "type": "text",
      "id": "eyebrow",
      "label": "Eyebrow",
      "default": "Science-led formulation"
    },
    {
      "type": "textarea",
      "id": "heading",
      "label": "Heading",
      "default": "Not a trend.\nA formula."
    },
    {
      "type": "richtext",
      "id": "body",
      "label": "Body",
      "default": "<p>Five mineral ingredients. One clear purpose: a premium magnesium pool mineral experience designed for the pool environment.</p>"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button label",
      "default": "Explore the formula"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button link"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Mineral image"
    },
    {
      "type": "color",
      "id": "background",
      "label": "Background",
      "default": "#C9D9EE"
    },
    {
      "type": "color",
      "id": "sage",
      "label": "Brand sage",
      "default": "#A9B8A3"
    }
  ],
  "presets": [
    {
      "name": "MagneGlow science split"
    }
  ]
}
{% endschema %}
06 — Comparison Table

File: sections/magneglow-comparison.liquid

<section
  id="MagneGlowComparison-{{ section.id }}"
  class="mgcompare"
>
  <div class="mgcompare__container">
    <div class="mgcompare__intro">
      <div>
        <p class="mgcompare__eyebrow">
          {{ section.settings.eyebrow | escape }}
        </p>

        <h2>{{ section.settings.heading | newline_to_br }}</h2>

        <div class="mgcompare__body">
          {{ section.settings.body }}
        </div>
      </div>

      <div class="mgcompare__visual">
        {% if section.settings.molecule_image != blank %}
          {{
            section.settings.molecule_image
            | image_url: width: 900
            | image_tag:
              class: 'mgcompare__molecule',
              widths: '400, 650, 900',
              loading: 'lazy'
          }}
        {% endif %}

        {% if section.settings.mineral_image != blank %}
          {{
            section.settings.mineral_image
            | image_url: width: 900
            | image_tag:
              class: 'mgcompare__minerals',
              widths: '400, 650, 900',
              loading: 'lazy'
          }}
        {% endif %}
      </div>
    </div>

    <div class="mgcompare__table-wrap">
      <table class="mgcompare__table">
        <thead>
          <tr>
            <th>Feature</th>
            <th>{{ section.settings.column_two_heading | escape }}</th>
            <th class="mgcompare__featured">
              {{ section.settings.column_three_heading | escape }}
            </th>
          </tr>
        </thead>

        <tbody>
          {% for block in section.blocks %}
            <tr {{ block.shopify_attributes }}>
              <th>{{ block.settings.feature | escape }}</th>
              <td>{{ block.settings.standard | escape }}</td>
              <td class="mgcompare__featured">
                {{ block.settings.magneglow | escape }}
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <p class="mgcompare__note">
      {{ section.settings.note | escape }}
    </p>
  </div>
</section>

{% stylesheet %}
  .mgcompare {
    padding: clamp(80px, 9vw, 145px) 0;
    background: #ffffff;
  }

  .mgcompare *,
  .mgcompare *::before,
  .mgcompare *::after {
    box-sizing: border-box;
  }

  .mgcompare__container {
    width: min(calc(100% - 48px), 1440px);
    margin: 0 auto;
  }

  .mgcompare__intro {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(300px, 0.75fr);
    align-items: end;
    gap: clamp(40px, 8vw, 120px);
    margin-bottom: 60px;
  }

  .mgcompare__eyebrow {
    margin: 0 0 18px;
    color: #a9b8a3;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .mgcompare h2 {
    margin: 0;
    color: #111111;
    font-size: clamp(48px, 5vw, 80px);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.055em;
  }

  .mgcompare__body {
    max-width: 540px;
    margin-top: 24px;
    color: #555b58;
    font-size: 17px;
    line-height: 1.65;
  }

  .mgcompare__body p {
    margin: 0;
  }

  .mgcompare__visual {
    position: relative;
    min-height: 260px;
  }

  .mgcompare__molecule {
    position: absolute;
    top: 0;
    right: 0;
    width: min(65%, 420px);
  }

  .mgcompare__minerals {
    position: absolute;
    right: 26%;
    bottom: 0;
    width: min(52%, 310px);
  }

  .mgcompare__table-wrap {
    overflow-x: auto;
    border: 1px solid #dfe3df;
    border-radius: 14px;
  }

  .mgcompare__table {
    width: 100%;
    min-width: 780px;
    border-collapse: collapse;
  }

  .mgcompare__table th,
  .mgcompare__table td {
    padding: 21px 24px;
    border-right: 1px solid #dfe3df;
    border-bottom: 1px solid #dfe3df;
    color: #111111;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    vertical-align: top;
  }

  .mgcompare__table th {
    font-weight: 700;
  }

  .mgcompare__table thead th {
    background: #f7f8f5;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .mgcompare__table .mgcompare__featured {
    background: rgba(169, 184, 163, 0.2);
  }

  .mgcompare__table tr:last-child th,
  .mgcompare__table tr:last-child td {
    border-bottom: 0;
  }

  .mgcompare__table th:last-child,
  .mgcompare__table td:last-child {
    border-right: 0;
  }

  .mgcompare__note {
    margin: 18px 0 0;
    color: #737976;
    font-size: 12px;
    line-height: 1.6;
  }

  @media screen and (max-width: 989px) {
    .mgcompare__intro {
      grid-template-columns: 1fr;
      align-items: start;
    }

    .mgcompare__visual {
      min-height: 300px;
    }
  }

  @media screen and (max-width: 599px) {
    .mgcompare__container {
      width: min(calc(100% - 40px), 1440px);
    }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "MagneGlow comparison",
  "settings": [
    {
      "type": "text",
      "id": "eyebrow",
      "label": "Eyebrow",
      "default": "See the difference"
    },
    {
      "type": "textarea",
      "id": "heading",
      "label": "Heading",
      "default": "Compare\nthe experience."
    },
    {
      "type": "richtext",
      "id": "body",
      "label": "Body",
      "default": "<p>Not just pool salt. It is the considered mineral blend that creates the difference.</p>"
    },
    {
      "type": "text",
      "id": "column_two_heading",
      "label": "Second column heading",
      "default": "Regular pool salt"
    },
    {
      "type": "text",
      "id": "column_three_heading",
      "label": "Third column heading",
      "default": "MagneGlow"
    },
    {
      "type": "image_picker",
      "id": "molecule_image",
      "label": "Molecule image"
    },
    {
      "type": "image_picker",
      "id": "mineral_image",
      "label": "Mineral pile"
    },
    {
      "type": "text",
      "id": "note",
      "label": "Note",
      "default": "Most pools still require appropriate sanitization and balanced pool chemistry."
    }
  ],
  "blocks": [
    {
      "type": "row",
      "name": "Comparison row",
      "settings": [
        {
          "type": "text",
          "id": "feature",
          "label": "Feature",
          "default": "Water feel"
        },
        {
          "type": "text",
          "id": "standard",
          "label": "Regular pool salt",
          "default": "Traditional saltwater experience"
        },
        {
          "type": "text",
          "id": "magneglow",
          "label": "MagneGlow",
          "default": "Softer-feeling mineral-rich water"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "MagneGlow comparison",
      "blocks": [
        {
          "type": "row",
          "settings": {
            "feature": "Mineral blend",
            "standard": "Primarily sodium chloride",
            "magneglow": "Magnesium-rich mineral blend"
          }
        },
        {
          "type": "row",
          "settings": {
            "feature": "Water feel",
            "standard": "Traditional saltwater feel",
            "magneglow": "Softer-feeling water"
          }
        },
        {
          "type": "row",
          "settings": {
            "feature": "Mineral profile",
            "standard": "Single-mineral foundation",
            "magneglow": "Considered multi-mineral formula"
          }
        },
        {
          "type": "row",
          "settings": {
            "feature": "Swimming experience",
            "standard": "Everyday pool experience",
            "magneglow": "Premium mineral pool experience"
          }
        },
        {
          "type": "row",
          "settings": {
            "feature": "Designed for",
            "standard": "Standard saltwater pools",
            "magneglow": "Modern pool owners"
          }
        }
      ]
    }
  ]
}
{% endschema %}
07 — Compatibility and FAQ

File: sections/magneglow-compatibility.liquid

<section
  id="MagneGlowCompatibility-{{ section.id }}"
  class="mgcompat"
>
  <div class="mgcompat__container">
    <div class="mgcompat__header">
      <div>
        <p class="mgcompat__eyebrow">
          {{ section.settings.eyebrow | escape }}
        </p>

        <h2>{{ section.settings.heading | newline_to_br }}</h2>
      </div>

      <div class="mgcompat__intro">
        {{ section.settings.body }}
      </div>
    </div>

    {% if section.settings.image != blank %}
      <div class="mgcompat__image-wrap">
        {{
          section.settings.image
          | image_url: width: 2400
          | image_tag:
            class: 'mgcompat__image',
            widths: '750, 1200, 1800, 2400',
            loading: 'lazy'
        }}
      </div>
    {% endif %}

    <div class="mgcompat__icons">
      {% for block in section.blocks %}
        {% if block.type == 'compatibility' %}
          <article class="mgcompat__icon-item" {{ block.shopify_attributes }}>
            {% if block.settings.icon != blank %}
              {{
                block.settings.icon
                | image_url: width: 150
                | image_tag:
                  class: 'mgcompat__icon',
                  widths: '75, 110, 150',
                  loading: 'lazy'
              }}
            {% endif %}

            <h3>{{ block.settings.heading | escape }}</h3>
          </article>
        {% endif %}
      {% endfor %}
    </div>

    <div class="mgcompat__faq">
      <h2>{{ section.settings.faq_heading | escape }}</h2>

      {% for block in section.blocks %}
        {% if block.type == 'faq' %}
          <details {{ block.shopify_attributes }}>
            <summary>{{ block.settings.question | escape }}</summary>
            <div class="mgcompat__answer">
              {{ block.settings.answer }}
            </div>
          </details>
        {% endif %}
      {% endfor %}
    </div>
  </div>
</section>

{% stylesheet %}
  .mgcompat {
    padding: clamp(80px, 9vw, 145px) 0;
    background: #f7f8f5;
  }

  .mgcompat *,
  .mgcompat *::before,
  .mgcompat *::after {
    box-sizing: border-box;
  }

  .mgcompat__container {
    width: min(calc(100% - 48px), 1440px);
    margin: 0 auto;
  }

  .mgcompat__header {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.7fr);
    align-items: end;
    gap: clamp(40px, 8vw, 120px);
  }

  .mgcompat__eyebrow {
    margin: 0 0 18px;
    color: #a9b8a3;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .mgcompat h2 {
    margin: 0;
    color: #111111;
    font-size: clamp(46px, 5vw, 78px);
    font-weight: 600;
    line-height: 0.99;
    letter-spacing: -0.055em;
  }

  .mgcompat__intro {
    color: #555b58;
    font-size: 17px;
    line-height: 1.7;
  }

  .mgcompat__intro p {
    margin: 0;
  }

  .mgcompat__image-wrap {
    height: clamp(340px, 42vw, 610px);
    margin-top: 60px;
    overflow: hidden;
    border-radius: 18px;
  }

  .mgcompat__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mgcompat__icons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 56px;
    border-top: 1px solid #dfe3df;
    border-bottom: 1px solid #dfe3df;
  }

  .mgcompat__icon-item {
    padding: 34px 24px;
    border-right: 1px solid #dfe3df;
    text-align: center;
  }

  .mgcompat__icon-item:last-child {
    border-right: 0;
  }

  .mgcompat__icon {
    display: block;
    width: 42px;
    height: 42px;
    margin: 0 auto 17px;
    object-fit: contain;
  }

  .mgcompat__icon-item h3 {
    margin: 0;
    color: #111111;
    font-size: 15px;
    font-weight: 600;
  }

  .mgcompat__faq {
    max-width: 1000px;
    margin: clamp(75px, 9vw, 125px) auto 0;
  }

  .mgcompat__faq > h2 {
    margin-bottom: 35px;
    font-size: clamp(36px, 4vw, 58px);
  }

  .mgcompat details {
    border-top: 1px solid #d4d9d5;
  }

  .mgcompat details:last-child {
    border-bottom: 1px solid #d4d9d5;
  }

  .mgcompat summary {
    position: relative;
    padding: 25px 48px 25px 0;
    color: #111111;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.45;
    list-style: none;
    cursor: pointer;
  }

  .mgcompat summary::-webkit-details-marker {
    display: none;
  }

  .mgcompat summary::after {
    position: absolute;
    top: 50%;
    right: 4px;
    font-size: 25px;
    content: "+";
    transform: translateY(-50%);
  }

  .mgcompat details[open] summary::after {
    content: "−";
  }

  .mgcompat__answer {
    max-width: 780px;
    padding: 0 50px 28px 0;
    color: #555b58;
    font-size: 15px;
    line-height: 1.7;
  }

  .mgcompat__answer p:first-child {
    margin-top: 0;
  }

  @media screen and (max-width: 989px) {
    .mgcompat__header {
      grid-template-columns: 1fr;
      align-items: start;
    }

    .mgcompat__icons {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mgcompat__icon-item:nth-child(2n) {
      border-right: 0;
    }

    .mgcompat__icon-item:nth-child(-n + 2) {
      border-bottom: 1px solid #dfe3df;
    }
  }

  @media screen and (max-width: 599px) {
    .mgcompat__container {
      width: min(calc(100% - 40px), 1440px);
    }

    .mgcompat__icons {
      grid-template-columns: 1fr;
    }

    .mgcompat__icon-item {
      border-right: 0;
      border-bottom: 1px solid #dfe3df;
    }

    .mgcompat__icon-item:last-child {
      border-bottom: 0;
    }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "MagneGlow compatibility",
  "settings": [
    {
      "type": "text",
      "id": "eyebrow",
      "label": "Eyebrow",
      "default": "Built to work with your pool"
    },
    {
      "type": "textarea",
      "id": "heading",
      "label": "Heading",
      "default": "Designed for modern\nsaltwater pools."
    },
    {
      "type": "richtext",
      "id": "body",
      "label": "Body",
      "default": "<p>Designed for use with modern saltwater pool systems. Always follow the product instructions and maintain appropriate sanitization and balanced pool chemistry.</p>"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Pool equipment image"
    },
    {
      "type": "text",
      "id": "faq_heading",
      "label": "FAQ heading",
      "default": "Frequently asked questions"
    }
  ],
  "blocks": [
    {
      "type": "compatibility",
      "name": "Compatibility item",
      "limit": 4,
      "settings": [
        {
          "type": "image_picker",
          "id": "icon",
          "label": "Icon"
        },
        {
          "type": "text",
          "id": "heading",
          "label": "Heading",
          "default": "Salt systems"
        }
      ]
    },
    {
      "type": "faq",
      "name": "FAQ",
      "settings": [
        {
          "type": "text",
          "id": "question",
          "label": "Question",
          "default": "Will MagneGlow work with my salt system?"
        },
        {
          "type": "richtext",
          "id": "answer",
          "label": "Answer",
          "default": "<p>MagneGlow is designed for modern saltwater pool systems. Compatibility and dosing can vary, so follow the product instructions and check your pool system requirements.</p>"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "MagneGlow compatibility",
      "blocks": [
        {
          "type": "compatibility",
          "settings": {
            "heading": "Salt systems"
          }
        },
        {
          "type": "compatibility",
          "settings": {
            "heading": "Salt cells"
          }
        },
        {
          "type": "compatibility",
          "settings": {
            "heading": "Modern pool surfaces"
          }
        },
        {
          "type": "compatibility",
          "settings": {
            "heading": "Existing equipment"
          }
        },
        {
          "type": "faq",
          "settings": {
            "question": "Will MagneGlow work with my salt system?",
            "answer": "<p>MagneGlow is designed for modern saltwater pool systems. Follow the product instructions and confirm your equipment requirements before use.</p>"
          }
        },
        {
          "type": "faq",
          "settings": {
            "question": "Does MagneGlow replace pool sanitization?",
            "answer": "<p>No. Most pools still require appropriate sanitization and balanced pool chemistry.</p>"
          }
        },
        {
          "type": "faq",
          "settings": {
            "question": "Can MagneGlow be used in an existing pool?",
            "answer": "<p>It is designed for modern pools, but installation, dosing, and compatibility depend on the pool system. Follow the product instructions or speak with a qualified pool professional.</p>"
          }
        }
      ]
    }
  ]
}
{% endschema %}
08 — Final CTA

File: sections/magneglow-final-cta.liquid

<section
  id="MagneGlowFinalCTA-{{ section.id }}"
  class="mgfinalcta"
  style="
    --mg-final-bg: {{ section.settings.background }};
    --mg-final-text: {{ section.settings.text_color }};
  "
>
  {% if section.settings.background_image != blank %}
    {{
      section.settings.background_image
      | image_url: width: 2400
      | image_tag:
        class: 'mgfinalcta__background',
        widths: '750, 1200, 1800, 2400',
        loading: 'lazy'
    }}
  {% endif %}

  <div
    class="mgfinalcta__overlay"
    style="opacity: {{ section.settings.overlay | divided_by: 100.0 }};"
  ></div>

  <div class="mgfinalcta__container">
    <div class="mgfinalcta__content">
      <p class="mgfinalcta__eyebrow">
        {{ section.settings.eyebrow | escape }}
      </p>

      <h2>{{ section.settings.heading | newline_to_br }}</h2>

      <div class="mgfinalcta__body">
        {{ section.settings.body }}
      </div>

      {% if section.settings.button_label != blank %}
        <a
          class="mgfinalcta__button"
          href="{{ section.settings.button_link | default: '#' }}"
        >
          {{ section.settings.button_label | escape }}
          <span aria-hidden="true">→</span>
        </a>
      {% endif %}
    </div>

    {% if section.settings.product_image != blank %}
      {{
        section.settings.product_image
        | image_url: width: 1400
        | image_tag:
          class: 'mgfinalcta__product',
          widths: '500, 800, 1100, 1400',
          loading: 'lazy'
      }}
    {% endif %}

    {% if section.settings.mineral_image != blank %}
      {{
        section.settings.mineral_image
        | image_url: width: 1000
        | image_tag:
          class: 'mgfinalcta__minerals',
          widths: '400, 700, 1000',
          loading: 'lazy'
      }}
    {% endif %}
  </div>
</section>

{% stylesheet %}
  .mgfinalcta {
    position: relative;
    min-height: 600px;
    overflow: hidden;
    color: var(--mg-final-text);
    background: var(--mg-final-bg);
    isolation: isolate;
  }

  .mgfinalcta *,
  .mgfinalcta *::before,
  .mgfinalcta *::after {
    box-sizing: border-box;
  }

  .mgfinalcta__background,
  .mgfinalcta__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .mgfinalcta__background {
    z-index: 1;
    object-fit: cover;
  }

  .mgfinalcta__overlay {
    z-index: 2;
    background: #000000;
  }

  .mgfinalcta__container {
    position: relative;
    z-index: 3;
    display: grid;
    width: min(calc(100% - 48px), 1440px);
    min-height: 600px;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
    align-items: center;
    gap: 50px;
    margin: 0 auto;
    padding: clamp(70px, 8vw, 120px) 0;
  }

  .mgfinalcta__content {
    max-width: 760px;
  }

  .mgfinalcta__eyebrow {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .mgfinalcta h2 {
    margin: 0;
    color: inherit;
    font-size: clamp(48px, 5.5vw, 88px);
    font-weight: 600;
    line-height: 0.96;
    letter-spacing: -0.06em;
  }

  .mgfinalcta__body {
    max-width: 620px;
    margin-top: 25px;
    color: inherit;
    font-size: 18px;
    line-height: 1.65;
  }

  .mgfinalcta__body p {
    margin: 0;
  }

  .mgfinalcta__button {
    display: inline-flex;
    min-height: 56px;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 32px;
    padding: 16px 28px;
    border: 2px solid #ffffff;
    border-radius: 12px;
    color: #111111;
    background: #ffffff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
  }

  .mgfinalcta__button:hover {
    color: #ffffff;
    background: transparent;
  }

  .mgfinalcta__product {
    position: relative;
    z-index: 2;
    width: min(100%, 560px);
    margin-left: auto;
    filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.22));
  }

  .mgfinalcta__minerals {
    position: absolute;
    z-index: 4;
    right: 28%;
    bottom: 2%;
    width: min(28%, 330px);
  }

  @media screen and (max-width: 989px) {
    .mgfinalcta__container {
      min-height: 0;
      grid-template-columns: 1fr;
    }

    .mgfinalcta__product {
      width: min(70%, 520px);
      margin: 0 auto;
    }

    .mgfinalcta__minerals {
      right: 46%;
      width: 35%;
    }
  }

  @media screen and (max-width: 599px) {
    .mgfinalcta__container {
      width: min(calc(100% - 40px), 1440px);
    }

    .mgfinalcta__product {
      width: 82%;
    }

    .mgfinalcta__minerals {
      right: 45%;
      width: 45%;
    }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "MagneGlow final CTA",
  "settings": [
    {
      "type": "text",
      "id": "eyebrow",
      "label": "Eyebrow",
      "default": "A more considered pool experience"
    },
    {
      "type": "textarea",
      "id": "heading",
      "label": "Heading",
      "default": "Water that fits\nhow you live."
    },
    {
      "type": "richtext",
      "id": "body",
      "label": "Body",
      "default": "<p>Premium magnesium pool minerals. Softer-feeling water. A more enjoyable swim.</p>"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button",
      "default": "Shop MagneGlow"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button link"
    },
    {
      "type": "image_picker",
      "id": "background_image",
      "label": "Background image"
    },
    {
      "type": "image_picker",
      "id": "product_image",
      "label": "Product bag"
    },
    {
      "type": "image_picker",
      "id": "mineral_image",
      "label": "Mineral pile"
    },
    {
      "type": "range",
      "id": "overlay",
      "label": "Image darkening overlay",
      "min": 0,
      "max": 70,
      "step": 5,
      "unit": "%",
      "default": 20
    },
    {
      "type": "color",
      "id": "background",
      "label": "Background",
      "default": "#A9B8A3"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text",
      "default": "#FFFFFF"
    }
  ],
  "presets": [
    {
      "name": "MagneGlow final CTA"
    }
  ]
}
{% endschema %}
Homepage order

Add the sections in this sequence:

MagneGlow hero
MagneGlow benefits
MagneGlow formula
MagneGlow lifestyle panels
MagneGlow science split
MagneGlow comparison
MagneGlow compatibility
MagneGlow final CTA
Compliance review

🟢 SAFE

Softer-feeling water
Mineral-rich swimming experience
More enjoyable swim
Designed for modern saltwater pool systems
Clear, balanced pool water
Appropriate sanitization disclaimer

🟠 CAUTION

Confirm the exact five-mineral formulation before publishing mineral names.
Confirm compatibility wording against the final product instructions and equipment requirements.
Do not use AI-generated packaging as the final product representation.

🔴 RED FLAGS REMOVED

Skin improvement
Eye irritation claims
Muscle recovery
Sleep improvement
Stress reduction
Transdermal absorption benefits
Child or infant safety claims
Therapeutic or performance claims
Australian terminology flags
Use fiberglass, not “fibreglass.”
Use salt system, salt cell, or salt generator, not “saltwater chlorinator.”
Use sanitization, not “sanitisation.”
ok now do each of the other sections, dont stop until youve done them all, in separate copy blocks, as i am going to sleep and when i wake up ill copy them over and keep editing, also collate all the images into a zip folder for me to download, once again ensure you are using the correct brand guidelines, the correct packaging, and it relates to this mockup. also please provide me with both the black and green footer options, there should be a cta in each footer, whether thats subscribe or become a resellar... but in the correct terms.

Please do this with accuracy and speed. avoid the gradiant fades, i want clean lines between blocks of text and image. dont use any em dashes in your words.
Worked for 58s

Everything is packaged and ready.

Download the complete Shopify build

Download all Liquid files, CSS, icons, molecule graphics, ripple graphic, mineral pile, and reference mockup

Individual Liquid files
Magnesium Benefits page

Download magneglow-benefits-page.liquid

Magnesium vs Regular Pool Salt page

Download magneglow-comparison-page.liquid

Pool Water Comfort page

Download magneglow-comfort-page.liquid

Compatibility page

Download magneglow-compatibility-page.liquid

Black footer with subscription CTA

Download magneglow-footer-black.liquid

Sage footer with retail partner CTA

Download magneglow-footer-sage.liquid

Styling sheet update

Paste this complete file at the end of your existing assets/magneglow.css:

magneglow-pages.css

It uses:

Brand sage #A9B8A3
Clean borders between content and imagery
No gradient fades
2px button borders
12px rounded buttons
Responsive layouts
White eyebrow text over dark imagery
Sage eyebrow text on light backgrounds
Image and icon assets

The ZIP includes scalable SVG files for:

Blue molecule graphic
White molecule graphic
Mineral pile
Water ripple
Softer-feeling water
Mineral-rich water
Clear water
Modern pools
Pool
Pump
Filter
Salt cell
Heater
Salt system
Pool surfaces
Equipment
Active households
Family
Eye-style comfort icon

These remain separate and editable in Shopify Theme Editor.

Packaging requirement

I have not recreated or imitated the product packaging from the screenshot. The screenshot is too small to produce an accurate, production-quality package render.

Upload the final approved MagneGlow transparent product image into every Official product bag field. Recommended format:

Transparent WebP or PNG
At least 1,800 pixels tall
Clean front-facing product render
No background
Compliance review

🟢 SAFE

Softer-feeling water
Mineral-rich pool water
More enjoyable swimming experience
Designed for modern saltwater pool systems
Chosen by active households
Clear, balanced pool water
Appropriate sanitization disclaimer

🟠 CAUTION

Confirm final equipment and pool-surface compatibility against the approved product instructions.
Confirm the mineral list before publishing exact ingredient names.

🔴 REMOVED

Recovery claims
Sleep claims
Stress claims
Skin treatment claims
Eye irritation claims
Performance claims
Therapeutic claims
Claims that MagneGlow replaces a pool sanitizer 
how can i access the liquid text to copy

Open any of the individual .liquid links I provided. Your browser should show the raw text, then you can select all and copy it.

For example:

Open the benefits Liquid file

Then:

Click the link.
Press Ctrl+A on Windows or Command+A on Mac.
Copy.
In Shopify, go to Online Store → Themes → Edit code → Sections.
Create a new section with the same filename.
Paste the code and save.

The same applies to each file:

Comparison page Liquid
Comfort page Liquid
Compatibility page Liquid
Black footer Liquid
Sage footer Liquid

For the CSS:

magneglow-pages.css

Copy all of that and paste it at the end of your existing assets/magneglow.css.

Library
/
magneglow-pages.css

:root{--mg-sage:#A9B8A3;--mg-off:#F7F8F5;--mg-blue:#DCECF0;--mg-black:#111;--mg-line:#DDE2DE}
.mg-page,.mg-page *,.mg-footer,.mg-footer *{box-sizing:border-box}.mg-page{color:var(--mg-black);background:#fff}.mg-page__container,.mg-footer__inner{width:min(calc(100% - 48px),1440px);margin:auto}.mg-page__eyebrow{margin:0 0 18px;color:var(--mg-sage);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.mg-page__eyebrow--white{color:#fff}.mg-page__title{margin:0;font-size:clamp(48px,5.2vw,82px);font-weight:600;line-height:.98;letter-spacing:-.055em}.mg-page__copy{max-width:640px;margin-top:24px;font-size:17px;line-height:1.68}.mg-page__copy p{margin:0}.mg-page__button{display:inline-flex;min-height:54px;align-items:center;justify-content:center;gap:15px;margin-top:30px;padding:15px 26px;border:2px solid #111;border-radius:12px;color:#111;background:var(--mg-sage);font-size:12px;font-weight:800;letter-spacing:.055em;text-decoration:none;text-transform:uppercase}.mg-page__button--black{color:#fff;background:#111}.mg-page__button:hover{color:#111;background:#fff}.mg-page__hero{display:grid;min-height:620px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);border-bottom:1px solid var(--mg-line)}.mg-page__hero-copy{display:flex;align-items:center;padding:clamp(70px,8vw,125px)}.mg-page__hero-media{position:relative;min-height:620px;overflow:hidden;background:var(--mg-blue)}.mg-page__hero-image{width:100%;height:100%;object-fit:cover}.mg-page__hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.18)}.mg-page__hero-content-over{position:absolute;z-index:2;right:clamp(28px,5vw,72px);bottom:clamp(36px,6vw,84px);left:clamp(28px,5vw,72px);color:#fff}.mg-page__feature-list{border-top:1px solid var(--mg-line)}.mg-page__feature-row{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr);border-bottom:1px solid var(--mg-line)}.mg-page__feature-media{min-height:320px;border-right:1px solid var(--mg-line)}.mg-page__feature-image{width:100%;height:100%;object-fit:cover}.mg-page__feature-copy{display:flex;align-items:center;gap:22px;padding:clamp(32px,5vw,72px)}.mg-page__feature-icon{width:46px;height:46px;object-fit:contain}.mg-page__feature-copy h3{margin:0 0 10px;font-size:clamp(22px,2.3vw,34px);line-height:1.08}.mg-page__feature-copy p{margin:0;color:#555B58;font-size:15px;line-height:1.65}.mg-page__table-wrap{overflow-x:auto;border:1px solid var(--mg-line);border-radius:14px}.mg-page__table{width:100%;min-width:780px;border-collapse:collapse}.mg-page__table th,.mg-page__table td{padding:20px 22px;border-right:1px solid var(--mg-line);border-bottom:1px solid var(--mg-line);text-align:left;vertical-align:top;font-size:14px}.mg-page__table thead th{background:var(--mg-off);font-size:11px;text-transform:uppercase}.mg-page__table .is-featured{background:rgba(169,184,163,.18)}.mg-page__cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.75fr);align-items:center;gap:40px;padding:clamp(54px,7vw,100px);background:var(--mg-off);border-top:1px solid var(--mg-line)}.mg-page__cta-media{position:relative;min-height:320px}.mg-page__cta-product,.mg-page__cta-minerals,.mg-page__cta-molecule{position:absolute;max-width:100%;height:auto}.mg-page__cta-product{right:8%;bottom:0;width:min(58%,420px)}.mg-page__cta-minerals{right:44%;bottom:0;width:min(42%,280px)}.mg-page__cta-molecule{top:0;right:0;width:min(42%,250px)}.mg-page__compat-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--mg-line);border-radius:14px;overflow:hidden}.mg-page__compat-node{padding:28px 18px;border-right:1px solid var(--mg-line);text-align:center}.mg-page__compat-node img{width:44px;height:44px}.mg-page__faq details{border-top:1px solid var(--mg-line)}.mg-page__faq details:last-child{border-bottom:1px solid var(--mg-line)}.mg-page__faq summary{position:relative;padding:24px 46px 24px 0;font-size:17px;font-weight:700;list-style:none;cursor:pointer}.mg-page__faq summary:after{position:absolute;top:50%;right:2px;content:"+";transform:translateY(-50%);font-size:24px}.mg-page__faq details[open] summary:after{content:"−"}.mg-page__faq-answer{max-width:760px;padding:0 46px 24px 0;color:#555B58;font-size:15px;line-height:1.7}.mg-footer__inner{padding:64px 0 28px}.mg-footer__cta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:30px;padding-bottom:48px;border-bottom:1px solid currentColor}.mg-footer__cta h2{margin:0;font-size:clamp(34px,4vw,58px);line-height:1}.mg-footer__grid{display:grid;grid-template-columns:minmax(260px,1.25fr) repeat(4,minmax(120px,.65fr));gap:40px;padding:48px 0}.mg-footer__brand img{max-width:210px}.mg-footer__brand p{max-width:330px;font-size:14px;line-height:1.7}.mg-footer__column h3{font-size:11px;text-transform:uppercase}.mg-footer__column a{display:block;margin:9px 0;color:inherit;font-size:13px;text-decoration:none}.mg-footer__bottom{display:flex;justify-content:space-between;gap:24px;padding-top:22px;border-top:1px solid currentColor;font-size:12px}.mg-footer--black{color:#fff;background:#111}.mg-footer--sage{color:#111;background:#DCE2D3}
@media(max-width:989px){.mg-page__hero,.mg-page__feature-row,.mg-page__cta{grid-template-columns:1fr}.mg-page__feature-media{border-right:0;border-bottom:1px solid var(--mg-line)}.mg-page__compat-flow{grid-template-columns:repeat(2,1fr)}.mg-footer__cta{grid-template-columns:1fr}.mg-footer__grid{grid-template-columns:repeat(2,1fr)}.mg-footer__brand{grid-column:1/-1}}
@media(max-width:599px){.mg-page__container,.mg-footer__inner{width:min(calc(100% - 40px),1440px)}.mg-page__hero-copy,.mg-page__feature-copy,.mg-page__cta{padding:60px 20px}.mg-page__compat-flow,.mg-footer__grid{grid-template-columns:1fr}.mg-footer__bottom{flex-direction:column}}

Library
/
magneglow-pages.css

:root{--mg-sage:#A9B8A3;--mg-off:#F7F8F5;--mg-blue:#DCECF0;--mg-black:#111;--mg-line:#DDE2DE}
.mg-page,.mg-page *,.mg-footer,.mg-footer *{box-sizing:border-box}.mg-page{color:var(--mg-black);background:#fff}.mg-page__container,.mg-footer__inner{width:min(calc(100% - 48px),1440px);margin:auto}.mg-page__eyebrow{margin:0 0 18px;color:var(--mg-sage);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.mg-page__eyebrow--white{color:#fff}.mg-page__title{margin:0;font-size:clamp(48px,5.2vw,82px);font-weight:600;line-height:.98;letter-spacing:-.055em}.mg-page__copy{max-width:640px;margin-top:24px;font-size:17px;line-height:1.68}.mg-page__copy p{margin:0}.mg-page__button{display:inline-flex;min-height:54px;align-items:center;justify-content:center;gap:15px;margin-top:30px;padding:15px 26px;border:2px solid #111;border-radius:12px;color:#111;background:var(--mg-sage);font-size:12px;font-weight:800;letter-spacing:.055em;text-decoration:none;text-transform:uppercase}.mg-page__button--black{color:#fff;background:#111}.mg-page__button:hover{color:#111;background:#fff}.mg-page__hero{display:grid;min-height:620px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);border-bottom:1px solid var(--mg-line)}.mg-page__hero-copy{display:flex;align-items:center;padding:clamp(70px,8vw,125px)}.mg-page__hero-media{position:relative;min-height:620px;overflow:hidden;background:var(--mg-blue)}.mg-page__hero-image{width:100%;height:100%;object-fit:cover}.mg-page__hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.18)}.mg-page__hero-content-over{position:absolute;z-index:2;right:clamp(28px,5vw,72px);bottom:clamp(36px,6vw,84px);left:clamp(28px,5vw,72px);color:#fff}.mg-page__feature-list{border-top:1px solid var(--mg-line)}.mg-page__feature-row{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr);border-bottom:1px solid var(--mg-line)}.mg-page__feature-media{min-height:320px;border-right:1px solid var(--mg-line)}.mg-page__feature-image{width:100%;height:100%;object-fit:cover}.mg-page__feature-copy{display:flex;align-items:center;gap:22px;padding:clamp(32px,5vw,72px)}.mg-page__feature-icon{width:46px;height:46px;object-fit:contain}.mg-page__feature-copy h3{margin:0 0 10px;font-size:clamp(22px,2.3vw,34px);line-height:1.08}.mg-page__feature-copy p{margin:0;color:#555B58;font-size:15px;line-height:1.65}.mg-page__table-wrap{overflow-x:auto;border:1px solid var(--mg-line);border-radius:14px}.mg-page__table{width:100%;min-width:780px;border-collapse:collapse}.mg-page__table th,.mg-page__table td{padding:20px 22px;border-right:1px solid var(--mg-line);border-bottom:1px solid var(--mg-line);text-align:left;vertical-align:top;font-size:14px}.mg-page__table thead th{background:var(--mg-off);font-size:11px;text-transform:uppercase}.mg-page__table .is-featured{background:rgba(169,184,163,.18)}.mg-page__cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.75fr);align-items:center;gap:40px;padding:clamp(54px,7vw,100px);background:var(--mg-off);border-top:1px solid var(--mg-line)}.mg-page__cta-media{position:relative;min-height:320px}.mg-page__cta-product,.mg-page__cta-minerals,.mg-page__cta-molecule{position:absolute;max-width:100%;height:auto}.mg-page__cta-product{right:8%;bottom:0;width:min(58%,420px)}.mg-page__cta-minerals{right:44%;bottom:0;width:min(42%,280px)}.mg-page__cta-molecule{top:0;right:0;width:min(42%,250px)}.mg-page__compat-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--mg-line);border-radius:14px;overflow:hidden}.mg-page__compat-node{padding:28px 18px;border-right:1px solid var(--mg-line);text-align:center}.mg-page__compat-node img{width:44px;height:44px}.mg-page__faq details{border-top:1px solid var(--mg-line)}.mg-page__faq details:last-child{border-bottom:1px solid var(--mg-line)}.mg-page__faq summary{position:relative;padding:24px 46px 24px 0;font-size:17px;font-weight:700;list-style:none;cursor:pointer}.mg-page__faq summary:after{position:absolute;top:50%;right:2px;content:"+";transform:translateY(-50%);font-size:24px}.mg-page__faq details[open] summary:after{content:"−"}.mg-page__faq-answer{max-width:760px;padding:0 46px 24px 0;color:#555B58;font-size:15px;line-height:1.7}.mg-footer__inner{padding:64px 0 28px}.mg-footer__cta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:30px;padding-bottom:48px;border-bottom:1px solid currentColor}.mg-footer__cta h2{margin:0;font-size:clamp(34px,4vw,58px);line-height:1}.mg-footer__grid{display:grid;grid-template-columns:minmax(260px,1.25fr) repeat(4,minmax(120px,.65fr));gap:40px;padding:48px 0}.mg-footer__brand img{max-width:210px}.mg-footer__brand p{max-width:330px;font-size:14px;line-height:1.7}.mg-footer__column h3{font-size:11px;text-transform:uppercase}.mg-footer__column a{display:block;margin:9px 0;color:inherit;font-size:13px;text-decoration:none}.mg-footer__bottom{display:flex;justify-content:space-between;gap:24px;padding-top:22px;border-top:1px solid currentColor;font-size:12px}.mg-footer--black{color:#fff;background:#111}.mg-footer--sage{color:#111;background:#DCE2D3}
@media(max-width:989px){.mg-page__hero,.mg-page__feature-row,.mg-page__cta{grid-template-columns:1fr}.mg-page__feature-media{border-right:0;border-bottom:1px solid var(--mg-line)}.mg-page__compat-flow{grid-template-columns:repeat(2,1fr)}.mg-footer__cta{grid-template-columns:1fr}.mg-footer__grid{grid-template-columns:repeat(2,1fr)}.mg-footer__brand{grid-column:1/-1}}
@media(max-width:599px){.mg-page__container,.mg-footer__inner{width:min(calc(100% - 40px),1440px)}.mg-page__hero-copy,.mg-page__feature-copy,.mg-page__cta{padding:60px 20px}.mg-page__compat-flow,.mg-footer__grid{grid-template-columns:1fr}.mg-footer__bottom{flex-direction:column}}