@charset "utf-8";
/* ==========================================================================
   com-memoclear.com

   TECHNOLOGY
   ----------------------------------------------------------------------
   Hand written. No framework, no build step, no CDN.

     * the stylesheet uses NATIVE CSS NESTING throughout, so every block
       reads as one unit rather than as a scatter of selectors;
     * @property declares the typed custom properties that animate, which
       is what lets the gradient on a button move at all;
     * color-mix() derives every tint from the two brand colours, so the
       palette has exactly two sources of truth;
     * :has() does the work that used to need a class from JavaScript.

   The script is one ES module defining three custom elements. If it never
   arrives, every page still reads: answers are open, reveals are visible,
   the menu is a link list. Nothing is hidden until an element upgrades.

   NAMING
   ----------------------------------------------------------------------
   mqc-block            a block
   mqc-block_element    an element inside it (single underscore)
   mqc-is-*  mqc-at-*   state and placement modifiers

   IMAGES
   ----------------------------------------------------------------------
   Nothing is cropped. Every picture is width-driven with height:auto, no
   image sits in a fixed-height box, the cropping value of object-fit is
   used nowhere, and no ancestor of an image hides its overflow.
   ========================================================================== */

@property --mqc-glow {
  syntax: "<percentage>"; inherits: false; initial-value: 0%;
}
@property --mqc-slide {
  syntax: "<length>"; inherits: false; initial-value: 0px;
}

