@font-face {
  font-family: "Space Grotesk";
  src: url("assets/space-grotesk-variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --family-bg: #08090a;
  --family-deep: #0c0e10;
  --family-surface: #101214;
  --family-surface-2: #16191b;
  --family-border: rgba(255, 255, 255, 0.11);
  --family-text: #f4f5f4;
  --family-muted: #a2aaa6;
  --family-lime: #cdf564;
  --family-mint: #8fe3a0;
  --family-radius: 16px;
}

.strictly-theme {
  margin: 0;
  color: var(--family-text);
  background: var(--family-bg);
  font-family: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

.strictly-theme ::selection { color: var(--family-bg); background: var(--family-lime); }
.strictly-theme :focus-visible { outline: 2px solid var(--family-lime); outline-offset: 3px; }
.strictly-theme h1,
.strictly-theme h2,
.strictly-theme h3,
.strictly-theme h4,
.strictly-theme button,
.strictly-theme input,
.strictly-theme select,
.strictly-theme textarea { font-family: inherit; }
.strictly-theme h1,
.strictly-theme h2,
.strictly-theme h3 { font-weight: 680; letter-spacing: -0.045em; }

/* Display face. calculator.css and styles.css each force "Avenir Next" on
   their headings with !important -- a leftover from the pre-canon design --
   which beat the plain `inherit` above and left StrictlyFuel and
   StrictlyBased lettering in a different typeface from every other page.
   This is the single loudest reason those two read as a different site.
   The list covers the display-weight elements those files name explicitly,
   not just the heading tags. */
.strictly-theme h1,
.strictly-theme h2,
.strictly-theme h3,
.strictly-theme h4,
.strictly-theme blockquote,
.strictly-theme .target-number,
.strictly-theme .target-timing b,
.strictly-theme .target-note,
.strictly-theme .step-index,
.strictly-theme .step-number,
.strictly-theme .food-identity select,
.strictly-theme .food-carb strong,
.strictly-theme .catalog-card h3,
.strictly-theme .method-note > strong,
.strictly-theme .intra-copy h3,
.strictly-theme .intra-numbers strong,
.strictly-theme .suggestion-head h3,
.strictly-theme .suggestion-toolbar h3,
.strictly-theme .unified-search-results h3,
.strictly-theme .custom-meal-intro h3,
.strictly-theme .dashboard-score strong,
.strictly-theme .score-orb strong {
  font-family: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif !important;
}
.strictly-theme em { color: var(--family-lime); font-style: normal; }
.strictly-theme a { text-underline-offset: 4px; }
.strictly-theme img { max-width: 100%; }

.strictly-theme .site-header,
.strictly-theme .calc-header,
.strictly-theme .owner-header,
.strictly-theme .legal-nav,
.strictly-theme > .nav {
  color: var(--family-text);
  background: rgba(8, 9, 10, 0.91);
  border-color: var(--family-border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.strictly-theme .site-header nav a,
.strictly-theme .calc-header nav a,
.strictly-theme .owner-header nav a,
.strictly-theme .legal-nav .nav-links a,
.strictly-theme > .nav .nav-links a { color: var(--family-muted); }
.strictly-theme .site-header nav a:hover,
.strictly-theme .calc-header nav a:hover,
.strictly-theme .owner-header nav a:hover,
.strictly-theme .legal-nav .nav-links a:hover,
.strictly-theme > .nav .nav-links a:hover,
.strictly-theme [aria-current="page"] { color: var(--family-text); }
.strictly-theme .brand,
.strictly-theme .calc-brand { color: var(--family-text); }
.strictly-theme .button-primary,
.strictly-theme .primary-action,
.strictly-theme .save-set,
.strictly-theme .auth-submit { color: var(--family-bg); background: var(--family-lime); }

.strictly-theme footer {
  color: var(--family-muted);
  background: var(--family-deep);
  border-color: var(--family-border);
}
.strictly-theme footer a { color: var(--family-text); }

/* Company/about */
.about-theme,
.about-theme .about-intro,
.about-theme .company-about { background: var(--family-bg); }
.about-theme .about-intro p:last-child,
.about-theme .company-about-body { color: var(--family-muted); }
.about-theme .company-about-photo,
.about-theme .company-about-details span {
  background: var(--family-surface);
  border-color: var(--family-border);
}
.about-theme .company-about-photo { box-shadow: 18px 18px 0 rgba(205, 245, 100, 0.08); }
.about-theme .company-about-stamp,
.about-theme .about-cta { color: var(--family-bg); background: var(--family-lime); }
.about-theme .about-cta .button { color: var(--family-text); background: var(--family-bg); }

/* Product family */
.apps-theme,
.apps-theme .apps-main { background: var(--family-bg); }
.apps-theme .apps-intro > p:last-child,
.apps-theme .app-card > p,
.apps-theme .apps-principle p,
.apps-theme .app-name small { color: var(--family-muted); }
.apps-theme .app-card,
.apps-theme .apps-principle,
.apps-theme .based-card,
.apps-theme .fuel-card {
  color: var(--family-text);
  background: var(--family-surface);
  border-color: var(--family-border);
  border-radius: 22px;
}
.apps-theme .app-card:nth-child(2) { background: var(--family-surface-2); }
.apps-theme .app-features span { color: var(--family-muted); border-color: var(--family-border); }
.apps-theme .app-status { color: var(--family-bg); background: var(--family-lime); }
.apps-theme .based-card .button { color: var(--family-bg); background: var(--family-lime); }
.apps-theme .apps-principle a { color: var(--family-lime); border-color: var(--family-lime); }

/* Fuel calculator
   calculator.css's own custom properties are --ink/--bone/--white/--sand/
   --green/--green-light/--muted/--line (NOT --paper/--cream/--sun, which
   don't exist in that file -- an earlier pass here guessed wrong names and
   silently no-op'd). --ink does double duty as both default text color and
   the background of a few intentionally-dark "pop" cards, so it stays
   pointed at light text and those specific cards get their background
   pinned back to dark directly instead of via the variable. */
.calc-theme {
  --bone: var(--family-bg);
  --white: var(--family-surface);
  --sand: var(--family-surface-2);
  --green-light: rgba(143, 227, 160, 0.12);
  --green: var(--family-mint);
  --muted: var(--family-muted);
  --line: var(--family-border);
  --ink: var(--family-text);
}
.calc-theme .calc-header,
.calc-theme .calc-hero,
.calc-theme .target-card,
.calc-theme .meal-summary,
.calc-theme .intra-card,
.calc-theme footer {
  background: var(--family-surface) !important;
}
.calc-theme input::placeholder,
.calc-theme textarea::placeholder { color: #737b77; }

/* Every other spot in this file pairs an explicit color:white with
   background:var(--ink) as a solid dark button/badge fill -- all broke the
   same way once --ink above was remapped to family-text (near white) for
   default body text, turning each into white-on-white. Several of these
   sit behind conditional UI (an unchecked diet-restriction pill, the
   "build your own" food search panel, catalog hover states) so they don't
   show up in a default-state screenshot, but need the same decouple. */
.calc-theme .meal-mode-tabs button.active,
.calc-theme .meal-path-switch button.active,
.calc-theme .calculate-button,
.calc-theme .food-search-row button,
.calc-theme .preset-button.active,
.calc-theme .catalog-card button:hover,
.calc-theme .suggested-meal-card button,
.calc-theme .restriction-options label:has(input:checked),
.calc-theme .meal-option button:hover,
.calc-theme .online-food-card button,
.calc-theme .reshuffle-button:hover,
.calc-theme .best-match-label,
.calc-theme .empty-meal > span {
  background: var(--family-surface-2) !important;
}
/* .meal-path-switch button.active>span and .intra-suggestions article>span
   keep their native light chip (var(--orange), actually a light sage in
   this file's final palette) but their color was riding the --ink remap
   to family-text (near white), going invisible on that light chip. Pin
   them back to a dark ink. */
.calc-theme .meal-path-switch button.active > span,
.calc-theme .intra-suggestions article > span {
  color: var(--family-bg) !important;
}
/* .fit-great{color:var(--ink)} was riding the same --ink remap onto its own
   light chip background (forced light above, alongside fit-okay/caution) --
   double-broke it back to near-white-on-white. Pin its text dark too. */
.calc-theme .fit-great {
  color: var(--family-bg) !important;
}
/* .meal-path-switch's 45%-alpha white "glass" background was tuned to sit
   on the native light page (barely visible tint on near-white paper). On
   the dark page it composites into a flat mid-gray fog that both the
   active label's white text and the inactive label's muted text fail
   contrast against. Swap the translucent glass for a solid dark surface. */
.calc-theme .meal-path-switch {
  background: var(--family-surface) !important;
}
/* Several plain <button>s (preset size chips, "add another food" +) never
   set their own color, relying on inherited body text -- which the native
   light page had, but a bare <button> doesn't inherit color from an
   ancestor by default in most browsers, so it fell back to UA black. That
   was invisible on the native light backgrounds and stays invisible now
   against the new dark ones. Give buttons an explicit inherited color as
   a low-specificity baseline; buttons with their own color (.active states,
   etc.) already override this via normal cascade. */
.calc-theme button {
  color: inherit;
}

/* Section labels. Their native color is a hardcoded #4f765e (a copy of this
   file's old dark --green), so remapping --green never reached them. They
   had drifted to three different greens across the site -- mint here, sage
   on StrictlyBased, orange in the calculator hero -- which is most of why
   the two app pages read as unrelated.
   The direction contract spends the lime on the primary action and live
   data "and nothing else", so a label is not an accent: it is quiet
   wayfinding. One muted tone, one size, both pages. 11px is the floor --
   the calculator's were 10px, which the detector flags as undersized. */
.calc-theme .overline,
.calc-theme .calc-hero .overline,
.based-theme .section-label:not(.light),
.based-theme .eyebrow {
  color: var(--family-muted) !important;
  font-size: 11px;
  letter-spacing: 0.14em;
}

/* Small semantic status chips: their text is hardcoded dark and tightly
   coupled to a light chip, so keep the chip light rather than patch every
   text color individually -- a light pastel badge on a dark page is a
   normal, legible pattern (same idea as the existing fit-* badges). */
.calc-theme .meal-speed-breakdown span,
.calc-theme .food-speed-amount,
.calc-theme .fit-great,
.calc-theme .fit-okay,
.calc-theme .fit-caution {
  background: rgba(255, 255, 255, 0.88) !important;
}
.calc-theme .profile-helper,
.calc-theme .food-source {
  color: var(--family-text) !important;
}

/* Owner portal */
.owner-theme {
  --ink: var(--family-bg);
  --deep: var(--family-deep);
  --surface: var(--family-surface);
  --surface-2: var(--family-surface-2);
  --line: var(--family-border);
  --acid: var(--family-lime);
  --cream: var(--family-text);
  --soft: var(--family-muted);
  --mint: var(--family-mint);
  background: var(--family-bg);
}
.owner-theme .owner-shell,
.owner-theme .dashboard-shell { background-color: var(--family-bg); }
.owner-theme .auth-card,
.owner-theme .dashboard-card,
.owner-theme .metric-card,
.owner-theme .machine-row,
.owner-theme .modal-card { background: var(--family-surface); border-color: var(--family-border); }

/* Member NFC experience */
.nfc-page {
  --green: var(--family-bg);
  --panel: var(--family-surface);
  --panel2: var(--family-surface-2);
  --cream: var(--family-text);
  --soft: var(--family-muted);
  --acid: var(--family-lime);
  --line: rgba(255, 255, 255, 0.12);
  --mint: var(--family-mint);
  background: var(--family-bg);
}
.nfc-page .machine-card,
.nfc-page .rack-picker,
.nfc-page .auth-card,
.nfc-page .anatomy-card { background: var(--family-surface); border-color: var(--family-border); }
.nfc-page .machine-panel,
.nfc-page .metric-strip,
.nfc-page .progress-summary,
.nfc-page .set-history li,
.nfc-page .machine-tabs,
.nfc-page .quick-cues li,
.nfc-page .muscle-details > div { background: var(--family-surface-2); border-color: var(--family-border); }
.nfc-page .machine-video,
.nfc-page .machine-video video { background: #050607; }

/* StrictlyBased
   styles.css's own custom properties are --ink/--paper/--cream/--muted/--line
   (--acid is its own fixed sage accent, already fine unchanged). --muted is
   text-only everywhere in that file, so remapping it directly fixes every
   card paragraph that relies on inheriting it (step-card, standard-card,
   promise-card) without needing a rule per component. --ink stays native:
   it is only ever used as the background of already-dark "pop" sections
   (hero, standards, waitlist), never as inherited body text, so leaving it
   alone is correct here -- unlike the calculator page. */
.based-theme {
  --muted: var(--family-muted);
}
.based-theme,
.based-theme main,
.based-theme .hero,
.based-theme .intro,
.based-theme .steps,
.based-theme .standards,
.based-theme .promise,
.based-theme .waitlist { color: var(--family-text); background: var(--family-bg); }
.based-theme .steps article,
.based-theme .standard-card,
.based-theme .promise-card,
.based-theme .scanner-stage {
  color: var(--family-text);
  background-color: var(--family-surface);
  border-color: var(--family-border);
}
.based-theme .hero-lede,
.based-theme .intro p,
.based-theme .steps p,
.based-theme .standards p,
.based-theme .promise p,
.based-theme .waitlist p { color: var(--family-muted); }
.based-theme .category-strip,
.based-theme .button-primary { color: var(--family-bg); background: var(--family-lime); }

/* .result-card and .score-dashboard are realistic app-screenshot mockups
   (the scan result on a phone, the score breakdown) -- meant to look like
   real light-mode screens, so they keep their own light surface rather than
   joining the dark remap above. Both use var(--muted) internally for their
   secondary text, so the global --muted remap above (meant for the dark
   body copy) must be un-done back to the native dark-on-light value inside
   these two mockups, or their labels turn illegibly pale-on-pale. */
.based-theme .result-card {
  --muted: #53675a;
  background-color: rgba(255, 255, 255, 0.95) !important;
  color: #1d3b2a !important;
}
.based-theme .score-dashboard {
  --muted: #53675a;
}
/* The broad ".standards p" dark-remap above also catches paragraphs inside
   this light mockup (it's nested under .standards); pin them back to the
   native ink color so they don't inherit the dark-theme's pale muted text. */
.based-theme .score-dashboard p {
  color: var(--ink);
}

/* .result-visual keeps its native light sage background (var(--acid)) as a
   step illustration; its "CLEAN" label has no color of its own and was
   inheriting the page's light text color, going invisible on that light
   chip. Pin it back to the dark ink it was designed against. */
.based-theme .result-visual span,
.based-theme .result-visual .big-check {
  color: var(--ink);
}

/* Several accent elements (section eyebrows, step numbers, inline-link
   arrows, intro/step/promise em) use a hardcoded dark-green (#36583d)
   tuned for the native light page -- unreadable against the new dark
   surfaces. Route them to the same light accent already used for hero/
   standards em text. */
.based-theme .intro h2 em,
.based-theme .steps h2 em,
.based-theme .promise blockquote em,
.based-theme .step-number,
.based-theme .inline-link span {
  color: var(--family-lime) !important;
}

/* The skip-link only shows on keyboard focus, so it never came up in a
   screenshot -- but each page's own stylesheet gave it a different
   background (--acid here, --white on the calculator) and none of them set
   a text color, so it inherited the page's light body text and landed at
   about 1.2:1 on the lime. Pin every page to the same lime-on-dark chip
   index.html already uses, so the first thing a keyboard user hits is
   legible and identical site-wide. */
.strictly-theme .skip-link {
  background: var(--family-lime);
  color: var(--family-bg);
}

/* Hero rhythm. The three heroes opened on three different measurements --
   176px on StrictlyBased, 64px on the calculator, against index.html's
   canon clamp(3.5rem, 7vw, 6.5rem). StrictlyBased also carried a
   min-height of 820px, so its hero held itself open well past its own
   content and left the dead band under the nav. Both now open on the
   canon measure and close on the canon measure, and the hero sizes to
   what it holds. */
.calc-theme .calc-hero,
.based-theme .hero {
  padding-top: clamp(3.5rem, 7vw, 6.5rem);
  padding-bottom: clamp(3rem, 5vw, 4.5rem);
}
.based-theme .hero {
  min-height: 0;
}

/* Display scale. 72px is the canon ceiling (clamp(2.7rem, 5.6vw, 4.5rem));
   these two were running 90-92px, a step above every other page. */
.calc-theme .calc-hero h1,
.based-theme .hero h1 {
  font-size: clamp(2.7rem, 5.6vw, 4.5rem);
}

/* The calculator hero painted its text pure #fff while the rest of the
   site sits on --family-text. Barely visible alone, but it is the kind of
   near-miss that makes one page feel off next to another. */
.calc-theme .calc-hero {
  color: var(--family-text);
}

/* Policies */
.legal-theme {
  --ink: var(--family-text);
  --paper: var(--family-bg);
  --cream: var(--family-surface);
  --muted: var(--family-muted);
  --line: var(--family-border);
  --sun: var(--family-lime);
  background: var(--family-bg);
}
.legal-theme .legal-hero,
.legal-theme .legal-layout { color: var(--family-text); background: var(--family-bg); }
.legal-theme .legal-hero { border-color: var(--family-border); }
.legal-theme .legal-hero p,
.legal-theme .legal-copy,
.legal-theme .legal-copy p,
.legal-theme .legal-copy li { color: var(--family-muted); }
.legal-theme .legal-copy strong { color: var(--family-text); }
.legal-theme .sidebar,
.legal-theme .source-note { color: var(--family-muted); background: var(--family-surface); border-color: var(--family-border); }
.legal-theme .sidebar strong,
.legal-theme .sidebar a { color: var(--family-text); }
.legal-theme .eyebrow { color: var(--family-lime); }

/* Support */
.support-theme {
  --ink: var(--family-text);
  --paper: var(--family-bg);
  --cream: var(--family-surface);
  --muted: var(--family-muted);
  --line: var(--family-border);
  --sun: var(--family-lime);
  --green: var(--family-bg);
  background: var(--family-bg);
}
.support-theme main,
.support-theme .hero,
.support-theme .contact,
.support-theme .details { color: var(--family-text); background: var(--family-bg); }
.support-theme .email-card,
.support-theme .notice,
.support-theme .help-card { color: var(--family-text); background: var(--family-surface); border-color: var(--family-border); }
.support-theme .hero > p:last-child,
.support-theme .email-card p,
.support-theme .notice p,
.support-theme .help-card p,
.support-theme .details p,
.support-theme .details li { color: var(--family-muted); }
.support-theme .notice strong,
.support-theme .details a { color: var(--family-text); }
.support-theme .eyebrow,
.support-theme .number { color: var(--family-lime); }
.support-theme .button { color: var(--family-bg); background: var(--family-lime); }

/* NFC member surface */
.nfc-page {
  --green: var(--family-bg);
  --panel: var(--family-surface);
  --panel2: var(--family-surface-2);
  --cream: var(--family-text);
  --soft: var(--family-muted);
  --acid: var(--family-lime);
  --line: #ffffff1c;
  --mint: var(--family-mint);
  background: var(--family-bg);
}
.nfc-page .machine-card,
.nfc-page .rack-picker,
.nfc-page .auth-card,
.nfc-page .anatomy-card { background: var(--family-surface); }
.nfc-page .machine-panel,
.nfc-page .metric-strip,
.nfc-page .progress-summary,
.nfc-page .set-history li,
.nfc-page .muscle-details > div { background: var(--family-surface-2); }

@media (max-width: 760px) {
  .strictly-theme h1 { letter-spacing: -0.055em; }
  .strictly-theme .site-header,
  .strictly-theme .calc-header,
  .strictly-theme .owner-header,
  .strictly-theme .legal-nav,
  .strictly-theme > .nav { background: rgba(8, 9, 10, 0.96); }
  .apps-theme .app-card,
  .apps-theme .apps-principle { border-radius: 18px; }
}

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

/* ================= UNIFIED NAV =================
   The one top bar every page shares: same structure, same behavior,
   same visual language, regardless of that page's own brand context. */
.nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 2rem;
  height: 4rem; padding: 0 clamp(1.25rem, 5vw, 4.5rem);
  background: rgba(8, 9, 10, 0.86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--family-border);
  color: var(--family-text);
  font-family: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
}
.nav__mark { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; flex: none; color: var(--family-text); }
.nav__mark img, .nav__mark svg { width: 20px; height: auto; display: block; }
.nav__mark span { font-size: 0.98rem; font-weight: 680; letter-spacing: -0.01em; }
.nav__links { display: flex; gap: 1.75rem; margin-left: auto; align-items: center; }
.nav__links a {
  text-decoration: none; font-size: 0.9rem; color: var(--family-muted);
  transition: color 150ms ease;
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--family-text); }
.nav__cta { flex: none; }
.nav__burger {
  display: none; margin-left: auto; width: 38px; height: 34px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--family-border); border-radius: 9px;
  color: var(--family-text); cursor: pointer;
}
.nav__burger svg { width: 17px; height: 17px; }

.nav .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.6rem 1.05rem; border-radius: 999px; border: 1px solid transparent;
  font-family: inherit; font-size: 0.87rem; font-weight: 640; letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.nav .btn--primary { background: var(--family-lime); color: var(--family-bg); }
.nav .btn--primary:hover { background: #b9e148; }
.nav .btn--ghost { background: transparent; color: var(--family-text); border-color: var(--family-border); }
.nav .btn--ghost:hover { border-color: rgba(255,255,255,0.34); background: rgba(255,255,255,0.04); }

@media (max-width: 760px) {
  .nav .nav__cta { display: none; }
  .nav__burger { display: inline-flex; }
  .nav__links {
    position: fixed; inset: 4rem 0 auto; flex-direction: column; align-items: stretch;
    gap: 0; margin: 0; padding: 0.5rem clamp(1.25rem, 5vw, 4.5rem) 1.25rem;
    background: rgba(8, 9, 10, 0.97);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--family-border); display: none;
  }
  .nav__links[data-open="true"] { display: flex; z-index: 150; }
  .nav__links a { padding: 0.85rem 0; border-bottom: 1px solid var(--family-border); font-size: 1rem; }
}