/** Shopify CDN: Minification failed

Line 93:0 All "@import" rules must come first

**/
/* ==========================================================================
   RIMDOX — Design Tokens & Utility Classes
   Where precision becomes perfection.
   Loaded on every page. All selectors are prefixed .rx- to avoid clashes
   with Horizon's base styles. CSS variables are prefixed --rx-.
   ========================================================================== */

/* -- Token variables ------------------------------------------------------- */
:root {
  /* Signal */
  --rx-orange: #EA5C1C;
  --rx-orange-ink: #C74B14;
  --rx-orange-soft: #FFE4D5;

  /* Process category coding (matches physical packaging) */
  --rx-clean: #3DA941;
  --rx-prime: #A2A0A0;
  --rx-base: #EA5C1C;
  --rx-clear: #F2E815;

  /* Neutrals — strictly monochrome */
  --rx-ink-900: #0A0A0A;
  --rx-ink-800: #1D1D1D;
  --rx-ink-700: #2A2A2A;
  --rx-ink-600: #3A3A3A;
  --rx-ink-500: #6B6B6B;
  --rx-ink-400: #9A9A9A;
  --rx-ink-300: #C8C8C8;
  --rx-ink-200: #E5E5E5;
  --rx-ink-100: #F2F2F2;
  --rx-ink-050: #F7F7F7;
  --rx-white: #FFFFFF;

  /* Warm neutrals for light section backgrounds */
  --rx-warm-200: #E8E6E2;
  --rx-warm-100: #F2F0EC;
  --rx-warm-050: #FAF9F6;

  /* Status */
  --rx-success: #3DA941;
  --rx-warning: #F2E815;
  --rx-danger: #D22B2B;

  /* Type families — Oswald substitutes Conduit ITC, Fjalla One is 2nd display */
  --rx-font-display: "Oswald", "Fjalla One", "Barlow Condensed", "Impact", sans-serif;
  --rx-font-accent: "Fjalla One", "Oswald", "Barlow Condensed", sans-serif;
  --rx-font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rx-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Tracking */
  --rx-tracking-tight: -0.01em;
  --rx-tracking-normal: 0;
  --rx-tracking-wide: 0.04em;
  --rx-tracking-wider: 0.08em;
  --rx-tracking-widest: 0.16em;

  /* Leading */
  --rx-leading-tight: 0.95;
  --rx-leading-snug: 1.05;
  --rx-leading-body: 1.5;

  /* Page-Shell — Shop-Breite identisch zur Hero-Section (1600 px max, 40 px Gutter) */
  --rx-shell-max: 1600px;
  --rx-shell-pad: max(40px, calc((100vw - var(--rx-shell-max)) / 2));

  /* Radii — sharp edges */
  --rx-radius-0: 0;
  --rx-radius-1: 2px;
  --rx-radius-2: 4px;
  --rx-radius-pill: 999px;

  /* Transitions */
  --rx-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --rx-dur-fast: 120ms;
  --rx-dur-base: 200ms;
  --rx-dur-slow: 360ms;

  /* Focus */
  --rx-focus-ring: 0 0 0 3px rgba(234, 92, 28, 0.35);

  /* Shadows */
  --rx-shadow-1: 0 1px 0 rgba(0, 0, 0, 0.06);
  --rx-shadow-2: 0 2px 0 rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
  --rx-shadow-studio: 0 40px 80px -20px rgba(0, 0, 0, 0.8);
}

/* -- Font loading (fallback if Shopify font picker doesn't cover mono) ----- */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap");

/* -- Base type primitives -------------------------------------------------- */
.rx-display {
  font-family: var(--rx-font-display);
  font-weight: 700;
  line-height: var(--rx-leading-tight);
  letter-spacing: var(--rx-tracking-tight);
  text-transform: uppercase;
  color: var(--rx-ink-800);
  margin: 0;
}

.rx-display--xxl { font-size: clamp(48px, 6vw, 120px); }
.rx-display--xl  { font-size: clamp(40px, 5vw, 88px); }
.rx-display--lg  { font-size: clamp(32px, 4vw, 64px); }
.rx-display--md  { font-size: clamp(28px, 3vw, 48px); }
.rx-display--sm  { font-size: clamp(24px, 2.5vw, 36px); }

/* -- Headline tokens (Card-Titel, Sub-Stages) ------------------------------ */
.rx-headline {
  font-family: var(--rx-font-display);
  font-weight: 700;
  line-height: var(--rx-leading-tight);
  letter-spacing: -0.005em;
  color: var(--rx-ink-800);
  margin: 0;
  text-transform: none;
}
.rx-headline--l { font-size: 24px; }
.rx-headline--m { font-size: 18px; }
.rx-headline--s { font-size: 16px; font-weight: 600; }

.rx-eyebrow {
  font-family: var(--rx-font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: var(--rx-tracking-widest);
  text-transform: uppercase;
  color: var(--rx-orange);
  display: inline-block;
  line-height: 1;
}
.rx-eyebrow--ink { color: var(--rx-ink-500); }
.rx-eyebrow--white { color: rgba(255, 255, 255, 0.85); }

.rx-label {
  font-family: var(--rx-font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: var(--rx-tracking-widest);
  text-transform: uppercase;
  color: var(--rx-ink-800);
}

.rx-spec {
  font-family: var(--rx-font-mono);
  font-size: 13px;
  letter-spacing: 0;
  color: var(--rx-ink-800);
}
.rx-spec--sm { font-size: 11px; letter-spacing: 0.06em; }
.rx-spec--muted { color: var(--rx-ink-500); }

.rx-body {
  font-family: var(--rx-font-ui);
  font-size: 16px;
  line-height: var(--rx-leading-body);
  color: var(--rx-ink-800);
}
.rx-body--sm { font-size: 14px; }
.rx-body--lg { font-size: 18px; }

/* -- Button primitives ----------------------------------------------------- */
.rx-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--rx-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--rx-tracking-widest);
  font-size: 13px;
  padding: 14px 22px;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: background var(--rx-dur-fast) var(--rx-ease-out), transform var(--rx-dur-fast) var(--rx-ease-out);
  background: var(--rx-orange);
  color: #fff;
}
.rx-btn:hover { background: var(--rx-orange-ink); }
.rx-btn:active { transform: scale(0.98); }
.rx-btn:focus-visible { outline: 0; box-shadow: var(--rx-focus-ring); }

