/* =============================================================================
   Raad — Brand Visual Design
   Aesthetic: precise, cold, high-tech ("Minority Report"). Near-black surfaces,
   hairline borders, a single restrained cyan accent, monospace for telemetry.
   All brand-specific styling lives in this file.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Design tokens
   ----------------------------------------------------------------------------- */

:root {
  /* Surfaces — deep, near-black brand green */
  --raad-bg: #03100d;
  --raad-surface: rgba(255, 255, 255, 0.022);
  --raad-surface-hover: rgba(255, 255, 255, 0.04);
  --raad-hairline: rgba(255, 255, 255, 0.09);
  --raad-hairline-strong: rgba(255, 255, 255, 0.16);

  /* Text */
  --raad-text: #dfe7ec;
  --raad-text-dim: rgba(223, 231, 236, 0.55);
  --raad-text-faint: rgba(223, 231, 236, 0.34);

  /* Brand palette: #0D524B green, #FA4605 orange, black/white */
  --raad-green: #0d524b;
  --raad-orange: #fa4605;
  --raad-orange-bright: #ff6a33;
  /* Accent — legible tint of the brand green (kept under the old names so
     every existing usage picks it up) */
  --raad-cyan: #2fb39f;
  --raad-cyan-bright: #53d6c1;
  --raad-cyan-dim: rgba(13, 82, 75, 0.35);

  /* Fonts */
  --raad-font-display: "Space Grotesk", system-ui, sans-serif;
  --raad-font-body: "Inter", system-ui, -apple-system, sans-serif;
  --raad-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Pico overrides */
  --pico-background-color: var(--raad-bg);
  --pico-color: var(--raad-text);
  --pico-font-family-sans-serif: var(--raad-font-body);
  --pico-font-size: 16px;
  --pico-line-height: 1.6;
  --pico-border-radius: 10px;
  --pico-muted-color: var(--raad-text-dim);
  --pico-muted-border-color: var(--raad-hairline);
  --pico-h1-color: var(--raad-text);
  --pico-h2-color: var(--raad-text);
  --pico-h3-color: var(--raad-text);
  --pico-spacing: 1.25rem;
}

/* -----------------------------------------------------------------------------
   2. Base
   ----------------------------------------------------------------------------- */

html { scroll-behavior: smooth; }

[id] { scroll-margin-top: 5rem; }

body {
  background-color: var(--raad-bg);
  color: var(--raad-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Faint cool vignette + top glow */
  background-image:
    radial-gradient(1100px 520px at 50% -8%, rgba(47, 179, 159, 0.07), transparent 60%);
  background-repeat: no-repeat;
}

h1, h2, h3, h4 {
  font-family: var(--raad-font-display);
  letter-spacing: -0.02em;
  font-weight: 600;
}

.container {
  max-width: 1140px;
}

::selection {
  background: var(--raad-cyan-dim);
  color: var(--raad-cyan-bright);
}

/* -----------------------------------------------------------------------------
   3. Header / nav
   ----------------------------------------------------------------------------- */

/* Transparent, full-width header like the live app: a very subtle black
   fade behind the nav (no panel, no border) with self-contained dark-grey
   pill controls sitting directly over the page. */
body > header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.18) 60%, transparent);
  /* header-reveal controller: flies up when scrolling down, returns on
     scroll up (mobile-app style). */
  transition: transform 0.28s cubic-bezier(0.33, 1, 0.68, 1);
}

/* Overscroll backstop: rubber-band scrolling (macOS/iOS) drags the page down
   past the top, opening a gap above the sticky header where the bare page
   background shows through. Extend the gradient's top color one viewport
   height above the header so the bounce reveals a seamless continuation. */
body > header::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

body > header.header-hidden { transform: translateY(-110%); }

