/* FITRICH Monochrome System v57
   Black / white alternating fields. Cobalt is an accent, chrome is structure.
   This file intentionally loads last and resolves legacy theme collisions. */

:root {
  --fr57-black:#050608;
  --fr57-black-soft:#0a0c10;
  --fr57-white:#fff;
  --fr57-frost:#f4f5f7;
  --fr57-cobalt:#245bff;
  --fr57-chrome:#aeb5c2;
  --fr57-silver:#d7dbe3;
  --fr57-ink:#0b0d11;
  --fr57-muted:#656c77;
}
html,
.website-page,
.fitrich-app-page { overflow-x:clip; }

/* ---------- Brand signature: one scale and one FR treatment everywhere ---------- */
.website-page .brand-signature,
.info-page .brand-signature,
.fitrich-app-page .app-shell .brand-signature {
  width:184px !important;
  grid-template-columns:36px 1fr !important;
  gap:8px !important;
}
.website-page .brand-monogram,
.info-page .brand-monogram,
.fitrich-app-page .app-shell .brand-monogram,
.fitrich-app-page .avatar-button,
.fitrich-app-page .profile-avatar,
.fitrich-app-page .member-hero-mark,
.fitrich-app-page .mini-mark {
  border:1px solid var(--fr57-chrome) !important;
  background:var(--fr57-black) !important;
  color:var(--fr57-white) !important;
  box-shadow:none !important;
}
.website-page .brand-monogram,
.info-page .brand-monogram,
.fitrich-app-page .app-shell .brand-monogram {
  width:36px !important;
  height:36px !important;
  font-size:19px !important;
}
.website-page .brand-wordmark-image,
.info-page .brand-wordmark-image,
.fitrich-app-page .app-shell .brand-wordmark-image {
  width:140px !important;
  height:24px !important;
}
.website-page .brand-wordmark-image svg,
.info-page .brand-wordmark-image svg,
.fitrich-app-page .app-shell .brand-wordmark-image svg {
  filter:invert(1) brightness(2) grayscale(1) !important;
}
.website-page .brand-wordmark small,
.info-page .brand-wordmark small,
.fitrich-app-page .app-shell .brand-wordmark small {
  color:var(--fr57-chrome) !important;
}

/* ---------- Website: strict alternating monochrome fields ---------- */
.website-page { background:var(--fr57-white) !important; color:var(--fr57-ink); }
.website-page .kinetic-line { background:var(--fr57-white) !important; border-color:rgba(5,6,8,.14) !important; }
.website-page .kinetic-logo { filter:none !important; opacity:.88 !important; }
.website-page .kinetic-logo svg { filter:none !important; }
.website-page .kinetic-diamond { color:var(--fr57-cobalt) !important; }

