/* Redstone Logic shared stylesheet.
 *
 * Single source of truth for the design foundation: tokens, base typography,
 * layout utilities, and the button system. Linked LAST in every page's <head>
 * so it is authoritative. Page <style> blocks hold ONLY page-specific
 * components (heroes, cards, tables, forms); they no longer redefine anything
 * here, so the shared look can't drift across pages.
 */

:root {
  /* Brand */
  --rl-emerson: #B63C35;
  --rl-white: #FFFFFF;
  --rl-light-black: #2D2D2D;
  --rl-dark-sea-blue: #02298C;
  --rl-royal-aqua: #00C4D9;
  --rl-refresh-black: #121212;
  --rl-mid: #1E1E1E;

  /* Semantic aliases */
  --rl-primary: var(--rl-emerson);
  --rl-background-light: var(--rl-white);
  --rl-background-dark: var(--rl-refresh-black);
  --rl-text-light: var(--rl-light-black);
  --rl-text-dark: var(--rl-white);

  /* Type families */
  --rl-font-display: 'Share Tech', 'Segoe UI', system-ui, sans-serif;
  --rl-font-body: 'Montserrat', 'Segoe UI', system-ui, sans-serif;

  /* Type scale */
  --rl-font-size-xs: 11px;
  --rl-font-size-sm: 14px;
  --rl-font-size-base: 16px;
  --rl-font-size-md: 20px;
  --rl-font-size-lg: 24px;
  --rl-font-size-xl: 32px;
  --rl-font-size-2xl: 48px;
  --rl-font-size-3xl: 64px;

  /* Weights */
  --rl-font-weight-light: 300;
  --rl-font-weight-regular: 400;
  --rl-font-weight-medium: 500;
  --rl-font-weight-semibold: 600;

  /* Spacing */
  --rl-space-1: 4px;
  --rl-space-2: 8px;
  --rl-space-3: 12px;
  --rl-space-4: 16px;
  --rl-space-5: 24px;
  --rl-space-6: 32px;
  --rl-space-7: 48px;
  --rl-space-8: 64px;
  --rl-space-9: 96px;
  --rl-space-10: 128px;

  /* Radius */
  --rl-radius-sm: 2px;
  --rl-radius-md: 4px;
  --rl-radius-lg: 8px;
  --rl-radius-full: 999px;

  /* Shadows */
  --rl-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --rl-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);

  /* Motion */
  --rl-transition-fast: 150ms ease;
  --rl-transition-normal: 300ms ease;
}

