/* ===========================================================================
   FS — TOKENS  (v2 — Ritovex design system)
   Single source of truth. No other stylesheet may declare a raw hex,
   a px duration, or an easing curve. A hardcoded value elsewhere is a bug.

   REWRITTEN 2026-08-03. The scale, spacing, radii, neutrals and typeface are
   now Ritovex's, measured from ritovex.webflow.shared.84db156a8.css rather
   than eyeballed. Four things were kept deliberately and are marked KEPT
   below: the rose accent, the contrast rungs, the product ladder and the
   on-dark counterparts.

   Token NAMES are unchanged from v1 on purpose. Every downstream sheet reads
   these names, so swapping the values re-skins the whole theme without a
   single edit in components.css, chrome.css or home.css.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   SELF-HOSTED FACES

   Satoshi replaces Manrope + Inter. Five weights, the full range Ritovex
   declares. Fetched from Fontshare as woff2 (123 KB total) rather than
   hotlinked from Webflow's CDN as TTF — Satoshi is free for commercial use,
   but their TTFs are roughly double the size and are not ours to serve.

   Fragment Mono stays: it is the "//" marker, kept by explicit decision.
   --------------------------------------------------------------------------- */

@font-face {
	font-family: "Satoshi";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/satoshi-300.woff2") format("woff2");
}

@font-face {
	font-family: "Satoshi";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/satoshi-400.woff2") format("woff2");
}

@font-face {
	font-family: "Satoshi";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/satoshi-500.woff2") format("woff2");
}

@font-face {
	font-family: "Satoshi";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/satoshi-700.woff2") format("woff2");
}

@font-face {
	font-family: "Satoshi";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("../fonts/satoshi-900.woff2") format("woff2");
}

@font-face {
	font-family: "Fragment Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/fragment-mono-400.woff2") format("woff2");
}

/* Metric-matched fallback. size-adjust holds CLS near zero during swap by
   making Arial occupy close to the same space as Satoshi. */
@font-face {
	font-family: "Satoshi Fallback";
	src: local("Arial");
	ascent-override: 98%;
	descent-override: 24%;
	line-gap-override: 0%;
	size-adjust: 103%;
}