.website-page .modes {
  background:var(--fr57-black) !important;
  color:var(--fr57-white) !important;
}
.website-page .modes .section-head h2,
.website-page .modes .mode-card h3 { color:var(--fr57-white) !important; }
.website-page .modes .section-head>p,
.website-page .modes .mode-card p { color:var(--fr57-chrome) !important; }
.website-page .modes .mode-card,
.website-page .modes .mode-card:nth-child(n) {
  color:var(--fr57-white) !important;
  border-color:rgba(174,181,194,.24) !important;
}
.website-page .modes .mode-card::before { background:linear-gradient(145deg,#151820,#050608) !important; }

.website-page .product-drop {
  background:var(--fr57-white) !important;
  color:var(--fr57-ink) !important;
}
.website-page .product-drop::before { background:radial-gradient(circle,rgba(36,91,255,.08),transparent 67%) !important; }
.website-page .product-drop .section-head h2,
.website-page .product-drop .product-meta h3,
.website-page .product-drop .product-meta strong { color:var(--fr57-ink) !important; }
.website-page .product-drop .section-head p,
.website-page .product-drop .product-meta p,
.website-page .product-drop .concept-note,
.website-page .product-drop .product-flow p { color:var(--fr57-muted) !important; }

.website-page .store-guide {
  background:var(--fr57-black) !important;
  color:var(--fr57-white) !important;
}
.website-page .store-guide>.section-head {
  background:var(--fr57-black) !important;
  color:var(--fr57-white) !important;
}
.website-page .store-guide>.section-head h2 { color:var(--fr57-white) !important; }
.website-page .store-guide>.section-head>p { color:var(--fr57-chrome) !important; }
.website-page .routine-commerce {
  background:var(--fr57-white) !important;
  color:var(--fr57-ink) !important;
}
.website-page .routine-commerce h3,
.website-page .routine-commerce p,
.website-page .routine-commerce a { color:var(--fr57-ink) !important; }
.website-page .routine-commerce-objects i {
  background:var(--fr57-black) !important;
  border-color:var(--fr57-chrome) !important;
  color:var(--fr57-white) !important;
}

.website-page .store-assurance {
  background:var(--fr57-white) !important;
  color:var(--fr57-ink) !important;
}
.website-page .store-assurance b { color:var(--fr57-ink) !important; }
.website-page .store-assurance span { color:var(--fr57-muted) !important; }
.website-page .assurance-group>div { border-color:rgba(5,6,8,.16) !important; }

.website-page .content-lab {
  background:var(--fr57-black) !important;
  color:var(--fr57-white) !important;
}
.website-page .content-lab .section-head h2,
.website-page .content-lab .reel-card h3 { color:var(--fr57-white) !important; }
.website-page .content-lab .section-head>p,
.website-page .content-lab .reel-card p { color:var(--fr57-chrome) !important; }

.website-page .routine {
  background:var(--fr57-white) !important;
  color:var(--fr57-ink) !important;
}
.website-page .routine-intro>h2 { color:var(--fr57-ink) !important; }
.website-page .routine-intro>p:not(.overline) { color:var(--fr57-muted) !important; }

.website-page .code {
  background:var(--fr57-black) !important;
  color:var(--fr57-white) !important;
  display:block !important;
  grid-template-columns:none !important;
  min-height:auto !important;
  padding-block:clamp(6rem,9vw,10rem) !important;
}
.website-page .code-title {
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin-bottom:0 !important;
}
.website-page .code-title h2,
.website-page .code-title h2 em,
.website-page .code-grid h3,
.website-page .code-manifesto>p { color:var(--fr57-white) !important; }
.website-page .code-title h2 span {
  color:var(--fr57-white) !important;
  -webkit-text-stroke:0 !important;
}
.website-page .code-title>p,
.website-page .code-grid small { color:var(--fr57-chrome) !important; }
.website-page .code-grid {
  border-color:rgba(174,181,194,.25) !important;
}
.website-page .code-grid article { border-color:rgba(174,181,194,.25) !important; }
.website-page .code-grid article>span { color:rgba(255,255,255,.07) !important; }
.website-page .code-grid p { color:var(--fr57-chrome) !important; }
.website-page .code-manifesto {
  position:static !important;
  width:100% !important;
  max-width:none !important;
  min-height:0 !important;
  height:auto !important;
  margin:clamp(3.5rem,7vw,7rem) 0 0 !important;
  padding:clamp(2rem,3.5vw,3.5rem) 0 0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:2rem !important;
  border:0 !important;
  border-top:1px solid rgba(174,181,194,.22) !important;
  background:transparent !important;
  transform:none !important;
  color:var(--fr57-white) !important;
}
.website-page .code-manifesto>p {
  width:min(100%,54rem) !important;
  max-width:54rem !important;
  margin:0 !important;
  font-size:clamp(1.25rem,2.25vw,2.35rem) !important;
  line-height:1.15 !important;
}
.website-page .code-manifesto .fr-axis {
  flex:0 0 auto !important;
  margin:0 !important;
}
.website-page .code .fr-axis i { background:var(--fr57-cobalt) !important; }

.website-page .world {
  background:var(--fr57-white) !important;
  color:var(--fr57-ink) !important;
}
.website-page .world>.section-head h2 { color:var(--fr57-ink) !important; }
.website-page .world>.section-head p { color:var(--fr57-muted) !important; }
.website-page .ecosystem-line { color:var(--fr57-ink) !important; border-color:rgba(5,6,8,.16) !important; }

.website-page .app-preview {
  background:var(--fr57-black) !important;
  color:var(--fr57-white) !important;
}
.website-page .app-preview h2 { color:var(--fr57-white) !important; }
.website-page .app-preview .app-copy>p,
.website-page .app-preview li p { color:var(--fr57-chrome) !important; }
.website-page .app-preview li { border-color:rgba(174,181,194,.24) !important; }

.website-page .closing {
  background:var(--fr57-white) !important;
  color:var(--fr57-ink) !important;
}
.website-page .closing h2,
.website-page .closing h2 em { color:var(--fr57-ink) !important; }

/* Cobalt is a small active accent, never a page background. */
.website-page .section-no,
.website-page .overline,
.website-page .product-meta>span,
.website-page .store-category b { color:var(--fr57-cobalt) !important; }
.website-page .button.primary,
.website-page .filters button.active {
  background:var(--fr57-cobalt) !important;
  border-color:var(--fr57-cobalt) !important;
  color:var(--fr57-white) !important;
}

/* ---------- Routine controls: clean text navigation, no pills or boxes ---------- */
.website-page .routine-step {
  grid-template-columns:28px 110px minmax(0,1fr);
  border-color:rgba(5,6,8,.16) !important;
}
.website-page .segmented {
  justify-content:flex-start !important;
  gap:0 !important;
  border-bottom:1px solid rgba(5,6,8,.18);
}
.website-page .segmented button {
  min-height:42px;
  padding:0 clamp(12px,2vw,24px) !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--fr57-muted) !important;
  box-shadow:none !important;
}
.website-page .segmented button.active {
  background:transparent !important;
  color:var(--fr57-ink) !important;
  box-shadow:inset 0 -3px var(--fr57-cobalt) !important;
}

/* ---------- Product placeholders: editorial objects, never cropped people ---------- */
.website-page .temp-product-placeholder,
.fitrich-app-page .temp-product-placeholder {
  background:transparent !important;
  background-image:none !important;
}
.website-page .temp-product-placeholder::before,
.fitrich-app-page .temp-product-placeholder::before {
  width:min(32vw,22rem) !important;
  background:radial-gradient(circle,rgba(36,91,255,.12),rgba(174,181,194,.08) 38%,transparent 70%) !important;
}
.website-page .temp-product-placeholder::after,
.fitrich-app-page .temp-product-placeholder::after {
  border-color:rgba(174,181,194,.24) !important;
}
.website-page .temp-product-placeholder-frame,
.fitrich-app-page .temp-product-placeholder-frame {
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:clamp(86px,26%,180px) !important;
  height:auto !important;
  aspect-ratio:.52 !important;
  transform:translate(-50%,-58%) !important;
  border-radius:clamp(12px,2vw,26px) !important;
  border:1px solid rgba(174,181,194,.32) !important;
  background:linear-gradient(145deg,#22262e 0%,#08090c 55%,#010204 100%) !important;
  box-shadow:-18px 30px 54px rgba(0,0,0,.26),inset 1px 1px 0 rgba(255,255,255,.14) !important;
}
.website-page .temp-product-placeholder-frame i,
.fitrich-app-page .temp-product-placeholder-frame i {
  position:absolute;
  top:0;
  right:12%;
  width:3px;
  height:24%;
  background:var(--fr57-cobalt);
}

/* ---------- Footer is always black and the trademark is always visible ---------- */
.website-page footer,
.info-page .info-footer {
  background:var(--fr57-black) !important;
  color:var(--fr57-white) !important;
  border-color:rgba(174,181,194,.22) !important;
}
.website-page footer p,
.info-page .info-footer b { color:var(--fr57-chrome) !important; }
.website-page footer a,
.website-page footer div>span,
.info-page .info-footer a,
.info-page .info-footer span { color:var(--fr57-silver) !important; }
.website-page footer small,
.info-page .info-footer small { color:#7f8794 !important; border-color:rgba(174,181,194,.18) !important; }
.website-page footer .brand-monogram,
.info-page .info-footer .brand-monogram {
  color:var(--fr57-white) !important;
  border-color:var(--fr57-chrome) !important;
  background:var(--fr57-black) !important;
}
.website-page footer .brand-wordmark-image svg,
.info-page .info-footer .brand-wordmark-image svg {
  filter:invert(1) brightness(2) grayscale(1) !important;
}
.website-page footer .brand-wordmark small,
.info-page .info-footer .brand-wordmark small,
.website-page footer .brand-email,
.info-page .info-footer .brand-email { color:var(--fr57-chrome) !important; }

/* ---------- Information pages ---------- */
.info-page { background:var(--fr57-black) !important; }
.info-page .info-header { background:var(--fr57-black) !important; color:var(--fr57-white) !important; }
.info-page .info-header a { color:var(--fr57-silver) !important; }
.info-page .info-main { background:var(--fr57-white) !important; color:var(--fr57-ink) !important; }

/* ---------- App: same monochrome rhythm ---------- */
.fitrich-app-page,
.fitrich-app-page .app-main,
.fitrich-app-page .app-view:not(#view-live) { background:var(--fr57-white) !important; color:var(--fr57-ink) !important; }
.fitrich-app-page .phase-ribbon,
.fitrich-app-page .side-nav,
.fitrich-app-page .app-header,
.fitrich-app-page .bottom-nav { background:var(--fr57-black) !important; color:var(--fr57-white) !important; }
.fitrich-app-page .phase-ribbon span,
.fitrich-app-page .phase-ribbon p,
.fitrich-app-page .app-header h1,
.fitrich-app-page .app-header span { color:var(--fr57-white) !important; }
.fitrich-app-page .avatar-button,
.fitrich-app-page .notification-button { color:var(--fr57-white) !important; border-color:var(--fr57-chrome) !important; }
.fitrich-app-page .app-stories { background:var(--fr57-white) !important; color:var(--fr57-ink) !important; }
.fitrich-app-page .app-stories h2,
.fitrich-app-page .app-stories-note { color:var(--fr57-ink) !important; }
.fitrich-app-page #view-home .app-story-ring>span {
  background:var(--fr57-black) !important;
  color:var(--fr57-white) !important;
  border-color:var(--fr57-white) !important;
}
.fitrich-app-page #view-home .app-story-chip:first-child .app-story-ring>span {
  background:var(--fr57-frost) !important;
  color:var(--fr57-ink) !important;
}
.fitrich-app-page #view-home .app-story-chip b { color:var(--fr57-muted) !important; }
.fitrich-app-page #view-home .home-product-showcase {
  background:var(--fr57-black) !important;
  color:var(--fr57-white) !important;
}
.fitrich-app-page #view-home .home-product-head,
.fitrich-app-page #view-home .home-product-hint { background:transparent !important; }
.fitrich-app-page #view-home .home-product-showcase h2,
.fitrich-app-page #view-home .home-product-showcase strong,
.fitrich-app-page #view-home .home-product-showcase b { color:var(--fr57-white) !important; }
.fitrich-app-page #view-home .home-product-head>div:first-child>span { color:#9db5ff !important; }
.fitrich-app-page #view-home .home-product-hint { color:var(--fr57-chrome) !important; }
.fitrich-app-page .campaign-card { background-color:var(--fr57-white) !important; }
.fitrich-app-page .sovereign-mini { background:var(--fr57-black) !important; color:var(--fr57-white) !important; }
.fitrich-app-page .quick-card { background:var(--fr57-white) !important; color:var(--fr57-ink) !important; }
.fitrich-app-page .quick-grid button { color:var(--fr57-ink) !important; border-color:rgba(5,6,8,.16) !important; }
.fitrich-app-page .quick-grid i { background:transparent !important; color:var(--fr57-cobalt) !important; }

.fitrich-app-page #view-shop { background:var(--fr57-white) !important; }
.fitrich-app-page #view-shop .shop-intro { color:var(--fr57-white) !important; }
.fitrich-app-page #view-shop .shop-tools { background:var(--fr57-white) !important; border-color:rgba(5,6,8,.16) !important; }
.fitrich-app-page #view-shop .app-filters button { color:var(--fr57-muted) !important; border-color:rgba(5,6,8,.18) !important; }
.fitrich-app-page #view-shop .app-filters button.active { color:var(--fr57-ink) !important; border-color:var(--fr57-cobalt) !important; }
.fitrich-app-page #view-shop .bag-preview { color:var(--fr57-ink) !important; border-color:rgba(5,6,8,.2) !important; background:transparent !important; }
.fitrich-app-page #view-shop .app-product,
.fitrich-app-page #view-shop .app-product:nth-child(odd) {
  background:var(--fr57-black) !important;
  color:var(--fr57-white) !important;
}
.fitrich-app-page #view-shop .app-product:nth-child(even) {
  background:var(--fr57-white) !important;
  color:var(--fr57-ink) !important;
}
.fitrich-app-page #view-shop .app-product:nth-child(odd) h3,
.fitrich-app-page #view-shop .app-product:nth-child(odd) strong { color:var(--fr57-white) !important; }
.fitrich-app-page #view-shop .app-product:nth-child(even) h3,
.fitrich-app-page #view-shop .app-product:nth-child(even) strong { color:var(--fr57-ink) !important; }
.fitrich-app-page #view-shop .app-product:nth-child(odd) p { color:var(--fr57-chrome) !important; }
.fitrich-app-page #view-shop .app-product:nth-child(even) p { color:var(--fr57-muted) !important; }