body > header nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  /* Break out of .container: the header spans the full viewport width,
     hugging the edges like the app's nav. */
  max-width: none;
  width: 100%;
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  padding-right: clamp(1.25rem, 3vw, 2.5rem);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.site-logo img {
  width: 110px;
  height: 40px;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  /* Slightly airier pill spacing, matching the app's nav rhythm. */
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links > li { margin: 0; padding: 0; }

.nav-links > li > a,
.nav-dropdown summary {
  /* Pico gives nav links negative horizontal margins (its own spacing
     system), which swallows the flex gap between pills — zero it out. */
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  /* Same box metrics and type as the .nav-actions buttons on the right. */
  height: 2.5rem;
  font-family: var(--raad-font-body);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  text-decoration: none;
  padding: 0 1.5rem;
  border-radius: 999px;
  /* Self-contained near-black pills (the header behind is transparent). */
  background: rgba(8, 10, 11, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.nav-links > li > a:hover,
.nav-dropdown summary:hover,
.nav-dropdown[open] summary {
  background: rgba(48, 51, 54, 0.9);
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.nav-actions { gap: 0.75rem; }

/* Hamburger — hidden on desktop, shown ≤768px (see Responsive section). */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  margin: 0;
  border-radius: 999px;
  background: rgba(24, 26, 28, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Dropdown menus (details/summary based) */
.nav-dropdown { position: relative; }

.nav-dropdown {
  margin: 0;
  padding: 0;
  border: none;
}

.nav-dropdown summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  margin: 0;
  border: none;
}

.nav-dropdown summary::-webkit-details-marker { display: none; }

/* Pico grows an open accordion summary (margin-bottom) and draws an offset
   primary-color focus outline — both make the pill jump. The pill must keep
   identical box metrics whether closed, open, or focused. */
details.nav-dropdown[open] > summary { margin-bottom: 0; }

.nav-dropdown summary:focus,
.nav-dropdown summary:focus-visible {
  outline: none;
  color: #fff;
}

.nav-dropdown summary::after {
  content: "";
  background-image: none;
  float: none;
  width: 0.45em;
  height: 0.45em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
}

.nav-dropdown[open] summary::after {
  transform: rotate(225deg) translateY(2px);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 18rem;
  margin: 0;
  padding: 0.5rem 0;
  list-style: none;
  background: #041614;
  border: 1px solid #0d534b;
  border-radius: 6px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  z-index: 50;
}

.nav-dropdown-menu li {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

.nav-dropdown-menu a {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0;
  font-size: 0.85rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.nav-dropdown-menu a:hover {
  background: rgba(13, 83, 75, 0.3);
  color: #fff;
}

/* Grid variant (For Industries): two-column panel of capsule tiles */
.nav-dropdown-menu--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
  width: 34rem;
  padding: 0.6rem;
}

.nav-dropdown-menu--grid a {
  white-space: normal;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0.7rem 0.85rem;
  line-height: 1.3;
}

.nav-dropdown-menu--grid a:hover {
  background: rgba(13, 83, 75, 0.3);
  border-color: #0d534b;
}

/* Rich variant: title + one-line description per item */
.nav-dropdown-menu--rich {
  width: 22rem;
  padding: 0.6rem;
  gap: 0.2rem;
}

.nav-dropdown-menu--rich.nav-dropdown-menu--grid {
  width: 38rem;
  gap: 0.35rem;
}

.nav-dropdown-menu--rich .nav-dropdown-link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  white-space: normal;
  padding: 0.75rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 8px;
  line-height: 1.35;
}

.nav-dropdown-menu--rich .nav-dropdown-link:hover {
  background: rgba(13, 83, 75, 0.3);
  border-color: #0d534b;
}

.nav-dropdown-link-title {
  display: block;
  font-size: 0.88rem;
  font-weight: 500;
  color: #fff;
}

.nav-dropdown-link-desc {
  display: block;
  font-size: 0.75rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
}

/* Featured tile (Data Centers): spans the full menu width with its own look */
.nav-dropdown-feature-item {
  grid-column: 1 / -1;
  margin-top: 0.35rem;
}

.nav-dropdown-menu--rich .nav-dropdown-link.nav-dropdown-feature {
  background: linear-gradient(135deg, rgba(47, 179, 159, 0.12), rgba(13, 83, 75, 0.35));
  border: 1px solid rgba(47, 179, 159, 0.4);
  border-radius: 8px;
  padding: 0.9rem 1rem;
}

.nav-dropdown-menu--rich .nav-dropdown-link.nav-dropdown-feature:hover {
  background: linear-gradient(135deg, rgba(47, 179, 159, 0.2), rgba(13, 83, 75, 0.5));
  border-color: var(--raad-cyan, #2fb39f);
}

.nav-dropdown-feature .nav-dropdown-link-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--raad-cyan, #2fb39f);
}

.nav-dropdown-feature .nav-dropdown-link-desc {
  color: rgba(255, 255, 255, 0.7);
}

.nav-dropdown-feature-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #03100d;
  background: var(--raad-cyan, #2fb39f);
}

.nav-actions .btn-outline,
.nav-actions .btn-primary {
  height: 2.5rem;
  padding: 0 1.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  color: #fff !important;
  background: rgba(24, 26, 28, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-outline:hover {
  background: rgba(48, 51, 54, 0.9);
  border-color: rgba(255, 255, 255, 0.18);
}

.hero-trust-points {
  font-family: var(--raad-font-mono, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--raad-text-dim);
  margin-top: 0.75rem;
}

/* Flash messages */
.flash {
  padding: 0.7rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  margin: 1rem 0;
  border: 1px solid var(--raad-hairline-strong);
}

.flash-notice { color: var(--raad-cyan); border-color: rgba(47, 179, 159, 0.35); }
.flash-alert  { color: #f0a5a5; border-color: rgba(240, 165, 165, 0.35); }

/* -----------------------------------------------------------------------------
   4. Buttons
   ----------------------------------------------------------------------------- */

.btn-primary,
a.btn-primary,
[role="button"].primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--raad-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.7rem 1.3rem;
  border-radius: 8px;
  text-decoration: none;
  color: #ffffff;
  background: var(--raad-orange);
  border: 1px solid var(--raad-orange);
  transition: background 0.15s ease, box-shadow 0.2s ease, transform 0.05s ease;
}

.btn-primary:hover,
a.btn-primary:hover {
  background: var(--raad-orange-bright);
  color: #ffffff;
  box-shadow: 0 0 0 1px var(--raad-orange-bright), 0 8px 30px rgba(250, 70, 5, 0.3);
}

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

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.7rem 1.3rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--raad-text);
  background: transparent;
  border: 1px solid var(--raad-hairline-strong);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.btn-ghost:hover {
  border-color: var(--raad-text-dim);
  background: var(--raad-surface);
  color: var(--raad-text);
}

/* -----------------------------------------------------------------------------
   5. Hero
   ----------------------------------------------------------------------------- */

/* Full-window fixed 3D scene behind the hero (nadir ortho → 45° perspective).
   z-index 0 + lifted page content: negative z-index would paint below the
   body background and never show. */
.hero-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Page content layers above the fixed backdrop. The backdrop is rendered
   inside <main>, so its sibling sections must be lifted too. The header is
   excluded: it already sits at z-index 100 so nav dropdowns stay on top. */
body > footer,
main > :not(.hero-backdrop) {
  position: relative;
  z-index: 1;
}

.hero-backdrop canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Darkening scrim so hero text stays legible over the scene. The radial only
   dims the upper text area; the bottom fade starts low so the point cloud
   gets a full-contrast moment before content resumes. */
.hero-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 55% at 50% 18%, rgba(6, 8, 12, 0.45), rgba(6, 8, 12, 0) 100%),
    linear-gradient(to bottom, rgba(6, 8, 12, 0.05), rgba(6, 8, 12, 0) 40%, rgba(6, 8, 12, 0) 72%, var(--raad-bg) 100%);
}

.hero {
  padding: 6rem 1.5rem 0;
  text-align: center;
}

/* Over the point cloud the copy needs to be near-white with a subtle dark
   shadow to stay legible against bright patches of imagery. */
.hero .eyebrow {
  margin-bottom: 1.4rem;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.55);
}

.eyebrow {
  display: inline-block;
  font-family: var(--raad-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--raad-cyan);
  margin-bottom: 1.4rem;
  padding-left: 0.32em;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.9em;
  border-radius: 50%;
  background: var(--raad-cyan);
  box-shadow: 0 0 10px var(--raad-cyan);
  vertical-align: middle;
}

.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 26ch;
  margin: 0 auto 1.6rem;
  color: #fff;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.55);
}

/* Rotating headline word (terminal decrypt) */
.word-rotator {
  display: inline-block;
  min-width: 4.1em;
  text-align: right;
  vertical-align: baseline;
}

.word-rotator__word {
  display: inline-block;
  color: var(--raad-cyan-bright);
  text-shadow: 0 0 26px rgba(47, 179, 159, 0.4);
}

/* Characters mid-scramble — dimmer + jittery glow */
.word-rotator__glitch {
  color: var(--raad-cyan);
  opacity: 0.85;
  text-shadow: 0 0 14px rgba(47, 179, 159, 0.7);
}

.hero-sub {
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  max-width: 56ch;
  margin: 0 auto 2.5rem;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
}

.hero-sub strong {
  color: #fff;
  font-weight: 600;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

/* -----------------------------------------------------------------------------
   5b. Customer strip (boxed logo marquee)
   ----------------------------------------------------------------------------- */

.customer-strip {
  /* Temporarily hidden — layout isn't landing yet. Markup stays in place. */
  display: none;
  /* Boxed container matching the .spec-strip telemetry card. */
  max-width: 860px;
  margin: 0 auto;
  border: 1px solid var(--raad-hairline-strong);
  border-radius: 12px;
  background: rgba(4, 18, 14, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

/* When rendered right after the hero spec strip, tuck up under it (the spec
   strip carries a 22vh bottom margin reserved for the 3D scene below). */
.spec-strip + .customer-strip {
  margin-top: calc(-22vh + 1.25rem);
  margin-bottom: calc(22vh - 1.25rem);
}

.customer-strip__inner {
  display: flex;
  width: max-content;
  animation: customer-marquee 36s infinite;
}

.customer-strip:hover .customer-strip__inner { animation-play-state: paused; }

.customer-strip__track {
  display: flex;
  align-items: center;
}

.customer-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.55rem;
  padding: 1.1rem 2.4rem;
  border-right: 1px solid var(--raad-hairline);
  white-space: nowrap;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.customer-strip__item:hover { opacity: 1; }

.customer-strip__logo {
  max-height: 32px;
  width: auto;
  filter: grayscale(1) brightness(1.4);
}

.customer-strip__item:hover .customer-strip__logo { filter: none; }

.customer-strip__name {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.customer-strip__industry {
  font-family: var(--raad-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--raad-text-faint);
}

/* Stepped marquee: the row glides one increment, dwells, then steps again —
   loops seamlessly because the track is duplicated (0% == -50%). */
@keyframes customer-marquee {
  0%            { transform: translateX(0); }
  9%, 12.5%     { transform: translateX(-6.25%); }
  21.5%, 25%    { transform: translateX(-12.5%); }
  34%, 37.5%    { transform: translateX(-18.75%); }
  46.5%, 50%    { transform: translateX(-25%); }
  59%, 62.5%    { transform: translateX(-31.25%); }
  71.5%, 75%    { transform: translateX(-37.5%); }
  84%, 87.5%    { transform: translateX(-43.75%); }
  96.5%, 100%   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .customer-strip__inner { animation: none; }
}

/* -----------------------------------------------------------------------------
   5c. Hero demo (shared/_demo_player with large: true)
   ----------------------------------------------------------------------------- */

/* Wider than the 1140px container: up to the 1440px the demos are recorded at
   (the app plays at its real size), and never taller than the window, so the
   whole frame is in view at once. 1.6 is the recordings' 16:10. */
.demo-player--large {
  --demo-player-large-width: min(100vw - 2 * clamp(1rem, 3vw, 2.5rem), 1440px, (100svh - 7rem) * 1.6);
  width: var(--demo-player-large-width);
  margin: 2.5rem 0 0 calc(50% - var(--demo-player-large-width) / 2);
}

/* Under the spec strip (and the customer strip once it shows), the 22vh the
   strips hold for the 3D scene moves below the demo, so the scene window
   follows it. */
.hero:has(> .demo-player--large) .spec-strip,
.hero:has(> .demo-player--large) .spec-strip + .customer-strip { margin-bottom: 0; }
.hero:has(> .demo-player--large) .spec-strip + .customer-strip { margin-top: 1.25rem; }
.hero > .demo-player--large { margin-bottom: 22vh; }

/* -----------------------------------------------------------------------------
   6. Spec strip (telemetry numbers)
   ----------------------------------------------------------------------------- */

.spec-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 860px;
  /* Generous gap before the 3D scene window so the backdrop gets room to
     breathe between the spec strip and the fly-in panels. */
  margin: 0 auto 22vh;
  border: 1px solid var(--raad-hairline-strong);
  border-radius: 12px;
  background: rgba(4, 18, 14, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.spec {
  padding: 1.7rem 1.25rem;
  text-align: center;
  border-right: 1px solid var(--raad-hairline);
}

.spec:last-child { border-right: none; }

.spec-value {
  font-family: var(--raad-font-mono);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--raad-cyan-bright);
  letter-spacing: -0.01em;
  line-height: 1;
}

.spec-label {
  display: block;
  margin-top: 0.65rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--raad-text-dim);
  text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   7. App hero frame (placeholder screenshot peeking above the fold)
   ----------------------------------------------------------------------------- */

/* Transparent window onto the 3D backdrop; taller than a viewport so the
   model gets an extended full-screen moment before the next section scrolls
   in, gently shrunk by hero_backdrop_controller as the user scrolls. */
.hero-model-spacer {
  position: relative;
  height: 140vh;
  pointer-events: none;
  /* Break out of the .container so the fly-in panels land hugging the
     viewport edges (1em in), keeping the workspace between them as big as
     possible. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* UI fragments overlaid on the full-page 3D view; they fly in from offscreen
   when the spacer scrolls into view (fly_in_controller adds .is-in). */

.hero-model-ui {
  position: absolute;
  top: 50%;
  opacity: 0;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.7s ease;
  will-change: transform, opacity;
}

.hero-model-ui--right {
  right: 1em;
  transform: translate(70vw, -50%);
}

.hero-model-ui--left {
  left: 1em;
  transform: translate(-70vw, -50%);
}

.hero-model-ui.is-in {
  opacity: 1;
  transform: translate(0, -50%);
  /* The spacer is pointer-events: none so scroll/clicks reach the page;
     re-enable on the landed panels so detector rows can be hovered. */
  pointer-events: auto;
}

.hero-model-ui--left.is-in { transition-delay: 0.1s; }

@media (prefers-reduced-motion: reduce) {
  .hero-model-ui {
    transition: none;
    opacity: 1;
    transform: translate(0, -50%);
  }
}

.app-frame-wrap {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 0.5rem;
}

.app-frame-wrap::before {
  content: "";
  position: absolute;
  inset: -10% 10% 30% 10%;
  background: radial-gradient(60% 60% at 50% 40%, rgba(47, 179, 159, 0.16), transparent 70%);
  filter: blur(40px);
  z-index: -1;
}

.app-frame {
  border: 1px solid var(--raad-hairline-strong);
  border-radius: 14px 14px 0 0;
  border-bottom: none;
  background: #05140f;
  overflow: hidden;
  box-shadow: 0 -2px 80px rgba(0, 0, 0, 0.6);
}

.app-frame-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--raad-hairline);
  background: rgba(255, 255, 255, 0.015);
}

.app-frame-bar .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--raad-hairline-strong);
}

.app-frame-bar .addr {
  margin-left: 0.75rem;
  font-family: var(--raad-font-mono);
  font-size: 0.72rem;
  color: var(--raad-text-faint);
}

.app-frame-canvas {
  position: relative;
  aspect-ratio: 16 / 8.2;
  background:
    linear-gradient(rgba(47, 179, 159, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 179, 159, 0.03) 1px, transparent 1px),
    radial-gradient(120% 120% at 70% 30%, #0a1f19, #04120e 70%);
  background-size: 40px 40px, 40px 40px, 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-frame-canvas .placeholder-tag {
  font-family: var(--raad-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--raad-text-faint);
  border: 1px dashed var(--raad-hairline-strong);
  padding: 0.6rem 1.1rem;
  border-radius: 6px;
}

.app-caption {
  text-align: center;
  font-size: 0.85rem;
  color: var(--raad-text-faint);
  margin-top: 1.25rem;
}

/* -----------------------------------------------------------------------------
   8. Page hero (interior pages)
   ----------------------------------------------------------------------------- */

.page-hero {
  padding: 4.5rem 0 2.5rem;
  text-align: center;
}

.page-hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 0.6rem;
}

.page-hero p {
  font-size: 1.05rem;
  color: var(--raad-text-dim);
  max-width: 54ch;
  margin: 0 auto;
}

.page-hero .hero-region {
  font-family: var(--raad-font-mono, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--raad-accent, #2fb39f);
  margin-bottom: 0.75rem;
}

/* -----------------------------------------------------------------------------
   9. Sections
   ----------------------------------------------------------------------------- */

.page-section { padding: 4rem 0; }
.page-section + .page-section { border-top: 1px solid var(--raad-hairline); }

/* Flush variant: no top border, tighter padding (e.g. hero image sets). */
.page-section--flush { padding: 1.5rem 0 0; }
.page-section--flush + .page-section { border-top: none; }

.section-title {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 0.4rem;
}

.feature-group-section { margin-bottom: 3.5rem; }

.feature-group-section h2 {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.3rem;
}

.feature-group-section > p {
  color: var(--raad-text-dim);
  margin-bottom: 1.4rem;
}

/* -----------------------------------------------------------------------------
   10. Cards / feature grid
   ----------------------------------------------------------------------------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.feature-card--demo { padding-top: 0; overflow: hidden; }

.feature-card__media {
  display: block;
  margin: 0 -1.5rem 1rem;
  background: #000;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.feature-card__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

article {
  background: var(--raad-surface);
  border: 1px solid var(--raad-hairline);
  border-radius: 12px;
  padding: 1.5rem;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

article:hover {
  border-color: var(--raad-hairline-strong);
}

article h2,
article h3 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 0.4rem;
}

article h3 a { color: var(--raad-text); text-decoration: none; }
article h3 a:hover { color: var(--raad-cyan-bright); }

article p {
  font-size: 0.88rem;
  color: var(--raad-text-dim);
  margin-bottom: 0;
  line-height: 1.5;
}

/* -----------------------------------------------------------------------------
   11. Blog meta / tags
   ----------------------------------------------------------------------------- */

.post-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--raad-font-mono);
  font-size: 0.74rem;
  color: var(--raad-text-faint);
  margin-bottom: 0.7rem;
}

.post-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.8rem; }

.post-tag {
  font-family: var(--raad-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  background: var(--raad-cyan-dim);
  color: var(--raad-cyan-bright);
  border: 1px solid rgba(47, 179, 159, 0.22);
}

/* Blog index cards */

.post-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
}

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.post-card:hover {
  border-color: var(--raad-hairline-strong);
  transform: translateY(-2px);
}

.post-card-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 1px solid var(--raad-hairline);
}