:root {

	/* -----------------------------------------------------------------------
	   SURFACES — Ritovex's four plates.

	   Ritovex has exactly ONE dark: #141414 does duty as ink, as the dark
	   section background and as the footer. The v1 two-tier dark
	   (surface-1 / surface-0) therefore collapses to a single value. Both
	   names are kept so .fs-section--darkest does not break, but they are
	   deliberately identical — a second dark would be an invention.
	   ----------------------------------------------------------------------- */
	--fs-bg: #ffffff;
	--fs-bg-alt: #f6f6f9;          /* Ritovex light-gray */
	--fs-bg-alt-2: #ececf1;        /* one step down, for nested panels */
	--fs-surface-1: #141414;       /* Ritovex primary */
	--fs-surface-0: #141414;       /* same by design — see note above */

	/* -----------------------------------------------------------------------
	   INK — every ratio below is computed, not estimated.
	   ----------------------------------------------------------------------- */
	--fs-ink: #141414;             /* 18.43:1 on white  */
	--fs-muted: #494852;           /*  9.01:1 on white  */
	--fs-on-dark-ink: #ffffff;     /* 18.43:1 on #141414 */
	--fs-on-dark-muted: #9c9c9f;   /*  6.69:1 on #141414 — the flat equivalent
	                                  of Ritovex's rgba(246,246,249,.6) */
	--fs-ink-05: rgba(20, 20, 20, 0.05);
	--fs-ink-12: rgba(20, 20, 20, 0.12);
	--fs-white: #ffffff;

	/* -----------------------------------------------------------------------
	   BORDERS — Ritovex's navbar hairline is #1b1a2733, i.e. 20% ink.
	   ----------------------------------------------------------------------- */
	--fs-border: rgba(20, 20, 20, 0.10);
	--fs-border-strong: rgba(20, 20, 20, 0.20);
	--fs-on-dark-border: rgba(255, 255, 255, 0.10);
	--fs-on-dark-border-strong: rgba(255, 255, 255, 0.16);
	--fs-on-dark-05: rgba(255, 255, 255, 0.06);

	/* -----------------------------------------------------------------------
	   BRAND — KEPT.

	   Ritovex's accent is #ff7a52. It is NOT used here: the brand hex stays
	   #e53566 by explicit decision. Ritovex's orange measures 2.58:1 on white,
	   which fails AA at every text size — the same failure the rungs below
	   were built to solve, so importing it would have meant importing the bug
	   and then fixing it back.

	   --fs-rose is 4.17:1 on white: fine for fills, borders and text at 24px
	   and up, NOT for body-size text. Reach for --fs-rose-ink on light and
	   --fs-rose-lift on dark.
	   ----------------------------------------------------------------------- */
	--fs-rose: #e53566;            /* BRAND — fills, lines, text >=24px  (4.17:1 on white)   */
	--fs-rose-ink: #a6204b;        /* small text/links on light          (7.17:1 on white)   */
	--fs-rose-lift: #ff8ba5;       /* small text on dark                 (8.31:1 on #141414) */
	--fs-rose-hover: #ff4779;      /* fills + dark surfaces only         (3.27:1 — never text on white) */
	--fs-rose-soft: rgba(229, 53, 102, 0.09);
	--fs-rose-dim: rgba(229, 53, 102, 0.5);
	--fs-focus: #c9235b;           /* 5.42:1 on white · visible on both */

	/* Deprecated alias from the v0.2 scaffold. */
	--fs-rose-text: var(--fs-rose-ink);

	/* -----------------------------------------------------------------------
	   PRODUCT LADDER — KEPT.

	   Ritovex has no per-product colour concept, so there was nothing to
	   import. Three-rung OKLCH ladder, fixed lightness and chroma, hue only:

	     ink   oklch(0.48 0.17 H)   ~7.2:1 on white     — small text on light
	     core  oklch(0.62 0.21 H)   ~4.0:1 / ~4.5:1     — fills, lines, large text
	     lift  oklch(0.78 0.15 H)   ~8.3:1 on #141414   — small text on dark
	   ----------------------------------------------------------------------- */

	/* EduTech / Bootcamp — hue 346 */
	--fs-product-edutech-ink: #9b2671;
	--fs-product-edutech: #d840a0;
	--fs-product-edutech-lift: #fb8ecc;

	/* AI Marketing — hue 356 */
	--fs-product-marketing-ink: #a12261;
	--fs-product-marketing: #e03b8a;
	--fs-product-marketing-lift: #ff8cba;

	/* AgenTech — hue 8 */
	--fs-product-agentech-ink: #a6204b;
	--fs-product-agentech: #e6396e;
	--fs-product-agentech-lift: #ff8ba5;

	/* AI CRM — hue 20 */
	--fs-product-crm-ink: #a82133;
	--fs-product-crm: #e93a4e;
	--fs-product-crm-lift: #ff8d8f;

	/* GymFlow — hue 30 */
	--fs-product-gymflow-ink: #a82418;
	--fs-product-gymflow: #e93f2d;
	--fs-product-gymflow-lift: #ff8f7d;

	/* Indirection layer. Components read ONLY these three. */
	--fs-product-accent: var(--fs-rose);
	--fs-product-accent-ink: var(--fs-rose-ink);
	--fs-product-accent-lift: var(--fs-rose-lift);

	/* Deprecated aliases. */
	--fs-product-support: var(--fs-product-agentech);
	--fs-product-bootcamp: var(--fs-product-edutech);
	--fs-gymflow-accent: var(--fs-product-gymflow);
	--fs-gymflow-surface: var(--fs-surface-1);

	/* -----------------------------------------------------------------------
	   SEMANTIC
	   ----------------------------------------------------------------------- */
	--fs-green: #1c9a5b;
	--fs-amber: #b06f00;
	--fs-red: #c02626;

	/* -----------------------------------------------------------------------
	   TRACE — the signature motif.
	   ----------------------------------------------------------------------- */
	/* Idle routes are NEUTRAL. Rose is reserved for live state - the pulse and
	   the active route - which is what holds the accent inside its budget. The
	   glow token is gone: the pulse is legible on a hairline without it, and a
	   drop-shadow contradicts the no-shadow rule. */
	--fs-trace-line: rgba(20, 20, 20, 0.20);
	--fs-trace-line-dark: rgba(255, 255, 255, 0.20);

	/* -----------------------------------------------------------------------
	   TYPE — Satoshi throughout, exactly as Ritovex does it. One family for
	   display and body; weight and size carry the hierarchy, not contrast
	   between two families.
	   ----------------------------------------------------------------------- */
	--fs-font-display: "Satoshi", "Satoshi Fallback", Arial, sans-serif;
	--fs-font-body: "Satoshi", "Satoshi Fallback", Arial, sans-serif;
	--fs-font-mono: "Fragment Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

	--fs-weight-light: 300;
	--fs-weight-regular: 400;
	--fs-weight-medium: 500;
	--fs-weight-bold: 700;
	--fs-weight-black: 900;

	/* SCALE — fixed px, overridden at Ritovex's own breakpoints further down.
	   Not clamp(): chosen deliberately so the steps match the template
	   exactly at every width it was designed against. */
	--fs-t-display: 120px;
	--fs-t-hero: 60px;             /* Ritovex .banner-title / title-xl */
	--fs-t-h1: 48px;
	--fs-t-h2: 40px;
	--fs-t-h3: 33px;
	--fs-t-h4: 28px;
	--fs-t-h5: 24px;
	--fs-t-h6: 20px;
	--fs-t-lede: 18px;             /* lg-body  */
	--fs-t-body: 16px;             /* md-body  */
	--fs-t-small: 14px;            /* sm-body  */
	--fs-t-btn: 18px;
	--fs-t-mono: 13px;             /* the // marker */

	/* LINE HEIGHT — Ritovex's four steps. Headings sit at 150%, which is
	   loose for display type; the hero drops to 130%. Both are the template's
	   own values, adopted intentionally. */
	--fs-lh-100: 100%;
	--fs-lh-120: 120%;
	--fs-lh-130: 130%;
	--fs-lh-150: 150%;

	/* TRACKING — Ritovex sets -0.96px on a 48px h1 and -1.2px on a 60px
	   banner: both are -0.02em. Expressed proportionally so the value stays
	   correct when the size steps down at a breakpoint, which the template's
	   fixed px does not. */
	--fs-track-display: -0.02em;
	--fs-track-lg: -0.02em;
	--fs-track-md: -0.01em;
	--fs-track-none: 0;

	/* -----------------------------------------------------------------------
	   SPACE — KEPT. Ritovex has no space ladder beyond its section gaps, so
	   there was nothing to import; this is the same infrastructure decision
	   as the product ladder.
	   ----------------------------------------------------------------------- */
	--fs-space-3xs: 4px;
	--fs-space-xs: 8px;
	--fs-space-2xs: 12px;
	--fs-space-sm: 16px;
	--fs-space-md: 24px;
	--fs-space-ml: 32px;
	--fs-space-lg: 40px;
	--fs-space-l: 48px;
	--fs-space-xl: 64px;
	--fs-space-xxl: 96px;
	--fs-space-2xl: 120px;
	--fs-space-3xl: 160px;

	/* SECTION RHYTHM — Ritovex's three gaps, stepped at its breakpoints.
	   feature and base are both the primary gap: the template has no tier
	   above it, and inventing one would drift from the source. */
	--fs-section-feature: 110px;
	--fs-section-base: 110px;
	--fs-section-compact: 60px;

	/* -----------------------------------------------------------------------
	   LAYOUT — Ritovex runs a single 1320px container with a 15px gutter.
	   ----------------------------------------------------------------------- */
	--fs-container: 1320px;
	--fs-container-wide: 1320px;
	--fs-container-text: 720px;
	--fs-gutter: 15px;

	/* -----------------------------------------------------------------------
	   RADIUS — Ritovex: 5px controls, 14px cards, 20px testimonials,
	   24px panels.
	   ----------------------------------------------------------------------- */
	--fs-radius-sm: 5px;
	--fs-radius-md: 14px;
	--fs-radius-lg: 20px;
	--fs-radius-xl: 24px;
	--fs-radius-pill: 9999px;
	--fs-radius-card: var(--fs-radius-md);
	--fs-radius-btn: var(--fs-radius-sm);

	/* -----------------------------------------------------------------------
	   ELEVATION — Ritovex leans on inset hairlines rather than drop shadows.
	   ----------------------------------------------------------------------- */
	--fs-shadow-sm: 0 2px 8px rgba(20, 20, 20, 0.06);
	--fs-shadow-md: 0 16px 40px -12px rgba(20, 20, 20, 0.14);
	--fs-shadow-lg: 0 28px 64px -16px rgba(20, 20, 20, 0.18);
	--fs-shadow-card: var(--fs-shadow-md);
	--fs-shadow-inset: inset 0 0 0 4px rgba(0, 0, 0, 0.02);

	/* -----------------------------------------------------------------------
	   MOTION — unchanged. Ritovex's own transitions are .35s and .5s, which
	   sit inside this scale; the scroll choreography below was measured from
	   its IX2 definitions.
	   ----------------------------------------------------------------------- */
	--fs-duration-fast: 150ms;
	--fs-duration-base: 250ms;
	--fs-duration-slow: 450ms;
	--fs-duration-trace: 1400ms;
	--fs-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--fs-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--fs-ease-linear: linear;
	--fs-stagger: 60ms;

	--fs-duration-reveal: 1000ms;
	--fs-duration-swap: 500ms;
	--fs-duration-count: 2500ms;
	--fs-duration-marquee: 60s;
	--fs-duration-page-in: 500ms;
	--fs-delay-page-in: 400ms;
	--fs-ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
	--fs-ease-count: cubic-bezier(0.784, 0.325, 0.222, 0.98);
	--fs-reveal-shift: 100px;
	--fs-sticky-offset: 100px;
	--fs-card-spread: 50%;
}