.fitrich-app-page #view-routine { background:var(--fr57-white) !important; }
.fitrich-app-page #view-routine .routine-layout,
.fitrich-app-page #view-routine .routine-builder {
  background:var(--fr57-white) !important;
  color:var(--fr57-ink) !important;
}
.fitrich-app-page #view-routine .routine-builder h2,
.fitrich-app-page #view-routine .builder-row p b { color:var(--fr57-ink) !important; }
.fitrich-app-page #view-routine .builder-row { border-color:rgba(5,6,8,.16) !important; }
.fitrich-app-page #view-routine .builder-row>div {
  gap:0 !important;
  border-bottom:1px solid rgba(5,6,8,.18) !important;
}
.fitrich-app-page #view-routine .builder-row button {
  min-height:42px !important;
  padding:0 16px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--fr57-muted) !important;
  box-shadow:none !important;
}
.fitrich-app-page #view-routine .builder-row button.active {
  background:transparent !important;
  color:var(--fr57-ink) !important;
  box-shadow:inset 0 -3px var(--fr57-cobalt) !important;
}
.fitrich-app-page #view-routine .routine-result {
  background:var(--fr57-black) !important;
  color:var(--fr57-white) !important;
}
.fitrich-app-page #view-routine .routine-result h2,
.fitrich-app-page #view-routine .routine-result li { color:var(--fr57-white) !important; }