.post-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.4rem 1.5rem 1.5rem;
}

.post-card h3 {
  font-size: 1.15rem;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

/* Stretch the title link so the whole card is clickable. */
.post-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.post-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.post-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.1rem;
}

.post-card .post-tags { margin-top: 0; }

.post-read-more {
  font-family: var(--raad-font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--raad-text-faint);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.post-read-more::after {
  content: " \2192";
}

[dir="rtl"] .post-read-more::after {
  content: " \2190";
}

.post-card:hover .post-read-more { color: var(--raad-cyan-bright); }

/* Latest post gets a full-width featured card. */
.post-card--featured { grid-column: 1 / -1; }

.post-card--featured h3 {
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  letter-spacing: -0.025em;
}

.post-card--featured .post-excerpt {
  -webkit-line-clamp: 3;
  line-clamp: 3;
  max-width: 68ch;
  font-size: 0.95rem;
}

@media (min-width: 760px) {
  .post-card--featured { flex-direction: row; }

  .post-card--featured .post-card-media {
    flex: 0 0 45%;
    min-height: 100%;
  }

  .post-card--featured .post-card-media img {
    height: 100%;
    aspect-ratio: auto;
    border-bottom: none;
    border-inline-end: 1px solid var(--raad-hairline);
  }

  .post-card--featured .post-card-body {
    padding: 2rem;
    justify-content: center;
  }

  .post-card--featured .post-card-footer { margin-top: 1.2rem; }
}

/* Post header (blog post show) */

.post-header {
  margin: 1.5rem 0 1rem;
}

.post-header h1 {
  margin-bottom: 0.7rem;
  letter-spacing: -0.03em;
}

.post-header .post-meta { margin-bottom: 0; }

.post-header .post-tags { margin-top: 0.9rem; }

.post-header .post-languages {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--raad-hairline);
}

