/* ============================================================================
   MemoFix — health-news advertorial
   Rebuilt from scratch 2026-08-03. No framework, no jQuery, no third-party JS.

   THE IDEA (decided before any pixel):
   A news story that happens to carry an offer. The reader is 60+ and worried
   about their memory; credibility is the conversion lever, so the page is
   disciplined and quiet and spends ALL its boldness in exactly one place —
   the pack cards. Large type here is functional for the audience, not styling.

   SYSTEM
   - two typefaces: Newsreader (editorial serif, headlines) + Manrope (UI/body).
     The comment block deliberately uses the system stack — it is mimicking a
     real artefact, so it should look like that artefact and not like our page.
   - one brand colour (MemoFix purple), amber used for ONE job only: marking the
     recommended pack. Red is reserved for LIVE and the struck-through price.
   - two rule weights: 2px separates major parts, 1px separates items inside one.
     Type hangs FROM the rule (space above a heading, little below).
   - 8px rhythm, deliberately UNEQUAL section spacing so it reads as edited.
   ========================================================================== */

:root {
  /* ---- surface ---- */
  --page:        #000000;
  --panel:       #000000;
  --raised:      #16161b;
  --sunken:      #101014;

  /* ---- ink ---- */
  --ink:         #f4f4f6;
  --ink-2:       #b6b6bf;
  --ink-3:       #7c7c88;

  /* ---- rules ---- */
  --rule:        #212128;
  --rule-strong: #33333d;

  /* ---- brand: MemoFix purple. One brand colour, doing identification work. ---- */
  --brand:       #7c3aed;
  --brand-lift:  #a274f5;
  --brand-deep:  #4c1d95;

  /* ---- the recommended pack, and ONLY that ---- */
  --pick:        #e0913a;
  --pick-lift:   #f5b168;
  --pick-deep:   #a8641c;

  /* ---- editorial red: LIVE + the old price, nothing else ---- */
  --red:         #d8121f;

  --ok:          #35c98a;

  /* ---- type ----
     ⚠ Cris compared this side by side with his own page and the serif was WRONG:
     it read heavy and pushed the headline from 2 lines to 4. His page is all
     Manrope. Matching it — one workhorse face, no display serif. */
  --sans:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- measure: wide enough that the headline sets in 2 lines, like his ---- */
  --col:   760px;
  --gut:   20px;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  --ease: cubic-bezier(.2, .7, .3, 1);
}

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

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

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  /* 17px base: this audience is 60+, so the floor is deliberately high */
  font-size: 17px;
  line-height: 1.6;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
}

/* the one texture decision: a fine grain so the black is a surface, not a void */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--brand-lift);
  outline-offset: 3px;
  border-radius: 3px;
}

h1, h2, h3 { text-wrap: balance; margin: 0; }
p, li      { text-wrap: pretty; }

.wrap {
  width: 100%;
  max-width: var(--col);
  margin-inline: auto;
  padding-inline: var(--gut);
  position: relative;
  z-index: 1;
}

/* the article sits on a panel a shade lighter than the page — it reads as a
   printed column laid on a dark table rather than text floating in space */
.sheet {
  /* His page is pure black edge to edge. The panel I had was drawing a grey box
     with visible borders — that is what made mine look like a different site. */
  max-width: calc(var(--col) + 120px);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

/* ── masthead ───────────────────────────────────────────────────────────── */
.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
}
.masthead__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 13px;
  /* caps ALWAYS get tracking — untracked caps is the loudest amateur tell */
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.brand__mark {
  width: 17px; height: 17px;
  border: 2.5px solid var(--brand-lift);
  border-radius: 50%;
  /* optical: a ring next to caps needs to sit a hair low to look centred */
  transform: translateY(.5px);
}
.masthead__icon { color: var(--ink-3); display: inline-flex; }

/* ── article head ───────────────────────────────────────────────────────── */
.article { padding-block: 34px 0; }

.kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 14px;
}

/* Vignelli: one or two sizes played hard against each other. Body is 17px;
   the headline is ~2.6× that. No tidy 8-step ladder in between. */
h1 {
  font-family: var(--sans);
  font-size: clamp(26px, 4.4vw, 34px);
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: -.005em;
  margin-bottom: 18px;
}
h1 em {
  /* his emphasis is weight, not colour — a purple headline read as a louder,
     different page than the one he showed me */
  font-style: normal;
  font-weight: 800;
  color: var(--ink);
}

.byline {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 2px;
  font-size: 13px;
  color: var(--ink-3);
}
.live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  /* caps have no descenders, so the bottom padding reads heavier — trim it */
  padding: 6px 11px 4px;
  border-radius: 4px;
}
.live__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

/* ── video ──────────────────────────────────────────────────────────────── */
.video { padding-block: 26px 0; }
.video__frame {
  background: #000;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--rule);
  /* the supplied player is a 4:5 vertical at max-width 400px — the frame must
     hug it, or you get a wide black letterbox with a narrow video floating in it */
  max-width: 400px;
  margin-inline: auto;
}