.fitrich-app-page #view-member { background:var(--fr57-black) !important; color:var(--fr57-white) !important; }
.fitrich-app-page #view-member h2,
.fitrich-app-page #view-member h3 { color:var(--fr57-white) !important; }
.fitrich-app-page #view-member p { color:var(--fr57-chrome) !important; }
.fitrich-app-page #view-profile { background:var(--fr57-white) !important; color:var(--fr57-ink) !important; }
.fitrich-app-page #view-profile h2 { color:var(--fr57-ink) !important; }

/* One-line editorial titles on large screens; natural wrapping on phones. */
@media(min-width:901px) {
  .website-page .section-head h2,
  .website-page .routine-intro>h2,
  .website-page .world>.section-head h2,
  .website-page .app-copy h2,
  .website-page .closing h2,
  .website-page .code-title h2 {
    max-width:none !important;
    white-space:nowrap;
    text-wrap:nowrap;
  }
  .website-page .code-title {
    display:block !important;
  }
  .website-page .code-title h2 {
    margin-top:28px !important;
    text-align:left !important;
    font-size:clamp(3.2rem,5vw,6.5rem) !important;
    line-height:.9 !important;
  }
  .website-page .code-title h2 br,
  .website-page .app-copy h2 br,
  .website-page .closing h2 br { display:none; }
  .website-page .code-title h2 span,
  .website-page .code-title h2 em { margin-left:.12em; font-size:inherit !important; }
  .website-page .app-preview {
    grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr) !important;
    gap:clamp(1.5rem,3vw,3rem) !important;
  }
  .website-page .app-copy h2 {
    font-size:clamp(2.15rem,3.05vw,3.8rem) !important;
    letter-spacing:-.055em !important;
  }
}