/* Language names render poorly in the mono face (esp. Arabic/CJK). */
.post-languages a {
  font-family: inherit;
  font-size: 0.9rem;
}

.post-cover {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--raad-hairline);
  margin: 1.5rem 0;
}

/* Article body (blog post / feature show) */

.post-body {
  max-width: 68ch;
  margin-top: 1.5rem;
  line-height: 1.65;
}

.post-body h2,
.post-body h3,
.post-body h4 {
  letter-spacing: -0.02em;
  margin: 1.6em 0 0.5em;
}

.post-body img,
.post-body action-text-attachment img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--raad-hairline);
  margin: 1rem 0;
}

.post-body figcaption {
  font-family: var(--raad-font-mono);
  font-size: 0.74rem;
  color: var(--raad-text-faint);
  text-align: center;
}

.post-body blockquote {
  border-inline-start: 3px solid var(--raad-cyan-dim);
  padding-inline-start: 1rem;
  color: var(--raad-text-dim);
}

/* Author bio card (blog post show) */

.author-bio {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  margin-top: 2.5rem;
  padding: 1.4rem 1.5rem;
  background: var(--raad-surface);
  border: 1px solid var(--raad-hairline);
  border-radius: 12px;
}

.author-bio-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--raad-hairline-strong);
}

.author-bio-name {
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 0.25rem;
}

.author-bio-text {
  font-size: 0.88rem;
  color: var(--raad-text-dim);
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.author-bio-links {
  display: flex;
  gap: 0.9rem;
  font-family: var(--raad-font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
}

.author-bio-links a {
  color: var(--raad-cyan-bright);
  text-decoration: none;
}

.author-bio-links a:hover { text-decoration: underline; }

/* "Originally written in … / Read in:" language line */

.post-languages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  font-family: var(--raad-font-mono);
  font-size: 0.76rem;
  color: var(--raad-text-faint);
}

.post-languages a {
  color: var(--raad-cyan-bright);
  text-decoration: none;
}

.post-languages a:hover { text-decoration: underline; }

.post-languages label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

/* Compact inline select — overrides Pico's full-width form styling. */
.post-languages__select {
  width: auto;
  margin: 0;
  padding: 0.2rem 1.8rem 0.2rem 0.7rem;
  font-family: var(--raad-font-mono);
  font-size: 0.76rem;
  color: var(--raad-cyan-bright);
  background-color: rgba(8, 10, 11, 0.9);
  border: 1px solid var(--raad-hairline-strong);
  border-radius: 6px;
  cursor: pointer;
}

.post-languages__select:focus {
  outline: none;
  border-color: var(--raad-cyan, #2fb39f);
}

/* -----------------------------------------------------------------------------
   11b. Careers
   ----------------------------------------------------------------------------- */

.careers-filters {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1rem;
}

.careers-filter-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.careers-filter-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.careers-filter-label {
  font-family: var(--raad-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--raad-text-faint);
  min-width: 6.5rem;
}

.careers-filter-pill {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--raad-text-dim);
  text-decoration: none;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--raad-hairline);
  background: var(--raad-surface);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.careers-filter-pill:hover {
  border-color: var(--raad-hairline-strong);
  color: var(--raad-text);
}

.careers-filter-pill--active {
  background: var(--raad-cyan-dim);
  border-color: rgba(47, 179, 159, 0.35);
  color: var(--raad-cyan-bright);
}

@media (max-width: 640px) {
  .careers-filters { gap: 1rem; }

  .careers-filter-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .careers-filter-label { min-width: 0; }

  /* Chips scroll horizontally in one row, bleeding to the viewport edges. */
  .careers-filter-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 0.15rem clamp(1rem, 5vw, 2rem);
  }

  .careers-filter-pills::-webkit-scrollbar { display: none; }

  .careers-filter-pill {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0.45rem 0.95rem;
  }
}

/* Hero link that jumps down to the culture section */
.careers-scroll-link {
  display: inline-block;
  margin-top: 1.5rem;
  font-family: var(--raad-font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--raad-text-faint);
  text-decoration: none;
  transition: color 0.15s ease;
}

.careers-scroll-link:hover { color: var(--raad-cyan-bright); }

/* "Working at RAAD" culture section */
.careers-culture {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--raad-hairline);
  scroll-margin-top: 5rem;
}

.careers-culture h2 {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 0.6rem;
}

.careers-culture-intro {
  font-size: 0.95rem;
  color: var(--raad-text-dim);
  max-width: 58ch;
  margin-bottom: 1.75rem;
}

.careers-values {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.careers-value h3 { margin-bottom: 0.45rem; }

@media (max-width: 640px) {
  .careers-values { grid-template-columns: 1fr; }
}

.careers-department { margin-top: 2.5rem; }

.careers-department h2 {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 0.9rem;
}

.careers-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.careers-card h3 { margin-bottom: 0.5rem; }

.careers-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-family: var(--raad-font-mono);
  font-size: 0.74rem;
  color: var(--raad-text-faint);
}

/* Job detail: facts box under the hero */
.careers-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  max-width: 760px;
  margin: 0 auto 2.5rem;
  padding: 1.25rem 1.75rem;
  background: var(--raad-surface);
  border: 1px solid var(--raad-hairline);
  border-radius: 12px;
}

.careers-fact {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.careers-fact-label {
  font-family: var(--raad-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--raad-text-faint);
}

.careers-fact-value {
  font-size: 0.9rem;
  color: var(--raad-text);
}

/* Job detail: shared About RAAD box */
.careers-about {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.5rem 1.75rem;
  background: var(--raad-surface);
  border: 1px solid var(--raad-hairline);
  border-radius: 12px;
}

.careers-about h2 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
}

.careers-about p {
  font-size: 0.88rem;
  color: var(--raad-text-dim);
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.careers-about p:last-child { margin-bottom: 0; }

/* Job detail: centered back-to-roles button */
.careers-back {
  max-width: 760px;
  margin: 2rem auto 0;
  text-align: center;
}

.careers-back-button {
  display: inline-block;
  padding: 0.55rem 1.4rem;
  border: 1px solid var(--raad-hairline-strong);
  border-radius: 999px;
  background: var(--raad-surface);
  color: var(--raad-text);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.careers-back-button:hover {
  border-color: var(--raad-cyan-bright);
  background: var(--raad-cyan-dim);
}

/* Job detail: rich-text description typography */
.careers-description {
  max-width: 760px;
  margin: 0 auto;
}

.careers-description h2 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 2.25rem 0 0.75rem;
}

.careers-description p {
  color: var(--raad-text-dim);
  line-height: 1.65;
  margin-bottom: 1rem;
}

.careers-description ul {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
}

.careers-description li {
  color: var(--raad-text-dim);
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

/* Job detail: benefits */
.careers-benefits {
  max-width: 760px;
  margin: 3rem auto 0;
}

.careers-benefits h2 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 1.25rem;
}

.careers-benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1rem;
}

.careers-benefit {
  background: var(--raad-surface);
  border: 1px solid var(--raad-hairline);
  border-radius: 12px;
  padding: 1.25rem 1.4rem;
}

.careers-benefit h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.careers-benefit p {
  font-size: 0.85rem;
  color: var(--raad-text-dim);
  line-height: 1.55;
  margin-bottom: 0;
}

.careers-apply {
  max-width: 760px;
  margin: 3rem auto 0;
  padding: 1.75rem;
  background: var(--raad-surface);
  border: 1px solid var(--raad-hairline);
  border-radius: 12px;
}

.careers-apply h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}

/* -----------------------------------------------------------------------------
   12. Breadcrumb
   ----------------------------------------------------------------------------- */

.breadcrumb {
  font-family: var(--raad-font-mono);
  font-size: 0.78rem;
  color: var(--raad-text-faint);
  margin-bottom: 2rem;
}

.breadcrumb a { color: var(--raad-text-dim); text-decoration: none; }
.breadcrumb a:hover { color: var(--raad-cyan-bright); }
.breadcrumb span { margin: 0 0.5rem; color: var(--raad-hairline-strong); }

