/*
Theme Name: ROZOR
Theme URI: https://rozor.ai/
Author: ROZOR
Author URI: https://rozor.ai/
Description: Custom ROZOR brand theme — AI-powered robotics for healthcare and public environments, engineered to Canadian safety, privacy, and quality standards.
Version: 1.0.0
Text Domain: rozor
*/

:root {
  /* Brand primary */
  --brand-lime: #b8da00;
  --brand-ink: #1c1e10;
  --brand-ink-soft: #27291c;

  /* Secondary */
  --brand-muted-lime: #94a43a;

  /* Surfaces */
  --surface-base: #f8fae9;
  --surface-elevated: #ffffff;
  --surface-cream: #f0f5ca;
  --surface-dark: #1c1e10;
  --surface-dark-soft: #27291c;

  /* Neutrals */
  --ink-900: #1c1e10;
  --ink-500: #67686a;
  --ink-300: #d8d8d5;
  --ink-200: #e6e5e2;

  /* Accents */
  --accent-red: #db4127;
  --accent-blue: #2c70b7;

  /* Type scale — Nunito Sans is the sole approved typeface (BRAND_GUIDELINES.md §4) */
  --font-display: "Nunito Sans", system-ui, -apple-system, sans-serif;
  --font-body: "Nunito Sans", system-ui, -apple-system, sans-serif;

  /* Elevation */
  --shadow-card: 0 1px 2px rgba(28, 30, 16, 0.04), 0 8px 24px -8px rgba(28, 30, 16, 0.08);
  --shadow-elevated: 0 2px 4px rgba(28, 30, 16, 0.05), 0 24px 48px -16px rgba(28, 30, 16, 0.18);
  --shadow-floating: 0 4px 8px rgba(28, 30, 16, 0.06), 0 32px 64px -20px rgba(28, 30, 16, 0.28);
  --shadow-lime: 0 16px 40px -12px rgba(184, 218, 0, 0.55);

  /* Motion */
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);

  /* Rhythm */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  /* Enables transitions between auto/0 sizes (used by FAQ accordion) */
  interpolate-size: allow-keywords;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.3; /* Brand: body 130% */
  letter-spacing: -0.01em; /* Brand: body -10 */
  color: var(--ink-900);
  background: var(--surface-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--brand-ink);
  font-weight: 600;
}

h1, h2 {
  letter-spacing: -0.03em; /* Brand: heading -30 */
  line-height: 0.9; /* Brand: heading 90% */
}

h3, h4, h5, h6 {
  letter-spacing: -0.02em; /* Brand: subheading -20 */
  line-height: 1.0; /* Brand: subheading 100% */
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 220ms var(--ease-spring);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Focus ring for accessibility */
:focus-visible {
  outline: 2px solid var(--brand-lime);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Reusable components */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 220ms var(--ease-spring),
              box-shadow 220ms var(--ease-spring),
              background-color 220ms var(--ease-spring),
              color 220ms var(--ease-spring);
  will-change: transform;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--brand-lime);
  color: var(--brand-ink);
  box-shadow: var(--shadow-lime);
}
.btn-primary:hover {
  background: #c6e614;
  transform: translateY(-1px);
  box-shadow: 0 20px 48px -12px rgba(184, 218, 0, 0.7);
}

.btn-ghost-dark {
  background: transparent;
  color: var(--surface-base);
  border-color: rgba(248, 250, 233, 0.28);
}
.btn-ghost-dark:hover {
  background: rgba(248, 250, 233, 0.08);
  border-color: rgba(248, 250, 233, 0.55);
}

.btn-ghost-light {
  background: transparent;
  color: var(--brand-ink);
  border-color: rgba(28, 30, 16, 0.22);
}
.btn-ghost-light:hover {
  border-color: var(--brand-ink);
  background: rgba(28, 30, 16, 0.04);
}

/* Grain overlay utility */
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.11 0 0 0 0 0.12 0 0 0 0 0.06 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.18;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: clamp(1rem, 3vw, 2rem);
  padding-right: clamp(1rem, 3vw, 2rem);
}

/* Eyebrow / label — sentence case per BRAND_GUIDELINES.md §5 */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--brand-ink);
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  background: var(--brand-lime);
}

.eyebrow-ghost {
  background: transparent;
  color: var(--brand-lime);
  border: 1px solid rgba(184, 218, 0, 0.5);
}

.eyebrow-lg {
  font-size: 0.95rem;
  padding: 0.6rem 1.25rem;
  letter-spacing: -0.015em;
}

@keyframes eyebrow-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(184, 218, 0, 0.0), 0 0 0 0 rgba(184, 218, 0, 0.0);
    border-color: rgba(184, 218, 0, 0.35);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(184, 218, 0, 0.10), 0 0 28px 6px rgba(184, 218, 0, 0.45);
    border-color: rgba(184, 218, 0, 0.85);
  }
}
.eyebrow-glow { animation: eyebrow-glow 2.6s ease-in-out infinite; }

/* Glowing lime button — additive halo for high-intent CTAs on dark surfaces.
   Pairs with .btn-primary. Global reduced-motion block below freezes the breathe. */
@keyframes rozor-btn-glow {
  0%, 100% {
    box-shadow:
      0 16px 40px -12px rgba(184, 218, 0, 0.45),
      0 0 0 0 rgba(184, 218, 0, 0.00);
  }
  50% {
    box-shadow:
      0 20px 52px -10px rgba(184, 218, 0, 0.75),
      0 0 0 6px rgba(184, 218, 0, 0.14);
  }
}
.btn-glow {
  animation: rozor-btn-glow 2.4s ease-in-out infinite;
}
.btn-glow:hover {
  animation-play-state: paused;
  box-shadow: 0 24px 60px -12px rgba(184, 218, 0, 0.85),
              0 0 0 6px rgba(184, 218, 0, 0.18);
}

/* Glowing lime dot — for brand accent pips on dark photos/panels. */
@keyframes rozor-dot-glow {
  0%, 100% { box-shadow: 0 0 6px 0 rgba(184, 218, 0, 0.55); }
  50%      { box-shadow: 0 0 12px 2px rgba(184, 218, 0, 0.95); }
}
.dot-glow {
  animation: rozor-dot-glow 2.2s ease-in-out infinite;
}

/*
 * Legal-page utilities — shared by /terms/, /privacy/, /dpa/.
 * Long-form reading: generous leading, comfortable measure, lime markers
 * on lists, hairline section dividers via border. Single ink colour family
 * per BRAND_GUIDELINES §3 (no multiple text colours within a block).
 */
.rozor-legal-section {
  padding-block: 1.75rem;
  border-bottom: 1px solid rgba(28, 30, 16, 0.08);
  scroll-margin-top: 6rem;
}
.rozor-legal-section:first-of-type { padding-top: 0; }
.rozor-legal-section:last-of-type  { border-bottom: 0; padding-bottom: 0; }