/* ============================================================
   RESET & BASE TYPOGRAPHY
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--rl-font-body);
  font-size: var(--rl-font-size-base);
  font-weight: var(--rl-font-weight-regular);
  color: var(--rl-text-light);
  line-height: 1.6;
  background-color: var(--rl-white);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--rl-font-display);
  font-weight: var(--rl-font-weight-regular);
  line-height: 1.25;
}

a { text-decoration: none; color: inherit; }

img, svg { display: block; max-width: 100%; }

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--rl-space-5);
}

.section { padding: var(--rl-space-9) 0; }
.section--dark { background-color: var(--rl-refresh-black); color: var(--rl-text-dark); }
.section--gray { background-color: var(--rl-mid); color: var(--rl-text-dark); }
.section--mid { background-color: var(--rl-light-black); color: var(--rl-text-dark); }
.section--light { background-color: var(--rl-white); color: var(--rl-text-light); }

.section-label {
  font-family: var(--rl-font-body);
  font-size: var(--rl-font-size-xs);
  font-weight: var(--rl-font-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rl-royal-aqua);
  margin-bottom: var(--rl-space-3);
}
.section-label--red { color: var(--rl-emerson); }

.section-title {
  font-size: clamp(28px, 4vw, var(--rl-font-size-2xl));
  margin-bottom: var(--rl-space-5);
}

.section-subtitle {
  font-size: var(--rl-font-size-md);
  font-weight: var(--rl-font-weight-light);
  line-height: 1.6;
  max-width: 640px;
}

.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ============================================================
   BUTTONS — the shared CTA system (authoritative site-wide)
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--rl-font-body);
  font-weight: var(--rl-font-weight-semibold);
  font-size: var(--rl-font-size-base);
  padding: var(--rl-space-3) var(--rl-space-7);
  border-radius: var(--rl-radius-md);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--rl-transition-fast), color var(--rl-transition-fast), border-color var(--rl-transition-fast), box-shadow var(--rl-transition-fast);
  white-space: nowrap;
}

/* Primary: solid Emerson red. The nav "Get Started" CTA. */
.btn-primary { background-color: var(--rl-emerson); color: var(--rl-white); border-color: var(--rl-emerson); }
.btn-primary:hover { background-color: #9c332d; border-color: #9c332d; }

/* Outline: transparent with a white hairline border (use on dark sections). */
.btn-outline { background-color: transparent; color: var(--rl-white); border-color: rgba(255,255,255,0.4); }
.btn-outline:hover { border-color: var(--rl-white); background-color: rgba(255,255,255,0.08); }

/* Outline (white): alias of .btn-outline for legacy markup. */
.btn-outline-white { background-color: transparent; color: var(--rl-white); border-color: rgba(255,255,255,0.4); }
.btn-outline-white:hover { border-color: var(--rl-white); background-color: rgba(255,255,255,0.08); }

/* Aqua: Royal Aqua fill for the free / install action. */
.btn-aqua { background-color: var(--rl-royal-aqua); color: var(--rl-refresh-black); border-color: var(--rl-royal-aqua); }
.btn-aqua:hover { background-color: #00a8b8; border-color: #00a8b8; }

/* White: white fill, red text (use on red / dark CTA bands). */
.btn-white { background-color: var(--rl-white); color: var(--rl-emerson); border-color: var(--rl-white); }
.btn-white:hover { background-color: rgba(255,255,255,0.9); }

/* Ghost: faint outline, lighter than .btn-outline. */
.btn-ghost { background-color: transparent; color: var(--rl-white); border-color: rgba(255,255,255,0.4); }
.btn-ghost:hover { border-color: var(--rl-white); background-color: rgba(255,255,255,0.06); color: var(--rl-white); }

/* ============================================================
   BETA BADGE: small pill marking beta-stage products (Launchpad)
   ============================================================ */
.beta-badge {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  font-family: var(--rl-font-body);
  font-size: var(--rl-font-size-xs);
  font-weight: var(--rl-font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--rl-royal-aqua);
  background: rgba(0, 196, 217, 0.12);
  border: 1px solid rgba(0, 196, 217, 0.3);
  padding: 3px 8px;
  border-radius: var(--rl-radius-full);
  margin-left: var(--rl-space-2);
}

/* ============================================================
   LEGAL / DOCUMENT PAGES (privacy-policy, terms)
   Applied via <body class="page--legal">. site.css's base body already
   supplies the light document theme (white bg, --rl-text-light, line-height
   1.6), so this section only carries the document link treatment and the
   legal layout components. Consolidated from the pages' former inline blocks.
   Link styling is scoped to the document body (.legal-body) so it never
   reaches the nav or footer partial links that also sit under page--legal.
   ============================================================ */
.legal-body a { color: var(--rl-dark-sea-blue); text-decoration: underline; }
.legal-body a:hover { color: var(--rl-emerson); }

.legal-hero { background: var(--rl-refresh-black); color: var(--rl-white); padding: 120px 24px 56px; }
.legal-hero-inner { max-width: 760px; margin: 0 auto; }
.legal-hero-label { font-family: var(--rl-font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rl-royal-aqua); margin-bottom: 16px; }
.legal-hero h1 { font-size: clamp(28px, 4vw, 48px); margin-bottom: 12px; }
.legal-hero p { font-size: 14px; color: rgba(255,255,255,0.45); }

.legal-body { padding: 64px 24px 96px; }
.legal-body-inner { max-width: 760px; margin: 0 auto; }

.legal-notice { background: #fef9f0; border-left: 3px solid #f0a500; padding: 16px 20px; border-radius: 4px; margin-bottom: 48px; font-size: 14px; color: #6b5000; }

.legal-section { margin-bottom: 48px; }
.legal-section h2 { font-size: 24px; color: var(--rl-light-black); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid #eee; }
.legal-section h3 { font-family: var(--rl-font-body); font-size: 16px; font-weight: 600; color: var(--rl-light-black); margin: 20px 0 8px; }
.legal-section p { font-size: 15px; color: #444; line-height: 1.75; margin-bottom: 12px; }
.legal-section ul { margin: 8px 0 12px 20px; }
.legal-section ul li { font-size: 15px; color: #444; line-height: 1.75; margin-bottom: 6px; }

/* ============================================================
   ERROR / CENTERED FULL-VIEWPORT PAGES (404)
   Applied via <body class="page--error">. Overrides the base light body
   with the dark, vertically-centered error theme. body.page--error keeps
   specificity above the base `body` element rule for every property.
   The .error-* content components stay inline on 404.html (single-page).
   ============================================================ */
body.page--error {
  background: var(--rl-refresh-black);
  color: var(--rl-white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
}

/* ============================================================
   SHARED MARKETING COMPONENTS (cta, contact form, steps)
   Consolidated verbatim from the marketing pages' inline blocks
   (identical across get-started/training/hardware/platform).
   .step-num stays page-inline: it genuinely differs per page.
   ============================================================ */
    /* STEPS */
    .steps { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 48px; }
    @media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); } }
    .step { padding: 28px 24px; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; background: rgba(255,255,255,0.04); }
    .step h3 { font-family: var(--rl-font-body); font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 8px; }
    .step p { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.6; }

    /* CTA */
    .cta-section { background: var(--rl-emerson); padding: 80px 24px; color: #fff; }
    .cta-inner { display: grid; grid-template-columns: 1fr; gap: 32px; max-width: 680px; margin: 0 auto; text-align: center; }
    .cta-text h2 { font-size: clamp(28px, 4vw, 48px); margin-bottom: 16px; color: #fff; }
    .cta-text p { font-size: 18px; font-weight: 300; color: rgba(255,255,255,0.8); line-height: 1.65; }
    .cta-form-wrap { background: rgba(0,0,0,0.2); border-radius: 12px; padding: 36px; }
    .contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .contact-form .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
    .contact-form label { color: rgba(255,255,255,0.85); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
    .contact-form input, .contact-form select, .contact-form textarea { background: rgba(255,255,255,0.95); border: none; border-radius: 6px; padding: 10px 14px; font-size: 0.95rem; color: #121212; font-family: inherit; width: 100%; box-sizing: border-box; }
    .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: 2px solid var(--rl-royal-aqua); outline-offset: 1px; }
    .contact-form textarea { resize: vertical; min-height: 100px; }
    .contact-form .btn-white { width: 100%; margin-top: 8px; }
    .contact-form .form-group--check { flex-direction: row; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
    .contact-form .form-group--check input[type="checkbox"] { width: 16px; min-width: 16px; height: 16px; margin-top: 2px; accent-color: var(--rl-royal-aqua); cursor: pointer; }
    .contact-form .form-group--check label { text-transform: none; letter-spacing: 0; font-size: 0.8rem; font-weight: 400; color: rgba(255,255,255,0.7); cursor: pointer; line-height: 1.4; }
    .form-status { margin-top: 12px; font-size: 0.875rem; text-align: center; min-height: 1.4em; }
    .form-status--success { color: var(--rl-royal-aqua); }
    .form-status--error { color: rgba(255,255,255,0.7); }
    /* button system -> /css/site.css */
    @media (max-width: 768px) { .cta-inner { grid-template-columns: 1fr; } .contact-form .form-row { grid-template-columns: 1fr; } }