/* ---------------------------------------------------------------------------
   RESPONSIVE SCALE

   Ritovex redeclares its type and spacing variables at three breakpoints.
   Reproduced exactly, on :root rather than body so the cascade reaches
   pseudo-elements and anything rendered outside <body>.

   Every number below is lifted from the template; none are interpolated.
   --------------------------------------------------------------------------- */

@media screen and (max-width: 991px) {
	:root {
		--fs-t-display: 72px;
		--fs-t-hero: 56px;
		--fs-t-h1: 48px;
		--fs-t-h2: 40px;
		--fs-t-h3: 33px;
		--fs-t-h4: 28px;
		--fs-t-h5: 24px;
		--fs-t-h6: 20px;
		--fs-t-lede: 17px;
		--fs-t-body: 16px;
		--fs-t-small: 14px;
		--fs-t-btn: 18px;

		--fs-section-feature: 100px;
		--fs-section-base: 100px;
		--fs-section-compact: 60px;
	}
}

@media screen and (max-width: 767px) {
	:root {
		--fs-t-display: 52px;
		--fs-t-hero: 46px;
		--fs-t-h1: 48px;
		--fs-t-h2: 38px;
		--fs-t-h3: 26px;
		--fs-t-h4: 26px;
		--fs-t-h5: 20px;
		--fs-t-h6: 18px;
		--fs-t-lede: 16px;
		--fs-t-body: 16px;
		--fs-t-small: 14px;
		--fs-t-btn: 17px;

		--fs-section-feature: 80px;
		--fs-section-base: 80px;
		--fs-section-compact: 50px;
	}
}