:root {
  /* the two sources of truth, taken off the carton */
  --mqc-navy: #0B2545;
  --mqc-gold: #C89B3C;

  --mqc-navy-deep: #071A33;
  --mqc-navy-mid: #123A6B;
  --mqc-navy-lift: #1E5AA8;
  --mqc-sky: #6FA8E8;
  --mqc-gold-deep: #A0742A;
  --mqc-gold-pale: color-mix(in srgb, var(--mqc-gold) 22%, #fff);

  --mqc-ink: #0D1B2E;
  --mqc-body: #44566E;
  --mqc-mute: #71889F;
  --mqc-page: #F6F8FC;
  --mqc-tint: color-mix(in srgb, var(--mqc-navy) 6%, #fff);
  --mqc-tint-warm: color-mix(in srgb, var(--mqc-gold) 9%, #fff);
  --mqc-card: #FFFFFF;
  --mqc-rule: color-mix(in srgb, var(--mqc-navy) 16%, #fff);
  --mqc-rule-soft: color-mix(in srgb, var(--mqc-navy) 8%, #fff);
  --mqc-alarm: #A33B22;
  --mqc-alarm-pale: #FBEDE8;

  --mqc-shadow-1: 0 1px 2px rgb(11 37 69 / .06), 0 8px 22px rgb(11 37 69 / .07);
  --mqc-shadow-2: 0 10px 20px rgb(11 37 69 / .09), 0 34px 64px rgb(11 37 69 / .16);

  --mqc-round-s: 10px;
  --mqc-round: 16px;
  --mqc-round-l: 24px;
  --mqc-pill: 999px;

  --mqc-head-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mqc-text-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --mqc-side: 22px;
  --mqc-rhythm: clamp(52px, 5.4vw, 100px);
}

*, *::before, *::after { box-sizing: border-box }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--mqc-page);
  color: var(--mqc-body);
  font-family: var(--mqc-text-font);
  font-size: 19px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* one rule, every picture: width leads, height follows the file itself */
img { display: block; max-width: 100%; height: auto }

svg {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

h1, h2, h3, h4 {
  font-family: var(--mqc-head-font);
  color: var(--mqc-ink);
  margin: 0 0 .5em;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.028em;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2.1rem, 1.25rem + 3.1vw, 3.6rem); line-height: 1.06 }
h2 { font-size: clamp(1.68rem, 1.1rem + 2vw, 2.6rem) }
h3 { font-size: clamp(1.1rem, 1rem + .48vw, 1.34rem); line-height: 1.33; font-weight: 700;
     letter-spacing: -.018em }
h4 { font-size: 1rem; font-weight: 700 }

p { margin: 0 0 1.1em }
p:last-child { margin-bottom: 0 }
b, strong { color: var(--mqc-ink); font-weight: 700 }

a {
  color: var(--mqc-navy-lift);
  text-underline-offset: 3px;
  overflow-wrap: break-word;
  &:hover { color: var(--mqc-navy) }
}

::selection { background: var(--mqc-navy-lift); color: #fff }
:focus-visible { outline: 3px solid var(--mqc-gold); outline-offset: 3px; border-radius: 5px }

/* ========================================================== the page frame */
.mqc-skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--mqc-navy); color: #fff; padding: 12px 20px; border-radius: 0 0 10px 0;
  &:focus { left: 0 }
}

.mqc-bound {
  width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--mqc-side);

  &.mqc-is-narrow { max-width: 820px }
  &.mqc-is-wide { max-width: 1320px }
}

.mqc-sec {
  padding: var(--mqc-rhythm) 0;
  position: relative;

  &.mqc-is-tight { padding: clamp(32px, 3.4vw, 56px) 0 }
  &.mqc-at-tint { background: var(--mqc-tint) }
  &.mqc-at-warm { background: var(--mqc-tint-warm) }
  &.mqc-at-card { background: var(--mqc-card) }
  &.mqc-at-navy {
    background: var(--mqc-navy);
    color: color-mix(in srgb, #fff 80%, var(--mqc-navy));
    & h2, & h3 { color: #fff }
    & a { color: var(--mqc-gold-pale) }
  }
}

/* ============================================================ announcement */
.mqc-announce {
  background: var(--mqc-navy-deep);
  color: color-mix(in srgb, #fff 72%, var(--mqc-navy));
  font-size: .79rem;

  & .mqc-announce_row {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 6px 28px; padding-block: 9px;
  }
  & span { display: inline-flex; align-items: center; gap: 8px }
  & svg { width: 1.05em; height: 1.05em; color: var(--mqc-gold) }
  & b { color: #fff; font-weight: 600 }
}

/* ================================================================= masthead */
.mqc-mast {
  position: sticky; top: 0; z-index: 120;
  background: color-mix(in srgb, var(--mqc-page) 94%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--mqc-rule-soft);

  & .mqc-mast_row { display: flex; align-items: center; gap: 16px; min-height: 78px }
}

.mqc-logo {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; margin-right: auto;

  & .mqc-logo_tile {
    width: 44px; height: 44px; flex: none; border-radius: 12px;
    display: grid; place-items: center; color: #fff;
    background: linear-gradient(150deg, var(--mqc-navy-lift), var(--mqc-navy-deep));
    box-shadow: 0 4px 12px rgb(11 37 69 / .3);
    border: 1.5px solid color-mix(in srgb, var(--mqc-gold) 55%, transparent);
    & svg { width: 1.3em; height: 1.3em }
  }
  & .mqc-logo_word {
    display: flex; flex-direction: column; line-height: 1;
    font-family: var(--mqc-head-font); font-weight: 800; font-size: 1.42rem;
    color: var(--mqc-ink); letter-spacing: -.036em;
    & em {
      font-style: normal; font-size: .46rem; letter-spacing: .26em; margin-top: 7px;
      color: var(--mqc-gold-deep); font-weight: 700;
    }
  }
}

.mqc-nav {
  display: flex; align-items: center; gap: 22px;

  & a {
    font-family: var(--mqc-head-font); font-size: .95rem; font-weight: 700;
    color: var(--mqc-body); text-decoration: none; padding: 5px 0;
    border-bottom: 2px solid transparent;
    &:hover { color: var(--mqc-ink); border-color: var(--mqc-gold) }
    &.mqc-is-here { color: var(--mqc-ink); border-color: var(--mqc-navy-lift) }
  }
  & .mqc-act { border-bottom: 0 }
}

.mqc-burger {
  display: none; width: 46px; height: 44px; border: 1.5px solid var(--mqc-rule);
  background: var(--mqc-card); border-radius: 11px; cursor: pointer;
  place-items: center; gap: 5px; grid-auto-flow: row;

  & i { display: block; width: 20px; height: 2px; background: var(--mqc-ink); border-radius: 2px;
        transition: transform .2s, opacity .18s }
}
.mqc-shelf { display: none }

/* the disclosure menu belongs to small screens only; the inline nav takes
   over from 961px and the two are never on screen together */
mqc-menu { display: none }

/* upgraded by the module: only then does the menu become a panel */
mqc-menu:defined {
  & .mqc-burger { display: grid }
  & .mqc-shelf {
    display: none; position: absolute; right: var(--mqc-side); top: calc(100% + 10px);
    min-width: min(78vw, 262px); background: var(--mqc-card);
    border: 1px solid var(--mqc-rule); border-radius: var(--mqc-round);
    box-shadow: var(--mqc-shadow-2); padding: 10px 18px 18px; z-index: 130;
    flex-direction: column;
    & a {
      font-family: var(--mqc-head-font); font-weight: 700; font-size: 1rem;
      color: var(--mqc-body); text-decoration: none; padding: 13px 0;
      border-bottom: 1px solid var(--mqc-rule-soft);
      &:hover { color: var(--mqc-ink) }
      &.mqc-is-here { color: var(--mqc-navy-lift) }
    }
    & .mqc-act { margin-top: 16px; border-bottom: 0; justify-content: center }
  }
  &[open] {
    & .mqc-shelf { display: flex }
    & .mqc-burger i:nth-child(1) { transform: translateY(7px) rotate(45deg) }
    & .mqc-burger i:nth-child(2) { opacity: 0 }
    & .mqc-burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }
  }
}

/* =================================================================== action */
.mqc-act {
  /* the sheen rests just off the left edge and sweeps across on hover */
  --mqc-glow: -25%;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--mqc-head-font); font-weight: 800; font-size: 1rem;
  letter-spacing: -.01em; text-decoration: none; color: #fff;
  padding: 16px 32px; border: 0; border-radius: var(--mqc-pill);
  background:
    radial-gradient(130% 190% at var(--mqc-glow) 50%,
                    color-mix(in srgb, #fff 26%, var(--mqc-navy-lift)) 0%,
                    transparent 58%),
    linear-gradient(120deg, var(--mqc-navy-lift), var(--mqc-navy) 72%);
  box-shadow: 0 8px 20px rgb(11 37 69 / .26);
  transition: --mqc-glow .5s, transform .18s, box-shadow .18s;

  &:hover {
    --mqc-glow: 125%;
    color: #fff; transform: translateY(-2px);
    box-shadow: 0 14px 28px rgb(11 37 69 / .32);
  }
  & svg { width: 1.1em; height: 1.1em; stroke-width: 2.3 }

  &.mqc-is-small { padding: 11px 22px; font-size: .92rem }
  &.mqc-is-large { padding: 19px 44px; font-size: 1.1rem }
  &.mqc-is-full { width: 100% }
  &.mqc-is-gold {
    background: linear-gradient(120deg, var(--mqc-gold), var(--mqc-gold-deep));
    color: var(--mqc-navy-deep);
    box-shadow: 0 8px 20px rgb(160 116 42 / .34);
    &:hover { color: var(--mqc-navy-deep) }
  }
  &.mqc-is-quiet {
    background: var(--mqc-card); color: var(--mqc-ink);
    border: 1.5px solid var(--mqc-rule); box-shadow: none;
    &:hover { background: var(--mqc-tint); border-color: var(--mqc-navy-lift); color: var(--mqc-ink) }
    & svg { color: var(--mqc-navy-lift) }
  }
}
.mqc-acts { display: flex; flex-wrap: wrap; gap: 14px; align-items: center }

.mqc-textlink {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--mqc-head-font); font-weight: 700; font-size: .96rem;
  color: var(--mqc-navy-lift); text-decoration: none;
  border-bottom: 2px solid color-mix(in srgb, var(--mqc-navy-lift) 35%, #fff);
  padding-bottom: 2px;
  &:hover { color: var(--mqc-navy); border-color: var(--mqc-gold) }
}

/* ==================================================================== hero */
.mqc-hero {
  background:
    radial-gradient(900px 520px at 74% 26%, color-mix(in srgb, var(--mqc-navy) 9%, transparent), transparent 68%),
    linear-gradient(180deg, #fff, var(--mqc-page));

  & .mqc-hero_row {
    display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(26px, 3.4vw, 56px); align-items: center;
    padding-block: clamp(36px, 4.2vw, 72px);
  }
  & .mqc-hero_kicker {
    display: inline-flex; align-items: center; gap: .55em; max-width: 100%;
    background: var(--mqc-card); border: 1px solid var(--mqc-rule);
    border-left: 4px solid var(--mqc-gold);
    color: var(--mqc-navy-mid); font-family: var(--mqc-head-font);
    font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
    padding: 9px 18px; border-radius: 4px; margin-bottom: 22px;
    & svg { width: 1.05em; height: 1.05em; color: var(--mqc-gold-deep) }
  }
  & h1 { margin-bottom: .42em; max-width: 16ch }
  & .mqc-hero_lede { font-size: clamp(1.04rem, 1rem + .4vw, 1.2rem); line-height: 1.66; max-width: 50ch }
  & .mqc-hero_marks {
    display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px;
    & span {
      display: inline-flex; align-items: center; gap: 8px; font-size: .84rem;
      background: var(--mqc-card); border: 1px solid var(--mqc-rule-soft);
      border-radius: var(--mqc-pill); padding: 7px 15px;
    }
    & svg { width: 1.15em; height: 1.15em; color: var(--mqc-navy-lift) }
  }
}

.mqc-shot {
  display: grid; place-items: center; position: relative;

  &::before {
    content: ""; position: absolute; width: min(86%, 390px); aspect-ratio: 1;
    border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle,
      color-mix(in srgb, var(--mqc-navy-lift) 20%, transparent),
      transparent 66%);
  }
  & img {
    position: relative; max-width: min(100%, 360px);
    filter: drop-shadow(0 24px 34px rgb(11 37 69 / .22));
  }
  &.mqc-is-small img { max-width: min(100%, 210px) }
  &.mqc-is-wide img { max-width: min(100%, 430px) }
}

/* ========================================================= the assurance bar */
.mqc-assure {
  background: var(--mqc-navy);
  border-block: 1px solid color-mix(in srgb, var(--mqc-gold) 34%, var(--mqc-navy));

  & .mqc-assure_row {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
    padding-block: 22px;
  }
  & .mqc-assure_cell {
    display: flex; align-items: center; gap: 13px; padding-right: 14px;
    border-right: 1px solid color-mix(in srgb, #fff 16%, transparent);
    &:last-child { border-right: 0 }
    & i {
      width: 42px; height: 42px; flex: none; border-radius: 11px; display: grid;
      place-items: center; color: var(--mqc-gold);
      background: color-mix(in srgb, #fff 10%, transparent);
      & svg { width: 1.24em; height: 1.24em }
    }
    & b { display: block; color: #fff; font-family: var(--mqc-head-font);
          font-size: .92rem; font-weight: 800; line-height: 1.3 }
    & em { font-style: normal; display: block; font-size: .78rem; line-height: 1.42;
           color: color-mix(in srgb, #fff 62%, var(--mqc-navy)) }
  }
}

/* ================================================================= headings */
.mqc-lede {
  max-width: 780px; margin: 0 auto clamp(28px, 3vw, 46px); text-align: center;

  &.mqc-at-left { margin: 0 0 clamp(22px, 2.4vw, 38px); max-width: 660px; text-align: left }
  & .mqc-lede_eye {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--mqc-head-font); font-size: .72rem; font-weight: 800;
    letter-spacing: .22em; text-transform: uppercase; color: var(--mqc-gold-deep);
    margin-bottom: 12px;
    &::before { content: ""; width: 22px; height: 2px; background: var(--mqc-gold) }
  }
  & p { font-size: clamp(1.01rem, .99rem + .32vw, 1.16rem); line-height: 1.66 }
}

/* ==================================================================== cards */
.mqc-grid {
  display: grid; gap: 22px;

  &.mqc-at-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  &.mqc-at-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  &.mqc-at-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
}

.mqc-card {
  background: var(--mqc-card); border: 1px solid var(--mqc-rule-soft);
  border-radius: var(--mqc-round-l); padding: 26px; box-shadow: var(--mqc-shadow-1);
  position: relative;

  & h3 { margin-bottom: .4em }
  & p { font-size: .95rem; line-height: 1.64 }

  /* a card that holds a picture loses its padding at the top */
  &:has(> .mqc-fig:first-child) { padding: 0; overflow: visible }
  &:has(> .mqc-fig:first-child) > *:not(.mqc-fig) { padding-inline: 26px }
  &:has(> .mqc-fig:first-child) > *:last-child { padding-bottom: 26px }
  &:has(> .mqc-fig:first-child) > .mqc-fig img {
    border-radius: var(--mqc-round-l) var(--mqc-round-l) 0 0;
  }
  &:has(> .mqc-fig:first-child) h3 { margin-top: 22px }

  & .mqc-card_icon {
    width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center;
    background: var(--mqc-tint); color: var(--mqc-navy-mid); margin-bottom: 16px;
    border: 1px solid var(--mqc-rule);
    & svg { width: 1.3em; height: 1.3em }
  }
  & .mqc-card_num {
    font-family: var(--mqc-head-font); font-size: 2.2rem; font-weight: 800;
    color: var(--mqc-navy-lift); line-height: 1; letter-spacing: -.05em;
    display: block; margin-bottom: 8px;
  }
  & .mqc-card_foot {
    margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--mqc-rule);
    font-size: .8rem; color: var(--mqc-mute);
    & b { color: var(--mqc-gold-deep) }
  }
}

.mqc-ticks {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px;

  & li { display: flex; gap: 12px; align-items: flex-start; font-size: .96rem; line-height: 1.6 }
  & svg { width: 1.12em; height: 1.12em; margin-top: .32em; color: var(--mqc-navy-lift);
          stroke-width: 2.4 }
  &.mqc-at-warn svg { color: var(--mqc-alarm) }
}

/* ================================================================== figures */
.mqc-fig {
  margin: 0; overflow: visible;

  & figcaption { margin-top: 12px; font-size: .81rem; line-height: 1.56; color: var(--mqc-mute) }
  &.mqc-is-framed {
    background: var(--mqc-card); border: 1px solid var(--mqc-rule);
    border-radius: var(--mqc-round-l); padding: 16px; box-shadow: var(--mqc-shadow-1);
  }
  &.mqc-is-round img { border-radius: 50% }
}

/* ============================================== the nutrient cards and index */
.mqc-nutrients { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px }

.mqc-nutrient {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--mqc-card); border: 1px solid var(--mqc-rule-soft);
  border-radius: var(--mqc-round-l); box-shadow: var(--mqc-shadow-1);
  transition: transform .18s, box-shadow .18s, border-color .18s;

  &:hover { transform: translateY(-3px); box-shadow: var(--mqc-shadow-2);
            border-color: color-mix(in srgb, var(--mqc-gold) 55%, #fff) }
  & .mqc-fig img { border-radius: var(--mqc-round-l) var(--mqc-round-l) 0 0 }
  & .mqc-nutrient_body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 9px }
  & .mqc-nutrient_dose {
    align-self: flex-start; font-family: var(--mqc-head-font); font-size: .74rem;
    font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    background: var(--mqc-navy); color: var(--mqc-gold-pale);
    padding: 5px 13px; border-radius: 4px;
  }
  & h3 { margin: 0; color: var(--mqc-ink) }
  & p { margin: 0; font-size: .92rem; line-height: 1.62; color: var(--mqc-body) }
  & .mqc-nutrient_more {
    margin-top: 4px; font-family: var(--mqc-head-font); font-weight: 700; font-size: .88rem;
    color: var(--mqc-navy-lift); display: inline-flex; align-items: center; gap: .4em;
    & svg { width: 1em; height: 1em; stroke-width: 2.4 }
  }
}

/* ==================================================================== steps */
.mqc-steps {
  counter-reset: mqc-step;
  display: grid; gap: 0;

  & .mqc-steps_item {
    counter-increment: mqc-step;
    display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 20px;
    padding: 22px 0; border-bottom: 1px solid var(--mqc-rule-soft);
    &:last-child { border-bottom: 0 }
    &::before {
      content: counter(mqc-step, decimal-leading-zero);
      font-family: var(--mqc-head-font); font-weight: 800; font-size: 1.3rem;
      color: var(--mqc-gold-deep); line-height: 1.2; letter-spacing: -.04em;
      border-top: 3px solid var(--mqc-gold); padding-top: 10px;
    }
    & h3 { margin-bottom: .3em }
    & p { font-size: .96rem }
  }
}

/* ========================================================= supplement panel */
.mqc-facts {
  background: #fff; border: 2px solid var(--mqc-ink); border-radius: 4px;
  padding: 20px 22px; max-width: 540px; font-family: var(--mqc-text-font);

  & .mqc-facts_title {
    font-family: var(--mqc-head-font); font-size: 1.5rem; font-weight: 800;
    letter-spacing: -.025em; margin: 0 0 6px; color: var(--mqc-ink);
    border-bottom: 9px solid var(--mqc-ink); padding-bottom: 5px;
  }
  & .mqc-facts_serve { font-size: .88rem; padding: 5px 0; border-bottom: 1px solid var(--mqc-ink);
                       line-height: 1.45 }
  & .mqc-facts_head {
    display: flex; justify-content: flex-end; gap: 14px; font-size: .74rem; font-weight: 800;
    padding: 4px 0; border-bottom: 5px solid var(--mqc-ink); color: var(--mqc-ink);
  }
  & .mqc-facts_row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 56px; gap: 10px;
    font-size: .86rem; padding: 5px 0; border-bottom: 1px solid #C3CEDC; line-height: 1.4;
    & span:nth-child(2), & span:last-child { font-weight: 800; color: var(--mqc-ink) }
    & span:last-child { text-align: right }
    & small { display: block; font-size: .74em; color: var(--mqc-body) }
    &.mqc-is-last { border-bottom: 5px solid var(--mqc-ink) }
  }
  & .mqc-facts_note { font-size: .76rem; line-height: 1.5; color: var(--mqc-body); margin-top: 10px;
                      & b { display: block; margin-top: 8px } }
}

/* =================================================================== voices */
.mqc-voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px }

.mqc-voice {
  background: var(--mqc-card); border: 1px solid var(--mqc-rule-soft);
  border-radius: var(--mqc-round-l); padding: 28px 26px; box-shadow: var(--mqc-shadow-1);
  display: flex; flex-direction: column;
  border-top: 4px solid var(--mqc-gold);

  & .mqc-voice_top { display: flex; align-items: center; gap: 14px; margin-bottom: 15px }
  & .mqc-voice_face { width: 66px; flex: none }
  & .mqc-voice_face img { border-radius: 50%; border: 3px solid var(--mqc-tint) }
  & .mqc-voice_who { font-family: var(--mqc-head-font); font-size: 1.03rem; font-weight: 800;
                     color: var(--mqc-ink); margin: 0 }
  & .mqc-voice_where { font-size: .8rem; color: var(--mqc-mute); margin: 2px 0 0 }
  & .mqc-voice_text { font-size: .94rem; line-height: 1.66; margin: 0 }
}

.mqc-stars {
  display: inline-flex; gap: 3px; color: var(--mqc-gold); margin-top: 5px;
  & svg { width: .92rem; height: .92rem; fill: currentColor; stroke: none }
}

/* ================================================= pricing: a printed ledger */
.mqc-ledger {
  background:
    linear-gradient(180deg, var(--mqc-navy-deep), var(--mqc-navy));
  border-radius: var(--mqc-round-l);
  padding: clamp(22px, 2.6vw, 40px);
  box-shadow: var(--mqc-shadow-2);
  border: 1px solid color-mix(in srgb, var(--mqc-gold) 40%, var(--mqc-navy));

  & .mqc-ledger_head {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: 10px 20px; padding-bottom: 18px; margin-bottom: 26px;
    border-bottom: 1px solid color-mix(in srgb, var(--mqc-gold) 40%, var(--mqc-navy));
    & h3 { color: #fff; margin: 0; font-size: 1.2rem }
    & span { font-size: .82rem; color: color-mix(in srgb, #fff 66%, var(--mqc-navy)) }
  }
}

.mqc-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
             align-items: start }

.mqc-plan {
  position: relative; display: flex; flex-direction: column; text-align: center;
  background: var(--mqc-card); border-radius: var(--mqc-round);
  padding: 30px 22px 24px; border: 1px solid transparent;

  &.mqc-is-pick {
    background: linear-gradient(180deg, #fff, var(--mqc-gold-pale));
    border-color: var(--mqc-gold);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mqc-gold) 32%, transparent);
  }
  & .mqc-plan_flag {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    font-family: var(--mqc-head-font); font-size: .68rem; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
    padding: 6px 16px; border-radius: 4px;
    background: var(--mqc-navy-mid); color: #fff;
  }
  &.mqc-is-pick .mqc-plan_flag { background: linear-gradient(120deg, var(--mqc-gold), var(--mqc-gold-deep));
                                 color: var(--mqc-navy-deep) }
  & .mqc-plan_shot { margin: 14px auto 12px; width: 100%; display: grid; place-items: center }
  & .mqc-plan_shot img { max-width: min(100%, 172px) }
  & h4 { font-family: var(--mqc-head-font); font-size: 1.22rem; margin: 0 0 2px; color: var(--mqc-ink) }
  & .mqc-plan_supply { font-size: .82rem; color: var(--mqc-mute); margin-bottom: 14px }
  & .mqc-plan_each {
    font-family: var(--mqc-head-font); font-size: 2.8rem; font-weight: 800; line-height: 1;
    color: var(--mqc-navy); letter-spacing: -.05em;
    & sup { font-size: .38em; top: -.75em; position: relative; margin-right: .04em }
  }
  & .mqc-plan_per { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
                    color: var(--mqc-mute); margin-top: 6px }
  & .mqc-plan_line {
    margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--mqc-rule);
    font-size: .93rem;
    & s { color: var(--mqc-mute) }
  }
  & .mqc-plan_save {
    display: inline-block; margin-top: 9px; font-family: var(--mqc-head-font);
    font-size: .81rem; font-weight: 800; padding: 5px 14px; border-radius: 4px;
    background: color-mix(in srgb, var(--mqc-gold) 20%, #fff); color: var(--mqc-gold-deep);
  }
  & .mqc-plan_ship {
    margin-top: 11px; font-size: .85rem; display: flex; align-items: center;
    justify-content: center; gap: 7px;
    & svg { width: 1.14em; height: 1.14em; color: var(--mqc-navy-lift) }
  }
  & .mqc-plan_has {
    list-style: none; margin: 15px 0 0; padding: 0; display: flex; flex-direction: column;
    gap: 8px; text-align: left;
    & li { display: flex; gap: 9px; align-items: flex-start; font-size: .86rem; line-height: 1.5 }
    & svg { width: 1em; height: 1em; margin-top: .32em; color: var(--mqc-navy-lift); stroke-width: 2.6 }
  }
  & .mqc-plan_go { margin-top: 18px }
  & .mqc-plan_fine { margin-top: 11px; font-size: .77rem; color: var(--mqc-mute); line-height: 1.5 }
}

.mqc-ledger_foot {
  margin-top: 24px; padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--mqc-gold) 40%, var(--mqc-navy));
  font-size: .84rem; line-height: 1.6;
  color: color-mix(in srgb, #fff 70%, var(--mqc-navy));
  & a { color: var(--mqc-gold-pale) }
}

/* ================================================================== extras */
.mqc-extras { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px }

.mqc-extra {
  background: var(--mqc-card); border: 1px solid var(--mqc-rule-soft);
  border-radius: var(--mqc-round); padding: 20px; display: flex; flex-direction: column;
  gap: 10px; box-shadow: var(--mqc-shadow-1);

  & .mqc-extra_cover { width: 104px; margin: 0 auto }
  & .mqc-extra_cover img { filter: drop-shadow(0 8px 16px rgb(11 37 69 / .2)) }
  & .mqc-extra_tag { font-family: var(--mqc-head-font); font-size: .68rem; font-weight: 800;
                     letter-spacing: .14em; text-transform: uppercase; color: var(--mqc-gold-deep) }
  & h3 { font-size: .98rem; margin: 0 }
  & p { font-size: .85rem; line-height: 1.56; margin: 0 }
  & .mqc-extra_worth { margin-top: auto; font-size: .8rem; color: var(--mqc-mute);
                       & b { color: var(--mqc-ink) } }
}

/* ================================================================== pledges */
.mqc-pledge {
  display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 32px; align-items: center;
  background: var(--mqc-card); border: 1px solid var(--mqc-rule);
  border-left: 5px solid var(--mqc-gold);
  border-radius: 0 var(--mqc-round-l) var(--mqc-round-l) 0;
  padding: clamp(22px, 2.8vw, 38px); box-shadow: var(--mqc-shadow-1);

  & h2 { margin-bottom: .3em }
}

.mqc-marks {
  display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: center;
  & .mqc-fig { width: 110px }
}

/* ============================================ answers: upgraded by the module */
.mqc-answers { border-top: 2px solid var(--mqc-navy) }

mqc-answer {
  display: block; border-bottom: 1px solid var(--mqc-rule);

  & .mqc-answer_q {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    width: 100%; text-align: left; background: none; border: 0; padding: 20px 2px;
    font-family: var(--mqc-head-font);
    font-size: clamp(1rem, .97rem + .28vw, 1.14rem); font-weight: 800;
    color: var(--mqc-ink); line-height: 1.36; letter-spacing: -.015em;
  }
  & .mqc-answer_a { padding: 0 2px 22px; & p { font-size: .95rem; max-width: 78ch } }

  /* before upgrade every answer is simply open */
  &:not(:defined) .mqc-answer_q { cursor: default }
  &:defined {
    & .mqc-answer_q { cursor: pointer;
      &::after {
        content: ""; width: 26px; height: 26px; flex: none; border-radius: 7px;
        border: 1.5px solid var(--mqc-rule);
        background:
          linear-gradient(var(--mqc-navy-lift), var(--mqc-navy-lift)) center / 11px 2px no-repeat,
          linear-gradient(var(--mqc-navy-lift), var(--mqc-navy-lift)) center / 2px 11px no-repeat;
        transition: background-size .2s, background-color .2s;
      }
    }
    &[open] .mqc-answer_q::after {
      background:
        linear-gradient(var(--mqc-navy-lift), var(--mqc-navy-lift)) center / 11px 2px no-repeat,
        var(--mqc-tint);
    }
    & .mqc-answer_a { display: none }
    &[open] .mqc-answer_a { display: block }
  }
}

/* ============================================================ notes and flags */
.mqc-note {
  background: var(--mqc-card); border: 1px solid var(--mqc-rule);
  border-left: 4px solid var(--mqc-navy-lift);
  border-radius: 0 var(--mqc-round) var(--mqc-round) 0; padding: 20px 24px;
  & h3 { font-size: 1.02rem; margin-bottom: .4em }
  & p { font-size: .94rem }
}

.mqc-flag {
  background: var(--mqc-alarm-pale); border: 1px solid #EDD3C9;
  border-left: 4px solid var(--mqc-alarm);
  border-radius: 0 var(--mqc-round) var(--mqc-round) 0; padding: 20px 24px; color: #6A3324;
  & h3 { color: var(--mqc-alarm); font-size: 1.02rem; margin-bottom: .4em }
  & p { font-size: .94rem }
  & a { color: #8A2F16 }
}

/* =================================================================== tables */
.mqc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch }
.mqc-table {
  width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 520px;

  & th, & td { text-align: left; padding: 13px 15px; border-bottom: 1px solid var(--mqc-rule) }
  & thead th {
    font-family: var(--mqc-head-font); font-size: .74rem; letter-spacing: .1em;
    text-transform: uppercase; color: #fff; background: var(--mqc-navy); font-weight: 800;
  }
  & tbody th { font-weight: 700; color: var(--mqc-ink) }
  & td b { color: var(--mqc-ink) }
  & caption { caption-side: bottom; padding-top: 12px; font-size: .81rem; color: var(--mqc-mute);
              text-align: left }
}

/* ============================================================ page headings */
.mqc-crumbs {
  font-size: .8rem; color: var(--mqc-mute); padding: 16px 0 0;
  & a { color: var(--mqc-mute); text-decoration: none; &:hover { color: var(--mqc-navy-lift) } }
  & i { margin: 0 8px; font-style: normal; color: var(--mqc-rule) }
}

.mqc-pagetop {
  padding: clamp(18px, 2.2vw, 32px) 0 clamp(24px, 3vw, 42px);
  background: linear-gradient(180deg, #fff, var(--mqc-page));
  border-bottom: 1px solid var(--mqc-rule-soft);

  & h1 { max-width: 21ch }
  & p { font-size: clamp(1.01rem, .99rem + .32vw, 1.16rem); line-height: 1.66; max-width: 66ch }
  & .mqc-pagetop_meta {
    display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px;
    font-size: .81rem; color: var(--mqc-mute);
    & span { display: inline-flex; align-items: center; gap: 7px }
    & svg { width: 1.05em; height: 1.05em; color: var(--mqc-gold-deep) }
  }
}

/* ==================================================================== prose */
.mqc-prose {
  & h2 { margin-top: 1.6em }
  & h3 { margin-top: 1.4em }
  & ul, & ol { padding-left: 1.2em; margin: 0 0 1.1em }
  & li { margin-bottom: .5em }
  & > *:first-child { margin-top: 0 }
  & blockquote {
    margin: 1.4em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--mqc-gold);
    font-size: 1.04rem; color: var(--mqc-ink);
  }
}

/* =============================================================== blog cards */
.mqc-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px }

.mqc-post {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--mqc-card); border: 1px solid var(--mqc-rule-soft);
  border-radius: var(--mqc-round-l); padding: 26px; box-shadow: var(--mqc-shadow-1);
  transition: transform .18s, box-shadow .18s;

  &:hover { transform: translateY(-3px); box-shadow: var(--mqc-shadow-2) }
  & .mqc-post_tag {
    font-family: var(--mqc-head-font); font-size: .68rem; font-weight: 800;
    letter-spacing: .15em; text-transform: uppercase; color: var(--mqc-gold-deep);
    margin-bottom: 10px;
  }
  & h3 { margin-bottom: .4em; color: var(--mqc-ink) }
  & p { font-size: .92rem; line-height: 1.62; color: var(--mqc-body); margin: 0 }
  & .mqc-post_more {
    margin-top: 16px; font-family: var(--mqc-head-font); font-weight: 700; font-size: .88rem;
    color: var(--mqc-navy-lift); display: inline-flex; align-items: center; gap: .4em;
    & svg { width: 1em; height: 1em; stroke-width: 2.4 }
  }
}

/* ================================================= the closing call to action */
.mqc-finale {
  position: relative;
  background:
    radial-gradient(720px 420px at 18% 22%, color-mix(in srgb, var(--mqc-navy-lift) 42%, transparent), transparent 70%),
    linear-gradient(140deg, var(--mqc-navy-deep), var(--mqc-navy) 58%, var(--mqc-navy-mid));
  color: color-mix(in srgb, #fff 78%, var(--mqc-navy));
  border-top: 3px solid var(--mqc-gold);

  & .mqc-finale_row {
    display: grid; grid-template-columns: 230px minmax(0, 1fr);
    gap: clamp(24px, 3.6vw, 52px); align-items: center;
    padding-block: clamp(38px, 4.4vw, 72px);
  }
  & .mqc-finale_shot {
    position: relative; display: grid; place-items: center;
    &::before {
      content: ""; position: absolute; width: 196px; height: 196px; border-radius: 50%;
      pointer-events: none;
      background: radial-gradient(circle, color-mix(in srgb, var(--mqc-gold) 30%, transparent), transparent 68%);
    }
    & img { position: relative; max-width: min(100%, 188px);
            filter: drop-shadow(0 18px 30px rgb(0 0 0 / .45)) }
  }
  & h2 { color: #fff; margin-bottom: .32em }
  & .mqc-finale_copy p { max-width: 58ch; font-size: clamp(1.01rem, .99rem + .32vw, 1.16rem);
                         line-height: 1.66 }
  & .mqc-finale_rule {
    width: 64px; height: 3px; background: var(--mqc-gold); margin: 0 0 20px; border: 0;
  }
  & .mqc-finale_go { margin-top: 22px }
  & .mqc-finale_fine { margin-top: 15px; font-size: .81rem;
                       color: color-mix(in srgb, #fff 56%, var(--mqc-navy)) }
}

/* =================================================================== footer */
.mqc-foot {
  background: var(--mqc-navy-deep); color: color-mix(in srgb, #fff 62%, var(--mqc-navy-deep));
  padding: clamp(40px, 4.4vw, 66px) 0 28px;

  & .mqc-foot_grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 32px }
  & .mqc-logo_word { color: #fff }
  & .mqc-logo_word em { color: var(--mqc-gold) }
  & .mqc-foot_about p { margin-top: 16px; font-size: .88rem; line-height: 1.64; max-width: 40ch }
  & .mqc-foot_col {
    & h2 {
      font-family: var(--mqc-head-font); font-size: .74rem; letter-spacing: .17em;
      text-transform: uppercase; color: var(--mqc-gold); margin: 0 0 12px; font-weight: 800;
    }
    & h2 + ul { margin-bottom: 20px }
    & ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px }
    & a {
      color: color-mix(in srgb, #fff 74%, var(--mqc-navy-deep)); font-size: .89rem;
      text-decoration: none; display: inline-block; padding: 5px 0;
      &:hover { color: #fff }
    }
  }
  & .mqc-foot_legal {
    margin-top: 34px; padding-top: 24px;
    border-top: 1px solid color-mix(in srgb, #fff 14%, transparent);
    display: grid; gap: 12px;
    & p { font-size: .78rem; line-height: 1.62; margin: 0; max-width: 104ch;
          color: color-mix(in srgb, #fff 56%, var(--mqc-navy-deep)) }
    & b { color: color-mix(in srgb, #fff 82%, var(--mqc-navy-deep)) }
  }
  & .mqc-foot_base {
    margin-top: 22px; padding-top: 18px;
    border-top: 1px solid color-mix(in srgb, #fff 14%, transparent);
    display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
    font-size: .77rem; color: color-mix(in srgb, #fff 48%, var(--mqc-navy-deep));
    & a { color: color-mix(in srgb, #fff 66%, var(--mqc-navy-deep)); text-decoration: none;
          &:hover { color: #fff } }
  }
}

/* a small capitalised tag, used wherever a card needs a label */
.mqc-tag {
  align-self: flex-start; display: inline-block;
  font-family: var(--mqc-head-font); font-size: .72rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--mqc-navy); color: var(--mqc-gold-pale);
  padding: 5px 12px; border-radius: 4px;
}

/* ================================================================ utilities */
.mqc-center { text-align: center }
.mqc-small { font-size: .81rem; line-height: 1.58; color: var(--mqc-mute) }
.mqc-big { font-size: clamp(1.01rem, .99rem + .32vw, 1.16rem); line-height: 1.66 }
.mqc-gap { margin-top: clamp(24px, 2.8vw, 42px) }
.mqc-gap-s { margin-top: 16px }
.mqc-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3.6vw, 54px); align-items: center;
  &.mqc-at-top { align-items: start }
  &.mqc-at-lead { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) }
  &.mqc-at-trail { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) }
  & > * { min-width: 0 }
}

/* the reveal only exists once the module has upgraded the element */
mqc-rise {
  display: block;
  &:defined {
    opacity: 0; transform: translateY(20px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1);
    &.mqc-is-shown { opacity: 1; transform: none }
  }
}
@media (prefers-reduced-motion: reduce) {
  mqc-rise:defined { opacity: 1; transform: none; transition: none }
  html { scroll-behavior: auto }
  .mqc-act { transition: none }
}

/* ============================================================== responsive */
@media (max-width: 1080px) {
  .mqc-extras { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .mqc-foot .mqc-foot_grid { grid-template-columns: 1fr 1fr 1fr }
  .mqc-foot .mqc-foot_about { grid-column: 1 / -1 }
}

@media (max-width: 960px) {
  .mqc-nav { display: none }
  mqc-menu { display: block }
  mqc-menu:defined .mqc-burger { display: grid }
  .mqc-mast .mqc-mast_row { min-height: 68px }
  .mqc-hero .mqc-hero_row { grid-template-columns: 1fr }
  .mqc-hero .mqc-hero_lede { max-width: none }
  .mqc-shot { order: -1; margin-bottom: 6px }
  .mqc-shot img { max-width: min(72%, 300px) }
  .mqc-split { grid-template-columns: 1fr }
  .mqc-nutrients, .mqc-voices, .mqc-posts, .mqc-plans,
  .mqc-grid.mqc-at-3, .mqc-grid.mqc-at-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .mqc-pledge { grid-template-columns: 1fr; text-align: center; justify-items: center;
                border-left: 0; border-top: 5px solid var(--mqc-gold);
                border-radius: 0 0 var(--mqc-round-l) var(--mqc-round-l) }
  .mqc-finale .mqc-finale_row { grid-template-columns: 178px minmax(0, 1fr) }
}

@media (max-width: 760px) {
  body { font-size: 18.5px }
  .mqc-assure .mqc-assure_row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px }
  .mqc-assure .mqc-assure_cell:nth-child(2n) { border-right: 0 }
  .mqc-extras { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .mqc-finale .mqc-finale_row { grid-template-columns: 1fr; text-align: center; justify-items: center }
  .mqc-finale .mqc-finale_copy p { max-width: none }
  .mqc-finale .mqc-finale_rule { margin-inline: auto }
}

@media (max-width: 620px) {
  .mqc-bound { padding: 0 17px }
  .mqc-nutrients, .mqc-voices, .mqc-posts, .mqc-plans, .mqc-extras,
  .mqc-grid.mqc-at-2, .mqc-grid.mqc-at-3, .mqc-grid.mqc-at-4 { grid-template-columns: 1fr }
  .mqc-logo .mqc-logo_word { font-size: 1.26rem }
  .mqc-logo .mqc-logo_tile { width: 40px; height: 40px; border-radius: 11px }
  .mqc-steps .mqc-steps_item { grid-template-columns: 1fr; gap: 12px }
  .mqc-steps .mqc-steps_item::before { border-top: 0; padding-top: 0 }
  .mqc-voice .mqc-voice_top { flex-direction: column; text-align: center; gap: 10px }
  .mqc-marks .mqc-fig { width: 92px }
  .mqc-foot .mqc-foot_grid { grid-template-columns: 1fr 1fr }
}

@media (max-width: 400px) {
  .mqc-act { padding: 14px 22px; font-size: .95rem }
  .mqc-plan .mqc-plan_each { font-size: 2.4rem }
}