/* Zodiak, self-hosted from our own domain. Downloaded from Fontshare
   (Indian Type Foundry), free for personal and commercial use. Serving it
   first-party keeps the "no third-party requests" promise in the privacy notice.
   Only 400 and 700 exist here; a 600 request resolves to the 700 face by the CSS
   font-matching rules, so nothing is faux-bolded. */
@font-face {
  font-family: 'Zodiak';
  src: url('/assets/fonts/zodiak-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Zodiak';
  src: url('/assets/fonts/zodiak-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Zodiak';
  src: url('/assets/fonts/zodiak-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Zodiak';
  src: url('/assets/fonts/zodiak-700-italic.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}

/* Jackson Mills Nutrition
   Editorial direction, chosen by Jackson 2026-08-20 after the SaaS-landing-page
   attempt was rightly called out as looking AI-generated.

   No web fonts. Not a limitation of taste: the two self-hosted faces already on
   this machine belong to The Bright Hours (Instrument Serif) and Prime Vitality
   (Figtree), and borrowing either would make three of Jackson's businesses look
   like one. This uses real editorial serifs that ship on the reader's device.

   Palette: warm bone paper, warm black ink, deep cobalt. Deliberately NOT
   Prime Vitality's green and gold.

   NO HAIRLINE DIVIDERS. Structure comes from type scale, whitespace and flat
   colour blocks. Jackson has called out rule-based layouts twice. */

:root {
  --paper:   #F5F1EA;
  --paper-2: #EDE7DC;
  --ink:     #16130F;
  --ink-2:   #5A5348;
  --cobalt:  #1F3FA8;
  --cobalt-2:#2E52C9;
  --on-cobalt:      #F5F1EA;
  --on-cobalt-muted:#B9C6EE;

  --serif: 'Zodiak', Charter, "Bitstream Charter", "Iowan Old Style", "Sitka Text",
           Constantia, "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, sans-serif;

  --pad: clamp(1.5rem, 6vw, 5rem);

  /* One vertical scale. Every band uses these, nothing hand-picks a value.
     Before this the page ran 44/0, 80/96, 40/40, 96/96 with no rhythm. */
  --space-s: clamp(2rem, 4vw, 3rem);
  --space-m: clamp(3rem, 5.5vw, 4.5rem);
  --space-l: clamp(4rem, 7vw, 6rem);
  --shell: 1240px;
  --measure: 34rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  overflow-wrap: break-word;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 4px; }
.cobalt :focus-visible, .ink :focus-visible { outline-color: var(--paper); }

.skip { position: absolute; left: -9999px; top: 0; z-index: 30;
  background: var(--ink); color: var(--paper); padding: 0.85rem 1.25rem; }
.skip:focus { left: 0; }

/* ---------- masthead ---------- */

.masthead { padding-block: var(--space-s) 0; }
.masthead a { text-decoration: none; }
.nameplate {
  margin: 0;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.nameplate span { font-style: italic; font-weight: 400; color: var(--ink-2); }

/* ---------- opening spread ---------- */

.opener { padding-block: var(--space-m) var(--space-l); }

.headline {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  font-size: clamp(2.9rem, 8.2vw, 7rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.028em;
  max-width: 15ch;
  text-wrap: balance;
}
.headline i { font-style: italic; font-weight: 400; color: var(--cobalt); }

.standfirst {
  margin: 0 0 1.5rem;
  max-width: 40ch;
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  font-style: italic;
  line-height: 1.35;
  color: var(--ink-2);
}

.byline {
  margin: 0;
  max-width: var(--measure);
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.byline strong { color: var(--ink); font-weight: 650; }

/* ---------- flat colour blocks ---------- */

.cobalt { background: var(--cobalt); color: var(--on-cobalt); }
.ink    { background: var(--ink);    color: var(--paper); }
.tint   { background: var(--paper-2); }
.block  { padding-block: var(--space-l); }

/* ---------- the waiting list ---------- */

.enrol-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 58rem) { .enrol-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); } }

.enrol-lead { margin: 0 0 1.1rem; font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 600;
  line-height: 1.05; letter-spacing: -0.024em; max-width: 16ch; }
.enrol-lead em { font-style: italic; font-weight: 400; }
.enrol-body { margin: 0; max-width: 40ch; font-size: 1.0625rem; color: var(--on-cobalt-muted); }

.form-stack { display: grid; gap: 0.9rem; }
.field label {
  display: block; margin-bottom: 0.3rem;
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 600;
  color: var(--on-cobalt);
}
.field label .opt { font-weight: 400; color: var(--on-cobalt-muted); }
.field input, .field textarea {
  width: 100%; padding: 0.85rem 0.95rem;
  font-family: var(--sans); font-size: 1rem; color: var(--ink);
  background: var(--paper); border: none; border-radius: 2px;
}
.field textarea { line-height: 1.45; resize: vertical; min-height: 4.25rem; }
.help { margin: 0.4rem 0 0; font-family: var(--sans); font-size: 0.75rem;
  line-height: 1.45; color: var(--on-cobalt-muted); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7rem; align-items: start; margin: 0.4rem 0 0.3rem; }
.consent input { margin: 0.2rem 0 0; width: 1.05rem; height: 1.05rem; accent-color: var(--paper); }
.consent label { font-family: var(--sans); font-size: 0.8125rem; line-height: 1.5; color: var(--on-cobalt-muted); }
.consent a { color: var(--on-cobalt); }

.btn {
  width: 100%; display: inline-block;
  font-family: var(--sans); font-size: 1rem; font-weight: 650; text-align: center;
  padding: 1rem 1.5rem; border: none; border-radius: 2px; cursor: pointer;
  background: var(--paper); color: var(--ink); text-decoration: none;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.btn:hover { background: #fff; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: 0.6; cursor: default; transform: none; }

.form-note { margin: 0.2rem 0 0; font-family: var(--sans); font-size: 0.75rem;
  line-height: 1.5; color: var(--on-cobalt-muted); }
.form-note.is-error { color: #FFD9C9; font-weight: 600; }
.form-note.is-ok { color: var(--on-cobalt); font-weight: 600; }

/* ---------- numbered feature list, no boxes, no rules ---------- */

.feature-head { margin: 0 0 var(--space-s); font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 600; line-height: 1.08; letter-spacing: -0.022em; max-width: 20ch; }
.feature-head em { font-style: italic; font-weight: 400; color: var(--cobalt); }

.numbers { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 52rem) { .numbers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); } }
.numbers h3 { margin: 0 0 0.5rem; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.012em; }
.numbers p { margin: 0; font-family: var(--sans); font-size: 0.9375rem; line-height: 1.6; color: var(--ink-2); }
.numeral {
  display: block; margin-bottom: 0.4rem;
  font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 600; font-style: italic;
  line-height: 0.9; color: var(--cobalt);
}

/* ---------- pull quote ---------- */

.pull { margin: 0; max-width: 24ch; font-size: clamp(2rem, 5.4vw, 4rem);
  font-weight: 600; font-style: italic; line-height: 1.06; letter-spacing: -0.026em; }
.pull-note { margin: clamp(1.5rem, 3vw, 2rem) 0 0; max-width: 46ch;
  font-family: var(--sans); font-size: 0.9375rem; line-height: 1.6; color: var(--on-cobalt-muted); }

/* ---------- Q and A, set like a magazine interview ---------- */

.qa-head { margin: 0 0 var(--space-s); font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 600; line-height: 1.08; letter-spacing: -0.022em; }

.qa-list { margin: 0; display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); }
@media (min-width: 56rem) { .qa-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(3rem, 5vw, 5rem); } }
.qa { break-inside: avoid; }
.qa dt { margin: 0 0 0.4rem; font-size: 1.1875rem; font-weight: 600; line-height: 1.25;
  letter-spacing: -0.012em; color: var(--cobalt); }
.qa dd { margin: 0; max-width: 42ch; font-family: var(--sans); font-size: 0.9375rem;
  line-height: 1.65; color: var(--ink-2); }

/* ---------- editor's note ---------- */

.note-grid { display: grid; gap: 1.5rem; align-items: end; }
@media (min-width: 52rem) { .note-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; align-items: center; } }
.note-title { margin: 0 0 0.7rem; font-size: clamp(1.35rem, 2.6vw, 1.7rem); font-weight: 600;
  font-style: italic; letter-spacing: -0.016em; }
.note-body { margin: 0; max-width: 54ch; font-family: var(--sans); font-size: 0.9375rem;
  line-height: 1.65; color: var(--ink-2); }
.note-body strong { color: var(--ink); font-weight: 650; }
.btn-line {
  width: auto; white-space: nowrap; background: transparent; color: var(--ink);
  border: 2px solid var(--ink); padding: 0.8rem 1.4rem;
}
.btn-line:hover { background: var(--ink); color: var(--paper); }

/* Compact variant: the Prime Vitality note sits high on the page at Jackson's
   request, so it must not out-shout the waiting list directly below it. */
.sidenote { padding-block: var(--space-m); }
.sidenote .note-title { font-size: clamp(1.15rem, 2vw, 1.35rem); margin-bottom: 0.45rem; }
.sidenote .note-body { font-size: 0.875rem; line-height: 1.6; }
.sidenote .btn-line { padding: 0.7rem 1.2rem; font-size: 0.875rem; }
/* Keep the button near its text without narrowing the shell. Setting max-width on
   .note-grid also narrowed the .shell it shares, and because .shell is centred that
   pushed this band's left edge to 245px while every other band sat at 89px.
   Constrain the COLUMN, never the shell. */
@media (min-width: 52rem) {
  .sidenote .note-grid { grid-template-columns: minmax(0, 40rem) auto; justify-content: start; gap: 3rem; }
}

/* ---------- colophon ---------- */

.colophon { padding-block: var(--space-m); font-family: var(--sans); font-size: 0.8125rem; }
.colophon-grid { display: grid; gap: 2rem; }
@media (min-width: 56rem) { .colophon-grid { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 4rem; } }
.small-print { line-height: 1.7; max-width: 64ch; color: #B7AFA2; }
.small-print strong { color: var(--paper); font-weight: 650; }
.colophon-nav { display: grid; gap: 0.6rem; align-content: start; }
.colophon-nav a { color: #B7AFA2; text-decoration: none; }
.colophon-nav a:hover { color: var(--paper); }
.colophon-nav .copy { margin: 0.7rem 0 0; color: #B7AFA2; }

/* ---------- document pages ---------- */

.doc { padding-block: var(--space-m) var(--space-l); }
.doc .shell { max-width: 42rem; }
.doc h1 { margin: 0 0 0.5rem; font-size: clamp(2.2rem, 5.5vw, 3.4rem); font-weight: 600;
  line-height: 1.02; letter-spacing: -0.026em; }
.doc .updated { margin: 0 0 2.5rem; font-family: var(--sans); font-size: 0.8125rem; color: var(--ink-2); }
.doc h2 { margin: 2.5rem 0 0.7rem; font-size: clamp(1.25rem, 2.6vw, 1.5rem); font-weight: 600;
  letter-spacing: -0.016em; line-height: 1.2; color: var(--cobalt); }
.doc p, .doc li { font-family: var(--sans); font-size: 0.9375rem; line-height: 1.7; color: var(--ink-2); }
.doc strong { color: var(--ink); font-weight: 650; }
.doc a { color: var(--cobalt); }
.doc ul { margin: 0 0 1.1rem; padding-left: 1.2rem; }
.doc li { margin-bottom: 0.45rem; }
.doc .back { display: inline-block; margin-top: 2.5rem; padding: 0.85rem 1.4rem; border-radius: 2px;
  background: var(--ink); color: var(--paper); text-decoration: none;
  font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; }

/* ---------- motion, restrained on purpose ---------- */

@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 0.9s cubic-bezier(0.2, 0.8, 0.25, 1) both;
          animation-delay: calc(var(--d, 0) * 110ms); }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: rise linear both; animation-timeline: view();
              animation-range: entry 2% entry 50%; animation-delay: 0s; }
    /* The last section can never finish its entry range: the page runs out of
       scroll before the element is fully in view. Exempt it automatically. */
    main > section.reveal:last-of-type { animation: none; opacity: 1; transform: none; }
  }
}