.rx-btn--secondary { background: var(--rx-ink-800); color: #fff; }
.rx-btn--secondary:hover { background: var(--rx-ink-700); }

.rx-btn--ghost {
  background: transparent;
  color: var(--rx-ink-800);
  border: 2px solid var(--rx-ink-800);
  padding: 12px 20px;
}
.rx-btn--ghost:hover { background: var(--rx-ink-800); color: #fff; }

.rx-btn--ghost-light {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  padding: 12px 20px;
}
.rx-btn--ghost-light:hover { background: #fff; color: var(--rx-ink-800); }

.rx-btn--sm { font-size: 11px; padding: 10px 14px; letter-spacing: 0.14em; }
.rx-btn--block { width: 100%; justify-content: center; }

/* -- Chip / SpecTag -------------------------------------------------------- */
.rx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--rx-font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: var(--rx-tracking-widest);
  text-transform: uppercase;
  background: var(--rx-ink-800);
  color: #fff;
  padding: 5px 10px;
  border-radius: var(--rx-radius-pill);
  line-height: 1;
}
.rx-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.rx-spec-tag {
  display: inline-block;
  font-family: var(--rx-font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: var(--rx-tracking-widest);
  text-transform: uppercase;
  border: 1px solid var(--rx-ink-800);
  padding: 6px 10px;
  line-height: 1;
  color: var(--rx-ink-800);
  background: transparent;
}
.rx-spec-tag--dark { background: var(--rx-ink-800); color: #fff; }
.rx-spec-tag--muted { border-color: var(--rx-ink-200); color: var(--rx-ink-800); background: #fff; }

/* -- Process step chip (with colored dot) ---------------------------------- */
.rx-step-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--rx-font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rx-ink-800);
  line-height: 1;
}
.rx-step-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rx-step-chip--clean .rx-step-chip__dot { background: var(--rx-clean); }
.rx-step-chip--prime .rx-step-chip__dot { background: var(--rx-prime); }
.rx-step-chip--base  .rx-step-chip__dot { background: var(--rx-base); }
.rx-step-chip--clear .rx-step-chip__dot { background: var(--rx-clear); }

/* -- Step badge (solid background) ----------------------------------------- */
.rx-step-badge {
  display: inline-block;
  font-family: var(--rx-font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 10px;
  line-height: 1;
  color: #fff;
}
.rx-step-badge--clean { background: var(--rx-clean); }
.rx-step-badge--prime { background: var(--rx-prime); }
.rx-step-badge--base  { background: var(--rx-base); }
.rx-step-badge--clear { background: var(--rx-clear); color: var(--rx-ink-900); }

/* -- Utility surfaces ------------------------------------------------------ */
.rx-surface-dark {
  background: var(--rx-ink-800);
  color: #fff;
}
.rx-surface-light {
  background: #fff;
  color: var(--rx-ink-800);
}
.rx-surface-warm {
  background: var(--rx-warm-100);
  color: var(--rx-ink-800);
}
.rx-surface-warm-soft {
  background: var(--rx-warm-050);
  color: var(--rx-ink-800);
}

/* -- Layout helpers -------------------------------------------------------- */
.rx-container {
  max-width: 1600px;
  margin: 0 auto;
  padding-inline: 40px;
}
:root { --rx-max-width: 1600px; }
@media (max-width: 768px) {
  .rx-container { padding-inline: 16px; }
}

.rx-hairline { border-top: 1px solid var(--rx-ink-200); }
.rx-hairline-y { border-top: 1px solid var(--rx-ink-200); border-bottom: 1px solid var(--rx-ink-200); }
.rx-rule { border-top: 2px solid var(--rx-ink-800); }

/* -- Focus-visible across inputs ------------------------------------------ */
.rx-input {
  font-family: var(--rx-font-ui);
  font-size: 14px;
  padding: 0 12px;
  border: 1px solid var(--rx-ink-300);
  background: #fff;
  color: var(--rx-ink-800);
  border-radius: 0;
  height: 44px;
  outline: 0;
  transition: border-color var(--rx-dur-fast) var(--rx-ease-out), box-shadow var(--rx-dur-fast) var(--rx-ease-out);
}
.rx-input:focus { border-color: var(--rx-ink-800); box-shadow: var(--rx-focus-ring); }

/* -- Link underline from orange bar ---------------------------------------- */
.rx-link {
  color: var(--rx-ink-800);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--rx-dur-fast) var(--rx-ease-out);
  font-family: var(--rx-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
}
.rx-link--orange { color: var(--rx-orange); border-bottom-color: var(--rx-orange); padding-bottom: 3px; }
.rx-link:hover { border-bottom-color: currentColor; }

/* -- Reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rx-btn, .rx-input, .rx-link {
    transition: none !important;
  }
}