/* ==========================================================================
   variables.css — RM ONE design tokens
   --------------------------------------------------------------------------
   Every visual value used in the site comes from here (RULES.md §4).
   Brand palette and fonts follow the RM ONE Brand Guidelines v1.0 (2022):
     primary Logo Green + Logo Gray; secondary Midnight Blue, Light Green 1/2,
     Lemon, Orange, Deep Orange, Black (RULES.md §9.1).
   Text-safe variants (-700) are derived, not brand colors: they exist because
   some brand colors miss WCAG AA for small text on white (§9.1).
   ========================================================================== */

:root {
  /* ---- Typography (brand guide p. 9 — RULES.md §10) --------------------
     Headlines: Apex New. Body: Acumin Pro per the guide — until its files are
     supplied, body copy is set in Apex New Book too (§10.4). Roboto is the
     guide's system fallback, never downloaded. */
  --font-family-heading: 'Apex New', Roboto, 'Segoe UI', Arial, sans-serif;
  --font-family-base: 'Apex New', Roboto, 'Segoe UI', Arial, sans-serif;

  /* Mapped to the loaded Apex New weights: Book 400, Medium 500, Bold 700,
     Heavy 800. There is no Semi-Bold file, so that token resolves to Bold
     (the nearest loaded weight) instead of letting the browser guess. */
  --font-weight-regular: 400; /* Book */
  --font-weight-medium: 500; /* Medium: flow-chain text, AI prompts */
  --font-weight-semibold: 700; /* Bold (no Semi-Bold supplied) */
  --font-weight-bold: 700; /* Bold */
  --font-weight-heavy: 800; /* Heavy: h1 and the home hero headline */

  --font-size-xs: 0.75rem; /* 12 */
  --font-size-sm: 0.875rem; /* 14 */
  --font-size-base: 1rem; /* 16 */
  --font-size-md: 1.125rem; /* 18  lead text */
  --font-size-lg: clamp(1.188rem, 1.102rem + 0.364vw, 1.375rem); /* 19→22  card titles, h3 */
  --font-size-xl: clamp(1.5rem, 1.386rem + 0.485vw, 1.75rem); /* 24→28  section titles (mobile) */
  --font-size-2xl: clamp(1.75rem, 1.523rem + 0.97vw, 2.25rem); /* 28→36  section titles / page titles (mobile) */
  --font-size-3xl: clamp(2.25rem, 1.909rem + 1.455vw, 3rem); /* 36→48  page titles (desktop) */
  --font-size-4xl: 3.75rem; /* 60 */
  --font-size-lead: clamp(1.125rem, 1.04rem + 0.364vw, 1.313rem); /* 18→21  page-hero lead */
  --font-size-lead-lg: clamp(1.25rem, 1.136rem + 0.485vw, 1.5rem); /* 20→24  the deck's 15pt hero lead (who we serve) */

  /* Website deck final (10/6/26) sizes at the deck scale, 1pt = 1.6px
     (16px root). Use these where a component follows a slide's type.
     Fluid: the deck size from 1200px wide, scaling down to a readable
     phone size at 375px (the min in each clamp). */
  --font-size-eyebrow: clamp(0.875rem, 0.727rem + 0.63vw, 1.2rem); /* 12pt  the kicker on every slide (14px on phones) */
  --font-size-deck-10: clamp(0.938rem, 0.886rem + 0.218vw, 1.05rem); /* 10.5pt  chips, small labels */
  --font-size-deck-12: clamp(1rem, 0.909rem + 0.388vw, 1.2rem); /* 12pt  card text, list text, buttons */
  --font-size-deck-13: clamp(1.125rem, 1.023rem + 0.436vw, 1.35rem); /* 13.5pt  section leads */
  --font-size-deck-14: clamp(1.125rem, 1rem + 0.533vw, 1.4rem); /* 14pt  card titles, leads */
  --font-size-deck-16: clamp(1.25rem, 1.091rem + 0.679vw, 1.6rem); /* 16pt  benefit lines, strong subheads */
  --font-size-deck-12-5: clamp(1.031rem, 0.932rem + 0.424vw, 1.25rem); /* 12.5pt */
  --font-size-deck-12-75: clamp(1.063rem, 0.966rem + 0.412vw, 1.275rem); /* 12.75pt  card and list text */
  --font-size-deck-14-25: clamp(1.156rem, 1.034rem + 0.521vw, 1.425rem); /* 14.25pt  card titles */
  --font-size-deck-15: clamp(1.188rem, 1.045rem + 0.606vw, 1.5rem); /* 15pt  leads, card titles */
  --font-size-deck-15-75: clamp(1.25rem, 1.102rem + 0.63vw, 1.575rem); /* 15.75pt  subheads */
  --font-size-deck-22-5: clamp(1.75rem, 1.523rem + 0.97vw, 2.25rem); /* 22.5pt  metric figures */

  /* Fluid heading sizes: they grow with the viewport between a phone and a
     1440px desktop, so no breakpoint overrides are needed.
     h1 36→45 (page titles) | h2 28→45 (section titles): both the website
     deck's 28pt Apex New Heavy at the deck scale (1pt = 1.6px).
     The home first screen has its own sizes, measured on the slide (Landing
     screen, below). */
  --font-size-h1: clamp(2.25rem, 1.5rem + 2.6vw, 2.8rem);
  --font-size-h2: clamp(1.75rem, 1.2rem + 1.8vw, 2.8rem);

  --line-height-tight: 1.08;
  --line-height-snug: 1.3;
  --line-height-base: 1.6;

  /* Apex New is tightly spaced already: only a light negative track at the
     largest sizes, none below */
  --letter-spacing-display: -0.005em;
  --letter-spacing-tight: 0;
  --letter-spacing-eyebrow: 0.08em;

  --measure: 64ch;
  --measure-narrow: 48ch;

  /* ---- Brand palette (brand guide pp. 7–8) --------------------------------
     The nine guide colors are the only hex values in the site, plus white.
     Every other token is a mix of two of them (color-mix), so no off-palette
     color can appear: neutrals are Midnight Blue tints, text-safe shades are
     a guide color + Black, pale tints are a guide color + White. The hex in
     each comment is the computed result; ratios are WCAG contrast on white. */
  --color-black: #000000; /* Black — limited logo, photo overlays only */
  --color-white: #ffffff;
  --color-slate-900: #253746; /* Midnight Blue */
  --color-grey-700: #505759; /* RM ONE Logo Gray — muted text on white (7.4:1) */
  --color-green-500: #6ba539; /* RM ONE Logo Green — fills, icons, large text */
  --color-green-300: #a9c23f; /* Light Green 1 — patterns and fills, never text on white */
  --color-lime-400: #dbe442; /* Light Green 2 ("signal") — accents on dark only */
  --color-lemon-300: #f0ec74; /* Lemon — patterns on dark surfaces and photos */
  --color-orange-400: #ff9425; /* Orange — patterns and highlights on dark */
  --color-orange-500: #e87722; /* Deep Orange — the "act/approve" moment */

  /* Midnight Blue shades and tints (cool neutrals) */
  --color-slate-950: color-mix(in srgb, var(--color-slate-900) 62%, var(--color-black)); /* #17222b inset panels on Midnight Blue, never behind the logo */
  --color-slate-800: color-mix(in srgb, var(--color-slate-900) 90%, var(--color-white)); /* #3b4b59 raised surface on Midnight Blue */
  --color-slate-700: color-mix(in srgb, var(--color-slate-900) 82%, var(--color-white)); /* #4c5b67 idle track / tag on Midnight Blue */
  --color-grey-200: color-mix(in srgb, var(--color-slate-900) 16%, var(--color-white)); /* #dcdfe1 borders */
  --color-grey-100: color-mix(in srgb, var(--color-slate-900) 10%, var(--color-white)); /* #e9ebed hover fill, chips */
  --color-grey-50: color-mix(in srgb, var(--color-slate-900) 5%, var(--color-white)); /* #f4f5f6 muted sections */

  /* Logo Gray tints */
  --color-grey-600: color-mix(in srgb, var(--color-grey-700) 85%, var(--color-white)); /* #6a7072 form field borders (5.0:1) */
  --color-slate-300: color-mix(in srgb, var(--color-grey-700) 55%, var(--color-white)); /* #9fa3a4 rules, strong borders */

  /* Text-safe shades: guide color + Black, for small text on white (§9.1) */
  --color-green-700: color-mix(in srgb, var(--color-green-500) 72%, var(--color-black)); /* #4d7729 text, buttons, links (5.3:1) */
  --color-green-800: color-mix(in srgb, var(--color-green-500) 62%, var(--color-black)); /* #426623 hover (6.6:1) */
  --color-cta: #487d23; /* the deck's "Book a demo" pill (website deck 10/12/26 header); white label 5.0:1 */
  --color-cta-hover: var(--color-green-800);
  --color-orange-700: color-mix(in srgb, var(--color-orange-500) 74%, var(--color-black)); /* #ac5819 orange text, errors (5.1:1) */

  /* Pale tints: guide color + White, behind Midnight Blue text */
  --color-green-50: color-mix(in srgb, var(--color-green-500) 11%, var(--color-white)); /* #eff5e9 */
  --color-lime-100: color-mix(in srgb, var(--color-lime-400) 26%, var(--color-white)); /* #f6f8ce */
  --color-orange-50: color-mix(in srgb, var(--color-orange-500) 11%, var(--color-white)); /* #fcf0e7 */

  /* Hover on Light Green 2 buttons: toward Light Green 1 */
  --color-lime-500: color-mix(in srgb, var(--color-lime-400) 80%, var(--color-green-300)); /* #d1dd41 */

  /* ---- Semantic colors (use these in components) ------------------------ */
  --color-bg: var(--color-white);
  --color-bg-muted: var(--color-grey-50);
  --color-bg-dark: var(--color-slate-900);
  --color-surface: var(--color-white);

  --color-text: var(--color-slate-900);
  --color-text-muted: var(--color-grey-700);
  --color-text-inverse: var(--color-white);
  --color-text-inverse-muted: color-mix(in srgb, var(--color-white) 80%, var(--color-slate-900)); /* #d3d7da (8.5:1 on Midnight Blue) */

  --color-heading: var(--color-slate-900);
  /* Website deck final (10/6/26) colours, at the client's request: Logo
     Green for green text and buttons, Deep Orange for orange text, white
     labels on green and orange fills (RULES.md §9.1, deck colours) */
  --color-eyebrow: var(--color-green-500);
  --color-eyebrow-on-dark: var(--color-lime-400);

  --color-border: var(--color-grey-200);
  --color-border-strong: var(--color-slate-300);
  --color-border-on-dark: rgb(255 255 255 / 0.14);
  --color-border-on-dark-strong: rgb(255 255 255 / 0.6); /* outline buttons on Midnight Blue */
  --color-track-on-dark: color-mix(in srgb, var(--color-white) 24%, var(--color-slate-900)); /* #5d6a74 chapters still to come in the tour bar (opaque, like every brand segment) */
  --color-fill-on-dark: rgb(255 255 255 / 0.08); /* hover wash on Midnight Blue */

  --color-primary: var(--color-green-500);
  --color-primary-hover: var(--color-green-700);
  --color-primary-contrast: var(--color-white);
  --color-brand: var(--color-green-500);
  --color-brand-tint: var(--color-green-50);
  --color-brand-tint-hover: color-mix(in srgb, var(--color-green-500) 15%, var(--color-white)); /* #e9f2e1 hover on a tinted row (green text 4.6:1) */
  --color-signal-tint: var(--color-lime-100); /* pale lime band behind slate text (home value note) */
  --color-signal: var(--color-lime-400);
  --color-action: var(--color-orange-500);
  --color-action-text: var(--color-orange-500);
  --color-action-contrast: var(--color-white);
  /* Labels on Logo Green and Deep Orange fills (badges, chips): white, as
     on the website deck — below AA for small text (2.97:1 on Logo Green),
     accepted at the client's request (RULES.md §9.1). Never use it on Light
     Green 2: lime fills keep Deep Midnight labels (--color-slate-950). */
  --color-on-brand: var(--color-white);

  --color-success: var(--color-green-700);
  --color-success-tint: var(--color-green-50);
  /* Red is not in the guide: errors use the nearest guide color, Deep Orange
     (text-safe shade). They always carry an icon and message, never color only. */
  --color-danger: var(--color-orange-700);
  --color-danger-tint: var(--color-orange-50);

  --color-focus: var(--color-green-700);
  --color-focus-on-dark: var(--color-lime-400);
  --color-overlay: rgb(37 55 70 / 0.6); /* Midnight Blue */

  /* ---- Spacing (4px base) ----------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6rem;

  --section-padding: var(--space-10); /* grows at md/lg in responsive.css */

  /* ---- Radius (by hierarchy) -------------------------------------------- */
  --radius-sm: 6px; /* inputs, tags */
  --radius-md: 10px; /* cards, tiles */
  --radius-lg: 16px; /* feature panels, media */
  --radius-pill: 999px; /* buttons (brand: pill CTAs) */

  /* ---- Elevation (two layers: a tight contact shadow + a soft ambient one)
     Only for things that float: ask card, form panel, dropdowns, screens. */
  /* Shadows are Midnight Blue at low alpha */
  --shadow-sm: 0 1px 2px rgb(37 55 70 / 0.07), 0 2px 6px rgb(37 55 70 / 0.06);
  --shadow-md: 0 2px 4px rgb(37 55 70 / 0.06), 0 12px 28px rgb(37 55 70 / 0.12);
  --shadow-lg: 0 4px 8px rgb(37 55 70 / 0.07), 0 28px 60px rgb(37 55 70 / 0.22);
  --focus-ring: 0 0 0 3px rgb(107 165 57 / 0.35); /* Logo Green */

  /* ---- Surfaces ---------------------------------------------------------- */
  /* frosted sticky header: stays white enough to carry the logo (§9.6) */
  --color-header-glass: rgb(255 255 255 / 0.94);
  --color-slate-glass: rgb(37 55 70 / 0.86); /* captions over photos */
  --color-border-brand: rgb(107 165 57 / 0.4); /* green edge: linked card hover, centered note */

  /* ---- Signal bar: the deck's green / lime / orange dashes, as one edge.
     Lime is involved, so use it on slate only (RULES.md §9.1). */
  --signal-bar: linear-gradient(
    90deg,
    var(--color-green-500) 0 46%,
    transparent 46% 48%,
    var(--color-lime-400) 48% 72%,
    transparent 72% 74%,
    var(--color-orange-500) 74% 100%
  );

  /* ---- Sequence track: the signal bar's dashes, one per step.
     Steps, the 5-day timeline and the ask card's stages are drawn as a row of
     segments (green; the final "act" segment orange). No lime, so the track
     works on white as well as slate. */
  --track-weight: 4px;
  --track-gap: var(--space-2);
  /* Numbered badges on a connector (home business problem, website deck
     slide 4): the badge and the grey line that joins them */
  --step-badge-size: 3rem;
  --step-badge-line: 6px;
  --day-dot-size: 4.5rem; /* platform five-day timeline circles */
  --badge-size: 2rem; /* platform numbered rules (badge list circles) */
  --cycle-gap: var(--space-7); /* platform cycle: column gap, holds the dash between steps */
  --cycle-num-col: 3.5rem; /* platform cycle: the number column, as on slide 7 */
  --cycle-icon-size: 1.75rem;

  /* ---- Controls --------------------------------------------------------- */
  --control-height-sm: 2.25rem;
  --control-height: 2.75rem;
  --control-height-lg: 3rem; /* 48px: large buttons */
  --border-width: 1px;

  /* ---- Layout ----------------------------------------------------------- */
  --header-height: 72px;
  /* Logo height. The brand guide's clear space is the height of the "O" —
     the full height of the wordmark — so this is also the logo's minimum
     margin on every side (RULES.md §9.6). 20px on phones fits the 20px
     gutter; 24px from md fits the 72px header (24 + 24 + 24). */
  --logo-height: 20px;
  /* The header logo follows home page deck (10/13/26) slide 1 from md: 44% of
     the header's height (31px in the 72px header), at the client's request —
     a deliberate exception to the clear space above (RULES.md §9.6). */
  --logo-height-header: var(--logo-height);
  --chapter-nav-height: 52px; /* sticky section switcher on hub pages */

  /* ---- Landing screen: home first screen (home page deck 10/13/26, slide 1)
     Sizes follow the slide shown full width (1920px: 1pt = 2px), so they
     grow with the viewport. Each vertical size also has a vh cap
     (min(…vw, …vh)), so on wide but short browser windows (a 1080p screen
     leaves ~940px under the browser bar, minus the header) everything still
     fits one screen with no scroll bar. */
  --landing-max: 120rem; /* content stops spreading only on very wide screens */
  /* "We Build Profit." 44pt = 88px (4.58vw), Logo Green; the headline 28pt =
     56px (2.92vw), white, with the slide's open line spacing. The tagline
     20pt = 40px (2.1vw) Bold; the lead 19pt = 38px (1.98vw) Book. */
  --font-size-landing-kicker: clamp(2.5rem, min(4.58vw, 8vh), 5.5rem); /* 40→88 */
  --line-height-landing-kicker: 1.14;
  --font-size-landing-title: clamp(1.75rem, min(2.92vw, 5.1vh), 3.5rem); /* 28→56 */
  --line-height-landing-title: 1.39;
  --font-size-landing-tagline: clamp(1.125rem, min(2.1vw, 3.7vh), 2.5rem); /* 18→40 */
  --font-size-landing-lead: clamp(1.0625rem, min(1.98vw, 3.5vh), 2.375rem); /* 17→38 */
  /* the caption under the bar, 21pt = 42px (2.19vw), white Bold */
  --font-size-landing-caption: clamp(1.125rem, min(2.19vw, 3.8vh), 2.625rem); /* 18→42 */
  /* the lime benefit line in the foot strip, 22pt = 44px (2.29vw) */
  --font-size-landing-benefit: clamp(1.125rem, min(2.29vw, 4vh), 2.75rem); /* 18→44 */
  --landing-gap-kicker: clamp(1.25rem, min(3.7vw, 6.5vh), 4.5rem); /* We Build Profit. → headline, from lg (71px at 1920) */
  --landing-gap: clamp(1.5rem, min(6.4vw, 10.5vh), 7.75rem); /* headline → tagline, from lg (123px) */
  --landing-gap-sm: clamp(1rem, min(2vw, 3.5vh), 2.5rem); /* tagline → lead, from lg (39px) */
  /* Side padding, the same on both sides, from lg: sized so "We Build
     Profit." (about 6.6em wide) is centred under the header logo, whose
     centre is the header column's left edge plus half the logo's width
     (the logo is 4.613 times as wide as it is tall). Never less than the
     slide's 4.5% margin, so on narrower windows the text sits as on the
     slide. Percentages are of the screen width (padding only). */
  --landing-logo-centre: calc(
    max(var(--gutter), (min(100%, var(--landing-max)) - var(--container-max)) / 2) + var(--logo-height-header) * 2.307
  );
  --landing-side: max(4.5%, var(--landing-logo-centre) - var(--font-size-landing-kicker) * 3.3);
  --landing-pad-top: clamp(2rem, min(2.65vw, 4.7vh), 3.25rem); /* header → headline, from lg (51px) */
  --landing-pad-bottom: clamp(2rem, min(3.85vw, 6.8vh), 4.75rem); /* caption → foot strip, from lg (74px) */
  --landing-text-lift: min(4.1vw, 7.3vh); /* the lead ends 79px above the caption's foot, from lg */
  --landing-media-max: 84vh; /* the screenshot narrows on short windows so the screen still fits */
  --landing-bar-gap: clamp(1rem, 1.65vw, 2rem); /* screenshot → bar (32px) */
  --landing-bar-weight: clamp(4px, 0.39vw, 7.5px);
  --landing-caption-gap: clamp(0.75rem, 1.1vw, 1.375rem); /* bar → caption (21px) */
  --landing-strip-pad: clamp(1rem, min(1.25vw, 2.2vh), 1.5rem); /* foot strip, above and below the line (24px) */
  /* The foot strip: a deeper Midnight Blue (the slide's #1B2B37) */
  --landing-strip-bg: color-mix(in srgb, var(--color-slate-900) 75%, var(--color-black));
  /* The deck's bar under the screenshot: Logo Green, Light Green 2, Deep
     Orange (the slide's yellow and theme orange, as brand colors), in the
     slide's proportions. Lime is involved, so slate only (RULES.md §9.1). */
  --landing-bar: linear-gradient(
    90deg,
    var(--color-green-500) 0 49.2%,
    transparent 49.2% 50%,
    var(--color-lime-400) 50% 74%,
    transparent 74% 74.8%,
    var(--color-orange-500) 74.8% 100%
  );

  --container-max: 1200px;
  --container-narrow: 820px;
  --gutter: var(--space-5);

  /* ---- Layers ----------------------------------------------------------- */
  --z-dropdown: 100;
  --z-header: 200;
  --z-drawer: 300;
  --z-skip: 900;

  /* ---- Motion ----------------------------------------------------------- */
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 320ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Breakpoints (use verbatim in responsive.css; variables can't be used in
   media queries):
     sm  >= 576px    large phones
     md  >= 768px    tablets
     lg  >= 1024px   laptops
     xl  >= 1200px   desktop navigation appears                           */