@media screen and (max-width: 479px) {
	:root {
		--fs-t-display: 36px;
		--fs-t-hero: 32px;
		--fs-t-h1: 38px;
		--fs-t-h2: 30px;
		--fs-t-h3: 22px;
		--fs-t-h4: 24px;
		--fs-t-h5: 20px;
		--fs-t-h6: 17px;
		--fs-t-lede: 15px;
		--fs-t-body: 14px;
		--fs-t-small: 13px;
		--fs-t-btn: 16px;

		--fs-section-feature: 60px;
		--fs-section-base: 60px;
		--fs-section-compact: 40px;
	}
}

/* ---------------------------------------------------------------------------
   PRODUCT SCOPES — KEPT.
   Set the indirection layer once; everything downstream follows.
   --------------------------------------------------------------------------- */

[data-product="agentech"] {
	--fs-product-accent: var(--fs-product-agentech);
	--fs-product-accent-ink: var(--fs-product-agentech-ink);
	--fs-product-accent-lift: var(--fs-product-agentech-lift);
}

[data-product="crm"] {
	--fs-product-accent: var(--fs-product-crm);
	--fs-product-accent-ink: var(--fs-product-crm-ink);
	--fs-product-accent-lift: var(--fs-product-crm-lift);
}

[data-product="gymflow"] {
	--fs-product-accent: var(--fs-product-gymflow);
	--fs-product-accent-ink: var(--fs-product-gymflow-ink);
	--fs-product-accent-lift: var(--fs-product-gymflow-lift);
}

[data-product="marketing"] {
	--fs-product-accent: var(--fs-product-marketing);
	--fs-product-accent-ink: var(--fs-product-marketing-ink);
	--fs-product-accent-lift: var(--fs-product-marketing-lift);
}

[data-product="edutech"] {
	--fs-product-accent: var(--fs-product-edutech);
	--fs-product-accent-ink: var(--fs-product-edutech-ink);
	--fs-product-accent-lift: var(--fs-product-edutech-lift);
}

/* ---------------------------------------------------------------------------
   DARK SECTIONS — KEPT.

   Dark is a compositional device, not a user-toggled theme. Ritovex simply
   paints sections #141414 and hardcodes white text; this keeps the paired
   on-dark values so every component recolours itself correctly instead of
   needing a dark variant written by hand.
   --------------------------------------------------------------------------- */

.fs-section--dark,
.fs-surface--dark {
	--fs-bg: var(--fs-surface-1);
	--fs-bg-alt: var(--fs-surface-0);
	--fs-ink: var(--fs-on-dark-ink);
	--fs-muted: var(--fs-on-dark-muted);
	--fs-border: var(--fs-on-dark-border);
	--fs-border-strong: var(--fs-on-dark-border-strong);
	--fs-trace-line: var(--fs-trace-line-dark);

	/* On dark, the accent's text role flips to the lift rung. */
	--fs-rose-ink: var(--fs-rose-lift);
	--fs-product-accent-ink: var(--fs-product-accent-lift);

	background: var(--fs-surface-1);
	color: var(--fs-on-dark-ink);
}

.fs-section--darkest {
	background: var(--fs-surface-0);
}