/* -----------------------------------------------------------------------------
   12b. Image sets (column-flow masonry, rendered by image_set_for helper)
   ----------------------------------------------------------------------------- */

.image-set {
  columns: var(--image-set-columns, 4);
  column-gap: 1.25rem;
  width: 100%;
}

.image-set__item {
  margin: 0 0 1.25rem;
  break-inside: avoid;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--raad-hairline);
}

.image-set__item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.image-set__item:hover img {
  transform: scale(1.03);
}

@media (max-width: 1199px) {
  .image-set { columns: min(3, var(--image-set-columns, 3)); }
}

@media (max-width: 767px) {
  .image-set { columns: 2; column-gap: 0.75rem; }
  .image-set__item { margin-bottom: 0.75rem; }
}

@media (max-width: 575px) {
  .image-set { columns: 1; }
}

/* Freeform grid variant — unit-square 32×48 grid arranged in the admin.
   The wrapper is the size container; row height tracks its width (cqw) so
   cells stay perfectly square at any viewport. */
.image-set-grid-wrap {
  container-type: inline-size;
  width: 100%;
}

.image-set--grid {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 32), 1fr);
  grid-template-rows: repeat(var(--grid-rows, 48), calc(100cqw / var(--grid-cols, 32)));
  width: 100%;
}

.image-set--grid .image-set__cell {
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--raad-hairline);
}

.image-set--grid .image-set__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* -----------------------------------------------------------------------------
   12d. App screen (pseudo app experience: real UI fragments in a frame)
   ----------------------------------------------------------------------------- */

.app-screen {
  position: relative;
  border: 1px solid var(--raad-hairline-strong);
  border-radius: 14px;
  background: var(--raad-bg);
  overflow: hidden;
  box-shadow: 0 32px 96px rgba(0, 0, 0, 0.55);
}

.app-screen__chrome {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.2rem;
  padding: 0 1rem;
  border-bottom: 1px solid var(--raad-hairline);
  background: rgba(255, 255, 255, 0.03);
}

.app-screen__chrome span {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--raad-hairline-strong);
}

.app-screen__chrome .addr {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  margin-left: 0.75rem;
  font-family: var(--raad-font-mono);
  font-size: 0.72rem;
  color: var(--raad-text-faint);
}

.app-screen__viewport {
  position: relative;
  aspect-ratio: 16 / 9;
}

.app-screen__viewport canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.app-screen__overlay {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 5;
}

/* -----------------------------------------------------------------------------
   13. Footer
   ----------------------------------------------------------------------------- */

body > footer {
  margin-top: 5rem;
  padding: 3.5rem 0 2rem;
  border-top: 1px solid var(--raad-hairline);
  font-size: 0.85rem;
  color: var(--raad-text-dim);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.footer-brand p {
  margin-top: 1rem;
  max-width: 28ch;
  color: var(--raad-text-faint);
}

/* Each column is a <nav>, which Pico lays out as a flex row (heading beside
   an inline link list). Reset to a plain stacked column. */
.footer-col {
  display: block;
}

.footer-col h3 {
  font-family: var(--raad-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--raad-text-faint);
  margin-bottom: 0.9rem;
}

.footer-col ul,
.footer-col ul:first-of-type {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li {
  display: block;
  margin: 0 0 0.55rem;
  padding: 0;
  list-style: none;
}

.footer-col a {
  display: inline-block;
  padding: 0;
  margin: 0;
  color: var(--raad-text-dim);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-col a:hover { color: #fff; }

/* Live status beacon (status_beacon_controller.js sets data-state) */
.status-link {
  display: inline-flex !important;
  align-items: center;
  gap: 0.45rem;
}

.status-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--raad-text-faint);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.status-link[data-state="up"] .status-dot {
  background: var(--raad-cyan);
  box-shadow: 0 0 8px var(--raad-cyan);
}

.status-link[data-state="mixed"] .status-dot {
  background: #e0a83c;
  box-shadow: 0 0 8px rgba(224, 168, 60, 0.7);
}

.status-link[data-state="down"] .status-dot {
  background: var(--raad-orange);
  box-shadow: 0 0 8px rgba(250, 70, 5, 0.7);
}

@media (prefers-reduced-motion: no-preference) {
  .status-link[data-state="up"] .status-dot { animation: raad-pulse 2.4s ease-in-out infinite; }
}

.footer-legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--raad-hairline);
  font-family: var(--raad-font-mono);
  font-size: 0.78rem;
  color: var(--raad-text-faint);
}

.footer-legal p { margin: 0; }

.footer-legal a {
  color: var(--raad-text-faint);
  text-decoration: none;
}

.footer-legal a:hover { color: #fff; }

/* -----------------------------------------------------------------------------
   14. Integrations & delivery section
   ----------------------------------------------------------------------------- */

.section-lead {
  text-align: center;
  max-width: 62ch;
  margin: 0 auto 3rem;
}

.section-lead .eyebrow { margin-bottom: 1rem; }

.section-lead h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  max-width: 22ch;
  margin: 0 auto 1rem;
}

.section-lead p {
  font-size: 1.05rem;
  color: var(--raad-text-dim);
  max-width: 56ch;
  margin: 0 auto;
}

.cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.cap-card {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
}

.cap-kicker {
  font-family: var(--raad-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--raad-cyan);
  margin-bottom: 0.9rem;
}

.cap-card h3 {
  font-size: 1.1rem;
  line-height: 1.25;
  margin-bottom: 0.6rem;
}

.cap-card p {
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--raad-text-dim);
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.25rem;
}

.chip {
  font-family: var(--raad-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  padding: 0.28rem 0.6rem;
  border-radius: 5px;
  color: var(--raad-text);
  background: var(--raad-surface-hover);
  border: 1px solid var(--raad-hairline);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.chip:hover {
  border-color: rgba(47, 179, 159, 0.4);
  color: var(--raad-cyan-bright);
}

.cap-wide {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 2.5rem;
  align-items: center;
  margin-top: 1rem;
  padding: 2rem;
  border: 1px solid var(--raad-hairline);
  border-radius: 14px;
  background: var(--raad-surface);
}

.cap-wide-text h3 {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.18;
  margin-bottom: 0.7rem;
}

.cap-wide-text p {
  color: var(--raad-text-dim);
  font-size: 0.98rem;
  line-height: 1.6;
}

.cap-wide-visual .app-frame { border-radius: 12px; border-bottom: 1px solid var(--raad-hairline-strong); }
.app-frame-canvas--compact { aspect-ratio: 16 / 9; }
.cap-wide-visual .app-caption { margin-top: 0.9rem; }

.cta-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 3rem;
  padding: 2.25rem 2.5rem;
  border: 1px solid var(--raad-hairline-strong);
  border-radius: 14px;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(47, 179, 159, 0.08), transparent 55%),
    var(--raad-surface);
}

.cta-banner h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  letter-spacing: -0.025em;
  margin-bottom: 0.35rem;
}

.cta-banner p {
  color: var(--raad-text-dim);
  margin-bottom: 0;
  font-size: 0.98rem;
}

/* Coverage CTA — sits below the coverage map's stats strip. */
.coverage-band__cta {
  margin: 2rem 0 0;
  text-align: center;
}

/* How it works — the /lp numbered cards, three-up on the home page. */
#how-it-works .lp-cards { grid-template-columns: repeat(3, 1fr); }