/* ── the gate ───────────────────────────────────────────────────────────── */
/* Everything below the video is hidden until the pitch. `.esconder` is the
   house selector — the vTurb player's own displayHiddenElements() is pointed
   at it and reveals it by setting an INLINE display, which beats this rule.
   Do not add an `.is-open` class here: the player owns the reveal. */
.esconder { display: none; }

/* ── offer ──────────────────────────────────────────────────────────────── */
.offer { padding-block: 46px 8px; }

.offer__head { text-align: center; margin-bottom: 30px; }
.offer__head h2 {
  font-family: var(--sans);
  font-size: clamp(25px, 4.6vw, 33px);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 10px;
}
.offer__head p {
  margin: 0;
  color: var(--ink-3);
  font-size: 14px;
}

.packs {
  display: grid;
  gap: 18px;
  /* deliberately NOT three equal columns — the recommended pack leads and is
     visibly bigger. Uniform would flatten the hierarchy we actually want. */
  grid-template-columns: 1fr;
}

/* MOBILE STACK ORDER — Cris 2026-08-03: "on mobile the 6 bottle is first,
   then 3, then 2." Descending value, so the phone reader meets the best pack
   before scroll fatigue sets in. Desktop keeps the source order 2 · 6 · 3
   (reset in the 880px block below).
   Keyed to data-pack, NOT :nth-child — the SKU is what the rule is actually
   about, and nth-child would silently re-map if a card ever moves. */
.packs [data-pack="mem6"] { order: 1; }
.packs [data-pack="mem3"] { order: 2; }
.packs [data-pack="mem2"] { order: 3; }

.pack {
  position: relative;
  background: var(--raised);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* the CTA and total sit on the floor of every card, whatever the perk count —
   ragged button positions across a row read as a bug, not as design */
.pack .buy { margin-top: auto; }

/* the one loud move */
.pack--pick {
  /* NO `order` here. His page only sets `order: 0` inside its 900px block, so
     the stack on mobile is 2 · 6 · 3 — the same sequence as desktop. I had
     `order:-1` pulling the 6-pack to the top, which silently re-sequenced his
     offer on phones. Matching him. */
  background:
    radial-gradient(ellipse at 50% 0%, rgba(224,145,58,.16), transparent 62%),
    linear-gradient(180deg, #1c1712, #131015);
  border: 1.5px solid var(--pick);
  box-shadow: 0 18px 46px rgba(0,0,0,.55), 0 0 0 1px rgba(224,145,58,.14);
  padding-top: 34px;
}

/* All three cards carry a label — his page does ("Basic" / "BEST VALUE!" /
   "Good Value"). The two side labels stay quiet outlines so the amber badge on
   the recommended pack keeps its job of being the only loud thing here. */
.pack__flag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--raised);
  border: 1px solid var(--rule-strong);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 15px 4px;
  border-radius: 100px;
  white-space: nowrap;
}
.pack--pick .pack__flag {
  background: linear-gradient(180deg, var(--pick-lift), var(--pick-deep));
  border-color: transparent;
  color: #1a1206;
  font-size: 12px;
  padding: 7px 18px 5px;
  letter-spacing: .08em;
}

.pack__qty {
  font-family: var(--sans);
  font-size: 27px;
  font-weight: 600;
  line-height: 1;
}
.pack__supply {
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 6px;
}

.pack__shot {
  align-self: center;
  max-width: 210px;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.6));
}
.pack--pick .pack__shot { max-width: 268px; }

.pack__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pack__was {
  color: var(--red);
  text-decoration: line-through;
  font-size: 17px;
  font-variant-numeric: tabular-nums;   /* every price, always */
}
.pack__now {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.pack--pick .pack__now { color: var(--pick-lift); font-size: 46px; }

.pack__ship {
  font-size: 13.5px;
  color: var(--ink-2);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.pack__ship strong { color: var(--ok); font-weight: 700; }

.perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.perks li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-2);
}
/* his first bullet is the highlighted one on every card */
.perks__lead { color: var(--ink); font-weight: 800; }
.pack--pick .perks__lead { color: var(--pick-lift); }
.perks svg { flex: none; margin-top: 3px; color: var(--brand-lift); }
.pack--pick .perks svg { color: var(--pick-lift); }

.buy {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .05em;
  text-transform: uppercase;
  /* caps label: trim the bottom, pad the sides */
  padding: 17px 20px 15px;
  border-radius: 100px;
  color: #fff;
  background: linear-gradient(180deg, var(--brand-lift), var(--brand-deep));
  box-shadow: 0 10px 24px rgba(124,58,237,.34);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.buy:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(124,58,237,.44); }
.buy:active { transform: translateY(0); }