@media(max-width:900px) {
  .website-page .brand-signature,
  .info-page .brand-signature,
  .fitrich-app-page .app-shell .brand-signature {
    width:154px !important;
    grid-template-columns:30px 1fr !important;
    gap:6px !important;
  }
  .website-page .brand-monogram,
  .info-page .brand-monogram,
  .fitrich-app-page .app-shell .brand-monogram {
    width:30px !important;
    height:30px !important;
    font-size:16px !important;
  }
  .website-page .brand-wordmark-image,
  .info-page .brand-wordmark-image,
  .fitrich-app-page .app-shell .brand-wordmark-image {
    width:118px !important;
    height:20px !important;
  }
  .website-page .code-title h2,
  .website-page .app-copy h2,
  .website-page .closing h2 { white-space:normal; text-wrap:balance; }
  .website-page .code-title h2 { font-size:clamp(3rem,14vw,5.5rem) !important; line-height:.86 !important; }
  .website-page .code-grid { grid-template-columns:1fr 1fr; }
  .website-page .code-manifesto {
    display:block !important;
    margin-top:3rem !important;
    padding-top:2rem !important;
  }
  .website-page .code-manifesto .fr-axis {
    margin-top:2rem !important;
  }
}

@media(max-width:680px) {
  .website-page .routine-step { grid-template-columns:25px 64px minmax(0,1fr); }
  .website-page .segmented { overflow-x:auto; }
  .website-page .segmented button { flex:0 0 auto; }
  .website-page .code-grid { grid-template-columns:1fr 1fr; }
  .website-page footer,
  .info-page .info-footer { grid-template-columns:1fr 1fr !important; }
  .website-page .footer-brand,
  .info-page .info-footer-brand { grid-column:1/-1; }
  .fitrich-app-page #view-shop .app-product-grid {
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:0 !important;
    background:var(--fr57-black) !important;
  }
  .fitrich-app-page #view-shop .app-product,
  .fitrich-app-page #view-shop .app-product:nth-child(n) {
    min-height:0 !important;
    display:block !important;
  }
  .fitrich-app-page #view-shop .app-product-art {
    height:clamp(300px,48svh,410px) !important;
  }
  .fitrich-app-page #view-shop .app-product-copy {
    min-height:245px;
    padding:22px 20px 28px !important;
  }
}

@media(prefers-reduced-motion:reduce) {
  .website-page .temp-product-placeholder::after,
  .fitrich-app-page .temp-product-placeholder::after { animation:none !important; }
}