/* The fork — self-serve vs. teams banners side by side. */
.fork-band {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.fork-band .cta-banner {
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

@media (max-width: 768px) {
  #how-it-works .lp-cards { grid-template-columns: 1fr; }
  .fork-band { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
   15. Tactical HUD accents (Minority Report / COD — nuanced)
   ----------------------------------------------------------------------------- */

/* Viewport corner registration brackets — frames the whole screen like a HUD */
body::before {
  content: "";
  position: fixed;
  inset: 14px;
  z-index: 2;
  pointer-events: none;
  --b: 18px;
  --bc: rgba(47, 179, 159, 0.26);
  background:
    linear-gradient(var(--bc), var(--bc)) top left / var(--b) 1px no-repeat,
    linear-gradient(var(--bc), var(--bc)) top left / 1px var(--b) no-repeat,
    linear-gradient(var(--bc), var(--bc)) top right / var(--b) 1px no-repeat,
    linear-gradient(var(--bc), var(--bc)) top right / 1px var(--b) no-repeat,
    linear-gradient(var(--bc), var(--bc)) bottom left / var(--b) 1px no-repeat,
    linear-gradient(var(--bc), var(--bc)) bottom left / 1px var(--b) no-repeat,
    linear-gradient(var(--bc), var(--bc)) bottom right / var(--b) 1px no-repeat,
    linear-gradient(var(--bc), var(--bc)) bottom right / 1px var(--b) no-repeat;
}

/* Faint CRT scanlines over the page */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.018) 0,
    rgba(255, 255, 255, 0.018) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* Panel corner brackets */
.app-frame,
.cta-banner,
.cap-wide,
.cap-card,
.spec-strip { position: relative; }

.app-frame::after,
.cta-banner::after,
.cap-wide::after,
.cap-card::after,
.spec-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  --b: 13px;
  --bc: rgba(47, 179, 159, 0.55);
  background:
    linear-gradient(var(--bc), var(--bc)) top left / var(--b) 1px no-repeat,
    linear-gradient(var(--bc), var(--bc)) top left / 1px var(--b) no-repeat,
    linear-gradient(var(--bc), var(--bc)) top right / var(--b) 1px no-repeat,
    linear-gradient(var(--bc), var(--bc)) top right / 1px var(--b) no-repeat,
    linear-gradient(var(--bc), var(--bc)) bottom left / var(--b) 1px no-repeat,
    linear-gradient(var(--bc), var(--bc)) bottom left / 1px var(--b) no-repeat,
    linear-gradient(var(--bc), var(--bc)) bottom right / var(--b) 1px no-repeat,
    linear-gradient(var(--bc), var(--bc)) bottom right / 1px var(--b) no-repeat;
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

.spec-strip::after { opacity: 0.3; }
.cta-banner::after { opacity: 0.6; }
.cap-card::after { opacity: 0; }
.cap-card:hover::after { opacity: 0.6; }

/* Animated scan sweep inside the app viewport */
.app-frame-canvas::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -2%;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(47, 179, 159, 0.55), transparent);
  box-shadow: 0 0 14px rgba(47, 179, 159, 0.45);
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .app-frame-canvas::after { animation: raad-scan 6.5s linear infinite; }
  .eyebrow::before { animation: raad-pulse 2.4s ease-in-out infinite; }
}

@keyframes raad-scan {
  0%   { top: -2%;  opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.9; }
  100% { top: 100%; opacity: 0; }
}

@keyframes raad-pulse {
  0%, 100% { box-shadow: 0 0 6px var(--raad-cyan); opacity: 0.65; }
  50%      { box-shadow: 0 0 16px var(--raad-cyan); opacity: 1; }
}

/* -----------------------------------------------------------------------------
   16. Responsive
   ----------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .hero { padding-top: 3.5rem; }
  /* No app-UI panels on mobile — the 3D model keeps its full-screen moment
     (the spacer must stay: the backdrop's scroll fade is keyed off it). */
  .hero-model-ui { display: none; }
  /* The Baklava node editor is a desktop demo — hide the whole section. */
  .node-editor-section { display: none; }
  .spec-strip { grid-template-columns: repeat(2, 1fr); }
  .spec:nth-child(2) { border-right: none; }
  .spec:nth-child(1), .spec:nth-child(2) { border-bottom: 1px solid var(--raad-hairline); }
  .feature-grid { grid-template-columns: 1fr; }
  .cap-wide { grid-template-columns: 1fr; gap: 1.75rem; padding: 1.5rem; }
  .cta-banner { padding: 1.75rem; }
  /* --- Mobile sandwich menu --------------------------------------------- */
  .nav-toggle { display: flex; order: 2; }

  body > header nav { flex-wrap: wrap; }

  .nav-links { display: none; }

  header.nav-open {
    background: rgba(4, 12, 11, 0.97);
    max-height: 100dvh;
    overflow-y: auto;
  }

  header.nav-open .nav-links {
    order: 3;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0.5rem;
    padding: 0.85rem 0 0.35rem;
  }

  header.nav-open .nav-actions {
    flex-direction: row;
    padding-top: 0.25rem;
    padding-bottom: 1.1rem;
  }

  header.nav-open .nav-actions > li { flex: 1; }
  header.nav-open .nav-actions > li > a { width: 100%; justify-content: center; }

  header.nav-open .nav-links > li > a,
  header.nav-open .nav-dropdown summary {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 0.8rem 1.1rem;
  }

  /* Dropdowns become inline accordions instead of floating panels. */
  header.nav-open .nav-dropdown-menu {
    position: static;
    width: 100%;
    margin: 0.4rem 0 0.2rem;
    box-shadow: none;
  }

  body.nav-open-lock { overflow: hidden; }
}

/* -----------------------------------------------------------------------------
   17. Ad landing pages (/lp — chrome-free layout, full-bleed image hero)
   ----------------------------------------------------------------------------- */

.lp-body { background-image: none; }

.lp-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 1.5rem clamp(1.25rem, 4vw, 3rem);
}

.lp-main { padding: 0; }

/* Hero — full viewport, transparent by default so the page/backdrop shows
   through (no boxed-in black panel). When the hero carries its own inline
   background image, restore the base color + readability scrim. */
.lp-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: 6rem clamp(1.25rem, 4vw, 3rem) 5rem;
  /* Industry pages render inside the app layout's main.container — bleed
     the hero out to the viewport edges (no inner padding / boxed panel). */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background-color: transparent;
  background-size: cover;
  background-position: center;
}

.lp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
}

.lp-hero[style*="background-image"] { background-color: var(--raad-bg); }

.lp-hero[style*="background-image"]::before {
  background:
    linear-gradient(to right, rgba(6, 8, 12, 0.82) 0%, rgba(6, 8, 12, 0.45) 55%, rgba(6, 8, 12, 0.25) 100%),
    linear-gradient(to bottom, rgba(6, 8, 12, 0.55) 0%, transparent 30%, rgba(6, 8, 12, 0.6) 100%);
}

/* Point-cloud variant: the fixed .hero-backdrop streams behind the hero and
   carries its own scrim — no extra ::before box on top. */
.lp-hero--scan::before { display: none; }

.lp-hero__inner {
  position: relative;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}

.lp-hero__eyebrow {
  font-family: var(--raad-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--raad-cyan);
  margin-bottom: 1.25rem;
}

.lp-hero__headline {
  font-family: var(--raad-font-display);
  font-size: clamp(2.5rem, 6.5vw, 4.75rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  max-width: 14ch;
  margin-bottom: 1.5rem;
}

.lp-hero__subheadline {
  font-size: 1.1rem;
  color: var(--raad-text-dim);
  max-width: 44ch;
  margin-bottom: 2rem;
}

.lp-hero__subheadline b,
.lp-hero__subheadline strong { color: var(--raad-text); }

.lp-hero__cta { margin-bottom: 0.85rem; }

.lp-btn {
  gap: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.lp-hero__microcopy {
  font-size: 0.8rem;
  color: var(--raad-text-faint);
}

.lp-hero__scroll {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--raad-text-faint);
  text-decoration: none;
  font-size: 1.1rem;
  animation: lp-scroll-bob 2.2s ease-in-out infinite;
}

@keyframes lp-scroll-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 6px); }
}

/* Stats strip — reuses the homepage .spec-strip; this wrapper only positions
   it and resets the homepage's oversized bottom margin. */
.lp-stats {
  max-width: 1140px;
  margin: 0 auto;
  padding: 2.25rem clamp(1.25rem, 4vw, 3rem);
}

.lp-stats .spec-strip {
  /* LPs show 3 or 4 stats depending on coverage. */
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  margin: 0 auto;
}

/* Stack one stat per row on mobile. Must live AFTER the auto-fit rule above:
   same specificity, so source order decides the winner. */
@media (max-width: 768px) {
  .lp-stats .spec-strip { grid-template-columns: 1fr; }
  .lp-stats .spec { border-right: none; border-bottom: 1px solid var(--raad-hairline); }
  .lp-stats .spec:last-child { border-bottom: none; }
}