.rozor-legal-h2 {
  font-family: var(--font-display, "Nunito Sans", system-ui, sans-serif);
  font-size: clamp(1.35rem, 2.3vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -0.03em; /* Brand: heading -30 */
  line-height: 0.9; /* Brand: heading 90% */
  color: var(--brand-ink, #1c1e10);
  margin-bottom: 1rem;
}
.rozor-legal-h3 {
  font-family: var(--font-display, "Nunito Sans", system-ui, sans-serif);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.02em; /* Brand: subheading -20 */
  line-height: 1.0; /* Brand: subheading 100% */
  color: var(--brand-ink, #1c1e10);
  margin-top: 1.4rem;
  margin-bottom: 0.55rem;
}
.rozor-legal-h3:first-child { margin-top: 0; }

.rozor-legal-body-text {
  font-size: 0.98rem;
  line-height: 1.3; /* Brand: body 130% */
  letter-spacing: -0.01em; /* Brand: body -10 */
  color: rgba(28, 30, 16, 0.78);
}
.rozor-legal-body-text > * + * { margin-top: 0.85rem; }
.rozor-legal-body-text strong { color: rgba(28, 30, 16, 0.95); font-weight: 600; }

.rozor-legal-list-bul,
.rozor-legal-list-num {
  padding-left: 1.4rem;
  margin-top: 0.6rem;
}
.rozor-legal-list-bul { list-style: disc; }
.rozor-legal-list-num { list-style: decimal; }
.rozor-legal-list-bul > li,
.rozor-legal-list-num > li {
  padding-left: 0.35rem;
  margin-bottom: 0.55rem;
}
.rozor-legal-list-bul > li::marker,
.rozor-legal-list-num > li::marker {
  color: var(--brand-primary, #b8da00);
  font-weight: 600;
}

.rozor-legal-link {
  color: rgba(28, 30, 16, 0.95);
  text-decoration: underline;
  text-decoration-color: rgba(184, 218, 0, 0.45);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}
.rozor-legal-link:hover,
.rozor-legal-link:focus-visible {
  text-decoration-color: rgba(184, 218, 0, 1);
}

.rozor-legal-imprint {
  padding: 1.1rem 1.25rem;
  border-left: 3px solid var(--brand-primary, #b8da00);
  background: rgba(248, 250, 233, 0.7);
  border-radius: 0 12px 12px 0;
  font-size: 0.96rem;
  line-height: 1.3; /* Brand: body 130% */
  letter-spacing: -0.01em; /* Brand: body -10 */
}

/* TOC list — sidebar (lg+ sticky) and mobile <details> share styles. */
.rozor-legal-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
}
.rozor-legal-toc-list > li + li { margin-top: 0.1rem; }
.rozor-legal-toc-list a {
  display: block;
  padding: 0.45rem 0;
  padding-left: 0.85rem;
  border-left: 2px solid rgba(28, 30, 16, 0.08);
  color: rgba(28, 30, 16, 0.62);
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: color 0.2s ease, border-color 0.2s ease, padding-left 0.2s ease;
}
.rozor-legal-toc-list a:hover,
.rozor-legal-toc-list a:focus-visible {
  color: var(--brand-ink, #1c1e10);
  border-left-color: var(--brand-primary, #b8da00);
  padding-left: 1rem;
  outline: none;
}

/* ============================================================================
 * Social platform brand-color hover states
 *
 * Each icon takes its platform's signature colour on hover — Facebook blue,
 * YouTube red, etc. These hex values are EXTERNAL platform brand colours
 * (not in BRAND_GUIDELINES.md §3) and intentionally bypass our palette
 * because they identify the platform, not our brand — same rationale as
 * displaying partner logos in their original colours. SVG icons use
 * `currentColor` for fill, so setting `color` on the anchor cascades
 * through. All values pass WCAG 3:1 non-text contrast against the white
 * tile background. Reusable on any future social row.
 *
 * Add `!important` because Tailwind's Play CDN injects its hover rules
 * (e.g. hover:text-brand-ink) AFTER style.css, so equal-specificity
 * unweighted selectors lose without it.
 * ========================================================================== */
.rozor-social-fb:hover { color: #1877F2 !important; } /* Facebook blue */
.rozor-social-x:hover  { color: #0F1419 !important; } /* X near-black */
.rozor-social-li:hover { color: #0A66C2 !important; } /* LinkedIn blue */
.rozor-social-yt:hover { color: #FF0000 !important; } /* YouTube red */
.rozor-social-ig:hover { color: #E4405F !important; } /* Instagram magenta */
.rozor-social-tt:hover { color: #FE2C55 !important; } /* TikTok red-pink */

/* ============================================================================
 * Newsroom article — prose typography
 *
 * Editorial reading rhythm for press articles served via the newsroom
 * router (template-parts/newsroom-article.php). Body HTML in
 * inc/newsroom-data.php is rendered inside a .rozor-newsroom-prose
 * container; these tokens own all the typography (p, blockquote, lede,
 * h2, h3, ul, ol, a, strong) so every article inherits the same rhythm
 * without per-article style. Pattern mirrors the .rozor-legal-body-text
 * vocabulary at slightly larger scale (article body reads bigger than
 * a legal page).
 * ========================================================================== */
.rozor-newsroom-prose {
  font-family: var(--font-body, "Nunito Sans", system-ui, sans-serif);
  font-size: 1.06rem;
  line-height: 1.72;
  color: rgba(28, 30, 16, 0.82);
  letter-spacing: -0.005em;
}
.rozor-newsroom-prose > * + * { margin-top: 1.4rem; }
.rozor-newsroom-prose strong { color: rgba(28, 30, 16, 0.96); font-weight: 600; }
.rozor-newsroom-prose a {
  color: rgba(28, 30, 16, 0.96);
  text-decoration: underline;
  text-decoration-color: rgba(184, 218, 0, 0.5);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}
.rozor-newsroom-prose a:hover,
.rozor-newsroom-prose a:focus-visible {
  text-decoration-color: rgba(184, 218, 0, 1);
}

/* Lede paragraph — opens the article with slightly larger, slightly looser
   type. Marks the dateline + first sentence as a journalistic lede block. */
.rozor-newsroom-prose .rozor-newsroom-lede {
  font-size: 1.18rem;
  line-height: 1.62;
  color: rgba(28, 30, 16, 0.92);
  letter-spacing: -0.01em;
}

/* Article quote block — pull-quote with lime left rail + ink type. Sits
   on warm-sand wash so it stands clear of the body without being a brand
   gradient. */
.rozor-newsroom-prose .rozor-newsroom-quote {
  margin: 2rem 0;
  padding: 1.4rem 1.6rem 1.4rem 1.7rem;
  background: rgba(248, 250, 233, 0.85);
  border-left: 3px solid var(--brand-primary, #b8da00);
  border-radius: 0 16px 16px 0;
}
.rozor-newsroom-prose .rozor-newsroom-quote blockquote {
  margin: 0;
}
.rozor-newsroom-prose .rozor-newsroom-quote blockquote p {
  font-size: 1.12rem;
  line-height: 1.6;
  color: rgba(28, 30, 16, 0.92);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}
.rozor-newsroom-prose .rozor-newsroom-quote figcaption {
  margin-top: 0.85rem;
  font-size: 0.9rem;
  color: rgba(28, 30, 16, 0.72);
  letter-spacing: -0.005em;
}
.rozor-newsroom-prose .rozor-newsroom-quote figcaption strong {
  color: rgba(28, 30, 16, 0.85);
}

/* Headings inside article body (when an article uses h2/h3 for sub-sections). */
.rozor-newsroom-prose h2 {
  font-family: var(--font-display, "Nunito Sans", system-ui, sans-serif);
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.03em; /* Brand: heading -30 */
  line-height: 0.9; /* Brand: heading 90% */
  color: var(--brand-ink, #1c1e10);
  margin-top: 2.4rem;
  margin-bottom: 0.65rem;
}
.rozor-newsroom-prose h3 {
  font-family: var(--font-display, "Nunito Sans", system-ui, sans-serif);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.02em; /* Brand: subheading -20 */
  line-height: 1.0; /* Brand: subheading 100% */
  color: var(--brand-ink, #1c1e10);
  margin-top: 1.8rem;
  margin-bottom: 0.45rem;
}

/* Lists in article body — lime markers like other prose blocks. */
.rozor-newsroom-prose ul,
.rozor-newsroom-prose ol {
  padding-left: 1.4rem;
  margin-top: 0.6rem;
}
.rozor-newsroom-prose ul { list-style: disc; }
.rozor-newsroom-prose ol { list-style: decimal; }
.rozor-newsroom-prose ul > li,
.rozor-newsroom-prose ol > li {
  padding-left: 0.35rem;
  margin-bottom: 0.5rem;
}
.rozor-newsroom-prose ul > li::marker,
.rozor-newsroom-prose ol > li::marker {
  color: var(--brand-primary, #b8da00);
  font-weight: 600;
}

/* Comparison-row tables — used by case-studies prose. Wrap the <table> in
   .rozor-prose-table-wrap so it scrolls horizontally on narrow viewports
   without crushing the prose container. Editorial styling, not a data
   grid: zebra-free, lime accent on the header row, generous row padding. */
.rozor-newsroom-prose .rozor-prose-table-wrap {
  margin: 1.6rem -0.5rem;
  padding: 0 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.rozor-newsroom-prose .rozor-prose-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.96rem;
  line-height: 1.55;
  text-align: left;
  background: #fff;
  border: 1px solid rgba(28, 30, 16, 0.08);
  border-radius: 14px;
  overflow: hidden;
}
.rozor-newsroom-prose .rozor-prose-table thead {
  background: rgba(248, 250, 233, 0.85);
}
.rozor-newsroom-prose .rozor-prose-table th,
.rozor-newsroom-prose .rozor-prose-table td {
  padding: 0.85rem 1rem;
  vertical-align: top;
  border-bottom: 1px solid rgba(28, 30, 16, 0.06);
}
.rozor-newsroom-prose .rozor-prose-table thead th {
  font-family: var(--font-display, "Nunito Sans", system-ui, sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-transform: none;
  color: rgba(28, 30, 16, 0.92);
  border-bottom: 2px solid rgba(184, 218, 0, 0.55);
}
.rozor-newsroom-prose .rozor-prose-table tbody th[scope="row"] {
  font-weight: 600;
  color: rgba(28, 30, 16, 0.96);
  background: rgba(28, 30, 16, 0.025);
  width: clamp(8rem, 22%, 12rem);
}
.rozor-newsroom-prose .rozor-prose-table tbody td {
  color: rgba(28, 30, 16, 0.78);
}
.rozor-newsroom-prose .rozor-prose-table tbody tr:last-child th,
.rozor-newsroom-prose .rozor-prose-table tbody tr:last-child td {
  border-bottom: 0;
}

/* ============================================================================
 * WPForms — brand overrides
 *
 * Targets the form classes that WPForms emits via [wpforms id="X"] shortcode
 * and re-skins them in the ROZOR token vocabulary (Nunito Sans, brand-ink
 * text, lime focus rings, .btn-primary submit). Top-stacked labels per
 * forms_workflow.txt §14 Q7. Errors in alert red, success in ink.
 * ========================================================================== */

.wpforms-container,
.wpforms-container * {
  font-family: var(--font-display, "Nunito Sans", system-ui, sans-serif) !important;
}

.wpforms-container {
  max-width: 100%;
  margin: 0;
}

.wpforms-form .wpforms-field {
  padding: 0 0 1.1rem 0;
  margin: 0;
}

/* Top-stacked labels — never floating */
.wpforms-form .wpforms-field-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(28, 30, 16, 0.78);
  margin-bottom: 0.5rem;
}
.wpforms-form .wpforms-field-required-color,
.wpforms-form .wpforms-field-label .wpforms-required {
  color: var(--brand-primary, #b8da00) !important;
}

/* Inputs — inputs, textareas, selects share one calm baseline */
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form input[type="url"],
.wpforms-form input[type="number"],
.wpforms-form textarea,
.wpforms-form select {
  width: 100%;
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--brand-ink, #1c1e10);
  background: #ffffff;
  border: 1px solid rgba(28, 30, 16, 0.12);
  border-radius: 12px;
  padding: 0.75rem 0.95rem;
  line-height: 1.4;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.wpforms-form input::placeholder,
.wpforms-form textarea::placeholder {
  color: rgba(28, 30, 16, 0.38);
  font-weight: 400;
}
.wpforms-form input:hover,
.wpforms-form textarea:hover,
.wpforms-form select:hover {
  border-color: rgba(28, 30, 16, 0.22);
}
.wpforms-form input:focus,
.wpforms-form textarea:focus,
.wpforms-form select:focus {
  border-color: var(--brand-primary, #b8da00);
  box-shadow: 0 0 0 3px rgba(184, 218, 0, 0.25);
  background: #ffffff;
}

.wpforms-form textarea {
  min-height: 130px;
  resize: vertical;
}

/* Select — custom chevron on the right */
.wpforms-form select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'><path d='M5 8l5 5 5-5' stroke='%231c1e10' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
  cursor: pointer;
}

/* Sublabels (e.g. for name field) — small ghost text below input */
.wpforms-form .wpforms-field-sublabel {
  font-size: 0.74rem;
  font-weight: 500;
  color: rgba(28, 30, 16, 0.5);
  margin-top: 0.35rem;
  letter-spacing: -0.005em;
}

/* Submit button — match .btn-primary vocabulary. !important on the visual
 * tokens because WPForms's own stylesheet ships a hard-coded blue baseline
 * that loads after style.css and beats unweighted selectors. */
.wpforms-form .wpforms-submit-container {
  padding-top: 0.4rem;
  margin: 0;
}
.wpforms-container button[type="submit"].wpforms-submit,
.wpforms-form button[type="submit"].wpforms-submit,
.wpforms-form .wpforms-submit-container .wpforms-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem !important;
  font-family: var(--font-display, "Nunito Sans", system-ui, sans-serif) !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  color: var(--brand-ink, #1c1e10) !important;
  background: var(--brand-primary, #b8da00) !important;
  background-color: var(--brand-primary, #b8da00) !important;
  background-image: none !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 0.85rem 1.7rem !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
  box-shadow: 0 1px 2px rgba(28,30,16,0.05), 0 8px 20px -8px rgba(184,218,0,0.45) !important;
  text-shadow: none !important;
  text-transform: none !important;
}
.wpforms-container button[type="submit"].wpforms-submit:hover,
.wpforms-form button[type="submit"].wpforms-submit:hover,
.wpforms-container button[type="submit"].wpforms-submit:focus-visible,
.wpforms-form button[type="submit"].wpforms-submit:focus-visible {
  background: #a3c400 !important;
  background-color: #a3c400 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(28,30,16,0.08), 0 16px 32px -10px rgba(184,218,0,0.6) !important;
  outline: none !important;
}
.wpforms-form button[type="submit"].wpforms-submit:active {
  transform: translateY(0) !important;
}
.wpforms-form button[type="submit"].wpforms-submit[disabled] {
  opacity: 0.6 !important;
  cursor: progress !important;
}

/* ---------------------------------------------------------------------------
   Footer subscribe card — compact horizontal form (footer.php only).
   Scoped overrides that flatten the default WPForms vertical layout into
   one row [input | submit], hide the redundant Email label (the eyebrow
   pill + headline already orient the user), and tighten paddings/font
   sizes to match the design preview. The on-page subscribe sections
   keep the standard vertical render — these overrides only fire when
   the form is rendered inside `.rozor-footer-subscribe-card`.
--------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   :target rule for the footer subscribe card.
   When arrived at via the #rozor-subscribe anchor (from "Join Newsletter"
   CTAs in the email signature footer, or any future on-site CTA), give the
   card a brief lime focus-ring + scale pulse so the user knows they landed
   on the right thing. `scroll-margin-top` offsets the sticky header so the
   card isn't half-hidden behind it on arrival.
--------------------------------------------------------------------------- */
#rozor-subscribe {
  scroll-margin-top: 120px;
}
#rozor-subscribe:target .rozor-footer-subscribe-card {
  animation: rozor-subscribe-arrival 1.6s ease-out both;
  outline: 2px solid rgba(184, 218, 0, 0.65);
  outline-offset: 4px;
  border-radius: 1rem;
}
@keyframes rozor-subscribe-arrival {
  0%   { transform: scale(1);      box-shadow: 0 0 0 0 rgba(184, 218, 0, 0); }
  20%  { transform: scale(1.025);  box-shadow: 0 0 0 8px rgba(184, 218, 0, 0.35); }
  100% { transform: scale(1);      box-shadow: 0 0 0 0 rgba(184, 218, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  #rozor-subscribe:target .rozor-footer-subscribe-card {
    animation: none;
  }
}

.rozor-footer-subscribe-card .wpforms-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (min-width: 480px) {
  .rozor-footer-subscribe-card .wpforms-form {
    flex-direction: row;
    align-items: stretch;
  }
}
.rozor-footer-subscribe-card .wpforms-field-container {
  flex: 1;
  margin: 0 !important;
  padding: 0 !important;
}
.rozor-footer-subscribe-card .wpforms-field {
  padding: 0 !important;
  margin: 0 !important;
}
.rozor-footer-subscribe-card .wpforms-field-label {
  display: none !important;
}
.rozor-footer-subscribe-card .wpforms-form input[type="email"] {
  padding: 0.7rem 0.9rem !important;
  font-size: 0.93rem !important;
  height: auto !important;
}
.rozor-footer-subscribe-card .wpforms-submit-container {
  padding-top: 0 !important;
  margin: 0 !important;
  flex-shrink: 0;
}
.rozor-footer-subscribe-card .wpforms-container button[type="submit"].wpforms-submit,
.rozor-footer-subscribe-card .wpforms-form button[type="submit"].wpforms-submit {
  padding: 0.7rem 1.3rem !important;
  font-size: 0.92rem !important;
  white-space: nowrap;
  width: auto !important;
}
/* Arrow glyph on the Subscribe button — purely decorative, matches the
   mock-up's "Subscribe →" treatment via CSS so we don't have to alter
   the WPForms spec. */
.rozor-footer-subscribe-card .wpforms-container button[type="submit"].wpforms-submit::after,
.rozor-footer-subscribe-card .wpforms-form button[type="submit"].wpforms-submit::after {
  content: '→';
  display: inline-block;
  margin-left: 0.35rem;
  font-weight: 800;
  transition: transform 0.15s ease;
}
.rozor-footer-subscribe-card .wpforms-container button[type="submit"].wpforms-submit:hover::after,
.rozor-footer-subscribe-card .wpforms-form button[type="submit"].wpforms-submit:hover::after {
  transform: translateX(2px);
}

/* Error state — alert red, never just colour-coded (icon optional) */
.wpforms-form .wpforms-error {
  color: var(--accent-alert, #db4127);
  font-size: 0.82rem;
  font-weight: 600;
  margin-top: 0.4rem;
  letter-spacing: -0.005em;
}
.wpforms-form input.wpforms-error,
.wpforms-form textarea.wpforms-error,
.wpforms-form select.wpforms-error {
  border-color: var(--accent-alert, #db4127);
  box-shadow: 0 0 0 3px rgba(219, 65, 39, 0.18);
}

/* Inline confirmation (after successful submit) */
.wpforms-confirmation-container,
.wpforms-confirmation-container-full {
  background: rgba(184, 218, 0, 0.12);
  border: 1px solid rgba(184, 218, 0, 0.5);
  border-left: 3px solid var(--brand-primary, #b8da00);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  color: var(--brand-ink, #1c1e10);
  font-weight: 500;
  margin: 0;
}
.wpforms-confirmation-container p,
.wpforms-confirmation-container-full p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.5;
  color: rgba(28, 30, 16, 0.85);
}

/* Dark-strip variant — subscribe form on bg-brand-ink */
.rozor-form-on-dark .wpforms-form .wpforms-field-label {
  color: rgba(248, 250, 233, 0.78);
}
.rozor-form-on-dark .wpforms-form input,
.rozor-form-on-dark .wpforms-form textarea,
.rozor-form-on-dark .wpforms-form select {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(248, 250, 233, 0.18);
  color: var(--brand-milk, #f8fae9);
}
.rozor-form-on-dark .wpforms-form input::placeholder,
.rozor-form-on-dark .wpforms-form textarea::placeholder {
  color: rgba(248, 250, 233, 0.35);
}
.rozor-form-on-dark .wpforms-form input:focus,
.rozor-form-on-dark .wpforms-form textarea:focus,
.rozor-form-on-dark .wpforms-form select:focus {
  border-color: var(--brand-primary, #b8da00);
  box-shadow: 0 0 0 3px rgba(184, 218, 0, 0.3);
  background: rgba(255, 255, 255, 0.1);
}
.rozor-form-on-dark .wpforms-confirmation-container {
  background: rgba(184, 218, 0, 0.15);
  color: var(--brand-milk, #f8fae9);
}

/* Annex / definition blocks (DPA) — calm grouping with lime accent */
.rozor-legal-annex {
  background: #ffffff;
  border: 1px solid rgba(28, 30, 16, 0.08);
  border-radius: 16px;
  padding: 1.25rem 1.4rem;
  margin-top: 0.9rem;
  box-shadow: 0 1px 2px rgba(28, 30, 16, 0.04);
}
.rozor-legal-annex dt {
  font-weight: 600;
  color: var(--brand-ink, #1c1e10);
  margin-top: 0.7rem;
}
.rozor-legal-annex dt:first-child { margin-top: 0; }
.rozor-legal-annex dd {
  margin-left: 0;
  color: rgba(28, 30, 16, 0.78);
  margin-bottom: 0.45rem;
}

/* Responsive video / iframe friendly */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/*
 * Motion pre-hide: until motion.js runs, hide elements that GSAP will animate
 * from an invisible state. Prevents flash of unanimated content (FOUC) between
 * first paint and footer-script execution. Removed once motion.js boots.
 * If JS is disabled, the <html> class is never added, so content stays visible.
 */
.rozor-motion-pending .rozor-nav-chrome,
.rozor-motion-pending .rozor-hero-eyebrow,
.rozor-motion-pending .rozor-hero-h1,
.rozor-motion-pending .rozor-hero-accent,
.rozor-motion-pending .rozor-hero-sub,
.rozor-motion-pending .rozor-hero-ctas > *,
.rozor-motion-pending .rozor-hero-image,
.rozor-motion-pending .rozor-hero-metrics > *,
.rozor-motion-pending .rozor-section-header .eyebrow,
.rozor-motion-pending .rozor-section-header h2,
.rozor-motion-pending .rozor-section-header p,
.rozor-motion-pending .rozor-pillar-card,
.rozor-motion-pending .rozor-product-card,
.rozor-motion-pending .rozor-doutcomes-card,
.rozor-motion-pending .rozor-dsupport-card,
.rozor-motion-pending .rozor-dclinical-card,
.rozor-motion-pending .rozor-dtech-card,
.rozor-motion-pending .rozor-dcerts-card,
.rozor-motion-pending .rozor-dcritical-card,
.rozor-motion-pending .rozor-dpricing-card,
.rozor-motion-pending .rozor-dhow-image,
.rozor-motion-pending .rozor-dfaq-item,
.rozor-motion-pending .rozor-dhow-faqs > details,
.rozor-motion-pending .rozor-dfinalmetrics > *,
.rozor-motion-pending .rozor-cta-block .eyebrow,
.rozor-motion-pending .rozor-cta-block h2,
.rozor-motion-pending .rozor-cta-block p,
.rozor-motion-pending .rozor-cta-block > div > *,
.rozor-motion-pending .rozor-delhero-eyebrow,
.rozor-motion-pending .rozor-delhero-h1,
.rozor-motion-pending .rozor-delhero-accent,
.rozor-motion-pending .rozor-delhero-sub,
.rozor-motion-pending .rozor-delhero-ctas > *,
.rozor-motion-pending .rozor-delhero-image,
.rozor-motion-pending .rozor-delhero-metrics > *,
.rozor-motion-pending .rozor-delsteps-item,
.rozor-motion-pending .rozor-delsteps-image,
.rozor-motion-pending .rozor-delprice-card,
.rozor-motion-pending .rozor-delfeat-trust-card,
.rozor-motion-pending .rozor-delfeat-scale-row,
.rozor-motion-pending .rozor-delcta-h2,
.rozor-motion-pending .rozor-delcta-body,
.rozor-motion-pending .rozor-delcta-ctas > *,
.rozor-motion-pending .rozor-clhero-eyebrow,
.rozor-motion-pending .rozor-clhero-h1,
.rozor-motion-pending .rozor-clhero-accent,
.rozor-motion-pending .rozor-clhero-body,
.rozor-motion-pending .rozor-clhero-ctas > *,
.rozor-motion-pending .rozor-clhero-image,
.rozor-motion-pending .rozor-clsteps-item,
.rozor-motion-pending .rozor-clsteps-image,
.rozor-motion-pending .rozor-clai-display,
.rozor-motion-pending .rozor-clai-body,
.rozor-motion-pending .rozor-clai-card,
.rozor-motion-pending .rozor-clfeat1-image,
.rozor-motion-pending .rozor-clfeat1-metric,
.rozor-motion-pending .rozor-clfeat2-row,
.rozor-motion-pending .rozor-clprice-card,
.rozor-motion-pending .rozor-clcta-h2,
.rozor-motion-pending .rozor-clcta-body,
.rozor-motion-pending .rozor-clcta-ctas > *,
.rozor-motion-pending .rozor-homehero-eyebrow,
.rozor-motion-pending .rozor-homehero-h1,
.rozor-motion-pending .rozor-homehero-sub,
.rozor-motion-pending .rozor-homehero-ctas > *,
.rozor-motion-pending .rozor-homehero-image,
.rozor-motion-pending .rozor-homevision .rozor-section-header .eyebrow,
.rozor-motion-pending .rozor-homevision .rozor-section-header h2,
.rozor-motion-pending .rozor-homevision .rozor-section-header p,
.rozor-motion-pending .rozor-homevision .rozor-section-header a,
.rozor-motion-pending .rozor-homefounder > *,
.rozor-motion-pending .rozor-home-banner-text,
.rozor-motion-pending .rozor-homeproducts .rozor-section-header .eyebrow,
.rozor-motion-pending .rozor-homeproducts .rozor-section-header h2,
.rozor-motion-pending .rozor-homeproducts .rozor-section-header p,
.rozor-motion-pending .rozor-homeproduct-card,
.rozor-motion-pending .rozor-hometech .rozor-section-header .eyebrow,
.rozor-motion-pending .rozor-hometech .rozor-section-header h2,
.rozor-motion-pending .rozor-hometech .rozor-section-header p,
.rozor-motion-pending .rozor-hometech .rozor-section-header a,
.rozor-motion-pending .rozor-homecases .rozor-section-header .eyebrow,
.rozor-motion-pending .rozor-homecases .rozor-section-header h2,
.rozor-motion-pending .rozor-homecases .rozor-section-header p,
.rozor-motion-pending .rozor-homecases .rozor-section-header a,
.rozor-motion-pending .rozor-homecases-image,
.rozor-motion-pending .rozor-homecta-h2,
.rozor-motion-pending .rozor-homecta-body,
.rozor-motion-pending .rozor-homecta-ctas > * {
  visibility: hidden;
}

/* Fallback: if motion.js hasn't booted within ~2s (slow network, blocked CDN),
   reveal content so the page is never permanently hidden. */
@keyframes rozor-motion-fallback {
  to { visibility: visible; }
}
.rozor-motion-pending .rozor-nav-chrome,
.rozor-motion-pending .rozor-hero-eyebrow,
.rozor-motion-pending .rozor-hero-h1,
.rozor-motion-pending .rozor-hero-accent,
.rozor-motion-pending .rozor-hero-sub,
.rozor-motion-pending .rozor-hero-ctas > *,
.rozor-motion-pending .rozor-hero-image,
.rozor-motion-pending .rozor-hero-metrics > *,
.rozor-motion-pending .rozor-section-header .eyebrow,
.rozor-motion-pending .rozor-section-header h2,
.rozor-motion-pending .rozor-section-header p,
.rozor-motion-pending .rozor-pillar-card,
.rozor-motion-pending .rozor-product-card,
.rozor-motion-pending .rozor-doutcomes-card,
.rozor-motion-pending .rozor-dsupport-card,
.rozor-motion-pending .rozor-dclinical-card,
.rozor-motion-pending .rozor-dtech-card,
.rozor-motion-pending .rozor-dcerts-card,
.rozor-motion-pending .rozor-dcritical-card,
.rozor-motion-pending .rozor-dpricing-card,
.rozor-motion-pending .rozor-dhow-image,
.rozor-motion-pending .rozor-dfaq-item,
.rozor-motion-pending .rozor-dhow-faqs > details,
.rozor-motion-pending .rozor-dfinalmetrics > *,
.rozor-motion-pending .rozor-cta-block .eyebrow,
.rozor-motion-pending .rozor-cta-block h2,
.rozor-motion-pending .rozor-cta-block p,
.rozor-motion-pending .rozor-cta-block > div > *,
.rozor-motion-pending .rozor-delhero-eyebrow,
.rozor-motion-pending .rozor-delhero-h1,
.rozor-motion-pending .rozor-delhero-accent,
.rozor-motion-pending .rozor-delhero-sub,
.rozor-motion-pending .rozor-delhero-ctas > *,
.rozor-motion-pending .rozor-delhero-image,
.rozor-motion-pending .rozor-delhero-metrics > *,
.rozor-motion-pending .rozor-delsteps-item,
.rozor-motion-pending .rozor-delsteps-image,
.rozor-motion-pending .rozor-delprice-card,
.rozor-motion-pending .rozor-delfeat-trust-card,
.rozor-motion-pending .rozor-delfeat-scale-row,
.rozor-motion-pending .rozor-delcta-h2,
.rozor-motion-pending .rozor-delcta-body,
.rozor-motion-pending .rozor-delcta-ctas > *,
.rozor-motion-pending .rozor-clhero-eyebrow,
.rozor-motion-pending .rozor-clhero-h1,
.rozor-motion-pending .rozor-clhero-accent,
.rozor-motion-pending .rozor-clhero-body,
.rozor-motion-pending .rozor-clhero-ctas > *,
.rozor-motion-pending .rozor-clhero-image,
.rozor-motion-pending .rozor-clsteps-item,
.rozor-motion-pending .rozor-clsteps-image,
.rozor-motion-pending .rozor-clai-display,
.rozor-motion-pending .rozor-clai-body,
.rozor-motion-pending .rozor-clai-card,
.rozor-motion-pending .rozor-clfeat1-image,
.rozor-motion-pending .rozor-clfeat1-metric,
.rozor-motion-pending .rozor-clfeat2-row,
.rozor-motion-pending .rozor-clprice-card,
.rozor-motion-pending .rozor-clcta-h2,
.rozor-motion-pending .rozor-clcta-body,
.rozor-motion-pending .rozor-clcta-ctas > *,
.rozor-motion-pending .rozor-homehero-eyebrow,
.rozor-motion-pending .rozor-homehero-h1,
.rozor-motion-pending .rozor-homehero-sub,
.rozor-motion-pending .rozor-homehero-ctas > *,
.rozor-motion-pending .rozor-homehero-image,
.rozor-motion-pending .rozor-homevision .rozor-section-header .eyebrow,
.rozor-motion-pending .rozor-homevision .rozor-section-header h2,
.rozor-motion-pending .rozor-homevision .rozor-section-header p,
.rozor-motion-pending .rozor-homevision .rozor-section-header a,
.rozor-motion-pending .rozor-homefounder > *,
.rozor-motion-pending .rozor-home-banner-text,
.rozor-motion-pending .rozor-homeproducts .rozor-section-header .eyebrow,
.rozor-motion-pending .rozor-homeproducts .rozor-section-header h2,
.rozor-motion-pending .rozor-homeproducts .rozor-section-header p,
.rozor-motion-pending .rozor-homeproduct-card,
.rozor-motion-pending .rozor-hometech .rozor-section-header .eyebrow,
.rozor-motion-pending .rozor-hometech .rozor-section-header h2,
.rozor-motion-pending .rozor-hometech .rozor-section-header p,
.rozor-motion-pending .rozor-hometech .rozor-section-header a,
.rozor-motion-pending .rozor-homecases .rozor-section-header .eyebrow,
.rozor-motion-pending .rozor-homecases .rozor-section-header h2,
.rozor-motion-pending .rozor-homecases .rozor-section-header p,
.rozor-motion-pending .rozor-homecases .rozor-section-header a,
.rozor-motion-pending .rozor-homecases-image,
.rozor-motion-pending .rozor-homecta-h2,
.rozor-motion-pending .rozor-homecta-body,
.rozor-motion-pending .rozor-homecta-ctas > * {
  animation: rozor-motion-fallback 0s 2s forwards;
}

/* ---------------------------------------------------------------------------
   Cleaning page — outlined display text utility (the giant "Rozor" word in
   the AI Intelligence section). Text-stroke is well supported in 2026
   (Chrome/Edge/Safari/Firefox); transparent fill + thin ink stroke creates
   the editorial outlined look. Decorative element — `aria-hidden` on the
   wrapper keeps it out of the accessibility tree.
   --------------------------------------------------------------------------- */
.rozor-text-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(28, 30, 16, 0.32);
          text-stroke: 1.5px rgba(28, 30, 16, 0.32);
}
/* Bolder variant for smaller-numeral / step-eyebrow use. The base
   `.rozor-text-outline` is calibrated for huge display type (e.g. the
   "Rozor" word in the AI section); at smaller scales (3–4rem step
   numerals) the same stroke reads as ghosted, so the bolder variant
   gives the numerals enough presence to function as editorial anchors. */
.rozor-text-outline-bold {
  color: transparent;
  -webkit-text-stroke: 2px rgba(28, 30, 16, 0.42);
          text-stroke: 2px rgba(28, 30, 16, 0.42);
}
.rozor-text-outline-lime {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(184, 218, 0, 0.55);
          text-stroke: 1.5px rgba(184, 218, 0, 0.55);
}
/* Heavier lime outline — calibrated for the §3 Technology stat numerals
   ("5+", "1 Loop") so they match the visual weight of the §1 hero display
   "Technology Platform" without overpowering it. Stroke 2.5px @ 78% opacity. */
.rozor-text-outline-lime-bold {
  color: transparent;
  -webkit-text-stroke: 2.5px rgba(184, 218, 0, 0.78);
          text-stroke: 2.5px rgba(184, 218, 0, 0.78);
}

/* ---------------------------------------------------------------------------
   Mobile nav — hamburger + full-screen overlay. Visible below lg (1024px).
   Token-only (ink / lime / milk / cream), transform + opacity transitions,
   respects prefers-reduced-motion.
   --------------------------------------------------------------------------- */

/* Hamburger bars (animate to X when parent button is aria-expanded="true") */
.rozor-mnav-bars {
  position: relative;
  display: block;
  width: 18px;
  height: 14px;
}
.rozor-mnav-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform 280ms var(--ease-out-soft),
    opacity   180ms var(--ease-out-soft),
    top       280ms var(--ease-out-soft);
}
.rozor-mnav-bars span:nth-child(1) { top: 0; }
.rozor-mnav-bars span:nth-child(2) { top: 6px; }
.rozor-mnav-bars span:nth-child(3) { top: 12px; }

.rozor-mnav-toggle[aria-expanded="true"] .rozor-mnav-bars span:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}
.rozor-mnav-toggle[aria-expanded="true"] .rozor-mnav-bars span:nth-child(2) {
  opacity: 0;
}
.rozor-mnav-toggle[aria-expanded="true"] .rozor-mnav-bars span:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}

/* Panel container: full-viewport fixed overlay */
.rozor-mnav-panel {
  position: fixed;
  inset: 0;
  z-index: 60;
  visibility: hidden;
  pointer-events: none;
}
.rozor-mnav-panel[data-open="true"] {
  visibility: visible;
  pointer-events: auto;
}

/* Backdrop fades in */
.rozor-mnav-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 30, 16, 0.5);
  opacity: 0;
  transition: opacity 260ms var(--ease-out-soft);
}
.rozor-mnav-panel[data-open="true"] .rozor-mnav-backdrop {
  opacity: 1;
}

/* Sheet slides in from the right */
.rozor-mnav-sheet {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(92vw, 420px);
  background: var(--surface-base);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-floating);
  transform: translateX(100%);
  transition: transform 320ms var(--ease-out-soft);
  will-change: transform;
}
.rozor-mnav-panel[data-open="true"] .rozor-mnav-sheet {
  transform: translateX(0);
}

/* Nav links inside the sheet */
.rozor-mnav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.95rem 1rem;
  border-radius: 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--brand-ink);
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 180ms var(--ease-out-soft),
    color 180ms var(--ease-out-soft);
}
.rozor-mnav-link:hover {
  background: rgba(28, 30, 16, 0.05);
}
.rozor-mnav-link.is-current {
  background: var(--brand-ink);
  color: var(--surface-base);
}

/* Caret rotates 90° when the parent is expanded */
.rozor-mnav-caret {
  transition: transform 220ms var(--ease-out-soft);
}
.rozor-mnav-parent[aria-expanded="true"] .rozor-mnav-caret {
  transform: rotate(90deg);
}

/* Sub-list: collapsed by default, animates block-size 0 → auto on expand.
   Relies on `interpolate-size: allow-keywords` set on :root (same mechanism
   as the FAQ accordion). */
.rozor-mnav-sublist {
  block-size: 0;
  overflow-y: clip;
  transition: block-size 280ms var(--ease-out-soft);
}
.rozor-mnav-sublist[data-expanded="true"] {
  block-size: auto;
}
.rozor-mnav-sublist-inner {
  margin: 0.15rem 0 0.5rem 0.75rem;
  padding-left: 0.75rem;
  border-left: 1px solid rgba(28, 30, 16, 0.1);
}
.rozor-mnav-sublink {
  display: block;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--brand-ink);
  opacity: 0.85;
  transition:
    background-color 180ms var(--ease-out-soft),
    opacity 180ms var(--ease-out-soft);
}
.rozor-mnav-sublink:hover {
  background: rgba(28, 30, 16, 0.05);
  opacity: 1;
}
/* Third-level nesting indicator (e.g. /careers/open-positions/ under /careers/).
   Always visible inside the expanded parent sub-list — no second accordion. */
.rozor-mnav-sublink.is-nested {
  padding-left: 1.75rem;
  font-size: 0.88rem;
  opacity: 0.72;
  position: relative;
}
.rozor-mnav-sublink.is-nested::before {
  content: '';
  position: absolute;
  left: 0.95rem;
  top: 50%;
  width: 0.55rem;
  height: 1px;
  background: rgba(28, 30, 16, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  .rozor-mnav-sublist,
  .rozor-mnav-caret {
    transition: none;
  }
}

/* Keep the overlay out of the way once the viewport grows past the breakpoint */
@media (min-width: 1024px) {
  .rozor-mnav-panel { display: none; }
}

/* Reduced motion: collapse transitions to near-instant */
@media (prefers-reduced-motion: reduce) {
  .rozor-mnav-backdrop,
  .rozor-mnav-sheet,
  .rozor-mnav-bars span {
    transition: none;
  }
}

/* Lottie mounts (disinfection support cards). lottie-web injects an
   inline-styled SVG that sometimes ignores its container — this forces it
   to fill the .lottie-mount box regardless. */
.lottie-mount svg { display: block; width: 100% !important; height: 100% !important; }

/* FAQ accordion (.rozor-dfaq-item) — smooth open/close via ::details-content.
   Relies on `interpolate-size: allow-keywords` set on :root above so block-size
   can transition between 0 and auto. Single-open behaviour is handled natively
   by <details name="rozor-dfaq-group"> in the markup; this CSS just makes the
   close-on-other-open visibly animate too. */
.rozor-dfaq-item::details-content {
  block-size: 0;
  overflow-y: clip;
  transition:
    block-size 380ms var(--ease-out-soft),
    content-visibility 380ms var(--ease-out-soft) allow-discrete;
}
.rozor-dfaq-item[open]::details-content {
  block-size: auto;
}
@media (prefers-reduced-motion: reduce) {
  .rozor-dfaq-item::details-content { transition: none; }
}

/* ---------------------------------------------------------------------------
   Partners marquee (.rozor-dpartners) — continuous horizontal logo strip.
   Logos rendered twice in the track; GSAP translates x: 0 → -50% for a
   seamless loop (see motion.js). Animation lives in JS, not CSS: pausing a
   CSS keyframe animation on :hover causes a one-frame reverse jitter in
   Chromium — the compositor rewinds toward the nearest keyframe checkpoint
   before freezing. GSAP's pause/resume is atomic (writes the exact current
   transform on pause), so no jitter. Justified §7.1 "no auto-playing loops"
   exception: industry-standard trust strip, paused on hover, not created at
   all under prefers-reduced-motion (see motion.js guard).
   --------------------------------------------------------------------------- */
.rozor-dpartners-track {
  will-change: transform;
  user-select: none; /* prevent text-selection while dragging */
}
.rozor-dpartners-viewport {
  cursor: grab;
  touch-action: pan-y; /* vertical page scroll passes through; horizontal is captured by pointer handlers */
}
.rozor-dpartners-viewport:active {
  cursor: grabbing;
}

/* ---------------------------------------------------------------------------
   Technology page (page-technology.php) — REVISED 2026-04-28 mod batch.
   - §1 hero blueprint background (replaces dot grid; distinct from cleaning's
     concentric rings, delivery's dotted route, disinfection's grid)
   - §2 animated 4-layer counter (replaces outlined "4 Layer" display text)
   - §3 untabbed layer rows + boxed stat cards with count-up
   - All entrance reveals use `start: 'top 92%'` to fire well before the
     section is scrolled past — kills the "tabs disappeared on refresh" bug
   --------------------------------------------------------------------------- */

/* Blueprint motif — hairline graph-paper grid for §1 + §3 dark surfaces.
   Two overlapping linear gradients (horizontal + vertical hairlines) form
   a subtle 80px graph-paper grid in lime at very low opacity. Edge mask
   fades the grid at the perimeter so it recedes rather than tiles. */
.rozor-techhero-blueprint {
  background-image:
    linear-gradient(to bottom, rgba(184, 218, 0, 0.06) 1px, transparent 1px),
    linear-gradient(to right,  rgba(184, 218, 0, 0.04) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at center, black 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 90% 80% at center, black 35%, transparent 100%);
}

/* §2 layer counter — the big animated lime numeral that counts 0 → 4 on
   scroll-into-view. Lives next to a stack of 4 horizontal lime bars that
   reveal in sequence as the count climbs. */
.rozor-techlayer-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--font-display);
  color: var(--brand-ink);
}
.rozor-techlayer-counter-num {
  font-size: clamp(4.5rem, 10vw, 8rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--brand-lime);
  font-variant-numeric: tabular-nums;
}
.rozor-techlayer-counter-stack {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-bottom: 0.85rem;
}
.rozor-techlayer-counter-bar {
  height: 5px;
  background: var(--brand-lime);
  border-radius: 3px;
  transform-origin: left center;
  transform: scaleX(0); /* motion.js sets scaleX 1 in stagger */
}
.rozor-techlayer-counter-bar:nth-child(1) { width: 40px; }
.rozor-techlayer-counter-bar:nth-child(2) { width: 64px; }
.rozor-techlayer-counter-bar:nth-child(3) { width: 88px; }
.rozor-techlayer-counter-bar:nth-child(4) { width: 112px; }

/* §3 RESTORED to tabbed layout (mod-batch v2 2026-04-28).
   One big card holds 3 tab buttons at the top + 3 grid-stacked panels.
   Tabs and panels are ALWAYS visible from initial paint — no FOUC
   pre-hide, no scroll-trigger hide. CSS opacity + grid-stack handle
   the smooth fade between active panels.

   .rozor-techtabs-card — the outer card containing tabs + panels.
   Surface tint distinct from the section background per round-1 feedback. */

/* Tab buttons — calm baseline, lime-glow on active. Always visible. */
.rozor-techtab-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.45rem;
  border-radius: 999px;
  border: 1px solid rgba(248, 250, 233, 0.14);
  background: rgba(248, 250, 233, 0.04);
  color: rgba(248, 250, 233, 0.72);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    background-color 240ms var(--ease-spring),
    border-color 240ms var(--ease-spring),
    color 240ms var(--ease-spring),
    transform 240ms var(--ease-spring),
    box-shadow 240ms var(--ease-spring);
  white-space: nowrap;
}
.rozor-techtab-btn:hover {
  background: rgba(248, 250, 233, 0.08);
  border-color: rgba(248, 250, 233, 0.3);
  color: var(--brand-milk, #f8fae9);
  transform: translateY(-1px);
}
.rozor-techtab-btn:focus-visible {
  outline: 2px solid var(--brand-lime, #b8da00);
  outline-offset: 3px;
}

/* Lime pip on the left of each button — muted on inactive, glowing on active */
.rozor-techtab-pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(248, 250, 233, 0.25);
  flex-shrink: 0;
  transition: background-color 240ms var(--ease-spring), box-shadow 240ms var(--ease-spring);
}
.rozor-techtab-btn.is-active .rozor-techtab-pip {
  background: var(--brand-lime, #b8da00);
  box-shadow:
    0 0 8px 2px rgba(184, 218, 0, 0.65),
    0 0 16px 4px rgba(184, 218, 0, 0.35);
}

/* Active tab — solid lime fill, brand-ink text, breathing lime halo. */
.rozor-techtab-btn.is-active {
  background: var(--brand-lime, #b8da00);
  color: var(--brand-ink, #1c1e10);
  border-color: var(--brand-lime, #b8da00);
  box-shadow:
    0 0 0 1px rgba(184, 218, 0, 0.35),
    0 14px 36px -10px rgba(184, 218, 0, 0.55);
  animation: rozor-techtab-breathe 2.8s ease-in-out infinite;
}
.rozor-techtab-btn.is-active .rozor-techtab-pip {
  background: var(--brand-ink, #1c1e10);
  box-shadow:
    0 0 6px 1px rgba(28, 30, 16, 0.55);
}
.rozor-techtab-btn.is-active:hover {
  transform: translateY(-1px);
  background: #c6e614; /* slightly brighter lime on hover */
}

/* Soft lime halo breathe — additive box-shadow only, no transform involvement */
@keyframes rozor-techtab-breathe {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(184, 218, 0, 0.35),
      0 14px 36px -10px rgba(184, 218, 0, 0.55),
      0 0 0 0 rgba(184, 218, 0, 0.0);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(184, 218, 0, 0.5),
      0 18px 44px -8px rgba(184, 218, 0, 0.7),
      0 0 0 6px rgba(184, 218, 0, 0.14);
  }
}

/* Tab panels — grid-stacked so the container sizes to the largest panel
   and panels share a single grid cell (no layout shift between tabs).
   GSAP (in page-technology.php) owns the slide+fade transition; this
   CSS just defines the IDLE states and forces each panel onto its own
   compositor layer so the transition doesn't re-rasterize against the
   parent card. Earlier the parent card had `backdrop-blur-sm` over a
   semi-transparent fill, which combined with child-opacity changes
   produced image-edge artifacts on Chromium during the cross-fade.
   Two-pronged fix: removed the blur from the card, and added the
   `will-change` + `translateZ(0)` hints below.

   Don't add CSS transitions on this element — they race with GSAP's
   timeline and cause the panel to flash through an unstyled state. */
.rozor-techtabs-panels {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
}
.rozor-techtab-panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: opacity, transform;
  transform: translateZ(0);
}
.rozor-techtab-panel.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .rozor-techtab-btn,
  .rozor-techtab-pip { transition: none; }
  .rozor-techtab-btn.is-active { animation: none; }
}

/* "Layer 01 / 02 / 03" pill mark inside each panel — same lime-tinted pill
   from the v1 mod batch, retained for the panel body. */
.rozor-techlayer-card-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: rgba(184, 218, 0, 0.12);
  border: 1px solid rgba(184, 218, 0, 0.35);
  color: var(--brand-lime);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* §3 stat cards — solid lime numerals (matching the §1 hero brevity rule),
   centered in their own dark cards. Background distinct from the section. */
.rozor-techstat-card {
  background: rgba(248, 250, 233, 0.04);
  border: 1px solid rgba(248, 250, 233, 0.10);
  border-radius: 24px;
  padding: 2rem 1.75rem 2.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  position: relative;
  overflow: hidden;
  transition: transform 280ms var(--ease-out-soft), border-color 280ms var(--ease-out-soft);
}
.rozor-techstat-card:hover {
  border-color: rgba(184, 218, 0, 0.35);
  transform: translateY(-2px);
}
/* Decorative top accent rail */
.rozor-techstat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: var(--brand-lime);
  opacity: 0.85;
}
.rozor-techstat-num {
  font-family: var(--font-display);
  font-size: clamp(4rem, 9vw, 7rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--brand-lime);
  font-variant-numeric: tabular-nums;
}

/* FOUC pre-hide — visibility-hidden until motion.js drops the
   `rozor-motion-pending` class. Selectors that don't exist on a given
   page resolve to no-ops, so this block is dormant on every other template.
   Kept as a tight set: only elements that motion.js actually animates
   from a hidden state are listed. Eyebrows on lime pills are visible
   immediately (no FOUC pre-hide) per round-1 user feedback. */
.rozor-motion-pending .rozor-techhero-diagram,
.rozor-motion-pending .rozor-techhero-card,
.rozor-motion-pending .rozor-techlayers .rozor-section-header h2,
.rozor-motion-pending .rozor-techlayer-row,
.rozor-motion-pending .rozor-techlayer-counter-num,
.rozor-motion-pending .rozor-techstat-card,
.rozor-motion-pending .rozor-techrnd .rozor-section-header h2,
.rozor-motion-pending .rozor-techrnd-card,
.rozor-motion-pending .rozor-techreal-image,
.rozor-motion-pending .rozor-techsubscribe .rozor-section-header h2 {
  visibility: hidden;
}

/* Same set, 2s fallback animation path — matches the existing fallback
   block above so the page is never permanently hidden if motion.js
   fails to boot. */
.rozor-motion-pending .rozor-techhero-diagram,
.rozor-motion-pending .rozor-techhero-card,
.rozor-motion-pending .rozor-techlayers .rozor-section-header h2,
.rozor-motion-pending .rozor-techlayer-row,
.rozor-motion-pending .rozor-techlayer-counter-num,
.rozor-motion-pending .rozor-techstat-card,
.rozor-motion-pending .rozor-techrnd .rozor-section-header h2,
.rozor-motion-pending .rozor-techrnd-card,
.rozor-motion-pending .rozor-techreal-image,
.rozor-motion-pending .rozor-techsubscribe .rozor-section-header h2 {
  animation: rozor-motion-fallback 0s 2s forwards;
}

/* ---------------------------------------------------------------------------
   Leadership page (page-leadership.php)
   - .rozor-leadhow-dot.is-active — active state on the §2 carousel pagination
     dots (lime border + lime pip on dark surface)
   - .pill-glow — symmetric breathing halo for small lime badges (the §1
     Founder pill on Yusuf's card). Tighter shadow vector than .btn-glow
     so it suits a small badge rather than a CTA.
   - .rozor-leadhow-num — §2 carousel numerals (replaced the outlined
     `.rozor-text-outline-lime-bold` per mod-batch v1 2026-04-29). Smaller
     editorial solid-lime numeral with a 36px lime hairline accent below.
     Distinct vocabulary from the outlined treatment: it's a chapter mark,
     not a display headline.
   - FOUC pre-hide for hero stack + leader cards + section H2s
   --------------------------------------------------------------------------- */

.rozor-leadhow-dot.is-active {
  border-color: var(--brand-lime, #b8da00);
}
.rozor-leadhow-dot.is-active .rozor-leadhow-dot-pip {
  background: var(--brand-lime, #b8da00);
  box-shadow:
    0 0 6px 1px rgba(184, 218, 0, 0.55),
    0 0 12px 3px rgba(184, 218, 0, 0.3);
}

/* §1 Founder pill glow — symmetric breathing halo (no Y offset) so it suits
   a small badge sitting in a corner rather than a CTA on a surface. Pairs
   with bg-brand-lime fills. Reduced-motion is handled by the global
   prefers-reduced-motion block above (animation-duration → 0.001ms). */
@keyframes rozor-pill-glow {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(184, 218, 0, 0.0),
      0 6px 16px -6px rgba(184, 218, 0, 0.45);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(184, 218, 0, 0.2),
      0 8px 24px -4px rgba(184, 218, 0, 0.7);
  }
}
.pill-glow {
  animation: rozor-pill-glow 2.4s ease-in-out infinite;
}

/* §2 carousel numerals — solid lime editorial chapter mark + 36px lime
   hairline rule below. Smaller scale than the outlined treatment so the
   number frames the title rather than dominating it. */
.rozor-leadhow-num {
  display: inline-block;
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.2vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--brand-lime, #b8da00);
  font-variant-numeric: tabular-nums;
  padding-bottom: 0.65rem;
}
.rozor-leadhow-num::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 36px;
  height: 2px;
  background: var(--brand-lime, #b8da00);
  border-radius: 2px;
}

.rozor-motion-pending .rozor-leadhero-eyebrow,
.rozor-motion-pending .rozor-leadhero-h1,
.rozor-motion-pending .rozor-leadhero-sub,
.rozor-motion-pending .rozor-leadhero-stat,
.rozor-motion-pending .rozor-leadhero-cta,
.rozor-motion-pending .rozor-leadcard,
.rozor-motion-pending .rozor-leadhow .rozor-section-header h2,
.rozor-motion-pending .rozor-leadsubscribe .rozor-section-header h2 {
  visibility: hidden;
}

.rozor-motion-pending .rozor-leadhero-eyebrow,
.rozor-motion-pending .rozor-leadhero-h1,
.rozor-motion-pending .rozor-leadhero-sub,
.rozor-motion-pending .rozor-leadhero-stat,
.rozor-motion-pending .rozor-leadhero-cta,
.rozor-motion-pending .rozor-leadcard,
.rozor-motion-pending .rozor-leadhow .rozor-section-header h2,
.rozor-motion-pending .rozor-leadsubscribe .rozor-section-header h2 {
  animation: rozor-motion-fallback 0s 2s forwards;
}

/* ---------------------------------------------------------------------------
   Investors page (page-investors.php)
   FOUC pre-hide for the hero stack (Z mark, eyebrow, H1, body paragraphs,
   CTA), the partner-credit row, and the §2 subscribe H2. Selectors that
   don't exist on other pages resolve to no-ops.
   --------------------------------------------------------------------------- */
.rozor-motion-pending .rozor-invhero-logo,
.rozor-motion-pending .rozor-invhero-eyebrow,
.rozor-motion-pending .rozor-invhero-h1,
.rozor-motion-pending .rozor-invhero-body > *,
.rozor-motion-pending .rozor-invhero-cta,
.rozor-motion-pending .rozor-invhero-partner,
.rozor-motion-pending .rozor-invsubscribe .rozor-section-header h2 {
  visibility: hidden;
}

.rozor-motion-pending .rozor-invhero-logo,
.rozor-motion-pending .rozor-invhero-eyebrow,
.rozor-motion-pending .rozor-invhero-h1,
.rozor-motion-pending .rozor-invhero-body > *,
.rozor-motion-pending .rozor-invhero-cta,
.rozor-motion-pending .rozor-invhero-partner,
.rozor-motion-pending .rozor-invsubscribe .rozor-section-header h2 {
  animation: rozor-motion-fallback 0s 2s forwards;
}

/* ---------------------------------------------------------------------------
   About us page (page-about-us.php)
   - .rozor-aboutwins-dot.is-active — active state on the §3 carousel
     pagination dots. Cream surface (light) variant of the leadership dot —
     same lime fill, calibrated halo for the lighter background.
   - .rozor-aboutwins-card + ::before — vertical hairline between adjacent
     carousel cards. CSS adjacent sibling so the first card has no left
     divider; cards 2/3/4 each get their own. Stays inside the card's own
     padding via top/bottom inset so it doesn't touch the row chrome.
   - FOUC pre-hide for hero stack + 3 pillar cards + Why-ROZOR content
     stack + the §3 carousel header + §5 subscribe H2. Carousel cards
     themselves are NOT in the pre-hide list — they live inside an
     overflow-hidden viewport and would slide in via the carousel JS even
     before motion.js boots, so hiding them would cause an empty viewport
     flash.
   --------------------------------------------------------------------------- */

.rozor-aboutwins-dot.is-active {
  border-color: var(--brand-lime, #b8da00);
}
.rozor-aboutwins-dot.is-active .rozor-aboutwins-dot-pip {
  background: var(--brand-lime, #b8da00);
  box-shadow:
    0 0 6px 1px rgba(184, 218, 0, 0.45),
    0 0 12px 3px rgba(184, 218, 0, 0.22);
}

/* §3 carousel numerals — editorial chapter mark on cream surface. Solid
   bold ink numeral + 40px lime hairline rule below via ::after. Same
   vocabulary as leadership's .rozor-leadhow-num but recolored ink+lime
   for cream (lime fill would fail contrast on cream per §10.4). */
.rozor-aboutwins-num {
  display: inline-block;
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 4.6vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--brand-ink, #1c1e10);
  font-variant-numeric: tabular-nums;
  padding-bottom: 0.7rem;
}
.rozor-aboutwins-num::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--brand-lime, #b8da00);
  border-radius: 2px;
}

.rozor-aboutwins-card {
  position: relative;
}
.rozor-aboutwins-card + .rozor-aboutwins-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1rem;
  bottom: 1rem;
  width: 1px;
  background: rgba(28, 30, 16, 0.12);
  pointer-events: none;
}

.rozor-motion-pending .rozor-abouthero-eyebrow,
.rozor-motion-pending .rozor-abouthero-h1,
.rozor-motion-pending .rozor-abouthero-sub,
.rozor-motion-pending .rozor-abouthero-card,
.rozor-motion-pending .rozor-aboutwhy-h2,
.rozor-motion-pending .rozor-aboutwhy-eyebrow,
.rozor-motion-pending .rozor-aboutwhy-mark,
.rozor-motion-pending .rozor-aboutwhy-image,
.rozor-motion-pending .rozor-aboutwhy-body > *,
.rozor-motion-pending .rozor-aboutwhy-cta,
.rozor-motion-pending .rozor-aboutwins .rozor-section-header h2,
.rozor-motion-pending .rozor-aboutsubscribe .rozor-section-header h2 {
  visibility: hidden;
}

.rozor-motion-pending .rozor-abouthero-eyebrow,
.rozor-motion-pending .rozor-abouthero-h1,
.rozor-motion-pending .rozor-abouthero-sub,
.rozor-motion-pending .rozor-abouthero-card,
.rozor-motion-pending .rozor-aboutwhy-h2,
.rozor-motion-pending .rozor-aboutwhy-eyebrow,
.rozor-motion-pending .rozor-aboutwhy-mark,
.rozor-motion-pending .rozor-aboutwhy-image,
.rozor-motion-pending .rozor-aboutwhy-body > *,
.rozor-motion-pending .rozor-aboutwhy-cta,
.rozor-motion-pending .rozor-aboutwins .rozor-section-header h2,
.rozor-motion-pending .rozor-aboutsubscribe .rozor-section-header h2 {
  animation: rozor-motion-fallback 0s 2s forwards;
}

/* ---------------------------------------------------------------------------
   Newsroom landing + article (page-newsroom.php router)
   FOUC pre-hide for: landing hero stack, news cards (featured + grid),
   article hero stack (back link, meta chips, H1, sub, image), article
   prose body, social row icons, plus the §subscribe section header h2
   (cuts the dark-section fade-in flash). Selectors that don't appear on
   the current page resolve to no-ops, so a single block covers both.
   --------------------------------------------------------------------------- */
.rozor-motion-pending .rozor-newsroomhero-eyebrow,
.rozor-motion-pending .rozor-newsroomhero-h1,
.rozor-motion-pending .rozor-newsroomhero-sub,
.rozor-motion-pending .rozor-newsroomhero-meta,
.rozor-motion-pending .rozor-newscard,
.rozor-motion-pending .rozor-newsarticle-back,
.rozor-motion-pending .rozor-newsarticle-meta > *,
.rozor-motion-pending .rozor-newsarticle-h1,
.rozor-motion-pending .rozor-newsarticle-sub,
.rozor-motion-pending .rozor-newsarticle-image,
.rozor-motion-pending .rozor-newsroom-prose,
.rozor-motion-pending .rozor-newsroom-subscribe .rozor-section-header h2,
.rozor-motion-pending .rozor-newsarticle-connect .rozor-section-header h2,
.rozor-motion-pending .rozor-csehero-eyebrow,
.rozor-motion-pending .rozor-csehero-h1,
.rozor-motion-pending .rozor-csehero-sub,
.rozor-motion-pending .rozor-csehero-meta,
.rozor-motion-pending .rozor-csecard,
.rozor-motion-pending .rozor-csarticle-back,
.rozor-motion-pending .rozor-csarticle-meta > *,
.rozor-motion-pending .rozor-csarticle-h1,
.rozor-motion-pending .rozor-csarticle-sub,
.rozor-motion-pending .rozor-cse-subscribe .rozor-section-header h2,
.rozor-motion-pending .rozor-csarticle-connect .rozor-section-header h2 {
  visibility: hidden;
}

.rozor-motion-pending .rozor-newsroomhero-eyebrow,
.rozor-motion-pending .rozor-newsroomhero-h1,
.rozor-motion-pending .rozor-newsroomhero-sub,
.rozor-motion-pending .rozor-newsroomhero-meta,
.rozor-motion-pending .rozor-newscard,
.rozor-motion-pending .rozor-newsarticle-back,
.rozor-motion-pending .rozor-newsarticle-meta > *,
.rozor-motion-pending .rozor-newsarticle-h1,
.rozor-motion-pending .rozor-newsarticle-sub,
.rozor-motion-pending .rozor-newsarticle-image,
.rozor-motion-pending .rozor-newsroom-prose,
.rozor-motion-pending .rozor-newsroom-subscribe .rozor-section-header h2,
.rozor-motion-pending .rozor-newsarticle-connect .rozor-section-header h2,
.rozor-motion-pending .rozor-csehero-eyebrow,
.rozor-motion-pending .rozor-csehero-h1,
.rozor-motion-pending .rozor-csehero-sub,
.rozor-motion-pending .rozor-csehero-meta,
.rozor-motion-pending .rozor-csecard,
.rozor-motion-pending .rozor-csarticle-back,
.rozor-motion-pending .rozor-csarticle-meta > *,
.rozor-motion-pending .rozor-csarticle-h1,
.rozor-motion-pending .rozor-csarticle-sub,
.rozor-motion-pending .rozor-cse-subscribe .rozor-section-header h2,
.rozor-motion-pending .rozor-csarticle-connect .rozor-section-header h2 {
  animation: rozor-motion-fallback 0s 2s forwards;
}

/* ============================================================
   Home — full-width banner sections (§3 vision, §5 made-in-Canada,
   §7 technology, §9 partner). Shared 3:1 photographic banner with
   text overlay; functional legibility gradient is the §3 exception
   to the brand no-decorative-gradients rule.
   ============================================================ */
.rozor-home-banner {
  position: relative;
  width: 100%;
  min-height: clamp(360px, 55vh, 540px);
  overflow: hidden;
  isolation: isolate;
}
.rozor-home-banner > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.rozor-home-banner > .rozor-home-banner__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.rozor-home-banner > .container {
  position: relative;
  z-index: 2;
  min-height: clamp(360px, 55vh, 540px);
}

/* ============================================================
   Home — closer (§9 partner-with-us) ::before lime radial wash.
   Functional accent emphasis on the headline area, NOT a decorative
   surface gradient. Contained, narrow.
   ============================================================ */
.rozor-homecta-glow {
  position: relative;
}
.rozor-homecta-glow::before {
  content: "";
  position: absolute;
  inset: -10% -15%;
  background: radial-gradient(
    circle at 30% 50%,
    rgba(184, 218, 0, 0.10) 0%,
    rgba(184, 218, 0, 0.04) 40%,
    transparent 65%
  );
  pointer-events: none;
  z-index: 0;
}
.rozor-homecta-glow > * {
  position: relative;
  z-index: 1;
}