.pack--pick .buy {
  /* the CTA must not fight the card it sits on — amber card, amber action */
  background: linear-gradient(180deg, var(--pick-lift), var(--pick-deep));
  box-shadow: 0 10px 26px rgba(224,145,58,.4);
  color: #1a1206;                      /* near-black on amber ≈ 8:1; white would fail */
}
.pack--pick .buy:hover { box-shadow: 0 16px 34px rgba(224,145,58,.5); }

/* the payment flags — a trust cue, so they sit quiet and small under the CTA */
.pack__cards {
  width: 100%;
  max-width: 200px;
  margin-inline: auto;
  opacity: .8;
}

.pack__total {
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.pack__total s { color: var(--red); }
.pack__total strong { color: var(--ink); font-size: 15px; }
.pack__total small { font-size: 12px; }
.hot { color: var(--red); font-weight: 700; }


/* ── guarantee ──────────────────────────────────────────────────────────── */
/* the calm block on a loud page — the one that actually gets read */
.guarantee {
  margin-top: 52px;
  padding: 34px 26px;
  background: var(--sunken);
  border-block: 1px solid var(--rule);
  text-align: center;
}
.guarantee h2 {
  font-family: var(--sans);
  font-size: clamp(22px, 4vw, 28px);
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 22px;
}
/* his subtitle is its own line under the title, not a colour swap mid-sentence */
.guarantee h2 span {
  display: block;
  margin-top: 8px;
  color: var(--red);
  font-size: .74em;
  font-weight: 800;
  letter-spacing: .01em;
}
.guarantee__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.guarantee__badge { width: 130px; flex: none; opacity: .95; }
.guarantee__text { text-align: left; }
.guarantee p {
  margin: 0;
  max-width: 62ch;
  color: var(--ink-2);
  font-size: 15.5px;
}
.guarantee p + p { margin-top: 12px; }

/* ── comments (mimics the real artefact on purpose) ─────────────────────── */
.comments {
  margin-top: 52px;
  font-family: "Segoe UI Historic", "Segoe UI", Helvetica, Arial, sans-serif;
}
.comments__bar {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 18px;
}
.comments__bar h3 { font-size: 18px; font-weight: 700; }

.cmt { display: flex; gap: 10px; margin-bottom: 16px; }
.cmt--reply { margin-left: 46px; }
.cmt__pic {
  width: 40px; height: 40px;
  border-radius: 50%;
  flex: none;
  object-fit: cover;
  background: var(--raised);
}
.cmt__body { min-width: 0; }
.cmt__bubble {
  background: var(--raised);
  border-radius: 17px;
  padding: 9px 14px 11px;
}
.cmt__name { font-size: 13.5px; font-weight: 700; margin: 0 0 2px; }
.cmt__text { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.cmt__meta {
  display: flex;
  gap: 14px;
  padding: 5px 0 0 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-3);
}
.cmt__meta button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit;
}
.cmt__meta button:hover { text-decoration: underline; }
.cmt__likes {
  margin-left: auto;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.comments__closed {
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-3);
}

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot {
  margin-top: 56px;
  padding: 26px 0 40px;
  border-top: 1px solid var(--rule);
  text-align: center;
  color: var(--ink-3);
  font-size: 12.5px;
}
.foot nav { display: flex; justify-content: center; gap: 22px; margin-bottom: 14px; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.foot h3 { font-size: 12.5px; font-weight: 400; color: var(--ink-3); }

/* ── wider screens ──────────────────────────────────────────────────────── */
@media (min-width: 880px) {
  :root { --gut: 34px; }

  /* THE OFFER BREAKS OUT OF THE ARTICLE COLUMN.
     The story is a narrow news column on purpose (tension). Three pack cards do
     not fit in 660px — at that width every perk wraps to two lines and the cards
     read as cramped. So the offer, and only the offer, is allowed to be wider.
     That contrast is also the point at which the page changes register from
     "article" to "offer". */
  .offer, .guarantee-wrap { max-width: 1020px; }

  .packs {
    /* NOT three equal columns — the recommended pack is genuinely wider */
    grid-template-columns: 1fr 1.22fr 1fr;
    align-items: stretch;      /* never center: unequal heights stagger and read as a bug */
    gap: 18px;
  }
  /* desktop is a row, so it reads left-to-right in source order: 2 · 6 · 3.
     Undo the mobile re-stack — the 6-pack leads by SIZE here, not by position. */
  .packs [data-pack] { order: 0; }

  .pack--pick { transform: translateY(-10px); }

  /* the 6-pack shot is a WIDE image (2508×1450) so at equal box width it reads
     SMALLER per bottle than the 2-pack. Let it fill its card and cap the others,
     so the quantity you get is legible at a glance. */
  .pack__shot        { max-width: 76%; }
  .pack--pick .pack__shot { max-width: 100%; }

  /* badge beside the text, the way his page sets it */
  .guarantee__row { flex-direction: row; align-items: center; gap: 30px; text-align: left; }
  .guarantee__badge { width: 170px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .pack--pick { transform: none; }
}