/* Content sections with numbered cards */
.lp-section {
  max-width: 1140px;
  margin: 0 auto;
  padding: 4rem clamp(1.25rem, 4vw, 3rem);
}

.lp-section--flush { padding-top: 0; padding-bottom: 0; }

.lp-section__head {
  text-align: center;
  max-width: 62ch;
  margin: 0 auto 2.75rem;
}

.lp-section__head h2 {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
}

.lp-section__intro {
  font-size: 0.9rem;
  color: var(--raad-text-dim);
}

.lp-section__intro p { margin: 0; }

.lp-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.lp-card {
  background: #0a1b16;
  border: 1px solid var(--raad-hairline);
  border-radius: 10px;
  padding: 1.75rem;
  margin: 0;
}

.lp-card__number {
  font-family: var(--raad-font-mono);
  font-size: 0.75rem;
  color: var(--raad-cyan);
  margin-bottom: 0.85rem;
}

.lp-card__title {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.lp-card__body {
  font-size: 0.86rem;
  color: var(--raad-text-dim);
}

.lp-card__body p { margin: 0 0 0.5rem; }
.lp-card__body p:last-child { margin-bottom: 0; }

/* Minimal footer */
.lp-footer {
  border-top: 1px solid var(--raad-hairline);
  padding: 1.75rem clamp(1.25rem, 4vw, 3rem);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--raad-text-faint);
}

.lp-footer p { margin: 0; }
.lp-footer a { color: var(--raad-text-dim); text-decoration: none; }
.lp-footer a:hover { color: var(--raad-text); }

@media (max-width: 768px) {
  .lp-cards { grid-template-columns: 1fr; }
  .lp-hero { min-height: 92svh; }
}

/* -----------------------------------------------------------------------------
   Node editor (BaklavaJS workflow demo — node_editor_controller.js)
   ----------------------------------------------------------------------------- */

.node-editor {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--raad-hairline-strong);
  border-radius: 12px;
  overflow: hidden;
  background: #04120e;
}

.node-editor-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--raad-hairline);
  background: rgba(255, 255, 255, 0.015);
}

.node-editor-title {
  font-family: var(--raad-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--raad-text-faint);
}

.node-editor-run {
  font-family: var(--raad-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  padding: 0.35rem 0.9rem;
  border-radius: 6px;
  border: 1px solid var(--raad-orange);
  background: var(--raad-orange);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.node-editor-run:hover {
  background: var(--raad-orange-bright);
  border-color: var(--raad-orange-bright);
}

.node-editor-canvas {
  position: relative;
  height: clamp(480px, 68vh, 760px);
}

.node-editor-canvas .baklava-editor {
  --baklava-editor-background-pattern-default: #04120e;
}

/* Bare canvas: hide all built-in Baklava chrome (toolbar, palette, minimap,
   sidebar) — the section supplies its own Run button. */
.node-editor .baklava-toolbar,
.node-editor .baklava-node-palette,
.node-editor .baklava-minimap,
.node-editor .baklava-sidebar { display: none !important; }

/* Dedicated full-width section (#workflows on the home page). The editor
   breaks out of the .container to span the viewport. */
.node-editor-section .app-caption {
  text-align: center;
  margin-top: 1.1rem;
}

.node-editor-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0 clamp(1rem, 3vw, 2.5rem);
}

.node-editor-bleed .node-editor { width: 100%; }

/* Toast notifications raised by the Notify node */
.node-editor-toasts {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(24rem, calc(100vw - 2.5rem));
}

.node-editor-toast {
  font-family: var(--raad-font-mono);
  font-size: 0.78rem;
  line-height: 1.45;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--raad-hairline-strong);
  background: rgba(4, 18, 14, 0.95);
  color: var(--raad-text);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  animation: node-editor-toast-in 0.25s ease;
}

.node-editor-toast--success {
  border-color: rgba(47, 179, 159, 0.45);
  color: var(--raad-cyan);
}

.node-editor-toast.is-leaving {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

@keyframes node-editor-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .node-editor-canvas { height: 420px; }
}

/* -----------------------------------------------------------------------------
   Hero overlay panels (hand-coded inspection UI over the 3D scene)
   ----------------------------------------------------------------------------- */

.hpanel {
  width: 264px;
  padding: 1.1rem 1.15rem;
  border: 1px solid var(--raad-hairline-strong);
  border-radius: 14px;
  background: rgba(4, 18, 14, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  font-family: var(--raad-font-body);
  text-align: left;
}

.hpanel-head { margin-bottom: 0.9rem; }

.hpanel-title {
  margin: 0 0 0.25rem;
  font-family: var(--raad-font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--raad-text);
  line-height: 1.25;
}

.hpanel-spec {
  margin: 0 0 0.45rem;
  font-family: var(--raad-font-mono);
  font-size: 0.68rem;
  color: var(--raad-text-dim);
  letter-spacing: 0.02em;
}

.hpanel-sync {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.7rem;
  color: var(--raad-text-faint);
}

/* Status dots */
.hpanel-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--raad-cyan);
  box-shadow: 0 0 8px rgba(47, 179, 159, 0.6);
}

.hpanel-dot--live { animation: hpanel-pulse 1.8s ease-in-out infinite; }

.hpanel-dot--armed {
  background: transparent;
  border: 1px solid var(--raad-text-faint);
  box-shadow: none;
}

@keyframes hpanel-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Capture timeline */
.hpanel-timeline {
  position: relative;
  padding: 1.1rem 0 0.2rem;
  margin-bottom: 0.9rem;
}

.tl-label {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-family: var(--raad-font-mono);
  font-size: 0.6rem;
  color: var(--raad-text-faint);
  white-space: nowrap;
}

.tl-label--current { color: var(--raad-cyan); }

.tl-track {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 16px;
}

.tl-tick {
  width: 1px;
  height: 8px;
  background: var(--raad-hairline-strong);
}

.tl-tick--capture {
  width: 3px;
  height: 14px;
  border-radius: 1px;
  background: rgba(47, 179, 159, 0.55);
}

.tl-tick--current {
  background: var(--raad-cyan);
  box-shadow: 0 0 10px rgba(47, 179, 159, 0.7);
}

.tl-years {
  display: flex;
  justify-content: space-between;
  margin-top: 0.3rem;
  font-family: var(--raad-font-mono);
  font-size: 0.6rem;
  color: var(--raad-text-faint);
}

/* Sections */
.hpanel-section {
  padding-top: 0.85rem;
  margin-top: 0.85rem;
  border-top: 1px solid var(--raad-hairline);
}

.hpanel-label {
  margin: 0 0 0.6rem;
  font-family: var(--raad-font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--raad-text-faint);
}

/* Buttons */
.hpanel-nav {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}

.hpanel-btn {
  flex: 1;
  padding: 0.32rem 0.7rem;
  font-family: var(--raad-font-mono);
  font-size: 0.68rem;
  color: var(--raad-text-dim);
  background: var(--raad-surface);
  border: 1px solid var(--raad-hairline-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.hpanel-btn:hover {
  color: var(--raad-cyan);
  border-color: rgba(47, 179, 159, 0.4);
  background: var(--raad-cyan-dim);
}

.hpanel-btn--pill {
  flex: none;
  width: auto;
  margin-top: 0.15rem;
}

/* Meta list (Current / Location / CRS) */
.hpanel-meta {
  display: grid;
  gap: 0.1rem;
  margin: 0 0 0.7rem;
}

.hpanel-meta dt {
  font-size: 0.66rem;
  color: var(--raad-text-faint);
  margin-top: 0.4rem;
}

.hpanel-meta dd {
  margin: 0;
  font-family: var(--raad-font-mono);
  font-size: 0.72rem;
  color: var(--raad-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Project files */
.hpanel-files {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.hpanel-files li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.76rem;
  color: var(--raad-text-dim);
}

.hpanel-filetag {
  flex: none;
  min-width: 3.2rem;
  text-align: center;
  padding: 0.12rem 0.45rem;
  font-family: var(--raad-font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--raad-text);
  background: var(--raad-surface-hover);
  border: 1px solid var(--raad-hairline-strong);
  border-radius: 5px;
}

.hpanel-foot { padding-bottom: 0.1rem; }

.hpanel-coords {
  margin: 0;
  font-family: var(--raad-font-mono);
  font-size: 0.7rem;
  color: var(--raad-cyan);
}

/* --- Right panel: tools / detectors / systems ------------------------------ */

.hpanel-toolrow {
  display: flex;
  gap: 0.4rem;
}

.hpanel-tool {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0;
  color: var(--raad-text-dim);
  background: var(--raad-surface);
  border: 1px solid var(--raad-hairline);
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.hpanel-tool svg { width: 16px; height: 16px; }

.hpanel-tool:hover {
  color: var(--raad-text);
  border-color: var(--raad-hairline-strong);
}

.hpanel-tool.is-active {
  color: var(--raad-cyan);
  border-color: rgba(47, 179, 159, 0.45);
  background: var(--raad-cyan-dim);
}

/* Key/value rows (measurements, detectors) */
.hpanel-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.hpanel-rows li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.74rem;
  color: var(--raad-text-dim);
}

.hpanel-rows li > span:first-of-type:not(.hpanel-dot) { flex: 1; }
.hpanel-rows--detectors li > span:nth-of-type(2) { flex: 1; }

/* Detector rows reveal a capture frustum in the 3D scene on hover. */
.hpanel-detector {
  margin: 0 -0.45rem;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.hpanel-detector:hover {
  background: rgba(255, 74, 61, 0.1);
  color: var(--raad-text);
}

.hpanel-val {
  font-family: var(--raad-font-mono);
  font-size: 0.7rem;
  color: var(--raad-text);
}

.hpanel-val--warn { color: #f0c674; }

/* System health bars */
.hpanel-systems {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.hpanel-systems li {
  display: grid;
  grid-template-columns: 1fr 56px auto;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.74rem;
  color: var(--raad-text-dim);
}

.hpanel-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.hpanel-bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--raad-cyan);
}

.hpanel-bar--warn i { background: #f0c674; }

.hpanel-badge {
  font-family: var(--raad-font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  border: 1px solid;
}

.hpanel-badge--ok {
  color: var(--raad-cyan);
  border-color: rgba(47, 179, 159, 0.35);
}

.hpanel-badge--warn {
  color: #f0c674;
  border-color: rgba(240, 198, 116, 0.35);
}

/* Telemetry footer with scanning strip */
.hpanel-telemetry {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.55rem;
  font-family: var(--raad-font-mono);
  font-size: 0.66rem;
  color: var(--raad-text-dim);
}

.hpanel-scan {
  position: relative;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.hpanel-scan i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30%;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(47, 179, 159, 0.8), transparent);
  animation: hpanel-scan 2.4s linear infinite;
}

@keyframes hpanel-scan {
  from { left: -30%; }
  to   { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hpanel-dot--live { animation: none; }
  .hpanel-scan i { animation: none; left: 35%; }
}

@media (max-width: 900px) {
  .hpanel { width: 224px; padding: 0.9rem 0.95rem; }
}

/* --- Demo feature page: point-cloud hero + large scroll-driven video ---------- */

.demo-feature-page .hero {
  min-height: auto;
  padding-bottom: 0;
}

.demo-feature-page .hero::before {
  background:
    linear-gradient(to bottom, rgba(6, 8, 12, 0.55) 0%, transparent 40%, rgba(6, 8, 12, 0.9) 100%);
}

.demo-feature-hero {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 8rem 1.5rem 0;
}

.demo-feature-hero__eyebrow {
  font-family: var(--raad-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--raad-cyan);
  margin-bottom: 1rem;
}

.demo-feature-hero__title {
  font-family: var(--raad-font-display);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  max-width: 16ch;
  margin-bottom: 1rem;
}

.demo-feature-hero__tagline {
  font-size: 1.1rem;
  color: var(--raad-text-dim);
  max-width: 52ch;
  margin-bottom: 2.5rem;
}

.demo-feature-scroll {
  display: inline-block;
  margin-top: 3rem;
  color: var(--raad-text-dim);
  text-decoration: none;
  font-size: 1.6rem;
  animation: demo-feature-bob 1.8s ease-in-out infinite;
}

@keyframes demo-feature-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(0.5rem); }
}

.demo-feature-stage {
  position: relative;
  padding: 4rem 0 6rem;
  background: var(--raad-bg);
}

.demo-feature-stage__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.demo-feature-video-wrap {
  position: relative;
  width: 100%;
  margin: 0 auto;
  transition: width 0.6s ease, mask-size 0.6s ease;
  overflow: hidden;
  border-radius: 12px;
  background: #000;

  /* gradient clipping mask that starts at the bottom and is removed on scroll */
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 25%);
  mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 25%);
  -webkit-mask-size: 100% 400%;
  mask-size: 100% 400%;
  -webkit-mask-position: bottom;
  mask-position: bottom;
}

.demo-feature-video-wrap.is-in-view {
  width: 110%;
  margin-left: -5%;
  margin-right: -5%;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.demo-feature-video-wrap video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
}

@media (max-width: 768px) {
  .demo-feature-video-wrap.is-in-view { width: 100%; }
}


/* -----------------------------------------------------------------------------
   Feature demos: overview tile, highlights, alternating rows, step list
   ----------------------------------------------------------------------------- */

.overview-tile { margin-top: 1.5rem; }

.overview-tile__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--raad-hairline-strong);
  border-radius: 14px;
  background: #000;
}

.overview-tile__label {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: rgba(3, 16, 13, 0.75);
  border: 1px solid var(--raad-hairline-strong);
  color: var(--raad-cyan-bright);
  font-size: 0.85rem;
  font-weight: 500;
}

.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.highlight {
  padding: 1.5rem;
  border: 1px solid var(--raad-hairline);
  border-left: 2px solid var(--raad-cyan);
  border-radius: 10px;
  background: var(--raad-surface);
}

.highlight h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.highlight p { margin: 0; color: var(--raad-text-dim); font-size: 0.95rem; }

.tour-hero { padding: 0 0 4rem; }
.tour-hero .demo-browser { margin: 0; }

.group-intro .post-body,
.feature-intro { font-size: 1.1rem; }
.group-intro .post-body { max-width: 46rem; margin: 0 auto; text-align: center; color: var(--raad-text-dim); }
.feature-intro { max-width: 46rem; }
.feature-intro__lead { font-size: 1.25rem; color: var(--raad-text); margin-bottom: 1rem; }
.feature-intro .post-body { color: var(--raad-text-dim); }

.feature-section__copy { max-width: 46rem; margin-bottom: 1.75rem; }
.feature-section__copy h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.02em; margin: 0.6rem 0 0.4rem; }
.feature-section__copy h2 a { color: inherit; text-decoration: none; }
.feature-section__copy h2 a:hover { color: var(--raad-cyan-bright); }
.feature-section__tagline { color: var(--raad-cyan-bright); font-weight: 500; margin-bottom: 0.6rem; }
.feature-section__copy p { color: var(--raad-text-dim); }

.feature-section__points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem 2rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}
.feature-section__points li { margin: 0; padding-left: 0.9rem; border-left: 2px solid var(--raad-cyan); }
.feature-section__points strong { display: block; font-weight: 600; margin-bottom: 0.2rem; }
.feature-section__points span { color: var(--raad-text-dim); font-size: 0.95rem; }

.demo-steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
}

.demo-steps li { counter-increment: step; margin: 0; padding: 0; }

.demo-steps__step {
  display: grid;
  grid-template-columns: 2rem 1fr;
  column-gap: 0.75rem;
  width: 100%;
  margin: 0;
  padding: 0.85rem 1rem;
  text-align: left;
  color: var(--raad-text);
  background: var(--raad-surface);
  border: 1px solid var(--raad-hairline);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.demo-steps__step::before {
  content: counter(step);
  grid-row: span 2;
  font-family: var(--raad-font-mono);
  color: var(--raad-text-faint);
}

.demo-steps__step:hover { background: var(--raad-surface-hover); }

.demo-steps__step[aria-current="step"] {
  border-color: var(--raad-cyan);
  background: var(--raad-cyan-dim);
}

.demo-steps__step[aria-current="step"]::before { color: var(--raad-cyan-bright); }

.demo-steps__title { font-weight: 600; }
.demo-steps__body { grid-column: 2; color: var(--raad-text-dim); font-size: 0.92rem; }

@media (max-width: 768px) {
}

@media (prefers-reduced-motion: reduce) {
  .demo-steps__step { transition: none; }
}