/* Grafana AI site styling.

   The shared palette follows the Visual Brand Engine: Grafana orange is the
   brand accent, Interactive Blue is the CTA/link colour, Poppins carries
   display type, and Mona Sans is preferred for body/UI text with Inter as the
   loaded fallback. The mini-site is dark-only: `color-scheme` is pinned to dark
   in :root, so every `light-dark(...)` token resolves to its dark value. */

/* The brand gradient is animated by interpolating these registered custom
   properties (see grafana/grafana.ai#74). Registering them with @property is
   what lets the browser tween between colours and angles instead of swapping
   them abruptly. They inherit so the live values cascade to every element that
   paints with --grad-ai. Browsers without @property simply use the static
   fallback values set in :root below. */
@property --grad-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 115deg;
}

@property --grad-c1 {
  syntax: "<color>";
  inherits: true;
  initial-value: #ff671d;
}

@property --grad-c2 {
  syntax: "<color>";
  inherits: true;
  initial-value: #1b55f5;
}

@property --grad-c3 {
  syntax: "<color>";
  inherits: true;
  initial-value: #22c55e;
}

:root {
  /* The mini-site is dark-only, so `color-scheme` is pinned to dark. Every
     `light-dark(...)` token below therefore resolves to its dark value
     regardless of the operating-system setting. */
  color-scheme: dark;

  --font-display: "Poppins", "Mona Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Mona Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* VBE canonical tokens. The older --color-* names below stay as aliases so
     the existing small CSS codebase can migrate without a risky rename pass. */
  --bg: light-dark(#ffffff, #111111);
  --bg-2: light-dark(#f7f7f7, #1a1a1a);
  --bg-3: light-dark(#efefef, #222222);
  --bg-4: light-dark(#e5e5e5, #2a2a2a);
  --border: light-dark(#e2e2e2, #2c2c2c);
  --border-2: light-dark(#d0d0d0, #3a3a3a);
  --text: light-dark(#111111, #f2f2f2);
  --muted: light-dark(#555555, #ababab);
  --text-body: light-dark(#454554, #d8d8df);
  --orange: light-dark(#f04306, #ff671d);
  --cta: #1b55f5;
  --cta-hover: #1440e1;
  /* Interactive Blue painted as *text* on the page canvas. The solid --cta
     stays invariant for button fills (white text rides on it in both modes),
     but the same blue set straight onto the dark canvas only clears ~3.3:1, so
     blue text and its accents lift to a lighter tone in dark mode. The dark
     value matches the readable blue already used for tinted product copy and
     covers dark-mode link contrast as well as the What's New pill
     (grafana/grafana.ai#276, grafana/grafana.ai#279). */
  --cta-text: light-dark(#1b55f5, #599cff);
  --cta-text-hover: light-dark(#1440e1, #7cb0ff);
  --state-success: #0b9065;
  --state-warning: light-dark(#af450a, #ffe899);
  --state-error: light-dark(#8e271f, #f6a09a);

  --color-text: var(--text);
  --color-text-muted: var(--muted);
  --color-bg: var(--bg);
  --color-surface: var(--bg-2);
  --color-surface-2: var(--bg-3);
  --color-border: var(--border);
  --color-link: var(--cta-text);
  --color-highlight-bg: var(--orange);
  --color-highlight-text: #1a1b1f;
  /* Text selection paints with the page's own accent and white text. White
     stays legible on the darker accents used for selection across both the
     light and dark canvas (see grafana/grafana.ai#137). */
  --color-selection-text: #ffffff;

  /* Brand wash used for hero art and supporting decoration. CTAs do not use
     this; they use the invariant Interactive Blue tokens above. */
  --grad-angle: 115deg;
  --grad-c1: #ff671d;
  --grad-c2: #1b55f5;
  --grad-c3: #22c55e;
  --grad-ai: linear-gradient(
    var(--grad-angle, 115deg),
    var(--grad-c1, #ff671d) 0%,
    var(--grad-c2, #1b55f5) 48%,
    var(--grad-c3, #22c55e) 100%
  );
  --hero-radial: radial-gradient(circle at 16% 14%, color-mix(in srgb, var(--orange) 20%, transparent), transparent 34rem),
    radial-gradient(circle at 82% 16%, color-mix(in srgb, var(--cta) 18%, transparent), transparent 34rem),
    radial-gradient(circle at 52% 78%, color-mix(in srgb, var(--state-success) 10%, transparent), transparent 30rem);

  --radius: 8px;
  /* Ordinary content uses the readable inner width. The wide width adds the
     outer gutters back on and is shared by the primary navigation indexes and
     the top navigation, so those two frames always land on the same edges. */
  --maxw: var(--header-maxw);
  --header-maxw: 1320px;
  --page-gutter: 1.5rem;
  --wide-maxw: calc(var(--header-maxw) + (var(--page-gutter) * 2));

  /* Type scale (grafana/grafana.ai#104): a small, consistent set of sizes,
     nudged a touch larger than the browser default for readability. Everything
     that sets a font size pulls from this scale so the steps stay consistent
     instead of drifting across a dozen near-identical rem values. */
  --text-xs: 0.85rem; /* uppercase eyebrows, fine print */
  --text-sm: 0.95rem; /* secondary UI: nav, captions, small CTAs */
  --text-base: 1.125rem; /* body copy */
  --text-md: 1.15rem; /* slightly emphasised UI */
  --text-lg: 1.3rem; /* large UI marks */

  font-family: var(--font-body);
}

* {
  box-sizing: border-box;
}

html {
  /* Smooth in-page navigation, e.g. the hero's jump to #products. Visitors who
     prefer reduced motion get the instant jump (see the media query below). */
  scroll-behavior: smooth;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Keyboard/screen-reader shortcut past the navigation to the page's <main>.
   Sits off-screen until it takes focus, then drops into the top-left corner
   above every other layer. */
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  /* Fully clear the top edge including the focused margin below. */
  transform: translateY(calc(-100% - 1rem));
  margin: 0.75rem;
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  background: var(--cta);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}

.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid #fff;
  outline-offset: 2px;
}

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

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  /* Clip the x-axis only so the footer's full-bleed 100vw wash cannot spill into
     a horizontal scrollbar; the y-axis stays visible for the nav dropdowns (see
     grafana/grafana.ai#212). */
  overflow-x: clip;
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-text);
  background: var(--color-bg);
  text-rendering: optimizeLegibility;
  /* Grayscale font smoothing is scoped to dark mode below. On the light canvas
     it thins the near-black text and reads as fuzzy, so light mode keeps the
     browser default (subpixel) smoothing for crisper type (see
     grafana/grafana.ai#181). */
  /* The renderer selects this source colour per route folder from the VBE
     accent set. A light contrast mix keeps it vivid while remaining readable
     on both canvases. */
  --page-accent-source: #ff671d;
  --page-accent: light-dark(
    color-mix(in srgb, var(--page-accent-source, #ff671d) 84%, #000),
    color-mix(in srgb, var(--page-accent-source, #ff671d) 86%, #fff)
  );
  /* Highlights (selection, lead-paragraph strong, product marks) keep white
     text in light and dark mode alike, so the accent fill always reads as a
     painted highlight rather than inverting to dark text on the dark canvas
     (see grafana/grafana.ai#137 and grafana/grafana.ai#146). */
  --page-accent-contrast: #fff;
  /* Darken the accent fill with a 50% black overlay so the highlight reads as a
     deeper, more saturated mark that stands out against the page and lets the
     white text pop harder (see grafana/grafana.ai#152). */
  --color-highlight-bg: color-mix(in srgb, var(--page-accent), #000 50%);
  --color-highlight-text: var(--page-accent-contrast);
  --color-selection-bg: var(--color-highlight-bg);
  --color-selection-text: var(--color-highlight-text);
  /* Static by default: page-level motion should be intentional and local rather
     than a document-wide animation. */
}

/* Light text on the dark canvas benefits from grayscale smoothing (subpixel
   rendering fringes on dark backgrounds), so the whole dark-only site uses it
   (see grafana/grafana.ai#181). */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body > main {
  flex: 1 0 auto;
}

::selection {
  color: var(--color-selection-text);
  background: var(--color-selection-bg);
}

/* Kept for local animated accents that opt in; the document itself is static. */
@keyframes brand-shift {
  0% {
    --grad-angle: 115deg;
    --grad-c1: #ff671d;
    --grad-c2: #1b55f5;
    --grad-c3: #22c55e;
  }
  25% {
    --grad-angle: 205deg;
    --grad-c1: #ff8137;
    --grad-c2: #1440e1;
    --grad-c3: #0b9065;
  }
  50% {
    --grad-angle: 295deg;
    --grad-c1: #f04306;
    --grad-c2: #0ea5e9;
    --grad-c3: #22c55e;
  }
  75% {
    --grad-angle: 385deg;
    --grad-c1: #ff671d;
    --grad-c2: #6366f1;
    --grad-c3: #54d192;
  }
  100% {
    --grad-angle: 475deg;
    --grad-c1: #ff671d;
    --grad-c2: #1b55f5;
    --grad-c3: #22c55e;
  }
}

a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6,
.brand-wordmark,
.home-news-title,
.home-highlights-title,
.product-title,
.product-index,
.observability-stat-value,
.fake-dashboard-topbar strong,
.fake-panel--stat strong {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0;
}

/* ---- Site chrome ---------------------------------------------------------- */

/* AI Week retro badge (see _ai_week.html.tpl): the sticker lettering is SVG
   text so it can borrow Poppins ExtraBold Italic from the page; the wrapper
   decides the rendered size. */
.ai-week-badge {
  display: block;
  width: 100%;
  height: auto;
}

/* The lettering is SVG text that borrows Poppins ExtraBold Italic; painted in
   the fallback face before Poppins arrives it flickers on the metric swap.
   Hold the badge hidden until the display font is ready — the head script sets
   `fonts-ready` (with a load/timeout fallback), and <noscript> reveals it for
   JS-off visitors — then fade it in so it never flashes the wrong shape. */
.ai-week-badge {
  opacity: 0;
}

html.fonts-ready .ai-week-badge {
  opacity: 1;
  transition: opacity 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  html.fonts-ready .ai-week-badge {
    transition: none;
  }
}

.ai-week-badge text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-anchor: middle;
  paint-order: stroke fill;
}

.ai-week-badge text,
.ai-week-badge path {
  stroke-linejoin: round;
}

/* The flat bolt used by one-line promos. */
.ai-week-bolt {
  display: inline-block;
  width: 1.9em;
  height: auto;
}

/* The AI Week promotion exactly follows the broadcast strip used by the
   source-authored /home experience. */
.ai-week-bar {
  position: relative;
  display: block;
  overflow: hidden;
  color: #efe6d4;
  background: linear-gradient(90deg, #0e0e34 0%, #181653 48%, #141247 72%, #0e0e34 100%);
  border-bottom: 1px solid rgba(252, 50, 205, 0.4);
  box-shadow: inset 0 0 40px rgba(252, 50, 205, 0.1), inset 0 -14px 24px rgba(0, 0, 0, 0.35);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.ai-week-bar-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 56rem;
  margin-inline: auto;
  padding: 8px 16px;
  gap: 16px;
}

.ai-week-bar:hover {
  color: #fff;
  text-decoration: none;
}

.ai-week-bar:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
}

.ai-week-bar::before {
  position: absolute;
  z-index: 1;
  content: "";
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
  animation: tb-crt 3.8s ease-in-out infinite;
}

.ai-week-bar::after {
  position: absolute;
  top: -30px;
  right: 0;
  left: 0;
  z-index: 1;
  height: 26px;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(139, 135, 255, 0.16) 45%, rgba(255, 255, 255, 0.1) 50%, transparent);
  animation: tb-roll 7s linear infinite;
}

@keyframes tb-crt {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.95; }
}

@keyframes tb-roll {
  0% { top: -30px; }
  100% { top: 110%; }
}

.tb-onair {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ff453a;
  font-family: "VT323", monospace;
  font-size: 17px;
  letter-spacing: 0.08em;
  line-height: 1;
  text-shadow: 0 0 8px rgba(255, 69, 58, 0.6);
  white-space: nowrap;
}

.tb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff453a;
  box-shadow: 0 0 8px #ff453a;
  animation: tb-blink 1.1s steps(1) infinite;
}

@keyframes tb-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.12; }
}

.tb-bars {
  display: inline-flex;
  flex: 0 0 auto;
  height: 15px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
}

.tb-bars i {
  display: block;
  width: 5px;
  height: 100%;
}

.tb-bars i:nth-child(1) { background: #3fd9d1; }
.tb-bars i:nth-child(2) { background: #ffd23f; }
.tb-bars i:nth-child(3) { background: #ff671d; }
.tb-bars i:nth-child(4) { background: #fc32cd; }
.tb-bars i:nth-child(5) { background: #2c6afa; }
.tb-bars i:nth-child(6) { background: #efe6d4; }

.tb-mid {
  display: flex;
  flex: 1;
  align-items: baseline;
  justify-content: center;
  min-width: 0;
  gap: 12px;
}

.tb-spiral {
  align-self: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background: #ff671d;
  filter: drop-shadow(0 0 5px rgba(255, 103, 29, 0.6));
  -webkit-mask: url("/static/grafana-logo.svg") center / contain no-repeat;
  mask: url("/static/grafana-logo.svg") center / contain no-repeat;
}

.tb-title {
  position: relative;
  color: #fff;
  font-family: "VT323", monospace;
  font-size: 20px;
  letter-spacing: 0.03em;
  line-height: 1;
  text-shadow: 1.4px 0 rgba(255, 0, 60, 0.55), -1.4px 0 rgba(0, 220, 255, 0.55);
  white-space: nowrap;
}

.tb-title::before,
.tb-title::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  content: attr(data-text);
  clip-path: inset(50% 0 50% 0);
}

.tb-title::before {
  color: #fc32cd;
  transform: translateX(-2px);
  animation: tb-gl-a 4.2s steps(1) infinite;
}

.tb-title::after {
  color: #3fd9d1;
  transform: translateX(2px);
  animation: tb-gl-b 4.2s steps(1) infinite;
}

@keyframes tb-gl-a {
  0%, 88%, 100% { clip-path: inset(50% 0 50% 0); opacity: 0; transform: translateX(-2px); }
  89% { clip-path: inset(8% 0 74% 0); opacity: 0.9; transform: translateX(-3px); }
  92% { clip-path: inset(62% 0 15% 0); opacity: 0.9; transform: translateX(3px); }
  95% { clip-path: inset(30% 0 45% 0); opacity: 0.9; transform: translateX(-2px); }
}

@keyframes tb-gl-b {
  0%, 88%, 100% { clip-path: inset(50% 0 50% 0); opacity: 0; transform: translateX(2px); }
  89.5% { clip-path: inset(70% 0 8% 0); opacity: 0.9; transform: translateX(3px); }
  93% { clip-path: inset(20% 0 60% 0); opacity: 0.9; transform: translateX(-3px); }
  96% { clip-path: inset(45% 0 30% 0); opacity: 0.9; transform: translateX(2px); }
}

.tb-dates {
  color: #3fd9d1;
  font-family: "VT323", monospace;
  font-size: 18px;
  letter-spacing: 0.06em;
  line-height: 1;
  text-shadow: 0 0 7px rgba(63, 217, 209, 0.45);
  white-space: nowrap;
}

.tb-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px;
  color: #fff;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  white-space: nowrap;
  border: 1px solid rgba(252, 50, 205, 0.5);
  border-radius: 2px;
  background: rgba(252, 50, 205, 0.08);
  text-shadow: 0 0 6px rgba(252, 50, 205, 0.4);
}

.tb-caret {
  color: #fc32cd;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ai-week-bar:hover .tb-cta {
  background: rgba(252, 50, 205, 0.2);
}

.ai-week-bar:hover .tb-caret {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .ai-week-bar::before,
  .ai-week-bar::after,
  .tb-dot,
  .tb-title::before,
  .tb-title::after {
    animation: none;
  }
}

@media (max-width: 640px) {
  .tb-dates,
  .tb-bars,
  .tb-onair {
    display: none;
  }
}

/* The event page owns its campaign chrome and the tour owns its entire
   viewport, so neither needs the shared promotional strip. */
.ai-week-page .ai-week-bar,
.tour-page .ai-week-bar {
  display: none;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* No fill at rest, so the top of the page stays clean and the sticker is never
   clipped. A full-bleed blurred backdrop (the same 100vw centring trick as the
   footer wash) fades in over the first slice of scroll to hide the content
   sliding beneath, including full-bleed background art. */
.site-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 100vw;
  margin-left: -50vw;
  pointer-events: none;
  background: color-mix(in srgb, var(--color-bg) 90%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  /* Driven by the page scroll: 0 → full over the first 48px. Where the scroll
     timeline is unsupported the zero-duration animation fills straight to the
     end, leaving the backdrop simply always on. */
  animation: site-header-backdrop linear both;
  animation-timeline: scroll(root block);
  animation-range: 0px 48px;
}

@keyframes site-header-backdrop {
  to {
    opacity: 1;
    box-shadow: 0 6px 10px light-dark(rgba(24, 27, 31, 0.05), rgba(0, 0, 0, 0.15));
  }
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2.5rem;
  width: 100%;
  max-width: 1264px;
  min-height: 4.75rem;
  margin-inline: auto;
  padding: 0 2rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: clamp(2.5rem, 5vw, 4rem);
  font-size: var(--text-base);
  letter-spacing: 0;
  color: var(--color-text);
}

.brand:hover {
  text-decoration: none;
}

.site-header .brand {
  flex: none;
  margin-inline-end: 0;
}

.site-header .brand-logo {
  display: block;
  width: auto;
  height: 25px;
}

.brand-wordmark {
  font-weight: 600;
}

.brand-ai {
  margin-left: 0.15em;
  font-weight: 600;
  color: var(--page-accent, var(--orange));
}

.route-home .brand-ai {
  color: var(--orange);
}

.brand-mark {
  width: 1.625rem;
  height: 1.625rem;
  display: block;
  filter: drop-shadow(0 1px 2px light-dark(rgba(24, 27, 31, 0.25), rgba(0, 0, 0, 0.6)));
}

/* Hamburger toggle for the small-screen navigation. Hidden on the desktop
   layout and only revealed (via the media query below) when JavaScript has
   tagged the document with `has-js`. */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.nav-toggle-bars {
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s ease;
}

.nav-toggle-bars::before {
  top: -6px;
}

.nav-toggle-bars::after {
  top: 6px;
}

/* Open state morphs the three bars into an X. */
.site-header.is-open .nav-toggle-bars {
  background: transparent;
}

.site-header.is-open .nav-toggle-bars::before {
  transform: translateY(6px) rotate(45deg);
}

.site-header.is-open .nav-toggle-bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    transition: none;
  }
}

.site-nav {
  display: flex;
  flex: 1 1 auto;
  justify-content: flex-start;
  gap: 0.125rem;
  margin-left: 0;
  min-width: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.nav-item {
  position: relative;
}

/* Docs and Blog form a secondary group at the right edge of the primary nav,
   before the theme control and conversion action. */
.nav-item--secondary-start {
  margin-left: auto;
}

.nav-link {
  display: inline-block;
  padding: 7px 13px;
  border-radius: 7px;
  color: light-dark(#3f3f46, #cfcfcf);
  font-weight: 400;
  font-size: 0.9375rem;
}

.nav-link:hover,
.nav-item:hover .nav-link,
.nav-item:focus-within .nav-link {
  color: light-dark(#111111, #ffffff);
  background: light-dark(rgba(17, 17, 17, 0.06), rgba(255, 255, 255, 0.09));
  text-decoration: none;
}

.nav-link.is-active {
  color: light-dark(#3f3f46, #cfcfcf);
  background: transparent;
}

.nav-link--try {
  --try-fill: #3a5eff;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px 9px 18px;
  border-radius: 10px;
  color: #fff;
  border: 1px solid var(--try-fill);
  background: var(--try-fill);
  font-weight: 600;
  font-size: 0.9375rem;
  box-shadow: none;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.nav-link--try:hover,
.nav-item:hover .nav-link--try,
.nav-item:focus-within .nav-link--try,
.nav-link--try.is-active {
  color: #fff;
  border-color: #5c7aff;
  background: #5c7aff;
}

.nav-try-icon {
  flex: none;
}

/* Icon button that toggles the light/dark theme. Sits with the nav items and
   matches their quiet weight; the sun/moon icons swap based on the active
   scheme so the button always shows where the next click goes. */
.nav-item--theme {
  display: flex;
  align-items: center;
}

.nav-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  display: grid;
  min-width: 14rem;
  margin-top: 0.5rem;
  padding: 0.375rem;
  border: 1px solid light-dark(transparent, #202020);
  border-radius: 13px;
  background: light-dark(#ffffff, #171717);
  box-shadow: 0 14px 34px light-dark(rgba(24, 27, 31, 0.14), rgba(0, 0, 0, 0.5));
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.nav-menu::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 0.625rem;
}

.nav-item:hover .nav-menu,
.nav-item:focus-within .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-menu a {
  padding: 0.5rem 0.7rem;
  border-radius: 7px;
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
}

.nav-menu a:hover {
  color: var(--color-text);
  background: var(--color-surface-2);
  text-decoration: none;
}

.nav-menu-group {
  display: grid;
}

.nav-menu-group + .nav-menu-group {
  margin-top: 0.6rem;
}

.nav-menu-heading {
  position: relative;
  top: 1px;
  padding: 0.44rem 0.7rem 0.32rem;
  color: light-dark(#8f8f8f, #727272);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.nav-menu:has(.nav-menu-group) {
  padding-top: 0.5rem;
}

.nav-item:last-child .nav-menu {
  right: 0;
  left: auto;
}

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

/* Shared Grafana Labs footer, matched to the homepage treatment. */
.gf-footer{background:#0b0b0d;color:#c4c4cc;font-family:"Inter",system-ui,-apple-system,sans-serif;padding:56px 32px 40px;border-top:1px solid #1c1c20;}
.gf-footer *{box-sizing:border-box;}
.gf-footer .gf-in{max-width:1200px;margin:0 auto;}
.gf-footer .gf-top{display:grid;grid-template-columns:1.7fr 1fr;gap:40px 56px;padding-bottom:34px;border-bottom:1px solid #1c1c20;align-items:start;}
.gf-footer .gf-top h3{font-family:var(--display,"Poppins","Inter",sans-serif);font-weight:600;color:#fff;font-size:clamp(22px,2.4vw,30px);line-height:1.2;letter-spacing:-.01em;margin:0;}
.gf-footer .gf-top p{color:#9a9aa4;font-size:14px;margin:10px 0 0;line-height:1.4;}
.gf-footer .gf-ask-form{position:relative;width:100%;max-width:600px;margin-top:18px;}
.gf-footer .gf-ask-icon{position:absolute;top:50%;left:15px;width:20px;height:20px;transform:translateY(-50%);}
.gf-footer .gf-ask-form input{width:100%;height:50px;border-radius:10px;border:1px solid #2b2b32;background:#161619;color:#e8e8ec;font-size:14px;padding:0 52px 0 44px;outline:none;transition:border-color .15s;}
.gf-footer .gf-ask-form input::placeholder{color:#6e6e78;}
.gf-footer .gf-ask-form input:focus{border-color:#3a5eff;}
.gf-footer .gf-ask-btn{position:absolute;top:50%;right:10px;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:1px solid rgba(58,94,255,.5);background:rgba(58,94,255,.18);color:#8fa4ff;font-size:15px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s;}
.gf-footer .gf-ask-btn:hover{background:rgba(58,94,255,.32);color:#fff;}
.gf-footer .gf-news-head{display:flex;align-items:center;gap:12px;}
.gf-footer .gf-grot{width:46px;height:46px;flex:0 0 auto;}
.gf-footer .gf-news-form{display:flex;gap:10px;margin-top:18px;max-width:440px;}
.gf-footer .gf-news-form input{flex:1 1 auto;min-width:0;height:48px;border-radius:10px;border:1px solid #2b2b32;background:#161619;color:#e8e8ec;font-size:14px;padding:0 15px;outline:none;transition:border-color .15s;}
.gf-footer .gf-news-form input::placeholder{color:#6e6e78;}
.gf-footer .gf-news-form input:focus{border-color:#3a5eff;}
.gf-footer .gf-sub-btn{flex:0 0 auto;height:48px;padding:0 22px;border-radius:10px;border:1px solid #3a5eff;background:#3a5eff;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s;}
.gf-footer .gf-sub-btn:hover{background:#5c7aff;border-color:#5c7aff;}
.gf-footer .gf-privacy{color:#7b7b86;font-size:12.5px;margin-top:14px;}
.gf-footer .gf-privacy a{color:#9a9aa4;text-decoration:underline;}
.gf-footer .gf-privacy a:hover{color:#fff;}
.gf-footer .gf-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 28px;margin-top:44px;}
.gf-footer .gf-cols h4{font-size:13px;font-weight:700;color:#f4f4f6;margin:0 0 15px;}
.gf-footer .gf-cols ul{list-style:none;margin:0;padding:0;}
.gf-footer .gf-cols li{margin:0 0 10px;}
.gf-footer .gf-cols a{color:#9a9aa4;font-size:13px;line-height:1.45;text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-size:0% 1px;background-position:0 100%;
  transition:color .15s,background-size .3s cubic-bezier(.2,.7,.2,1);}
.gf-footer .gf-cols a:hover{color:#fff;background-size:100% 1px;}
.gf-footer .gf-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:48px;padding-top:28px;border-top:1px solid #1c1c20;flex-wrap:wrap;}
.gf-footer .gf-logo{display:inline-flex;}
.gf-footer .gf-logo svg{height:30px;width:auto;display:block;}
.gf-footer .gf-social{display:flex;gap:14px;align-items:center;}
.gf-footer .gf-social a{display:inline-flex;}
.gf-footer .gf-social svg{width:30px;height:30px;display:block;}
.gf-footer .gf-social svg rect{transition:fill .15s;}
.gf-footer .gf-social svg path{transition:fill .15s;}
.gf-footer .gf-social a:hover svg rect{fill:#34343c;}
.gf-footer .gf-social a:hover svg path{fill:#ffffff;}
.gf-footer .gf-legal{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;margin-top:22px;}
.gf-footer .gf-legal a{color:#9a9aa4;font-size:12.5px;text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-size:0% 1px;background-position:0 100%;
  transition:color .15s,background-size .3s cubic-bezier(.2,.7,.2,1);}
.gf-footer .gf-legal a:hover{color:#fff;background-size:100% 1px;}
.gf-footer .gf-copy{color:#6e6e78;font-size:12.5px;margin-top:14px;}
@media(max-width:900px){.gf-footer .gf-top{grid-template-columns:1fr;}.gf-footer .gf-cols{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:520px){.gf-footer .gf-cols{grid-template-columns:1fr;}}
@media (prefers-reduced-motion:reduce){.gf-footer .gf-cols a,.gf-footer .gf-legal a{transition:color .15s;}}

body.tour-page .gf-footer {
  display: none;
}

/* The footer mirrors the primary nav so every section stays one click away from
   the bottom of any page. A brand column sits beside a set of link columns. */
.site-footer {
  /* position + isolation so the full-bleed background wash below sits behind the
     footer content rather than the page canvas (see grafana/grafana.ai#212). */
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: calc(var(--maxw) + (var(--page-gutter) * 2));
  min-height: 50vh;
  min-height: 50svh;
  /* Generous air above and inside separates the page from the footer. */
  margin: clamp(6rem, 10vw, 8.5rem) auto 0;
  padding: clamp(4rem, 7vw, 5.5rem) var(--page-gutter) 3rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* On pages where the campaign separator is present, it replaces the footer's
   outer gap. Routes that hide the separator keep the original spacing. */
body:not(.route-home):not(.ai-week-page):not(.tour-page) .ai-week-bar + .site-footer {
  margin-top: 0;
}

/* Echo the top-of-page wash at the foot of every page. The footer box is capped
   at --maxw, so the wash is a full-bleed pseudo-element (100vw, centred) to
   span the canvas like the homepage hero. */
.site-footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  top: -4rem;
  bottom: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--orange) 11%, transparent), transparent 34rem),
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--cta) 9%, transparent), transparent 34rem),
    linear-gradient(0deg, color-mix(in srgb, var(--state-success) 6%, transparent), transparent 60%);
  opacity: light-dark(0.9, 0.72);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 42%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 42%);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 2.7fr);
  gap: clamp(2rem, 5vw, 4rem);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.footer-brand .brand {
  margin-right: 0;
}

/* The footer lockup is neutral site chrome: unlike the header, its /AI suffix
   does not inherit the current page accent. */
.site-footer .brand-ai {
  color: var(--color-text-muted);
}

.footer-blurb {
  margin: 0;
  max-width: 38ch;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
}

.footer-copyright {
  flex: none;
  white-space: nowrap;
}

/* "We're hiring" sits at the far right of the row and is dressed as an accent
   pill so it stands out from the quiet copyright and commit chrome
   (see grafana/grafana.ai#438). */
.footer-hiring {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: calc(0.4rem - 1px) calc(0.9rem - 1px);
  border: 1px solid transparent;
  border-radius: var(--radius);
  white-space: nowrap;
  background: var(--cta);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--cta) 24%, transparent);
}

/* The arrow nudges forward on hover to reinforce the outbound link. */
.footer-hiring::after {
  content: "→";
  transition: transform 0.15s ease;
}

.footer-hiring:hover {
  background: var(--cta-hover);
  color: #fff;
  text-decoration: none;
}

.footer-hiring:hover::after {
  transform: translateX(2px);
}

/* The published git hash starts the right-aligned footer actions, immediately
   before the hiring link. If no commit is available, the hiring link's own
   auto margin still keeps it at the right edge. */
.footer-commit {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.footer-commit + .footer-hiring {
  margin-left: 0;
}

.footer-commit:hover {
  color: var(--color-text);
  text-decoration: none;
}

.footer-commit-hash {
  font-family: var(--font-mono);
  color: var(--color-text);
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-left: clamp(2rem, 4vw, 4rem);
  /* Right-align the nav headings and links within their columns while the
     column layout itself stays put (see grafana/grafana.ai#530). */
  text-align: right;
}

.footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.footer-heading {
  margin: 0 0 1rem;
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text);
}

.footer-heading a {
  color: inherit;
}

.footer-col a {
  color: var(--color-text-muted);
  font-weight: 500;
}

.footer-col a:hover,
.footer-heading a:hover {
  color: var(--color-text);
  text-decoration: none;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  /* Copyright rides bottom-left; space, not a rule, separates it from the
     columns above (the footer's only hairline is on its top edge). */
  justify-content: flex-start;
  gap: 0.75rem 2rem;
  margin-top: auto;
  padding-top: 3.5rem;
}

/* ---- Generic content pages ----------------------------------------------- */

.page {
  width: min(100%, var(--wide-maxw));
  margin: 0 auto;
  padding: 1rem var(--page-gutter) 2rem;
}

.page-hero {
  padding: 2rem 0 1rem;
}

.page-hero.compact {
  padding: 1.5rem 0 0.5rem;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}

.prose {
  max-width: 60rem;
  margin-right: auto;
  margin-left: 0;
}

.prose h1 {
  width: fit-content;
  max-width: 100%;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: 0;
  line-height: 1.15;
  color: light-dark(var(--color-text), #fff);
  background: transparent;
  text-decoration: none;
}

.prose h1::after {
  content: "";
  display: block;
  width: clamp(3rem, 8vw, 4.5rem);
  height: 4px;
  margin-top: 0.55rem;
  border-radius: 999px;
  background: var(--page-accent);
}

.prose h2 {
  margin-top: 2rem;
  letter-spacing: 0;
  scroll-margin-top: 5.5rem;
}

/* On-page table of contents for long-form Markdown with several h2 sections:
   a "Learn more about:" lead-in over a bulleted jump list. The selectors
   include .prose so they outrank the later `.prose a` underline rule and the
   links stay bare until hovered. */
.page-toc {
  margin: 1.85rem 0 2.5rem;
  max-width: 32rem;
}

.prose .page-toc-label {
  margin: 0 0 0.8rem;
  font-size: 1.08rem;
  line-height: 1.45;
  color: var(--color-text);
}

.prose .page-toc-list {
  margin: 0;
  padding: 0 0 0 1.2rem;
  list-style: disc;
  display: grid;
  gap: 0.7rem;
}

.prose .page-toc-list li::marker {
  color: var(--color-text-muted);
}

.prose .page-toc-list a {
  font-size: 1.08rem;
  line-height: 1.45;
  text-decoration: none;
  text-underline-offset: 3px;
  color: var(--color-text);
}

.prose .page-toc-list a:hover,
.prose .page-toc-list a:focus-visible {
  color: var(--page-accent);
  text-decoration: underline;
}

.product-hero-copy .page-toc {
  margin-top: 1.1rem;
}

.prose > p:first-of-type {
  max-width: 30rem;
  margin-top: 1rem;
  margin-bottom: 1.6rem;
  font-size: clamp(1.25rem, 2vw, 1.62rem);
  line-height: 1.32;
  letter-spacing: 0;
  color: var(--color-text);
  text-wrap: balance;
}

.prose > p:first-of-type strong {
  display: inline;
  padding: 0.05em 0.28em;
  border-radius: 2px;
  color: var(--color-highlight-text);
  background: var(--color-highlight-bg);
  font-weight: 700;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* A code token can be the highlighted phrase itself. Let the surrounding
   strong supply the paint so the normal inline-code chip does not create a
   second, dark box inside the highlight. */
.prose > p:first-of-type strong code {
  padding: 0;
  color: inherit;
  background: none;
}

/* The layout script splits the lead paragraph at sentence ends so each
   sentence sits as its own block with a little air after it, giving the big
   opening statements room to land one at a time. */
.prose .lead-sentence {
  display: block;
}

.prose .lead-sentence + .lead-sentence {
  margin-top: 0.55em;
}

/* Body links underline in the plain link colour rather than a page-accent
   tint, so the prose stays calm and the accent is reserved for titles and
   highlights (see grafana/grafana.ai#246). */
.prose a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Typewriter title: the layout script splits the h1 into per-character spans
   that all hold their space from first paint — unrevealed characters are just
   invisible — so the title types out without any reflow. The underscore uses
   the title colour so it stays legible on the open page canvas. */
.prose h1 .type-ch {
  visibility: hidden;
}

.prose h1 .type-ch.is-typed {
  visibility: visible;
}

.prose h1 .type-caret {
  display: inline-block;
  width: 0.5em;
  height: 0.09em;
  margin-left: 0.08em;
  vertical-align: -0.04em;
  background: currentColor;
  animation: type-caret-blink 1.05s steps(1) infinite;
}

/* ---- Short Markdown indexes --------------------------------------------- */

/* The layout script recognises compact h2/description/CTA runs and supplies
   this shared structure. That keeps the source as readable Markdown while
   letting section landing pages feel more considered than a long prose stack. */
.section-index-page {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  max-width: var(--wide-maxw);
  overflow-x: clip;
  padding-top: clamp(1.5rem, 3vw, 3rem);
  background: linear-gradient(
    180deg,
    transparent 0,
    color-mix(in srgb, var(--page-accent) 4%, transparent) 8rem,
    color-mix(in srgb, var(--page-accent) 2%, transparent) 34rem,
    transparent 70rem
  );
}

/* Let the primary navigation index backgrounds fill the viewport while the
   article keeps the same width, gutters, and vertical spacing as before. */
:is(.route-tools, .route-technology, .route-customization) .section-index-page {
  max-width: none;
  padding: 0;
}

:is(.route-tools, .route-technology, .route-customization) .section-index {
  width: min(100%, var(--wide-maxw));
  margin: 0 auto;
  padding: clamp(2.25rem, 4.5vw, 4.5rem) clamp(1.75rem, 4vw, 3.5rem) clamp(3rem, 5vw, 5rem);
}

/* A faint offset dot field gives the four primary navigation landing pages a
   tactile backdrop without competing with their route-specific washes and
   card patterns. The mask lets the texture dissolve before the page ends. */
:is(.route-tools, .route-technology, .route-customization) .section-index-page::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
    circle,
    color-mix(in srgb, var(--page-accent) 18%, transparent) 0 0.8px,
    transparent 1px
  );
  background-position: 0.4rem 0.4rem;
  background-size: 1.4rem 1.4rem;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 64%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 64%, transparent 100%);
}

.section-index-page::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -3rem;
  right: -14rem;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--page-accent) 6%, transparent), transparent 68%);
}

.section-index {
  --index-accent: var(--page-accent);
  --index-button: var(--cta);
  --index-button-hover: var(--cta-hover);
  max-width: none;
}

.section-index-hero {
  display: grid;
  grid-template-columns: minmax(14rem, 0.72fr) minmax(18rem, 1.28fr);
  gap: 0.5rem clamp(2rem, 7vw, 7rem);
  align-items: end;
  margin-bottom: clamp(2.2rem, 5vw, 4.5rem);
  padding-bottom: clamp(1.8rem, 4vw, 3rem);
}

.section-index-hero h1 {
  grid-row: 1 / span 2;
  align-self: start;
  justify-self: end;
  margin: 0;
  font-size: clamp(2.4rem, 3.8vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-align: right;
  text-decoration: none;
  white-space: nowrap;
}

/* Primary navigation landing pages keep their titles open on the page canvas,
   with no highlight fill and no accent underline (see grafana/grafana.ai#320). */
:is(.route-tools, .route-technology, .route-customization) .section-index-hero h1 {
  padding: 0;
  border-radius: 0;
  color: light-dark(var(--color-text), #fff);
  background: transparent;
  text-decoration: none;
}

:is(.route-tools, .route-technology, .route-customization) .section-index-hero h1::after {
  display: none;
}

/* Keep long single-word section names inside their hero column at desktop
   widths; unlike a phrase, they have no natural place to wrap. */
.route-technology .section-index-hero h1,
.route-customization .section-index-hero h1 {
  font-size: clamp(2.3rem, 3.3vw, 3.4rem);
}

.section-index-hero p {
  max-width: 46rem;
  margin: 0;
  color: var(--color-text-muted);
  text-wrap: balance;
}

.section-index-hero p:first-of-type {
  align-self: end;
  font-size: clamp(1.3rem, 2.3vw, 1.85rem);
  line-height: 1.28;
  color: var(--color-text);
}

.section-index-hero p + p {
  align-self: start;
  margin-top: 0.65rem;
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  line-height: 1.45;
}

/* Tools has a third hero row for its primary action. Keep it in the copy
   column directly below the intro instead of letting grid auto-placement put
   it beneath the title. */
.route-tools .section-index-hero > p:last-child {
  grid-column: 2;
}

/* Only the large intro statement uses the page colour as a highlighter. Clone
   the paint across wrapped lines so longer Markdown emphasis still reads as a
   deliberate phrase rather than one large rectangular block. */
.section-index-hero p:first-of-type strong {
  padding: 0.05em 0.28em;
  border-radius: 2px;
  color: #fff;
  background: color-mix(in srgb, var(--index-accent) 72%, #000 28%);
  font-weight: 700;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.section-index-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem);
}

.section-index-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 18rem;
  padding: clamp(1.35rem, 2.8vw, 2.2rem);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  box-shadow: 0 16px 44px -38px color-mix(in srgb, var(--index-accent) 70%, transparent);
}

.section-index-number {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: auto;
  padding-bottom: 2.5rem;
  color: var(--index-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.section-index-card h2 {
  margin: 0;
  font-size: clamp(1.45rem, 2.4vw, 2.05rem);
  line-height: 1.12;
  text-wrap: balance;
}

.section-index-card > p:not(:last-child) {
  max-width: 42rem;
  margin: 0.8rem 0 1.5rem;
  color: var(--color-text-muted);
}

.section-index-card > p:last-child {
  margin: auto 0 0;
  padding-top: 1.3rem;
}

.section-index-card .content-cta {
  color: #fff;
  background: var(--index-button);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--index-button) 28%, transparent);
}

.section-index-card .content-cta:hover {
  color: #fff;
  background: var(--index-button-hover);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--index-button) 34%, transparent);
}

.section-index-card .content-cta:focus-visible {
  outline-color: color-mix(in srgb, var(--index-button) 48%, transparent);
}

.section-index-footer {
  max-width: 46rem;
  margin: clamp(2rem, 5vw, 4rem) 0 0 auto;
  padding: 1.2rem 0 1.2rem 1.4rem;
  border-left: 3px solid var(--index-accent);
  color: var(--color-text-muted);
}

.section-index-footer p {
  margin: 0;
}

/* Tools: a dense bento board. The orange action colour and mixed card spans
   suit a directory of independent things without making them feel unrelated.
   The API tile closes the board at full width instead of leaving a sixth card
   stranded beneath the three-card product row. */
.route-tools .section-index {
  --index-accent: var(--page-accent);
  --index-button: #c2410c;
  --index-button-hover: #9a3412;
}

.route-tools .section-index-page {
  background:
    radial-gradient(ellipse at 8% 0%, color-mix(in srgb, var(--page-accent) 7%, transparent), transparent 34rem),
    linear-gradient(
      180deg,
      transparent 0,
      color-mix(in srgb, var(--page-accent) 3%, transparent) 8rem,
      transparent 70rem
    );
}

.route-tools .section-index-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.route-tools .section-index-card {
  grid-column: span 4;
  min-height: 20rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--index-accent) 8%, transparent), transparent 46%),
    color-mix(in srgb, var(--color-surface) 90%, transparent);
}

.route-tools .section-index-card:nth-child(1) {
  grid-column: span 7;
  min-height: 23rem;
}

.route-tools .section-index-card:nth-child(2) {
  grid-column: span 5;
  min-height: 23rem;
}

.route-tools .section-index-card:nth-child(3n + 2) {
  background:
    repeating-linear-gradient(135deg, transparent 0 18px, color-mix(in srgb, var(--index-accent) 5%, transparent) 18px 19px),
    color-mix(in srgb, var(--color-surface) 90%, transparent);
}

/* Match the product identities established by the homepage bands: Assistant
   orange, Investigations sky, Agent Observability green, gcx blue, and MCP
   indigo. The darker button values preserve white-text contrast. */
.route-tools .section-index-card:nth-child(1) {
  --index-accent: light-dark(#c72107, #ff8137);
  --index-button: #c2410c;
  --index-button-hover: #9a3412;
}

.route-tools .section-index-card:nth-child(2) {
  --index-accent: light-dark(#0369a1, #38bdf8);
  --index-button: #0369a1;
  --index-button-hover: #075985;
}

.route-tools .section-index-card:nth-child(3) {
  --index-accent: light-dark(#0b9065, #72e1a6);
  --index-button: #08775a;
  --index-button-hover: #056047;
}

.route-tools .section-index-card:nth-child(4) {
  --index-accent: light-dark(#1440e1, #599cff);
  --index-button: #1b55f5;
  --index-button-hover: #1440e1;
}

.route-tools .section-index-card:nth-child(5) {
  --index-accent: light-dark(#4338ca, #818cf8);
  --index-button: #4f46e5;
  --index-button-hover: #4338ca;
}

.route-tools .section-index-card:nth-child(6) {
  grid-column: 1 / -1;
  min-height: 18rem;
  background:
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--index-accent) 14%, transparent), transparent 18rem),
    linear-gradient(90deg, color-mix(in srgb, var(--index-accent) 7%, transparent) 1px, transparent 1px) 0 0 / 2.25rem 2.25rem,
    linear-gradient(color-mix(in srgb, var(--index-accent) 7%, transparent) 1px, transparent 1px) 0 0 / 2.25rem 2.25rem,
    color-mix(in srgb, var(--color-surface) 90%, transparent);
}

/* Technology: five connected nodes form one system board. Alternating card
   widths keep the first two rows from feeling like a catalogue; the full-width
   AI SDK tile then closes the stack. A quiet cross in the gutters makes the
   foundations read as parts of the same system. */
.route-technology .section-index {
  --index-accent: var(--page-accent);
  --index-button: #08775a;
  --index-button-hover: #056047;
}

.route-technology .section-index-page {
  background:
    radial-gradient(ellipse at 12% 12%, color-mix(in srgb, var(--page-accent) 5%, transparent), transparent 42rem),
    linear-gradient(
      180deg,
      transparent 0,
      color-mix(in srgb, var(--page-accent) 3%, transparent) 8rem,
      transparent 72rem
    );
}

.route-technology .section-index-grid {
  position: relative;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.6vw, 2.25rem);
  padding: clamp(1rem, 2vw, 1.75rem) 0;
}

.route-technology .section-index-grid::before,
.route-technology .section-index-grid::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background: color-mix(in srgb, var(--index-accent) 42%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--index-accent) 12%, transparent);
}

.route-technology .section-index-grid::before {
  top: 50%;
  right: 6%;
  left: 6%;
  height: 1px;
}

.route-technology .section-index-grid::after {
  top: 6%;
  bottom: 6%;
  left: 50%;
  width: 1px;
}

.route-technology .section-index-card {
  z-index: 1;
  grid-column: span 6;
  min-height: 22rem;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--index-accent) 9%, transparent) 1px, transparent 1px) 0 0 / 2rem 2rem,
    linear-gradient(color-mix(in srgb, var(--index-accent) 9%, transparent) 1px, transparent 1px) 0 0 / 2rem 2rem,
    var(--color-surface);
}

.route-technology .section-index-card:nth-child(1),
.route-technology .section-index-card:nth-child(4) {
  grid-column: span 7;
}

.route-technology .section-index-card:nth-child(2) {
  grid-column: span 5;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--index-accent) 22%, transparent) 0 1px, transparent 1.5px) 0 0 / 1.35rem 1.35rem,
    linear-gradient(145deg, color-mix(in srgb, var(--index-accent) 10%, transparent), transparent 48%),
    var(--color-surface);
}

.route-technology .section-index-card:nth-child(3) {
  grid-column: span 5;
  background:
    repeating-linear-gradient(135deg, transparent 0 22px, color-mix(in srgb, var(--index-accent) 8%, transparent) 22px 23px),
    var(--color-surface);
}

.route-technology .section-index-card:nth-child(4) {
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--index-accent) 18%, transparent), transparent 15rem),
    linear-gradient(90deg, color-mix(in srgb, var(--index-accent) 7%, transparent) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem,
    var(--color-surface);
}

.route-technology .section-index-card:nth-child(5) {
  grid-column: 1 / -1;
  min-height: 18rem;
  background:
    radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--index-accent) 19%, transparent), transparent 19rem),
    linear-gradient(90deg, color-mix(in srgb, var(--index-accent) 8%, transparent) 1px, transparent 1px) 0 0 / 2rem 2rem,
    linear-gradient(color-mix(in srgb, var(--index-accent) 8%, transparent) 1px, transparent 1px) 0 0 / 2rem 2rem,
    var(--color-surface);
}

.route-technology .section-index-number::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
}

/* Customization: two balanced, asymmetric rows. The wider cards hold the more
   detailed skills and MCP descriptions, while the narrower cards keep the
   shorter Automations and API entries compact. */
.route-customization .section-index {
  --index-accent: var(--page-accent);
  --index-button: #1b55f5;
  --index-button-hover: #1440e1;
}

.route-customization .section-index-page {
  background:
    radial-gradient(ellipse at 10% 8%, color-mix(in srgb, var(--page-accent) 6%, transparent), transparent 38rem),
    radial-gradient(circle at 86% 28%, color-mix(in srgb, var(--page-accent) 4%, transparent), transparent 28rem),
    linear-gradient(
      180deg,
      transparent 0,
      color-mix(in srgb, var(--page-accent) 2%, transparent) 8rem,
      transparent 68rem
    );
}

.route-customization .section-index-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem);
}

.route-customization .section-index-card {
  grid-column: span 6;
  width: auto;
  min-height: 21rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--index-accent) 8%, transparent), transparent 46%),
    color-mix(in srgb, var(--color-surface) 90%, transparent);
}

.route-customization .section-index-card:nth-child(1) {
  grid-column: span 7;
}

.route-customization .section-index-card:nth-child(2) {
  grid-column: span 5;
  background:
    repeating-linear-gradient(135deg, transparent 0 18px, color-mix(in srgb, var(--index-accent) 5%, transparent) 18px 19px),
    color-mix(in srgb, var(--color-surface) 90%, transparent);
}

.route-customization .section-index-card:nth-child(3) {
  grid-column: span 7;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--index-accent) 17%, transparent) 0 1px, transparent 1.5px) 0 0 / 1.4rem 1.4rem,
    linear-gradient(145deg, color-mix(in srgb, var(--index-accent) 8%, transparent), transparent 48%),
    color-mix(in srgb, var(--color-surface) 90%, transparent);
}

.route-customization .section-index-card:nth-child(4) {
  grid-column: span 5;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--index-accent) 7%, transparent) 1px, transparent 1px) 0 0 / 2rem 2rem,
    linear-gradient(color-mix(in srgb, var(--index-accent) 7%, transparent) 1px, transparent 1px) 0 0 / 2rem 2rem,
    color-mix(in srgb, var(--color-surface) 90%, transparent);
}

/* Three-across layouts get cramped well before the phone breakpoint. At
   tablet widths, let Tools and Technology settle into two readable columns;
   their final tile spans the row and closes the composition cleanly. */
@media (min-width: 761px) and (max-width: 1100px) {
  .route-tools .section-index-grid,
  .route-customization .section-index-grid,
  .route-technology .section-index-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .route-tools .section-index-card,
  .route-tools .section-index-card:nth-child(1),
  .route-tools .section-index-card:nth-child(2) {
    grid-column: auto;
    min-height: 21rem;
  }

  .route-tools .section-index-card:nth-child(5) {
    grid-column: auto;
    min-height: 21rem;
  }

  .route-tools .section-index-card:nth-child(6) {
    grid-column: auto;
    min-height: 21rem;
  }

  .route-customization .section-index-card,
  .route-customization .section-index-card:nth-child(1),
  .route-customization .section-index-card:nth-child(2),
  .route-customization .section-index-card:nth-child(3),
  .route-customization .section-index-card:nth-child(4) {
    grid-column: auto;
  }

  .route-technology .section-index-grid {
    gap: clamp(1.2rem, 3vw, 2rem);
  }

  .route-technology .section-index-grid::before {
    display: none;
  }

  .route-technology .section-index-grid::after {
    display: none;
  }

  .route-technology .section-index-card {
    grid-column: auto;
    min-height: 22rem;
  }

  .route-technology .section-index-card:nth-child(1),
  .route-technology .section-index-card:nth-child(2),
  .route-technology .section-index-card:nth-child(3),
  .route-technology .section-index-card:nth-child(4) {
    grid-column: auto;
  }

  .route-technology .section-index-card:nth-child(5) {
    grid-column: 1 / -1;
    min-height: 18rem;
  }
}

@media (max-width: 760px) {
  .section-index-hero {
    display: block;
  }

  .section-index-hero h1 {
    margin-bottom: 2rem;
    font-size: clamp(2.2rem, 11vw, 3.2rem);
  }

  /* Long single-word titles need their own mobile cap; the typewriter keeps
     every character on the same line while it reveals the heading. */
  .route-technology .section-index-hero h1,
  .route-customization .section-index-hero h1 {
    font-size: clamp(1.95rem, 9vw, 2.7rem);
  }

  .section-index-hero p + p {
    margin-top: 0.8rem;
  }

  .section-index-grid,
  .route-tools .section-index-grid,
  .route-customization .section-index-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .route-tools .section-index-card,
  .route-tools .section-index-card:nth-child(1),
  .route-tools .section-index-card:nth-child(2),
  .route-tools .section-index-card:nth-child(6) {
    grid-column: auto;
    min-height: 18rem;
  }

  .route-customization .section-index-card,
  .route-customization .section-index-card:nth-child(1),
  .route-customization .section-index-card:nth-child(2),
  .route-customization .section-index-card:nth-child(3),
  .route-customization .section-index-card:nth-child(4) {
    grid-column: auto;
  }

  .route-technology .section-index-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding: 0;
  }

  .route-technology .section-index-grid::before {
    display: none;
  }

  .route-technology .section-index-grid::after {
    display: none;
  }

  .route-technology .section-index-card {
    grid-column: auto;
    min-height: 20rem;
  }

  .route-technology .section-index-card:nth-child(1),
  .route-technology .section-index-card:nth-child(2),
  .route-technology .section-index-card:nth-child(3),
  .route-technology .section-index-card:nth-child(4),
  .route-technology .section-index-card:nth-child(5) {
    grid-column: auto;
  }

  .route-customization .section-index-card {
    width: 100%;
  }
}

@keyframes type-caret-blink {
  50% {
    opacity: 0;
  }
}

/* ---- Feed gallery -------------------------------------------------------- */

/* Shared feed-tile styling for the homepage strip of the latest community and
   Grafana Labs updates. The standalone What's New page was folded into the Blog
   (see grafana/grafana.ai#367), so these tiles now live only on the homepage. */
.feed-gallery {
  /* The gallery carries the page accent, keeping community threads and Grafana
     Labs posts in one visual stream. */
  --feed-accent: var(--page-accent);
}

.feed-source {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 12rem;
  padding: 0.48rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  color: var(--color-text);
  background: var(--color-surface);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

/* An image-forward gallery: each post is a tile led by its artwork so the page
   reads as pictures first, text second (see grafana/grafana.ai#153). */
.feed-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: clamp(0.8rem, 1.6vw, 1.1rem);
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.feed-tile {
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: color-mix(in srgb, var(--color-surface) 86%, transparent);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.feed-tile:hover {
  border-color: color-mix(in srgb, var(--feed-accent) 45%, var(--color-border));
  box-shadow:
    0 10px 28px -22px color-mix(in srgb, var(--feed-accent) 74%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--feed-accent) 16%, transparent);
}

.feed-tile-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* Same underline leak as .blog-card-link: without this, a:hover paints an
   underline through the whole tile on hover. */
.feed-tile-link:hover {
  text-decoration: none;
}

.feed-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  /* A dark frame around the artwork so each tile's image reads as a contained
     box rather than bleeding into the tile (see grafana/grafana.ai#165). */
  border: 1px solid light-dark(rgba(24, 27, 31, 0.55), rgba(0, 0, 0, 0.6));
  background: color-mix(in srgb, var(--feed-accent) 10%, var(--color-surface));
}

.feed-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.feed-tile:hover .feed-thumb img {
  transform: scale(1.04);
}

/* Gradient artwork stands in when a post ships no image, keeping the gallery
   visual rather than dropping back to a bare text card. */
.feed-thumb-art {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 120% at 15% 10%, color-mix(in srgb, var(--feed-accent) 55%, transparent), transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--feed-accent) 30%, var(--color-surface)), var(--color-surface));
}

.feed-thumb-tag {
  position: absolute;
  left: 0.6rem;
  bottom: 0.6rem;
  max-width: calc(100% - 1.2rem);
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  color: #fff;
  background: color-mix(in srgb, var(--feed-accent) 78%, #000 22%);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feed-tile-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.75rem 0.85rem 0.9rem;
}

.feed-tile-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* The author carries the feed accent so the byline reinforces each source's
   colour (Reddit posts ship an author; blog items usually do not). */
.feed-tile-author {
  color: var(--feed-accent);
}

.feed-tile h3 {
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--color-text);
}

.feed-tile:hover h3 {
  color: var(--feed-accent);
}

/* When a feed cannot be reached and nothing is cached yet, a single quiet card
   in the panel's accent keeps the gallery visual and points at the source
   directly. Cached posts are served through transient failures, so this only
   shows when a feed has never answered since the server started. */
.feed-fallback {
  margin-top: 1.2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: color-mix(in srgb, var(--color-surface) 86%, transparent);
}

.feed-fallback-art {
  display: block;
  height: 5.25rem;
  background:
    radial-gradient(120% 120% at 15% 10%, color-mix(in srgb, var(--feed-accent) 45%, transparent), transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--feed-accent) 24%, var(--color-surface)), var(--color-surface));
}

.feed-fallback-body {
  padding: 0.9rem 1rem 1rem;
}

.feed-fallback-body p {
  margin: 0 0 0.4rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.feed-fallback-body a {
  color: var(--feed-accent);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* The homepage strip overlays each post's title and meta on its artwork, on a
   bottom-up scrim that keeps them legible against any image. */
.feed-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.9rem 0.95rem;
  /* The scrim reaches higher than the title block so a multi-line headline still
     sits on a dark enough base to stay legible (see grafana/grafana.ai#242). */
  background: linear-gradient(
    to top,
    color-mix(in srgb, #000 90%, transparent) 0%,
    color-mix(in srgb, #000 58%, transparent) 42%,
    transparent 82%
  );
}

.feed-overlay-tag {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  max-width: calc(100% - 1.4rem);
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  color: #fff;
  background: color-mix(in srgb, var(--feed-accent) 82%, #000 18%);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feed-overlay-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.feed-overlay-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* Designed artwork carries its own typeset title, so this overlay drops the
   scrim and headline entirely — the picture speaks — leaving one quiet date
   chip in the corner. */
.feed-overlay--designed {
  justify-content: flex-end;
  align-items: flex-start;
  background: none;
}

.feed-overlay-chip {
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(10, 12, 20, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.home-news-gallery .feed-tile h3 {
  margin: 0;
  color: #fff;
  font-size: var(--text-md);
  line-height: 1.25;
  letter-spacing: 0;
  text-wrap: balance;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  /* Long titles wrap to a bounded box and ellipsis past it, so the text never
     overflows or buries the whole picture (see grafana/grafana.ai#242). */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

/* The title stays white over the image on hover; the lift and zoom carry the
   interaction instead. */
.home-news-gallery .feed-tile:hover h3 {
  color: #fff;
}

.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: 3px;
  background: var(--color-surface-2);
}

.prose pre {
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  overflow-x: auto;
}

.prose pre code {
  padding: 0;
  background: none;
}

/* ---- Video embeds --------------------------------------------------------- */

/* A responsive 16:9 frame for embedded Grafana Labs videos. Used on product
   pages inside .prose and reused for the homepage keynote (see
   grafana/grafana.ai#113). Capped well below the content width and centred so
   the players read as supporting media rather than dominating the page (see
   grafana/grafana.ai#128); the homepage keynote overrides this to run
   full-bleed. */
.video-embed {
  max-width: 36rem;
  margin: 2rem auto 2.25rem;
}

.video-embed .video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-embed figcaption {
  margin-top: 0.65rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* YouTube Shorts are vertical, so the short variant stands the frame up in a
   9:16 portrait and narrows the column to match (see grafana/grafana.ai#428). */
.video-embed--short {
  max-width: 20rem;
}

.video-embed--short .video-frame {
  aspect-ratio: 9 / 16;
}

/* ---- Product hero -------------------------------------------------------- */

/* Product pages lead with a hero that pairs the title and description with the
   product media, so it sits right at the top of the page instead of partway
   down it (see grafana/grafana.ai#239). The copy and media stay stacked until
   there is enough room for both columns to breathe. */
.product-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
  margin: 0.5rem 0 2.25rem;
}

@media (min-width: 64rem) {
  .product-hero {
    width: min(66rem, calc(100vw - (var(--page-gutter) * 2)));
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }

  /* Video benefits from more room than a supporting screenshot. Let video
     heroes use the full page frame and give the player the larger share. */
  .product-hero--video {
    width: min(var(--header-maxw), calc(100vw - (var(--page-gutter) * 2)));
    grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.4fr);
  }
}

.product-hero-copy {
  min-width: 0;
}

/* The product title keeps the shared highlighted prose h1 treatment so the
   hero holds the page's single colour identity. */
.product-hero-copy h1 {
  margin: 0;
}

/* The description carries the highlighted lead, mirroring the painted mark that
   the first prose paragraph uses elsewhere on the site. */
.product-hero-copy > p:first-of-type {
  margin: 0.9rem 0 0;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.34;
  color: var(--color-text);
  text-wrap: balance;
}

.product-hero-copy > p:first-of-type strong {
  display: inline;
  padding: 0.05em 0.28em;
  border-radius: 2px;
  color: var(--color-highlight-text);
  background: var(--color-highlight-bg);
  font-weight: 700;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Hero videos share the same 38rem media cap as product screenshots so the
   two treatments carry equal visual weight. */
.product-hero .video-embed {
  margin: 0 auto;
  max-width: 38rem;
  width: 100%;
}

/* Product screenshots can take the same hero position as videos without being
   forced into a 16:9 player. Keep their source proportions and make the whole
   image a clear path to the deeper guide it came from. */
.product-hero-image {
  width: 100%;
  max-width: 38rem;
  margin: 0 auto;
}

.product-hero-image a,
.product-hero-image-frame {
  display: block;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-2);
}

.product-hero-image img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.25s ease;
}

.product-hero-image a:hover img {
  transform: scale(1.015);
}

.product-hero-image figcaption {
  margin-top: 0.65rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Product pages can spotlight one deeper resource beneath the hero. The
   article image and copy share a single linked surface, keeping the feature
   easy to scan without introducing a second card system. */
.product-feature {
  width: min(66rem, calc(100vw - (var(--page-gutter) * 2)));
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  box-shadow: 0 22px 54px -42px color-mix(in srgb, var(--page-accent) 70%, transparent);
}

.prose .product-feature-link {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr);
  min-height: 17rem;
  color: inherit;
  text-decoration: none;
}

.prose .product-feature-link:hover {
  text-decoration: none;
}

.product-feature-media {
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: hidden;
  background: var(--color-surface-2);
}

.product-feature-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-feature-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1.5rem, 3.5vw, 2.6rem);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--page-accent) 13%, transparent), transparent 58%),
    var(--color-surface);
}

.product-feature-title {
  color: var(--color-text);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 700;
  line-height: 1.16;
  text-wrap: balance;
}

.product-feature-summary {
  margin-top: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}

.product-feature-cta {
  margin-top: 1.4rem;
  color: var(--page-accent);
  font-size: var(--text-sm);
  font-weight: 700;
}

.product-feature-link:hover .product-feature-cta {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.product-feature-link:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--page-accent) 48%, transparent);
  outline-offset: 4px;
}

@media (max-width: 760px) {
  .product-feature-link {
    grid-template-columns: 1fr;
  }

  .product-feature-media {
    aspect-ratio: 40 / 21;
  }
}

/* A portrait (9:16) hero video reads best stood up beside one continuous copy
   column rather than filling a landscape column. The portrait variant keeps
   the player narrow, gives the text the larger share, and aligns both columns
   at the top. The narrow cap also holds on mobile, overriding the wider default
   the hero otherwise gives its media. */
.product-hero--portrait .video-embed {
  max-width: 20rem;
}

@media (min-width: 64rem) {
  .product-hero--portrait {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.75fr);
    align-items: start;
  }

  .product-hero--portrait .video-embed {
    max-width: 20rem;
    margin-right: 0;
    margin-left: auto;
  }
}

/* ---- Agent Observability product image ----------------------------------- */

/* The screenshot is the real Grafana AI Observability product composite from
   grafana/sigil: analytics, overview, and conversation exploration. */
.observability-product-shot {
  margin: 1.15rem 0 1.85rem;
}

.observability-product-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.observability-product-shot figcaption {
  margin-top: 0.55rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
}

/* ---- Grafana technology screenshots -------------------------------------- */

/* Genuine Grafana product captures carry the technical story on the Grafana
   technology page. A quiet frame keeps dense dark UI legible on either site
   canvas without trying to restyle the product itself. */
.technology-grafana-page .grafana-screenshot {
  margin: clamp(2rem, 5vw, 3.5rem) 0;
}

.technology-grafana-page .grafana-screenshot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid color-mix(in srgb, var(--page-accent) 28%, var(--color-border));
  border-radius: 8px;
  background: #111217;
  box-shadow: 0 24px 56px -34px light-dark(rgba(17, 18, 23, 0.35), rgba(0, 0, 0, 0.86));
}

.technology-grafana-page .grafana-screenshot--hero {
  margin-top: 2.25rem;
}

.technology-grafana-page .grafana-screenshot figcaption {
  max-width: 78ch;
  margin: 0.75rem auto 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
  text-align: center;
}

/* ---- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.4rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: var(--text-base);
  border: 1px solid transparent;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  color: #fff;
  background: var(--cta);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--cta) 25%, transparent);
}

.btn-primary:hover {
  background: var(--cta-hover);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--cta) 34%, transparent);
}

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

.btn-ghost:hover {
  border-color: color-mix(in srgb, var(--cta) 34%, var(--color-border));
  background: color-mix(in srgb, var(--cta) 7%, var(--color-surface));
}

.content-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.62rem 0.95rem;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #fff;
  background: var(--cta);
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1.1;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--cta) 22%, transparent);
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.content-cta:hover {
  color: #fff;
  background: var(--cta-hover);
  text-decoration: none;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--cta) 32%, transparent);
}

.content-cta:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-link) 45%, transparent);
  outline-offset: 3px;
}

.prose .content-cta {
  margin-top: 0.15rem;
  color: #fff;
  text-decoration: none;
}

/* A centred AI prompt closes conversion pages with a quieter next step. The
   speaker chip overlaps the full card border so the question reads like a
   message from the product rather than another prose paragraph. */
.ai-question-card {
  position: relative;
  width: min(100%, 42rem);
  margin: clamp(3.5rem, 7vw, 5rem) auto 1rem;
  padding: clamp(2rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 3rem);
  border: 1px solid color-mix(in srgb, var(--page-accent) 38%, var(--color-border));
  border-radius: var(--radius);
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--page-accent) 12%, transparent), transparent 65%),
    var(--color-surface);
  box-shadow: 0 24px 60px -42px color-mix(in srgb, var(--page-accent) 70%, transparent);
}

.prose .ai-question-card p {
  margin: 0;
  max-width: none;
  font-size: var(--text-md);
  line-height: 1.6;
  text-wrap: balance;
}

.ai-question-speaker {
  position: absolute;
  top: 0;
  left: 50%;
  display: inline-flex;
  min-width: 2.4rem;
  height: 1.7rem;
  align-items: center;
  justify-content: center;
  padding: 0 0.55rem;
  border: 1px solid color-mix(in srgb, var(--page-accent) 48%, var(--color-border));
  border-radius: 999px;
  color: var(--page-accent);
  background: var(--color-bg);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  transform: translate(-50%, -50%);
}

/* ---- Homepage features ---------------------------------------------------- */

/* A feature is a bespoke marketing card floating just below the top bar. It
   carries its own bright, self-contained background with white text
   throughout, and lifts off the page with rounded corners, a hairline edge,
   and a colour-bloom shadow (a plain black shadow would vanish on the dark
   canvas) (see grafana/grafana.ai#275). */
.feature {
  position: relative;
  z-index: 2;
  isolation: isolate;
  overflow: hidden;
  width: min(calc(var(--header-maxw) + (var(--page-gutter) * 2)), calc(100% - (var(--page-gutter) * 2)));
  margin: clamp(0.8rem, 1.8vw, 1.3rem) auto 0;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 70px -16px light-dark(rgba(16, 20, 42, 0.5), rgba(214, 52, 166, 0.28)),
    0 10px 30px light-dark(rgba(16, 20, 42, 0.24), rgba(0, 0, 0, 0.55));
  transition:
    width 0.45s ease,
    margin 0.45s ease,
    border-radius 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s ease;
}

/* Collapsed, the band gives up the floating-card treatment and docks flush:
   full-bleed to the screen edges and tight under the top bar, with the
   chrome (radius, hairline, glow) dropped. Expanding lifts it back out into
   the floating position. */
.feature.is-collapsed {
  width: 100%;
  margin-top: 0;
  border-radius: 0;
  border-color: transparent;
  box-shadow: none;
  /* The badge sticker outsizes the slim band on purpose; the inner and the
     restore line clip themselves, so lifting the card's own clipping only
     frees the sticker to spill past the band's edges. */
  overflow: visible;
}

/* Collapse machinery: the X shrinks the whole card to the one-line restore
   button; clicking that line brings the band back. The body collapses via the
   0fr grid-row trick so no heights are measured, while the restore line rides
   a small max-height fade in the opposite direction. */
.feature-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.45s ease;
}

.feature.is-collapsed .feature-body {
  grid-template-rows: 0fr;
}

.feature.is-collapsed .feature-spark {
  /* Twinkles on a slim line read as dirt on the screen. */
  display: none;
}

.feature-restore {
  position: relative;
  display: flex;
  /* The band's background runs full-bleed when docked, but its content rides
     the same centred column as the rest of the page: the inline padding grows
     to the page margin so the label, dates, and countdown never stretch past
     --header-maxw on wide screens. Mirrors the main content box's math. */
  --restore-edge: max(var(--page-gutter), calc((100% - var(--header-maxw)) / 2));
  /* Wrapping keeps narrow screens tidy: the label holds the first line and
     the countdown drops to its own right-aligned line instead of squeezing
     the label into a clipped multi-line stack. */
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.9rem;
  width: 100%;
  max-height: 0;
  padding: 0 var(--restore-edge);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: max-height 0.45s ease, padding 0.45s ease, opacity 0.3s ease;
}

.feature.is-collapsed .feature-restore {
  /* Roomy cap, not a measured height: one line normally, two when the
     countdown wraps on small screens. */
  max-height: 6rem;
  padding: 0.75rem var(--restore-edge);
  opacity: 1;
  pointer-events: auto;
}

/* An empty zero-height slot just after the wordmark text: it reserves the
   sticker's spot in the row, and the morphing badge below anchors itself to
   it. */
.feature-restore-badge {
  flex: none;
  width: 5.2rem;
  height: 0;
}

/* The morphing badge: one sticker gliding between the docked line's slot
   (centred on the bar, spilling 15px past each edge) and the open card's
   marque spot. The script measures both anchors and sets the custom
   properties; only this one transform ever animates, so the move stays on
   the compositor. Hidden until the script takes over — without JS the
   static marque badge in the card renders instead. */
.feature-badge-morph {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 120px;
  visibility: hidden;
  pointer-events: none;
  transform-origin: 0 0;
  transform: translate(var(--badge-x, 0px), var(--badge-y, 0px)) scale(var(--badge-s, 1)) translate(-50%, -50%);
  will-change: transform;
  filter: drop-shadow(0 8px 16px rgba(10, 8, 30, 0.55));
}

.feature--badge-live .feature-badge-morph {
  visibility: visible;
}

/* The glide is armed only once the visitor actually toggles the band, so a
   page that lands collapsed can never play an entrance animation — before
   the first click the sticker only ever snaps into place. */
.feature--badge-animate .feature-badge-morph {
  transition: transform 0.45s ease;
}

/* While the morph badge is live, the in-card badge is only an invisible
   anchor — it keeps its layout box so the sticker knows where to land. */
.feature--badge-live .feature-name .ai-week-badge {
  visibility: hidden;
}

.feature-restore-label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--text-xs);
  font-weight: 600;
}

.feature-restore-dates {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.8);
}

/* The condensed countdown for the collapsed bar: the same odometer reels as
   the full card, laid out as one inline row of d/h/m/s pairs so the slim line
   still carries the "starts in" urgency without a second stacked block. */
.feature-restore-count {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  /* Right-align the timer: push it across the bar, stopping short of the
     absolutely-positioned expand caret in the corner. */
  margin-left: auto;
  margin-right: 2.6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: #fff;
}

.feature-restore-count-cell {
  display: flex;
  align-items: baseline;
}

.feature-restore-count-cell .count-digit {
  width: 1ch;
}

.feature-restore-count-unit {
  margin-left: 0.1rem;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.6);
}

/* Both corner controls — the X that collapses and the caret that expands —
   pin to the identical top-right spot on the card, so the control never
   jumps when the band toggles. Bare glyphs, no chrome around them. */
.feature-restore-icon {
  position: absolute;
  top: 0.3rem;
  /* Track the docked content's right edge so the expand caret lands on the
     same spot as the card's collapse X, never jumping between states. */
  right: var(--restore-edge);
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.2s ease;
}

/* A small down caret drawn from borders, so it stays crisp at any size. */
.feature-restore-icon::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.25rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.feature-restore:hover .feature-restore-icon {
  color: #fff;
}

.feature-dismiss {
  position: absolute;
  top: 0.3rem;
  right: var(--page-gutter);
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease;
}

.feature-dismiss:hover {
  color: #fff;
}

/* Applied for the first frames when a page loads with the band already
   collapsed: every collapse transition is muted so the slim line simply is,
   rather than animating shut and jittering the page below. */
.feature--instant,
.feature--instant .feature-body,
.feature--instant .feature-inner,
.feature--instant .feature-restore,
.feature--instant .feature-badge-morph,
.feature--instant .feature-art,
.feature--instant .feature-bg::before,
.feature--instant .feature-bg::after {
  transition: none !important;
}

/* The artwork is a deliberately constructed digital festival: flat isometric
   tiles, a perspective grid, pixel confetti, and circuit-like signal paths.
   The quiet left field protects the copy while the small world builds behind
   the countdown plate on the right. */
/* The field takes the badge's navy-violet, with the old blue washes shifted
   to the sticker's pink and purple. */
.feature-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 0 54%, rgba(244, 63, 168, 0.13) 54% 54.2%, transparent 54.2%),
    #140f2d;
}

.feature-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(255, 110, 192, 0.035) 7px 8px),
    radial-gradient(circle at 8% 12%, rgba(160, 79, 212, 0.3), transparent 28%);
  opacity: 0.72;
  transition: opacity 0.45s ease;
}

.feature-bg::after {
  content: "";
  position: absolute;
  top: 0;
  right: 43.5%;
  bottom: 0;
  width: 3px;
  background:
    linear-gradient(#ff671d 0 31%, transparent 31% 36%, #ff3ea8 36% 68%, transparent 68% 73%, #8fb0ff 73%);
  opacity: 0.66;
  transition: opacity 0.45s ease;
}

.feature-art {
  position: absolute;
  top: 0;
  right: 0;
  width: min(61%, 48rem);
  height: 100%;
  overflow: visible;
  opacity: 0.88;
  transition: opacity 0.45s ease;
}

.feature-iso-grid {
  fill: none;
  stroke: rgba(255, 110, 192, 0.2);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.feature-iso-grid path:first-child {
  fill: rgba(244, 63, 168, 0.04);
  stroke: rgba(255, 110, 192, 0.4);
}

.feature-radials {
  fill: none;
  stroke: rgba(255, 110, 192, 0.2);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transform-origin: 536px 203px;
  animation: feature-radials-turn 48s linear infinite;
}

.feature-radials circle {
  stroke-dasharray: 2 8;
}

.feature-radials circle:first-child {
  stroke: rgba(255, 129, 55, 0.22);
  stroke-dasharray: 1 12;
}

@keyframes feature-radials-turn {
  to {
    transform: rotate(360deg);
  }
}

.feature-iso-top,
.feature-iso-left,
.feature-iso-right,
.feature-iso-glyph,
.feature-iso-circuit,
.feature-iso-pulse,
.feature-pixel-signal {
  vector-effect: non-scaling-stroke;
}

.feature-iso-platform .feature-iso-top {
  fill: rgba(43, 26, 84, 0.58);
  stroke: rgba(255, 110, 192, 0.82);
  stroke-width: 1.5;
}

.feature-iso-platform .feature-iso-left {
  fill: rgba(20, 12, 44, 0.72);
  stroke: rgba(190, 62, 148, 0.62);
  stroke-width: 1;
}

.feature-iso-platform .feature-iso-right {
  fill: rgba(30, 18, 62, 0.68);
  stroke: rgba(190, 62, 148, 0.62);
  stroke-width: 1;
}

.feature-iso-circuit {
  fill: none;
  stroke: #ff8137;
  stroke-width: 2;
  stroke-dasharray: 6 5;
}

.feature-iso-pulse {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: bevel;
}

.feature-iso-tile {
  opacity: 0.78;
  animation: feature-iso-float 5.4s ease-in-out infinite alternate;
}

.feature-iso-tile .feature-iso-top {
  fill: rgba(15, 19, 34, 0.78);
  stroke: rgba(255, 129, 55, 0.88);
  stroke-width: 1;
}

.feature-iso-tile .feature-iso-left {
  fill: rgba(255, 103, 29, 0.08);
  stroke: rgba(255, 129, 55, 0.52);
  stroke-width: 1;
}

.feature-iso-tile .feature-iso-right {
  fill: rgba(40, 92, 240, 0.1);
  stroke: rgba(143, 176, 255, 0.5);
  stroke-width: 1;
}

/* Weekday stamp on each tile top. Horizontal (not skewed to the iso plane) so
   it stays legible at the small rendered size; each tile's day picks up that
   tile's accent hue, lightened to read on the dark top face. */
.feature-iso-day {
  fill: #ffbe93;
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-anchor: middle;
  dominant-baseline: central;
}

.feature-iso-tile--2 .feature-iso-day,
.feature-iso-tile--4 .feature-iso-day {
  fill: #b9ccff;
}

.feature-iso-tile--3 .feature-iso-day {
  fill: #ffe0ad;
}

.feature-iso-tile--5 .feature-iso-day {
  fill: #ffb3dd;
}

.feature-iso-tile--2,
.feature-iso-tile--4 {
  animation-delay: -2.8s;
  animation-duration: 6.2s;
}

.feature-iso-tile--2 .feature-iso-top,
.feature-iso-tile--4 .feature-iso-top {
  fill: rgba(15, 19, 34, 0.78);
  stroke: rgba(143, 176, 255, 0.82);
}

.feature-iso-tile--2 .feature-iso-left,
.feature-iso-tile--4 .feature-iso-left {
  fill: rgba(40, 92, 240, 0.08);
  stroke: rgba(143, 176, 255, 0.44);
}

.feature-iso-tile--2 .feature-iso-right,
.feature-iso-tile--4 .feature-iso-right {
  fill: rgba(40, 92, 240, 0.16);
  stroke: rgba(143, 176, 255, 0.56);
}

.feature-iso-tile--3 {
  animation-delay: -1.3s;
  animation-duration: 4.8s;
}

.feature-iso-tile--3 .feature-iso-top {
  fill: rgba(15, 19, 34, 0.78);
  stroke: rgba(255, 208, 138, 0.76);
}

.feature-iso-tile--3 .feature-iso-left {
  fill: rgba(255, 208, 138, 0.07);
  stroke: rgba(255, 208, 138, 0.42);
}

.feature-iso-tile--3 .feature-iso-right {
  fill: rgba(255, 129, 55, 0.1);
  stroke: rgba(255, 129, 55, 0.45);
}

.feature-iso-tile--5 .feature-iso-top {
  fill: rgba(15, 19, 34, 0.78);
  stroke: rgba(255, 92, 184, 0.72);
}

.feature-iso-tile--5 .feature-iso-left {
  fill: rgba(255, 62, 168, 0.07);
  stroke: rgba(255, 92, 184, 0.4);
}

.feature-iso-tile--5 .feature-iso-right {
  fill: rgba(255, 62, 168, 0.11);
  stroke: rgba(255, 92, 184, 0.46);
}

@keyframes feature-iso-float {
  from {
    transform: translateY(-3px);
  }

  to {
    transform: translateY(4px);
  }
}

.feature-pixel-confetti {
  fill: #ff5cb8;
}

.feature-pixel-confetti > path:nth-child(2) {
  fill: #ffb254;
}

.feature-pixel-signal {
  fill: none;
  stroke: #ffd08a;
  stroke-width: 2;
  stroke-dasharray: 5 5;
  animation: feature-pixel-signal 3.5s linear infinite;
}

@keyframes feature-pixel-signal {
  to {
    stroke-dashoffset: -20;
  }
}

/* On the docked slim band the artwork and washes drop to a murmur so the
   line reads as quiet chrome, not a busy banner. */
.feature.is-collapsed .feature-art {
  opacity: 0.16;
}

.feature.is-collapsed .feature-bg::before {
  opacity: 0.32;
}

.feature.is-collapsed .feature-bg::after {
  opacity: 0.28;
}

/* Node sparks: tiny dots twinkling along the diagonal hairlines, echoing the
   node-and-line motif the rest of the page carries. They sit in the right
   half of the band, well clear of the copy. */
.feature-spark {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 1px rgba(255, 110, 192, 0.72);
  opacity: 0;
  animation: feature-spark 6.5s ease-in-out infinite;
}

@keyframes feature-spark {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.6);
  }

  35% {
    opacity: 0.85;
    transform: scale(1);
  }

  55% {
    opacity: 0.3;
  }

  70% {
    opacity: 0.7;
  }
}

.feature-spark--1 {
  top: 24%;
  left: 66%;
}

.feature-spark--2 {
  top: 58%;
  left: 72.5%;
  box-shadow: 0 0 8px 1px rgba(255, 129, 55, 0.65);
  animation-duration: 7.4s;
  animation-delay: 1.4s;
}

.feature-spark--3 {
  top: 36%;
  left: 79.5%;
  animation-duration: 5.8s;
  animation-delay: 2.7s;
}

.feature-spark--4 {
  top: 76%;
  left: 68.5%;
  width: 3px;
  height: 3px;
  animation-duration: 8.2s;
  animation-delay: 3.6s;
}

.feature-spark--5 {
  top: 16%;
  left: 88%;
  width: 3px;
  height: 3px;
  box-shadow: 0 0 8px 1px rgba(114, 225, 166, 0.6);
  animation-duration: 6.9s;
  animation-delay: 4.8s;
}

.feature-spark--6 {
  top: 64%;
  left: 84%;
  animation-duration: 7.8s;
  animation-delay: 2.2s;
}

.feature-spark--7 {
  top: 44%;
  left: 70%;
  width: 3px;
  height: 3px;
  box-shadow: 0 0 8px 1px rgba(255, 129, 55, 0.6);
  animation-duration: 6.1s;
  animation-delay: 5.6s;
}

.feature-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  /* Full width (auto margins would disable the grid item's stretch and let
     the box shrink-wrap, unmooring the absolutely-anchored X), capped to the
     header's content width and centred. */
  width: 100%;
  max-width: calc(var(--header-maxw) + (var(--page-gutter) * 2));
  margin: 0 auto;
  /* Roomier vertical air so the band reads as a feature, not a notice bar.
     min-height and overflow let the 0fr collapse actually reach zero; the
     padding rides the same transition so the card closes flush. */
  min-height: 0;
  overflow: hidden;
  padding: clamp(2.5rem, 5vw, 3.75rem) clamp(2rem, 4.5vw, 4rem);
  transition: padding 0.45s ease, opacity 0.3s ease;
}

.feature.is-collapsed .feature-inner {
  padding-block: 0;
  opacity: 0;
}

.feature-copy {
  /* Wide enough for the headline to hold one line on desktop, while leaving
     room beside the roomier inner padding for the aside to stay on the row. */
  max-width: 42rem;
}

.feature-kicker {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0 0.85rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1;
  text-transform: uppercase;
}

.feature-kicker span + span {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}

.feature-kicker span + span::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: #ff3ea8;
}

/* The retro badge is the campaign marque; the words ride along for assistive
   tech via .sr-only. */
.feature-name {
  width: clamp(9rem, 15vw, 12rem);
  margin: 0 0 1.15rem;
}

.feature-title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  max-width: 38rem;
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
  line-height: 1.16;
  /* Balance the wrap so a long headline breaks mid-sentence instead of
     orphaning its last word. */
  text-wrap: balance;
  color: #fff;
}

/* A crisp underline feels printed and deliberate, avoiding the familiar
   generative-gradient marker effect. */
.feature-title-accent {
  display: inline-block;
  margin-top: 0.18em;
  padding-bottom: 0.08em;
  border-bottom: 3px solid #ff3ea8;
  color: #ffd08a;
}

.feature-lede {
  margin: 0;
  /* Stop well short of the aside so the paragraph keeps clear air on its
     right rather than running the full copy column. */
  max-width: 40rem;
  padding-right: clamp(0rem, 3vw, 2.5rem);
  font-size: var(--text-md);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}

.feature-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1rem;
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 700;
}

.feature-more-label {
  padding-bottom: 0.12rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

.feature-more:hover {
  color: #fff;
  text-decoration: none;
}

.feature-more:hover .feature-more-label {
  border-bottom-color: #fff;
}

/* The trailer rides under the copy, left-aligned and sized to sit alongside
   the countdown aside rather than centred like the product embeds. Its frame
   keeps the campaign's pink hairline instead of the neutral content border. */
.feature-trailer {
  max-width: 32rem;
  margin: 1.5rem 0 0;
}

.feature-trailer .video-frame {
  border-color: rgba(255, 62, 168, 0.5);
  background: rgba(14, 9, 30, 0.94);
}

.feature-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.05rem;
  /* Wide enough that the four countdown cells (Days–Seconds) never spill past
     the card even with the roomier padding: at the old 16rem floor the
     Seconds cell clipped in the two-column layout (grafana/grafana.ai#311). */
  width: clamp(19.5rem, 25vw, 21rem);
  padding: clamp(1.65rem, 2.4vw, 2rem);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0;
  background: rgba(14, 9, 30, 0.94);
  box-shadow: none;
  filter: drop-shadow(8px 8px 0 rgba(244, 63, 168, 0.4));
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

.feature-dates {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.feature-dates-range {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  color: #fff;
}

/* Countdown: four odometer cells, each digit a strip of 0-9 slid by the --d
   custom property the script sets each second. Sized to sit quietly above the
   dates — numbers first, whisper labels beneath. */
.feature-countdown {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.feature-count-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}

.feature-count-cells {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}

.feature-count-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.feature-count-value {
  display: flex;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1;
  color: #fff;
}

.count-digit {
  display: block;
  width: 1ch;
  height: 1em;
  overflow: hidden;
  text-align: center;
  /* The reel maths assume the digit slot, each reel step, and the translate
     unit are all exactly 1em, so the strip must not inherit a taller line
     box — anything else lets neighbouring digits bleed into view. */
  line-height: 1;
}

.count-reel {
  display: block;
  transform: translateY(calc(var(--d, 0) * -1em));
  transition: transform 0.5s cubic-bezier(0.33, 0, 0.15, 1);
}

.count-reel > span {
  display: block;
  height: 1em;
}

.feature-count-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.6);
}

.feature-count-sep {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.35);
}

/* The calendar links: one white icon tile per service under a quiet heading,
   so every option is a single click with no chooser to open. The white tiles
   inherit the old CTA's job of popping against the vivid band. */
.feature-cal {
  display: grid;
  gap: 0.55rem;
}

.feature-cal-heading {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}

.feature-cal-icons {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature-cal-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 10px 28px rgba(10, 12, 32, 0.35);
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

.feature-cal-icon svg {
  display: block;
  width: 1.65rem;
  height: 1.65rem;
}

.feature-cal-icon:hover {
  border-color: rgba(255, 178, 84, 0.75);
  background: #fff8ed;
  box-shadow: 0 12px 32px rgba(10, 12, 32, 0.44);
}

@media (prefers-reduced-motion: reduce) {
  .feature-bg::before,
  .feature-bg::after {
    animation: none;
  }

  .feature-iso-tile,
  .feature-radials,
  .feature-pixel-signal {
    animation: none;
  }

  .feature-spark {
    animation: none;
    opacity: 0.45;
  }

  .feature-cal-icon {
    transition: none;
  }

  /* Collapse snaps and countdown digits swap in place instead of rolling. */
  .feature,
  .feature-body,
  .feature-inner,
  .feature-restore,
  .feature-badge-morph,
  .count-reel {
    transition: none;
  }
}

@media (max-width: 760px) {
  .feature-bg::after {
    display: none;
  }

  .feature-art {
    top: auto;
    bottom: -5%;
    width: 115%;
    height: 56%;
    opacity: 0.56;
    transform: translateX(24%);
  }

  .feature-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .feature-aside {
    width: 100%;
  }

  /* The stacked band is all copy on small screens, so the sparks land beside
     text and read as stray marks — drop them. */
  .feature-spark {
    display: none;
  }

  /* Clear the X button, which floats over the top-right corner. */
  .feature-copy {
    padding-right: 0;
  }

  .feature-kicker span + span {
    display: none;
  }
}

@media (max-width: 480px) {
  .feature-restore-dates {
    display: none;
  }
}

/* ---- AI Week event page --------------------------------------------------- */

.ai-week-event-page {
  max-width: var(--header-maxw);
}

.ai-week-event-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.38fr);
  align-items: end;
  column-gap: clamp(2rem, 6vw, 6rem);
  row-gap: clamp(2rem, 4vw, 3rem);
  min-height: clamp(36rem, 63vw, 46rem);
  margin-top: 0.8rem;
  padding: clamp(3rem, 7vw, 6.5rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: #fff;
  background: #120d28;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 32px 90px -34px rgba(214, 52, 166, 0.5);
}

/* The sky wears the badge's palette: a navy-violet field with pink and orange
   glows where the old treatment leaned blue. */
.ai-week-event-sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    linear-gradient(64deg, transparent calc(69% - 1px), rgba(255, 110, 192, 0.24) 69%, transparent calc(69% + 1px)),
    linear-gradient(64deg, transparent calc(77% - 1px), rgba(255, 255, 255, 0.08) 77%, transparent calc(77% + 1px)),
    radial-gradient(46% 60% at 17% 16%, rgba(160, 79, 212, 0.34), transparent 70%),
    radial-gradient(40% 52% at 84% 90%, rgba(255, 103, 29, 0.28), transparent 68%),
    radial-gradient(34% 44% at 78% 12%, rgba(244, 63, 168, 0.2), transparent 70%),
    linear-gradient(120deg, #120d28 0%, #1c1443 58%, #140f31 100%);
}

.ai-week-event-sky::after {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    conic-gradient(from 158deg at 15% -8%, transparent 0deg, rgba(255, 178, 84, 0.11) 9deg, transparent 22deg),
    conic-gradient(from 186deg at 83% -8%, transparent 0deg, rgba(255, 110, 192, 0.13) 9deg, transparent 21deg);
  transform-origin: 50% 0;
  animation: feature-beams 13s ease-in-out infinite alternate;
}

.ai-week-event-sky svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(5rem, 12vw, 9rem);
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  color: rgba(255, 255, 255, 0.13);
  vector-effect: non-scaling-stroke;
}

.ai-week-event-lights {
  position: absolute;
  top: 0.85rem;
  left: 2rem;
  right: 2rem;
  height: 5px;
  background-image: radial-gradient(circle at 2px 2px, rgba(255, 216, 150, 0.42) 1px, transparent 2.2px);
  background-size: 34px 5px;
}

.ai-week-event-sky > i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 2px rgba(255, 110, 192, 0.75);
  animation: feature-spark 6.5s ease-in-out infinite;
}

/* Alternate sparkles glow gold so the twinkle field mixes the badge's pink
   and flame hues. */
.ai-week-event-sky > i:nth-of-type(odd) {
  box-shadow: 0 0 10px 2px rgba(255, 190, 84, 0.7);
}

.ai-week-event-sky > i:nth-of-type(1) { top: 24%; left: 64%; }
.ai-week-event-sky > i:nth-of-type(2) { top: 54%; left: 72%; animation-delay: -1.1s; }
.ai-week-event-sky > i:nth-of-type(3) { top: 73%; left: 84%; animation-delay: -2.4s; }
.ai-week-event-sky > i:nth-of-type(4) { top: 37%; left: 91%; animation-delay: -3.2s; }
.ai-week-event-sky > i:nth-of-type(5) { top: 78%; left: 59%; animation-delay: -4.1s; }
.ai-week-event-sky > i:nth-of-type(6) { top: 17%; left: 78%; animation-delay: -5s; }
.ai-week-event-sky > i:nth-of-type(7) { top: 63%; left: 96%; animation-delay: -5.8s; }

.ai-week-event-copy {
  max-width: 48rem;
}

.ai-week-event-kicker {
  margin: 0 0 1rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* The retro badge stands in for the old display-type title; the heading text
   stays for assistive tech via .sr-only. */
.ai-week-event-copy h1 {
  width: clamp(15rem, 30vw, 22rem);
  margin: 0;
}

.ai-week-event-copy .ai-week-badge {
  filter: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.4));
}

.ai-week-event-promise {
  max-width: 43rem;
  margin: 1.6rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3.3vw, 2.7rem);
  font-weight: 600;
  line-height: 1.14;
  text-wrap: balance;
}

.ai-week-event-promise-line {
  display: block;
  margin-top: 0.18em;
}

.ai-week-event-promise mark {
  display: inline;
  padding: 0.02em 0.2em;
  border-radius: 0.18em;
  color: #16183a;
  background: linear-gradient(92deg, #ffb254 8%, #ff8ecb 50%, #8fb0ff 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.ai-week-event-lede {
  max-width: 40rem;
  margin: 1.2rem 0 0;
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.84);
}

.ai-week-event-date {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  margin: 1.6rem 0 0;
}

.ai-week-event-date strong {
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

.ai-week-event-date span {
  color: rgba(255, 255, 255, 0.68);
}

.ai-week-event-cal {
  margin-top: 1.25rem;
}

.ai-week-event-countdown {
  align-self: end;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(35, 27, 82, 0.8);
  filter: drop-shadow(6px 6px 0 rgba(255, 103, 29, 0.35));
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

.ai-week-event-countdown > p {
  margin: 0 0 0.8rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
}

.ai-week-event-count-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.ai-week-event-count-grid > span {
  display: grid;
  gap: 0.38rem;
  text-align: center;
}

.ai-week-event-count-grid strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1;
  color: #fff;
}

.ai-week-event-count-value {
  display: inline-block;
  min-width: 2ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.ai-week-event-count-grid small {
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
}

.ai-week-event-intro {
  margin-top: clamp(4.5rem, 9vw, 7rem);
}

.ai-week-event-intro > .prose {
  max-width: 52rem;
}

.ai-week-event-intro .prose > p:first-of-type {
  max-width: none;
  margin-bottom: 0.4rem;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.ai-week-event-intro h2,
.ai-week-event-expect > h2 {
  margin: 0.45rem 0 1rem;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.08;
  text-wrap: balance;
}

.ai-week-event-days {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.85rem;
  margin: clamp(1rem, 2.4vw, 1.8rem) 0 0;
  padding: 0;
  list-style: none;
}

.ai-week-event-days li {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 10.5rem;
  padding: 1rem;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 0;
  background:
    linear-gradient(150deg, rgba(255, 62, 168, 0.22), transparent 46%),
    linear-gradient(330deg, rgba(255, 103, 29, 0.2), transparent 52%),
    #231b52;
  box-shadow:
    -0.28rem 0.34rem 0 #ff3ea8,
    0.32rem -0.28rem 0 rgba(255, 103, 29, 0.88),
    0 18px 34px rgba(0, 0, 0, 0.24);
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
}

.ai-week-event-days li::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 0.36rem;
  background: linear-gradient(90deg, #ff671d, #ff3ea8, #1b55f5);
}

.ai-week-event-days span {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-style: italic;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffb254;
  text-shadow: 2px 2px 0 #120d28;
}

.ai-week-event-days strong {
  position: relative;
  z-index: 2;
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: #fff;
  text-shadow: 2px 2px 0 #ff3ea8;
}

.ai-week-event-days em {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding-top: 1.4rem;
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
}

.ai-week-event-reveal {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.3rem;
  margin-top: 0.85rem;
  padding: 0.55rem 0.9rem;
  border: 2px solid #fff;
  border-radius: 0;
  background: #ff671d;
  color: #231b52;
  font: italic 800 var(--text-xs) / 1 var(--font-display);
  letter-spacing: 0.04em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.24);
  box-shadow: -0.16rem 0.18rem 0 #ff3ea8;
  cursor: not-allowed;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

.ai-week-event-reveal:disabled {
  opacity: 1;
}

.ai-week-event-video {
  margin-top: clamp(4.5rem, 9vw, 7rem);
}

.ai-week-event-video > .eyebrow {
  margin: 0;
}

.ai-week-event-video h2 {
  margin: 0.45rem 0 1rem;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.08;
  text-wrap: balance;
}

/* The event page carries a bolder trailer than the capped product embeds, so
   the player fills the content column and drops the auto centring. */
.ai-week-event-trailer {
  max-width: 56rem;
  margin: 1.5rem 0 0;
}

.ai-week-event-expect {
  margin-top: clamp(4.5rem, 9vw, 7rem);
}

.ai-week-event-expect > .eyebrow {
  margin: 0;
}

.ai-week-event-expect-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.ai-week-event-expect-grid article {
  padding: clamp(1.4rem, 3vw, 2.25rem);
  border-top: 2px solid color-mix(in srgb, var(--page-accent) 48%, var(--color-border));
  background: var(--color-surface);
}

.ai-week-event-expect-grid span {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  color: var(--page-accent);
}

.ai-week-event-expect-grid h3 {
  margin: 1.2rem 0 0.55rem;
  font-size: var(--text-lg);
}

.ai-week-event-expect-grid p {
  margin: 0;
  color: var(--color-text-muted);
}

@media (max-width: 960px) {
  .ai-week-event-hero {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .ai-week-event-countdown {
    width: min(100%, 27rem);
  }

  .ai-week-event-days {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .ai-week-event-hero {
    min-height: 0;
    padding: 4.5rem 1.25rem 1.5rem;
  }

  .ai-week-event-copy h1 {
    width: min(72vw, 18rem);
  }

  .ai-week-event-days {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-week-event-expect-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .ai-week-event-days {
    grid-template-columns: minmax(0, 1fr);
  }

  .ai-week-event-days li {
    min-height: 9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-week-bar,
  .ai-week-bar-status i,
  .ai-week-bar-save,
  .ai-week-event-sky::after,
  .ai-week-event-sky > i {
    animation: none;
    transition: none;
  }

  .ai-week-event-sky > i {
    opacity: 0.45;
  }
}

/* ---- Home splash ---------------------------------------------------------- */

.home {
  /* Full-bleed home: product sections tint the whole width, so the home
     wrapper is not capped at --maxw. Inner content stays centred. */
  position: relative;
  max-width: none;
  margin: 0;
  padding: 0;
  /* Clip sideways only: full-bleed section art must not cause horizontal
     scroll, but the docked AI Week band's badge spills 15px above the top
     edge and has to stay visible. The plain hidden line is the fallback for
     engines without overflow: clip. */
  overflow: hidden;
  overflow-x: clip;
  overflow-y: visible;
}

/* A quiet field behind the hero: the brand radials at a fraction of their old
   strength, fading out well before the fold. The interest now comes from the
   isometric grid and the corner artefacts, not a painted sky. */
.home::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: clamp(28rem, 52vw, 40rem);
  pointer-events: none;
  background: var(--hero-radial);
  opacity: light-dark(0.4, 0.34);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
}

/* ---- Home isometric grid --------------------------------------------------- */

/* One isometric net of nodes beginning below the opening shift hero and
   spanning the rest of the page, drawn on a fixed canvas whose camera follows the
   scroll position (see _backgrounds.html.tpl). The canvas's color is the base
   line colour the script reads at draw time; node, accent, and hot colours are
   resolved from the page tokens the same way. Sections that carry content sit
   at z-index 1, so the net stays behind the copy. */
.home-iso {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: color-mix(in srgb, var(--cta-text) 55%, var(--color-text-muted));
  opacity: light-dark(0.55, 0.65);
}

@media (max-width: 68rem) {
  .home-iso,
  .hero-corners,
  .home-shift-plates {
    display: none;
  }
}

/* ---- Hero corner artefacts ------------------------------------------------- */

/* Two hairline strokes hover just off opposite corners of the opening
   section. The lines never meet — the gap is the point — and they drift a few
   pixels over a slow cycle so the section feels alive without anything
   obviously moving. */
.hero-corners {
  position: absolute;
  inset: clamp(1.25rem, 4vw, 2.75rem) clamp(1rem, 5vw, 3.5rem);
  pointer-events: none;
}

.hero-corner {
  position: absolute;
  width: clamp(3.5rem, 7vw, 6rem);
  height: clamp(3.5rem, 7vw, 6rem);
}

.hero-corner--tl {
  top: 0;
  left: 0;
}

.hero-corner--br {
  right: 0;
  bottom: 0;
  transform: rotate(180deg);
}

.hero-corner i {
  position: absolute;
  display: block;
}

.hero-corner i:first-child {
  top: 0;
  left: 26%;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--page-accent) 55%, transparent), transparent);
}

.hero-corner i:last-child {
  top: 26%;
  bottom: 0;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--page-accent) 55%, transparent), transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-corner {
    animation: corner-drift 12s ease-in-out infinite alternate;
  }

  .hero-corner--br {
    animation-delay: -6s;
  }
}

@keyframes corner-drift {
  from {
    translate: 0 0;
  }

  to {
    translate: 7px 5px;
  }
}

.home-shift,
.home-news,
.home-highlights,
.home-products {
  position: relative;
  z-index: 1;
}

.home-eyebrow {
  margin: 0 0 1rem;
  text-transform: uppercase;
  /* Wide tracking on the small caps gives the eyebrows a quieter, more
     deliberate voice than bold display type would. */
  letter-spacing: 0.16em;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}

/* Approved customer proof sits close to the claim it substantiates. The hero
   quote gets a little more room; product proof stays compact enough to support
   the decision without competing with each section title. */
.customer-proof {
  margin: 0;
  text-align: left;
}

.customer-proof blockquote {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.48;
}

.customer-proof figcaption {
  margin-top: 0.65rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-style: normal;
  line-height: 1.4;
}

/* In the hero the proof sits under the centred CTAs, so it lines up with the
   rest of the column rather than hanging left. A little more lead above keeps
   it clear of the buttons, and the caption gets a touch more room from the
   quote. */
.customer-proof--hero {
  width: min(100%, 48rem);
  margin: clamp(3.5rem, 5.5vw, 5rem) auto 0;
  text-align: center;
}

.customer-proof--hero blockquote {
  font-size: clamp(0.98rem, 1.45vw, 1.13rem);
  text-wrap: balance;
}

.customer-proof--hero figcaption {
  margin-top: 0.85rem;
}

/* The hero proof is a rotating carousel of approved quotes. It keeps the same
   width and lead-in as the single hero figure it replaced; the figure inside
   keeps the customer-proof--hero treatment but sheds its own margin so the
   carousel wrapper owns the spacing. */
.customer-proof-carousel {
  width: min(100%, 48rem);
  margin: clamp(3.5rem, 5.5vw, 5rem) auto 0;
}

/* All slides share one grid cell so the frame is sized by the tallest quote
   and never jumps as they cross-fade. Inactive slides fade out and leave the
   a11y tree (visibility:hidden) while still holding their space. */
.customer-proof-carousel-viewport {
  display: grid;
}

.customer-proof-carousel-viewport > .customer-proof-slide {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}

.customer-proof-carousel-viewport > .customer-proof-slide.is-active {
  opacity: 1;
  visibility: visible;
}

.customer-proof-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 1.1rem;
}

.customer-proof-carousel-arrow {
  display: inline-flex;
  width: 1.9rem;
  height: 1.9rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.customer-proof-carousel-arrow svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.customer-proof-carousel-arrow:hover {
  color: var(--color-text);
  border-color: color-mix(in srgb, var(--page-accent) 60%, var(--color-border));
}

.customer-proof-carousel-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.customer-proof-carousel-dot {
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border: 1px solid var(--color-text-muted);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.customer-proof-carousel-dot:hover {
  border-color: var(--page-accent);
}

.customer-proof-carousel-dot.is-active {
  border-color: var(--page-accent);
  background: var(--page-accent);
}

.customer-proof-carousel-arrow:focus-visible,
.customer-proof-carousel-dot:focus-visible {
  outline: 2px solid var(--cta-text);
  outline-offset: 2px;
}

/* Reduced-motion visitors get an instant swap instead of a cross-fade; the
   script already withholds auto-advance for them, leaving the controls. */
@media (prefers-reduced-motion: reduce) {
  .customer-proof-carousel-viewport > .customer-proof-slide {
    transition: none;
  }
}

/* A fine downward marker uses the hero's existing lower breathing room to
   lead into the next section without making the opening materially taller. */
.home-next-section {
  position: absolute;
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  left: 50%;
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transform: translateX(-50%);
  transition:
    color 0.16s ease,
    transform 0.16s ease;
}

.home-next-section svg {
  width: 1.25rem;
  height: 2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-next-section:hover {
  color: var(--color-text);
  transform: translate(-50%, 2px);
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.3rem;
  justify-content: center;
  margin-top: clamp(3.25rem, 4.5vw, 4rem);
}

/* The primary CTA signs the visitor up: a solid Interactive Blue pill that
   carries the section's single strongest action into /get-started (see
   grafana/grafana.ai#537). */
.home-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0.72rem 1.5rem;
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
  font-size: var(--text-base);
  background: var(--cta);
  box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--cta) 70%, transparent);
  transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.home-cta-primary:hover {
  background: var(--cta-hover);
  box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--cta) 85%, transparent);
  transform: scale(1.04);
}

/* The secondary CTA opens the tour in a lighter blue that defers to the
   primary button beside it. Its sparkle and "Try it now" label echo the
   matching action in the top navigation. */
.home-tour-play {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto;
  padding: 0.4rem 1.2rem 0.4rem 0.4rem;
  border-radius: 999px;
  color: var(--cta-text);
  font-weight: 600;
  font-size: var(--text-base);
  background: color-mix(in srgb, var(--cta) 14%, transparent);
  transition: background 0.16s ease, transform 0.16s ease;
}

.home-tour-play-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cta) 22%, transparent);
}

.home-tour-play svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: currentColor;
}

.home-tour-play:hover {
  background: color-mix(in srgb, var(--cta) 22%, transparent);
  transform: scale(1.04);
}

.home-products-jump {
  display: inline-block;
  margin-top: 1.4rem;
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.32em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color 0.16s ease;
}

.home-products-jump:hover {
  text-decoration-color: currentColor;
}

@keyframes home-cta-shimmer {
  0%,
  58%,
  100% {
    background-position: 120% 50%;
  }

  72% {
    background-position: 0% 50%;
  }
}

/* ---- Home "the shift" section --------------------------------------------- */

/* The opening statement section: the case for the world changing — agents
   changed how software gets built, and now they're changing how it's run —
   with the chiasmus and CTAs blended in from the old hero
   (see grafana/grafana.ai#322). */
.home-shift {
  min-height: 74vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Less lead above the headline than below it: the section opens the page,
     so it should sit up near the band rather than float in the middle of a
     tall column (see grafana/grafana.ai#436). */
  padding: clamp(2.25rem, 5vw, 4rem) var(--page-gutter) clamp(2.75rem, 5vw, 4rem);
}

.home-shift-inner {
  max-width: 62rem;
  margin: 0 auto;
}

/* The section's own slice of the page lattice, broken into tectonic plates
   that creep a few pixels along the grid axes (see the script in
   index.html.tpl). The canvas colour is the base line colour the script reads
   at draw time, matching .home-iso; the mask keeps the field as a halo around
   the copy — quieter behind the headline, fading out before the edges. */
.home-shift-plates {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: color-mix(in srgb, var(--cta-text) 55%, var(--color-text-muted));
  opacity: light-dark(0.55, 0.65);
  -webkit-mask-image: radial-gradient(90% 80% at 50% 46%, rgb(0 0 0 / 0.45) 0%, rgb(0 0 0 / 0.92) 48%, #000 64%, transparent 98%);
  mask-image: radial-gradient(90% 80% at 50% 46%, rgb(0 0 0 / 0.45) 0%, rgb(0 0 0 / 0.92) 48%, #000 64%, transparent 98%);
}

/* The setup copy — "The systems you run now need AI to operate them." — is a
   quiet kicker: small, lighter weight, and muted, so it reads as the first
   half of the answer while the turn of the argument takes the size (see
   .home-shift-line--turn). */
.home-shift-title {
  margin: clamp(1.6rem, 3.2vw, 2.4rem) auto 0;
  max-width: 52rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: var(--color-text-muted);
}

.home-shift-line {
  display: block;
  text-wrap: balance;
}

/* The turn in the argument — the AI you build now needs observing, the second
   half of the shift — is the point of the section, so it gets its own line at a
   much larger size than the small setup copy above it. */
.home-shift-line--turn {
  margin-top: 0.15em;
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 600;
  line-height: 1.08;
  color: light-dark(var(--color-text), #fff);
}

/* Only the word "observing" carries the page accent, a heavier weight, and a
   brighter bloom; the full stop stays in the plain title colour. */
.home-shift-accent {
  color: var(--page-accent);
  font-weight: 700;
  text-shadow: 0 0 32px color-mix(in srgb, var(--page-accent) 55%, transparent);
}

/* "Can you feel the shift?" — the headline that opens the page. The line is
   set twice and sheared apart along a lattice diagonal, a fault running
   straight through the words. The halves hold a small permanent slip — the
   ground has already moved. Pointing at the headline answers with a tremor
   through the canvas, and clicking it (or the ten-second timer in the
   script) heals the fault so it can break again — see the script in
   index.html.tpl. Selection is off so repeated clicks replay the break
   instead of highlighting the words. */
.home-shift-question {
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6.6vw, 5rem);
  font-weight: 600;
  line-height: 1.08;
  text-wrap: balance;
  color: light-dark(var(--color-text), #fff);
  cursor: pointer;
  user-select: none;
}

.home-shift-question-visual {
  position: relative;
  display: block;
}

.home-shift-question-half {
  display: block;
}

.home-shift-question-half--upper {
  --slip: -0.09em;
  clip-path: polygon(0 0, 100% 0, 100% 34%, 0 62%);
  translate: var(--slip) 0;
}

.home-shift-question-half--lower {
  --slip: 0.09em;
  position: absolute;
  inset: 0;
  clip-path: polygon(0 62%, 100% 34%, 100% 100%, 0 100%);
  translate: var(--slip) 0;
}

/* Replaying the break — on click or the ten-second timer in the script —
   eases the halves back together, holds the line whole for a beat, then
   lets the fault give way again with a slight overshoot so it reads as a
   break, not a slide. The 0% and 100% frames sit at each half's own --slip
   so the loop starts and ends in the settled state; the script restarts it
   by re-adding the class around a reflow. */
@media (prefers-reduced-motion: no-preference) {
  .home-shift-question.is-rebreaking .home-shift-question-half--upper,
  .home-shift-question.is-rebreaking .home-shift-question-half--lower {
    animation: home-shift-question-rebreak 1s cubic-bezier(0.3, 0, 0.2, 1) both;
  }

  @keyframes home-shift-question-rebreak {
    0% {
      translate: var(--slip) 0;
    }
    35%,
    80% {
      translate: 0 0;
      animation-timing-function: cubic-bezier(0.5, 0, 0.15, 1.4);
    }
    100% {
      translate: var(--slip) 0;
    }
  }
}

/* On arrival the line stands whole; a beat later — while the greeting tremor
   is still ringing through the canvas — the fault gives way and the halves
   snap into their permanent slip. The easing overshoots slightly so it reads
   as a break, not a slide. The from-only keyframes settle into each half's
   own translate above, keeping the slip distance defined in one place. */
@media (prefers-reduced-motion: no-preference) {
  .home-shift-question-half--upper,
  .home-shift-question-half--lower {
    animation: home-shift-question-break 0.2s cubic-bezier(0.5, 0, 0.15, 1.4) 0.7s backwards;
  }

  @keyframes home-shift-question-break {
    from {
      translate: 0 0;
    }
  }
}

/* ---- Home product sections ------------------------------------------------ */

.home-products {
  position: relative;
  display: flex;
  flex-direction: column;
}

.product-section {
  --tint: #22c55e;
  --tint-text: light-dark(#0b9065, #72e1a6);
  position: relative;
  z-index: 1;
  padding: clamp(5.5rem, 13vw, 11rem) var(--page-gutter);
  background: transparent;
  border-top: 0;
}

.product-section.tint-1 {
  --tint: #ff671d;
  --tint-text: light-dark(#c72107, #ff8137);
}

.product-section.tint-2 {
  --tint: #0ea5e9;
  --tint-text: light-dark(#0369a1, #38bdf8);
}

.product-section.tint-3 {
  --tint: #1b55f5;
  --tint-text: light-dark(#1440e1, #599cff);
}

.product-section.tint-4 {
  --tint: #6366f1;
  --tint-text: light-dark(#4338ca, #818cf8);
}

.product-section.tint-5 {
  --tint: #22c55e;
  --tint-text: light-dark(#0b9065, #72e1a6);
}

.product-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: center;
  max-width: var(--maxw);
  margin: 0 auto;
}

.product-copy {
  min-width: 0;
  max-width: 100%;
}

/* Alternate the image side band to band. */
.product-section:nth-child(even) .product-media {
  order: -1;
}

.product-section:nth-child(odd) .product-copy {
  text-align: right;
}

.product-title {
  margin: 0 0 0.9rem;
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: 0;
  color: light-dark(var(--tint-text), #fff);
  text-wrap: balance;
}

/* A tiny underline accent in the section colour sits under each title. */
.product-title::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-top: 0.7rem;
  border-radius: 2px;
  background: var(--tint-text);
}

.product-section:nth-child(odd) .product-title::after {
  margin-left: auto;
}

.product-lede {
  margin: 0;
  max-width: 34rem;
  font-size: clamp(var(--text-md), 1.7vw, var(--text-lg));
  color: var(--color-text);
  overflow-wrap: break-word;
}

.product-section:nth-child(odd) .product-lede {
  margin-left: auto;
}

.customer-proof--product {
  max-width: 34rem;
  margin-top: 1.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--tint-text) 24%, var(--color-border));
  border-radius: 6px;
  background: color-mix(in srgb, var(--tint) 3%, var(--color-surface));
}

.product-section:nth-child(odd) .customer-proof--product {
  margin-left: auto;
}

.customer-proof--product blockquote {
  font-size: clamp(0.9rem, 1.15vw, 1.02rem);
}

.customer-proof--metric blockquote {
  font-size: clamp(1rem, 1.35vw, 1.14rem);
}

.customer-proof--metric strong {
  color: var(--tint-text);
  font-size: 1.12em;
  font-weight: 700;
}

/* Highlighted words take the section's own tint (darkened the same way the
   page-level highlight is, so white text pops), keeping each product's mark,
   art, and grid band in one colour identity. */
.product-lede mark {
  background: color-mix(in srgb, var(--tint, var(--page-accent)), #000 50%);
  color: #fff;
  padding: 0.05em 0.32em;
  border-radius: 2px;
  font-weight: 600;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.product-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 1.25rem;
  padding: 0.72rem 1.05rem;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #fff;
  background: var(--cta);
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1.1;
  box-shadow: 0 14px 26px -18px color-mix(in srgb, var(--cta) 70%, transparent);
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.product-cta:hover {
  color: #fff;
  background: var(--cta-hover);
  text-decoration: none;
  box-shadow: 0 16px 32px -20px color-mix(in srgb, var(--cta) 82%, transparent);
}

.product-cta:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--cta) 45%, transparent);
  outline-offset: 3px;
}

.product-cta span {
  color: currentColor;
}

.content-cta.github-cta,
.product-cta.github-cta {
  color: #fff;
  border-color: light-dark(#24292f, #30363d);
  background: light-dark(#24292f, #21262d);
  box-shadow: 0 8px 18px light-dark(rgba(36, 41, 47, 0.18), rgba(0, 0, 0, 0.34));
}

.content-cta.github-cta:hover,
.product-cta.github-cta:hover {
  color: #fff;
  background: light-dark(#1f2328, #30363d);
  box-shadow: 0 10px 24px light-dark(rgba(36, 41, 47, 0.28), rgba(0, 0, 0, 0.46));
}

.content-cta.github-cta:focus-visible,
.product-cta.github-cta:focus-visible {
  outline-color: light-dark(rgba(36, 41, 47, 0.36), rgba(240, 246, 252, 0.34));
}

/* Inside the product bands every CTA — including the GitHub ones — wears the
   band's tint, so each section keeps a single colour identity. A touch of
   black mixed in keeps white labels legible on the brighter tints. */
.product-section .product-cta,
.product-section .product-cta.github-cta {
  border-color: transparent;
  background: color-mix(in srgb, var(--tint) 86%, #000);
  box-shadow: 0 14px 26px -18px color-mix(in srgb, var(--tint) 70%, transparent);
}

.product-section .product-cta:hover,
.product-section .product-cta.github-cta:hover {
  background: color-mix(in srgb, var(--tint) 70%, #000);
  box-shadow: 0 16px 32px -20px color-mix(in srgb, var(--tint) 82%, transparent);
}

.product-section .product-cta:focus-visible,
.product-section .product-cta.github-cta:focus-visible {
  outline-color: color-mix(in srgb, var(--tint) 45%, transparent);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* Odd bands set their copy ragged-left, so button rows follow it to the right
   edge (the Connect band's pair of GitHub links, for example). */
.product-section:nth-child(odd) .cta-row {
  justify-content: flex-end;
}

.cta-row .content-cta,
.cta-row .product-cta {
  margin-top: 0;
}

.product-media {
  /* Each art card leans a few degrees into 3D space, always turned toward the
     copy beside it; --media-tilt is set per side below and composed into the
     scroll-reveal transforms too. */
  --media-tilt: perspective(1100px) rotateY(-7deg) rotateX(1.5deg);
  margin: 0;
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
  width: min(100%, 29rem);
  aspect-ratio: 4 / 3;
  padding: clamp(1rem, 2.8vw, 1.45rem);
  border: 1px solid color-mix(in srgb, var(--tint-text) 24%, var(--color-border));
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 18% 14%, color-mix(in srgb, var(--tint-text) 10%, transparent), transparent 42%),
    color-mix(in srgb, var(--tint) 3%, var(--color-surface));
  box-shadow: 0 30px 60px -48px color-mix(in srgb, var(--tint) 55%, transparent);
  overflow: hidden;
  box-sizing: border-box;
  transform: var(--media-tilt);
}

/* Media on the left (even bands) leans the other way, toward its copy. */
.product-section:nth-child(even) .product-media {
  --media-tilt: perspective(1100px) rotateY(7deg) rotateX(1.5deg);
}

.product-art {
  isolation: isolate;
}

/* Two open corner ticks — hairlines that echo the hero's floating corner
   artefact — replace the old blurred glow. They sit just inside the frame on
   opposite corners and never close into a full box. */
.product-art::before,
.product-art::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 1.9rem;
  height: 1.9rem;
  border: 0 solid color-mix(in srgb, var(--tint-text) 55%, transparent);
  pointer-events: none;
}

.product-art::before {
  top: 0.7rem;
  left: 0.7rem;
  border-top-width: 1px;
  border-left-width: 1px;
}

.product-art::after {
  right: 0.7rem;
  bottom: 0.7rem;
  border-right-width: 1px;
  border-bottom-width: 1px;
}

.art-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 13rem;
}

/* Each product art leans gently in 3D as it travels the viewport: the scroll
   script feeds --art-tilt (-1 below centre … 1 above), and the canvas turns
   a few degrees around both axes under a long lens. Subtle by design. */
.home-products .art-canvas {
  transform: perspective(1100px) rotateX(calc(var(--art-tilt, 0) * -4deg)) rotateY(calc(var(--art-tilt, 0) * 2.5deg));
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .home-products .art-canvas {
    transform: none;
    will-change: auto;
  }
}

.art-canvas *,
.art-canvas *::before,
.art-canvas *::after {
  box-sizing: border-box;
}

/* ---- Product art: five abstract compositions ------------------------------ */

/* Each product band carries a single abstract idea drawn from the site's
   node-and-line motif — a ripple, a convergence, a heartbeat, a prompt, and a
   link — in that band's tint. All motion is CSS-only, slow, and switched off
   under prefers-reduced-motion at the end of this section. */

.art-converge svg,
.art-signal svg,
.art-link svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* -- 01 In-app Assistant: a small Grafana dashboard on the left and the
      Assistant docked on the right; bubbles arrive in turn on a slow loop. */
.chat-hint {
  position: absolute;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 0.48rem 0.5rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--tint-text) 20%, transparent);
  border-radius: 6px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tint-text) 7%, transparent), transparent 40%),
    color-mix(in srgb, var(--color-surface) 82%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-text) 7%, transparent);
}

.chat-hint::after {
  content: "•••";
  position: absolute;
  top: 0.28rem;
  right: 0.42rem;
  color: color-mix(in srgb, var(--color-text-muted) 50%, transparent);
  font-size: 0.38rem;
  letter-spacing: 0.08em;
}

.dashboard-panel-title {
  max-width: calc(100% - 1.2rem);
  overflow: hidden;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
  font-size: 0.46rem;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-chart {
  width: 100%;
  min-height: 0;
  flex: 1;
  margin-top: 0.3rem;
  overflow: visible;
}

.dashboard-grid {
  fill: none;
  stroke: color-mix(in srgb, var(--color-text-muted) 18%, transparent);
  stroke-width: 0.8;
  stroke-dasharray: 2 3;
}

.dashboard-series {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.dashboard-series--blue {
  stroke: color-mix(in srgb, #5794f2 82%, var(--tint-text));
}

.dashboard-series--orange {
  stroke: #ff9830;
}

.dashboard-series--green {
  stroke: color-mix(in srgb, #73bf69 78%, var(--tint-text));
  filter: drop-shadow(0 0 2px color-mix(in srgb, #73bf69 30%, transparent));
}

.dashboard-threshold {
  fill: none;
  stroke: color-mix(in srgb, #f2495c 48%, transparent);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}

.dashboard-stat {
  margin: auto 0 0.15rem;
  color: color-mix(in srgb, #73bf69 82%, var(--color-text));
  font-size: clamp(0.66rem, 1.15vw, 0.9rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}

.dashboard-stat--latency {
  position: absolute;
  top: 1.45rem;
  left: 0.5rem;
  z-index: 1;
  margin: 0;
  color: color-mix(in srgb, var(--tint-text) 74%, var(--color-text));
}

.dashboard-stat small {
  font-size: 0.48em;
  letter-spacing: 0;
}

.dashboard-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.16rem;
  height: 1rem;
}

.dashboard-bars i {
  width: 0.2rem;
  height: 55%;
  border-radius: 1px 1px 0 0;
  background: color-mix(in srgb, #73bf69 58%, transparent);
}

.dashboard-bars i:nth-child(2) {
  height: 74%;
}

.dashboard-bars i:nth-child(3) {
  height: 62%;
}

.dashboard-bars i:nth-child(4) {
  height: 90%;
}

.dashboard-bars i:nth-child(5) {
  height: 78%;
}

.chat-hint--a {
  top: 10%;
  left: 6%;
  width: 28%;
  height: 34%;
}

.chat-hint--b {
  top: 10%;
  left: 38%;
  width: 16%;
  height: 34%;
}

.chat-hint--c {
  top: 52%;
  left: 6%;
  width: 48%;
  height: 38%;
}

.chat-hint--c .dashboard-chart {
  margin-top: 0.8rem;
}

.chat-panel {
  position: absolute;
  inset: 6% 4% 6% auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.55rem;
  width: 38%;
  padding: 0.8rem;
  border: 1px solid color-mix(in srgb, var(--tint-text) 30%, var(--color-border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--tint) 8%, var(--color-surface));
  box-shadow: 0 18px 34px -22px color-mix(in srgb, var(--tint-text) 45%, transparent);
}

.chat-bubble {
  display: block;
  height: 0.85rem;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(6px);
}

.chat-bubble--user {
  align-self: flex-end;
  width: 62%;
  background: color-mix(in srgb, var(--tint-text) 80%, transparent);
  animation: chat-user-1 7s ease-in-out infinite;
}

.chat-bubble--ai {
  align-self: flex-start;
  width: 78%;
  height: 1.7rem;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--tint-text) 38%, transparent);
  background: color-mix(in srgb, var(--tint-text) 12%, transparent);
  animation: chat-ai 7s ease-in-out infinite;
}

.chat-bubble--small {
  width: 44%;
  animation: chat-user-2 7s ease-in-out infinite;
}

@keyframes chat-user-1 {
  0%,
  5% {
    opacity: 0;
    transform: translateY(6px);
  }

  11%,
  92% {
    opacity: 1;
    transform: translateY(0);
  }

  98%,
  100% {
    opacity: 0;
  }
}

@keyframes chat-ai {
  0%,
  24% {
    opacity: 0;
    transform: translateY(6px);
  }

  31%,
  92% {
    opacity: 1;
    transform: translateY(0);
  }

  98%,
  100% {
    opacity: 0;
  }
}

@keyframes chat-user-2 {
  0%,
  50% {
    opacity: 0;
    transform: translateY(6px);
  }

  57%,
  92% {
    opacity: 1;
    transform: translateY(0);
  }

  98%,
  100% {
    opacity: 0;
  }
}

/* The thinking indicator recreates the real Assistant loader (Loader.tsx in
   grafana/grafana-assistant-app): five pulsing squircle bars with tiny
   sparkles drifting up off them, in the section's tint. The bar heights,
   staggered durations, sparkle vectors, and delays follow the source. */
.chat-typing {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
  padding: 4px 4px 0;
  align-self: flex-start;
}

.chat-typing i {
  --h0: 6.4px;
  --h1: 14.4px;
  width: 4px;
  height: var(--h0);
  border-radius: 2px;
  background: var(--tint-text);
  opacity: 0.7;
  transform-origin: bottom;
  animation: chat-bar 1.4s ease-in-out 0.1s infinite;
}

.chat-typing i:nth-child(2) {
  --h0: 4.8px;
  --h1: 12.8px;
  animation-duration: 1.1s;
  animation-delay: 0.3s;
}

.chat-typing i:nth-child(3) {
  --h0: 5.6px;
  --h1: 13.6px;
  animation-duration: 1.3s;
  animation-delay: 0.5s;
}

.chat-typing i:nth-child(4) {
  --h0: 4px;
  --h1: 12px;
  animation-duration: 1.2s;
  animation-delay: 0.7s;
}

.chat-typing i:nth-child(5) {
  --h0: 7.2px;
  --h1: 15.2px;
  animation-duration: 1.5s;
  animation-delay: 0.9s;
}

@keyframes chat-bar {
  0% {
    height: var(--h0);
    opacity: 0.7;
  }

  25% {
    height: var(--h1);
    opacity: 1;
  }

  50% {
    height: calc(var(--h0) * 0.8);
    opacity: 0.8;
  }

  75% {
    height: calc(var(--h1) * 0.9);
    opacity: 0.9;
  }

  100% {
    height: var(--h0);
    opacity: 0.7;
  }
}

.chat-typing b {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--tint-text);
  opacity: 0;
  animation: chat-sparkle 1s ease-out infinite;
}

.chat-typing b:nth-of-type(1) {
  top: 60%;
  left: 5%;
  --tx: 8px;
  --ty: -20px;
  animation-delay: 0.2s;
}

.chat-typing b:nth-of-type(2) {
  top: 50%;
  left: 25%;
  --tx: -6px;
  --ty: -25px;
  animation-delay: 0.4s;
}

.chat-typing b:nth-of-type(3) {
  top: 55%;
  left: 45%;
  --tx: 10px;
  --ty: -18px;
  animation-delay: 0.6s;
}

.chat-typing b:nth-of-type(4) {
  top: 45%;
  left: 65%;
  --tx: -8px;
  --ty: -22px;
  animation-delay: 0.8s;
}

.chat-typing b:nth-of-type(5) {
  top: 50%;
  left: 85%;
  --tx: 6px;
  --ty: -28px;
  animation-delay: 1s;
}

@keyframes chat-sparkle {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  100% {
    transform: translate(var(--tx), var(--ty)) scale(0);
    opacity: 0;
  }
}

/* -- 02 Investigations: the convergence. Three signal trails flow into one
      bright node — the likely cause. Pulses ride the trails as repeating
      dashes (pathLength=1 makes the dash maths unit-based). */
.converge-src {
  fill: color-mix(in srgb, var(--tint-text) 55%, transparent);
}

.converge-line {
  fill: none;
  stroke: color-mix(in srgb, var(--tint-text) 26%, transparent);
  stroke-width: 1;
}

.converge-pulse {
  fill: none;
  stroke: var(--tint-text);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 0.12 0.88;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--tint-text) 40%, transparent));
  animation: converge-pulse 4.5s linear infinite;
}

.converge-pulse--2 {
  animation-delay: -1.5s;
}

.converge-pulse--3 {
  animation-delay: -3s;
}

@keyframes converge-pulse {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

.converge-focus {
  fill: var(--tint-text);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tint-text) 55%, transparent));
  transform-box: fill-box;
  transform-origin: center;
  animation: converge-focus 4.5s ease-in-out infinite;
}

@keyframes converge-focus {
  0%,
  100% {
    transform: scale(1);
  }

  55% {
    transform: scale(1.18);
  }
}

.converge-focus-ring {
  fill: none;
  stroke: color-mix(in srgb, var(--tint-text) 70%, transparent);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: converge-ring 4.5s ease-out infinite;
}

@keyframes converge-ring {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }

  70%,
  100% {
    transform: scale(3.2);
    opacity: 0;
  }
}

/* -- 03 Agent Observability: three live tracks for run health, conversation
      turns, and token/cost usage. Each draws across the same instrument. */
/* Each track keeps its own steady pace so the run trace, conversation turns,
   and usage bars read as three signals at once without racing each other. The
   pace is fixed rather than re-sampled per sweep: changing the duration mid
   cycle used to snap the markers and bars and make the instrument flicker. */
.signal-track--run {
  --signal-speed: 5.4s;
}

.signal-track--conversation {
  --signal-speed: 7s;
}

.signal-track--usage {
  --signal-speed: 8.6s;
}

.signal-label {
  fill: color-mix(in srgb, var(--tint-text) 72%, var(--color-text));
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.signal-label--secondary {
  fill: color-mix(in srgb, var(--tint-text) 48%, var(--color-text));
}

.signal-base {
  stroke: color-mix(in srgb, var(--tint-text) 24%, transparent);
  stroke-width: 1;
  stroke-dasharray: 2 6;
  stroke-linecap: round;
}

.signal-trace {
  fill: none;
  stroke: var(--tint-text);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--tint-text) 40%, transparent));
  animation: signal-draw var(--signal-speed, 7s) linear infinite;
}

.signal-conversation,
.signal-cost {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation: signal-draw var(--signal-speed, 7s) linear infinite;
}

.signal-conversation {
  stroke: color-mix(in srgb, var(--tint-text) 82%, var(--color-text));
  stroke-width: 1.7;
  animation-delay: 0.35s;
}

.signal-event {
  fill: var(--color-bg);
  stroke: var(--tint-text);
  stroke-width: 1.7;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: signal-event var(--signal-speed, 7s) ease-in-out infinite;
}

.signal-event--b {
  animation-delay: 0.45s;
}

.signal-event--c {
  animation-delay: 0.9s;
}

.signal-event--d {
  animation-delay: 1.35s;
}

@keyframes signal-event {
  0%,
  12% {
    opacity: 0;
    transform: scale(0.5);
  }

  24%,
  66% {
    opacity: 1;
    transform: scale(1);
  }

  78%,
  100% {
    opacity: 0;
    transform: scale(0.7);
  }
}

.signal-bar {
  stroke: color-mix(in srgb, var(--tint-text) 58%, transparent);
  stroke-width: 8;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: signal-bar var(--signal-speed, 7s) ease-in-out infinite;
}

.signal-bar--b,
.signal-bar--f {
  animation-delay: 0.25s;
}

.signal-bar--c,
.signal-bar--g {
  animation-delay: 0.5s;
}

.signal-bar--d,
.signal-bar--h {
  animation-delay: 0.75s;
}

@keyframes signal-bar {
  0%,
  100% {
    opacity: 0.34;
    transform: scaleY(0.55);
  }

  38%,
  68% {
    opacity: 0.76;
    transform: scaleY(1);
  }
}

.signal-cost {
  stroke: var(--tint-text);
  stroke-width: 1.8;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--tint-text) 34%, transparent));
  animation-delay: 0.7s;
}

@keyframes signal-draw {
  0% {
    stroke-dashoffset: 1;
  }

  42% {
    stroke-dashoffset: 0;
  }

  58% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: -1;
  }
}

/* -- 04 gcx: real commands type into a compact terminal prompt, with a quiet
      output echo beneath. The homepage script chooses each command at random. */
.prompt-command-line {
  position: absolute;
  top: 39%;
  right: 7%;
  left: 14%;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  white-space: nowrap;
}

.prompt-mark {
  color: color-mix(in srgb, var(--tint-text) 70%, var(--color-text));
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
}

.prompt-command {
  min-width: 0;
  color: var(--tint-text);
  font-size: clamp(0.59rem, 1.05vw, 0.76rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.prompt-line {
  position: absolute;
  left: 22%;
  height: 0.5rem;
  border-radius: 999px;
  opacity: 0;
  transform: scaleX(0.6);
  transform-origin: left center;
  transition: opacity 0.35s ease, transform 0.45s ease;
}

.prompt-cursor {
  flex: 0 0 auto;
  width: 0.52rem;
  height: 0.92rem;
  background: var(--tint-text);
  animation: prompt-blink 1.1s steps(1) infinite;
}

@keyframes prompt-blink {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.prompt-line--out {
  top: 56%;
  width: 32%;
  background: color-mix(in srgb, var(--tint-text) 32%, transparent);
}

.prompt-line--out-b {
  top: 66%;
  width: 22%;
  background: color-mix(in srgb, var(--tint-text) 24%, transparent);
}

.art-prompt.has-output .prompt-line--out,
.art-prompt.has-output .prompt-line--out-b {
  opacity: 1;
  transform: scaleX(1);
}

.art-prompt.has-output .prompt-line--out-b {
  transition-delay: 0.12s;
}

/* -- 05 Connect: the link. One line between two endpoints — a square tool and
      a round Grafana — with packets flowing both ways along it. */
.link-line {
  fill: none;
  stroke: color-mix(in srgb, var(--tint-text) 26%, transparent);
  stroke-width: 1;
}

.link-packet {
  fill: none;
  stroke: var(--tint-text);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 0.1 0.9;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--tint-text) 40%, transparent));
  animation: link-packet 5s linear infinite;
}

.link-packet--return {
  stroke: color-mix(in srgb, var(--tint-text) 55%, #fff);
  animation-direction: reverse;
  animation-delay: -2.5s;
}

@keyframes link-packet {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

.link-node {
  fill: var(--tint-text);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--tint-text) 45%, transparent));
}

.link-ring {
  fill: none;
  stroke: color-mix(in srgb, var(--tint-text) 70%, transparent);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: converge-ring 5s ease-out infinite;
}

.link-ring--b {
  animation-delay: 2.5s;
}

/* Reduced motion: freeze each composition into a legible still — rings held
   mid-ripple, trails and traces fully drawn, prompt lines settled. */
@media (prefers-reduced-motion: reduce) {
  .chat-bubble,
  .chat-typing,
  .chat-typing i,
  .chat-typing b,
  .converge-pulse,
  .converge-focus,
  .converge-focus-ring,
  .signal-trace,
  .signal-conversation,
  .signal-event,
  .signal-bar,
  .signal-cost,
  .prompt-line--out,
  .prompt-line--out-b,
  .prompt-cursor,
  .link-packet,
  .link-ring {
    animation: none;
  }

  .chat-bubble,
  .chat-typing {
    opacity: 1;
    transform: none;
  }

  .chat-typing i {
    opacity: 0.6;
  }

  .converge-pulse,
  .link-packet {
    stroke-dasharray: none;
    opacity: 0.4;
  }

  .converge-focus-ring,
  .link-ring {
    opacity: 0.5;
  }

  .signal-trace,
  .signal-conversation,
  .signal-cost {
    stroke-dasharray: none;
  }

  .signal-event {
    opacity: 1;
    transform: none;
  }

  .signal-bar {
    opacity: 0.68;
    transform: none;
  }

  .prompt-line--out,
  .prompt-line--out-b {
    opacity: 1;
    transform: none;
  }

  .prompt-cursor {
    opacity: 0.72;
  }
}

/* Gentle entrance: each band's copy and media settle into place as it scrolls
   into view. The reveal is opt-in via the `is-reveal` class the home script
   adds only when motion is allowed, so the no-JS and reduced-motion paths show
   everything immediately (see grafana/grafana.ai#68). */
.product-section.is-reveal .product-copy {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-section.is-reveal .product-media {
  opacity: 0;
  transform: translateY(22px) var(--media-tilt);
  transition-delay: 0.08s;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-section.is-reveal.is-visible .product-copy {
  opacity: 1;
  transform: none;
}

.product-section.is-reveal.is-visible .product-media {
  opacity: 1;
  transform: var(--media-tilt);
}

/* ---- Home keynote --------------------------------------------------------- */

/* ---- Home highlights ------------------------------------------------------ */

/* A compact set of feature highlights between the keynote and the product tour
   — a quick read on what makes Grafana AI great before the deeper per-product
   sections (see grafana/grafana.ai#143). */
.home-highlights {
  padding: clamp(4rem, 8.5vw, 6.5rem) var(--page-gutter) clamp(4rem, 8.5vw, 7rem);
  text-align: center;
}

.home-highlights-inner {
  max-width: var(--maxw);
  margin: 0 auto;
}

.home-highlights-title {
  margin: 0.75rem auto 0;
  max-width: 22ch;
  font-size: clamp(2.1rem, 4.6vw, 3.3rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.08;
  /* Carry the page accent colour rather than the plain white body text, so the
     feature-highlights heading reads with the page's colour identity (see
     grafana/grafana.ai#191). */
  color: var(--page-accent);
}

.home-highlights-lede {
  /* Roomy above and (via the grid's own top margin) below, so the statement
     floats clear of the heading and the cards. */
  margin: clamp(1.75rem, 3.2vw, 2.5rem) auto 0;
  max-width: 58ch;
  color: var(--color-text-muted);
}

.highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
  margin: clamp(3.25rem, 7vw, 4.75rem) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.highlight {
  /* Shared inset tokens keep the node-and-line mark below anchored to the same
     corner as the text. */
  --highlight-accent: var(--page-accent);
  --highlight-pad-y: clamp(1.75rem, 2.4vw, 2.1rem);
  --highlight-pad-x: clamp(1.6rem, 2.2vw, 1.9rem);
  position: relative;
  padding: var(--highlight-pad-y) var(--highlight-pad-x) calc(var(--highlight-pad-y) + 0.15rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  /* Solid surface: the isometric net runs behind these cards, so anything
     translucent lets its lines crawl under the copy. */
  background: var(--color-surface);
}

.highlight--plan {
  --highlight-accent: #ff780a;
}

.highlight--build {
  --highlight-accent: #5794f2;
}

.highlight--ship {
  --highlight-accent: #b877d9;
}

.highlight--run {
  --highlight-accent: #56a64b;
}

/* Each card leads with a node-and-line mark — a small dot trailing a hairline —
   echoing the isometric grid instead of a gradient tick. */
.highlight::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--highlight-accent) 75%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--highlight-accent) 14%, transparent);
}

.highlight::after {
  content: "";
  position: absolute;
  top: calc(var(--highlight-pad-y) + 3px);
  left: calc(var(--highlight-pad-x) + 1.35rem);
  width: 2.4rem;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--highlight-accent) 45%, transparent), transparent);
}

.highlight-title {
  margin: 0 0 0.7rem;
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.55;
}

/* Each lifecycle stage gets its own painted highlight, with enough black mixed
   in to keep the shared white text crisp on either colour scheme. */
.highlight-title mark {
  padding: 0.05em 0.32em;
  border-radius: 2px;
  color: var(--color-highlight-text);
  background: color-mix(in srgb, var(--highlight-accent) 70%, #000);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.highlight-copy {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1.55;
}

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

}

/* ---- "Try this prompt" deep links (grafana/grafana.ai#366) ---------------
   One reusable CTA (the try_prompt component) deep-links into Grafana
   Assistant with a prompt pre-filled. Two variants share the same anchor: an
   inline arrow link for the lifecycle cards, wearing each stage's accent, and
   an outline button for the product bands, sitting as a secondary beside the
   filled Explore CTA and wearing the band tint. */
.prompt-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  line-height: 1.1;
  transition:
    color 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}

.prompt-link:hover {
  text-decoration: none;
}

.prompt-link-icon {
  transition: transform 0.15s ease;
}

.prompt-link:hover .prompt-link-icon {
  transform: translateX(3px);
}

/* Inline variant — lifecycle cards. Sits under the stage copy and adopts the
   card's --highlight-accent, falling back to the page accent elsewhere. */
.prompt-link--inline {
  margin-top: 1.1rem;
  color: color-mix(in srgb, var(--highlight-accent, var(--page-accent)) 82%, var(--color-text));
  font-size: var(--text-sm);
}

.prompt-link--inline:hover {
  color: color-mix(in srgb, var(--highlight-accent, var(--page-accent)) 96%, var(--color-text));
}

.prompt-link--inline:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--highlight-accent, var(--page-accent)) 45%, transparent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Button variant — product bands. An outline button so it reads as secondary
   next to the filled Explore CTA. */
.prompt-link--button {
  justify-content: center;
  margin-top: 1.25rem;
  padding: 0.72rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--cta) 40%, transparent);
  border-radius: 5px;
  color: var(--color-text);
  background: transparent;
  font-size: var(--text-sm);
  font-weight: 700;
}

.prompt-link--button:hover {
  border-color: color-mix(in srgb, var(--cta) 62%, transparent);
  background: color-mix(in srgb, var(--cta) 12%, transparent);
}

.prompt-link--button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--cta) 45%, transparent);
  outline-offset: 3px;
}

/* Inside a product band the button follows the band's tint like the other
   CTAs, so each section keeps a single colour identity. */
.product-section .prompt-link--button {
  border-color: color-mix(in srgb, var(--tint) 55%, transparent);
  color: color-mix(in srgb, var(--tint) 34%, var(--color-text));
}

.product-section .prompt-link--button:hover {
  border-color: color-mix(in srgb, var(--tint) 78%, transparent);
  background: color-mix(in srgb, var(--tint) 14%, transparent);
}

.product-section .prompt-link--button:focus-visible {
  outline-color: color-mix(in srgb, var(--tint) 45%, transparent);
}

/* In a cta-row the button drops its top margin like the sibling CTAs. */
.cta-row .prompt-link--button {
  margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .prompt-link,
  .prompt-link-icon {
    transition: none;
  }

  .prompt-link:hover .prompt-link-icon {
    transform: none;
  }
}

/* ---- Home blog preview --------------------------------------------------- */

/* A preview of the latest updates, surfaced high on the homepage — right below
   the hero — so the freshest community and blog posts greet visitors
   immediately (see grafana/grafana.ai#183, grafana/grafana.ai#209). It links
   through to the Blog, which the standalone What's New page was folded into
   (see grafana/grafana.ai#367). The tiles ride a compact, full-bleed strip that
   spreads edge to edge and scrolls sideways. */
.home-news {
  --home-news-edge: clamp(var(--page-gutter), 2.4vw, 3rem);
  padding: clamp(1.05rem, 2.4vw, 1.65rem) 0 clamp(1.35rem, 3vw, 2.15rem);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  /* A faint accent wash sets the band apart from the canvas above and below
     without boxing it in, so it reads as one cohesive full-width strip. */
  background:
    linear-gradient(
      to right,
      transparent,
      color-mix(in srgb, var(--page-accent) 7%, transparent),
      transparent
    );
}

/* The heading row stays aligned to the page's content column even though the
   strip itself runs full width. */
.home-news-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: none;
  margin: 0 auto;
  padding: 0 var(--home-news-edge);
}

/* Flip the section title into a painted highlight — dark text on the accent
   fill instead of plain white-on-canvas — reusing the lead-text highlight
   tokens so it shares the page's colour identity (see grafana/grafana.ai#215).
   Inline display with a cloned box decoration keeps the fill hugging the text
   and repainting per line when it wraps. */
.home-news-title {
  display: inline;
  margin: 0;
  padding: 0.08em 0.34em;
  border-radius: 4px;
  font-size: clamp(1.12rem, 2vw, 1.45rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--color-highlight-text);
  background: var(--color-highlight-bg);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.home-news-all {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: var(--text-sm);
}

.home-news-all:hover {
  text-decoration: none;
}

.home-news-all:hover .home-news-all-label {
  text-decoration: underline;
}

/* The strip: a single full-bleed row of compact tiles that scrolls sideways.
   Inline padding aligns the first and last tiles with the page gutter, and a
   mask fades tiles softly into the edges so the row reads as continuing past
   the viewport. The scrollbar is hidden to keep the band clean. */
.home-news-gallery {
  display: flex;
  /* Centre the tiles so a short run sits balanced in the strip rather than
     hugging the left. `safe` falls back to start alignment once the tiles
     overflow, so the leading tile stays reachable when the row scrolls
     (see grafana/grafana.ai#271). */
  justify-content: safe center;
  grid-template-columns: none;
  gap: clamp(0.55rem, 1.15vw, 0.85rem);
  margin-top: clamp(0.45rem, 1vw, 0.75rem);
  padding: 0.2rem var(--home-news-edge) clamp(0.65rem, 1.5vw, 0.95rem);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--home-news-edge),
    #000 calc(100% - var(--home-news-edge)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--home-news-edge),
    #000 calc(100% - var(--home-news-edge)),
    transparent 100%
  );
}

.home-news-gallery::-webkit-scrollbar {
  display: none;
}

.home-news-gallery .feed-tile {
  flex: 0 0 clamp(13rem, 18vw, 17.5rem);
  scroll-snap-align: start;
}

/* Maximise the artwork: each homepage tile is its picture, with the title
   overlaid in the corner on reverted colours rather than stacked beneath it
   (see grafana/grafana.ai#223). */
.home-news-gallery .feed-tile {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
}

.home-news-gallery .feed-tile:nth-child(5n + 1) {
  flex-basis: clamp(16.5rem, 26vw, 24rem);
  aspect-ratio: 16 / 9;
}

/* The homepage gallery rests its title on a solid panel that grows with the
   text, so cap the lines tighter than the mosaic to keep the panel from covering
   the artwork (see grafana/grafana.ai#242). */
.home-news-gallery .feed-tile h3 {
  font-size: var(--text-sm);
  -webkit-line-clamp: 3;
}

.home-news-gallery .feed-tile:nth-child(5n + 1) h3 {
  font-size: var(--text-md);
  -webkit-line-clamp: 3;
}

/* Sit the card title and meta on a solid panel rather than the soft gradient
   fade, so the text stays crisp and fully legible over any artwork
   (see grafana/grafana.ai#237). */
.home-news-gallery .feed-overlay {
  background: none;
  padding: 0.7rem;
}

.home-news-gallery .feed-overlay-body {
  padding: 0.5rem 0.6rem 0.55rem;
  border-radius: 8px;
  background: #11131a;
}

.home-news-gallery .feed-tile-link {
  height: 100%;
}

.home-news-gallery .feed-thumb {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  height: 100%;
  border: 0;
  border-radius: inherit;
}

.fake-assistant-page {
  --fake-canvas: light-dark(#e8ebef, #0b0c0e);
  --fake-grafana-bg: light-dark(#f4f5f7, #111217);
  --fake-grafana-rail: light-dark(#111217, #05060a);
  --fake-panel: light-dark(#ffffff, #181b20);
  --fake-panel-2: light-dark(#f8fafc, #20242b);
  --fake-sidebar: light-dark(#f6f7f9, #111217);
  --fake-sidebar-main: light-dark(#ffffff, color-mix(in srgb, #20242b, #111217 42%));
  --fake-sidebar-border: light-dark(rgba(24, 27, 31, 0.12), rgba(204, 204, 220, 0.13));
  --fake-sidebar-text: light-dark(#202226, #f4f5f7);
  --fake-sidebar-muted: light-dark(#656a73, #9296a3);
  --fake-orange: #ff671d;
  --fake-purple: #a855f7;
  --fake-green: #22c55e;
  --fake-blue: #0ea5e9;
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--fake-orange) 12%, transparent), transparent 28rem),
    radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--fake-blue) 14%, transparent), transparent 30rem),
    var(--fake-canvas);
}

.fake-assistant {
  flex: 1 0 auto;
  display: grid;
  min-height: calc(100svh - 5.3rem);
  padding: clamp(1rem, 2vw, 1.5rem);
}

.fake-assistant-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(22rem, 26rem);
  align-items: stretch;
  width: min(100%, 1420px);
  height: clamp(40rem, calc(100svh - 8.4rem), 52rem);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--fake-sidebar-border);
  border-radius: 8px;
  background: var(--fake-grafana-bg);
  box-shadow: 0 32px 80px -52px rgba(0, 0, 0, 0.72);
}

.fake-dashboard {
  display: grid;
  grid-template-columns: 3.8rem minmax(0, 1fr);
  min-height: 0;
  min-width: 0;
  color: var(--fake-sidebar-text);
}

.fake-grafana-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  background: var(--fake-grafana-rail);
  border-right: 1px solid color-mix(in srgb, var(--fake-sidebar-border), transparent 28%);
}

.fake-grafana-rail span {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 6px;
  background: light-dark(rgba(255, 255, 255, 0.2), rgba(204, 204, 220, 0.18));
}

.fake-grafana-rail span:not(.fake-rail-logo):nth-child(3) {
  background: color-mix(in srgb, var(--fake-orange) 70%, transparent);
}

.fake-grafana-rail .fake-rail-logo {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 62% 38%, transparent 0.34rem, var(--fake-grafana-rail) 0.36rem 0.5rem, transparent 0.52rem),
    conic-gradient(from 210deg, var(--fake-orange), #ffab29, var(--fake-orange));
}

.fake-dashboard-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.5rem);
}

.fake-dashboard-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--fake-sidebar-border);
}

.fake-dashboard-topbar div {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.fake-dashboard-topbar strong {
  overflow: hidden;
  font-size: clamp(1.15rem, 1.8vw, 1.65rem);
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fake-breadcrumb,
.fake-time-range {
  font-size: var(--text-xs);
  color: var(--fake-sidebar-muted);
}

.fake-time-range {
  flex: 0 0 auto;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--fake-sidebar-border);
  border-radius: 6px;
  background: var(--fake-panel);
}

.fake-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(9rem, auto);
  gap: 1rem;
  flex: 1;
  min-height: 0;
  padding-top: 1rem;
}

.fake-panel {
  min-width: 0;
  border: 1px solid var(--fake-sidebar-border);
  border-radius: 8px;
  background: var(--fake-panel);
  box-shadow: 0 12px 28px -24px rgba(0, 0, 0, 0.6);
}

.fake-panel--wide {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  min-height: 18rem;
  padding: 1rem;
}

.fake-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  color: var(--fake-sidebar-muted);
  font-size: var(--text-sm);
}

.fake-panel-head strong {
  color: var(--fake-orange);
  font-size: 1.55rem;
  line-height: 1;
}

.fake-chart {
  flex: 1;
  width: 100%;
  min-height: 12rem;
  margin-top: 1rem;
  overflow: visible;
}

.fake-chart-fill {
  fill: color-mix(in srgb, var(--fake-orange) 22%, transparent);
}

.fake-chart-line {
  fill: none;
  stroke: var(--fake-orange);
  stroke-width: 4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--fake-orange) 44%, transparent));
}

.fake-panel--stat,
.fake-panel--logs {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  padding: 1rem;
}

.fake-panel--stat span,
.fake-panel--logs span {
  color: var(--fake-sidebar-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
}

.fake-panel--stat strong {
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1;
}

.fake-panel--stat em {
  color: var(--fake-green);
  font-size: var(--text-xs);
  font-style: normal;
}

.fake-panel--alert strong,
.fake-panel--alert em {
  color: var(--fake-orange);
}

.fake-panel--logs {
  grid-column: span 2;
}

.fake-panel--logs code {
  overflow: hidden;
  padding: 0.42rem 0.5rem;
  border-radius: 6px;
  color: var(--fake-sidebar-text);
  background: var(--fake-panel-2);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fake-assistant-sidebar {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  min-height: 0;
  min-width: 0;
  color: var(--fake-sidebar-text);
  background: var(--fake-sidebar);
  border-left: 1px solid var(--fake-sidebar-border);
}

.fake-assistant-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--fake-sidebar-border);
}

.fake-assistant-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.fake-assistant-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(135deg, var(--fake-purple), var(--fake-orange));
  font-size: 0.68rem;
  font-weight: 700;
}

.fake-assistant-title-wrap div {
  min-width: 0;
}

.fake-assistant-title-wrap h1 {
  margin: 0;
  overflow: hidden;
  font-size: var(--text-sm);
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fake-assistant-title-wrap p {
  margin: 0.08rem 0 0;
  overflow: hidden;
  color: var(--fake-sidebar-muted);
  font-size: 0.72rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fake-assistant-actions {
  display: flex;
  gap: 0.35rem;
  flex: 0 0 auto;
}

.fake-assistant-actions span {
  width: 1.55rem;
  height: 1.55rem;
  border: 1px solid var(--fake-sidebar-border);
  border-radius: 6px;
  background:
    linear-gradient(var(--fake-sidebar-muted), var(--fake-sidebar-muted)) center / 0.65rem 0.1rem no-repeat,
    var(--fake-sidebar-main);
}

.fake-assistant-actions span:last-child {
  background:
    linear-gradient(var(--fake-sidebar-muted), var(--fake-sidebar-muted)) center / 0.65rem 0.1rem no-repeat,
    linear-gradient(var(--fake-sidebar-muted), var(--fake-sidebar-muted)) center / 0.1rem 0.65rem no-repeat,
    var(--fake-sidebar-main);
}

.fake-assistant-tabs {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--fake-sidebar-border);
}

.fake-assistant-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.8rem;
  padding: 0.25rem 0.62rem;
  border-radius: 6px;
  color: var(--fake-sidebar-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  text-decoration: none;
}

.fake-assistant-tabs a.is-active {
  color: var(--fake-sidebar-text);
  background: var(--fake-sidebar-main);
  box-shadow: inset 0 0 0 1px var(--fake-sidebar-border);
}

.fake-conversation-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.75rem 0.75rem 0;
  padding: 0.62rem 0.7rem;
  border: 1px solid var(--fake-sidebar-border);
  border-radius: 8px;
  background: var(--fake-sidebar-main);
}

.fake-conversation-picker div {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.fake-conversation-picker span {
  color: var(--fake-sidebar-muted);
  font-size: 0.72rem;
}

.fake-conversation-picker strong {
  overflow: hidden;
  font-size: var(--text-sm);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fake-picker-caret {
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-0.12rem);
}

.fake-chat-track {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 0;
  padding: 1.1rem 0.75rem 1rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}

.fake-message,
.fake-tool-card {
  min-width: 0;
  border-radius: 8px;
}

.fake-message {
  display: grid;
  gap: 0.55rem;
  padding: 0.72rem 0.78rem;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.fake-message--user {
  border: 1px solid var(--fake-sidebar-border);
  background: var(--fake-sidebar-main);
  box-shadow: 0 10px 24px -22px rgba(0, 0, 0, 0.72);
}

.fake-message--assistant {
  padding-left: 0.55rem;
  padding-right: 0.55rem;
}

.fake-message p {
  margin: 0;
}

.fake-message code,
.fake-plan code {
  padding: 0.08rem 0.26rem;
  border-radius: 4px;
  color: var(--fake-orange);
  background: color-mix(in srgb, var(--fake-orange) 11%, transparent);
  font-size: 0.88em;
}

.fake-message-head {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  min-width: 0;
  color: var(--fake-sidebar-muted);
  font-size: 0.72rem;
}

.fake-message-head strong {
  overflow: hidden;
  color: var(--fake-sidebar-text);
  font-size: 0.75rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fake-message-head time {
  margin-left: auto;
  color: var(--fake-sidebar-muted);
  font-size: 0.7rem;
}

.fake-avatar {
  display: inline-flex;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
}

.fake-avatar--user {
  background:
    radial-gradient(circle at 52% 32%, #ffffff 0.16rem, transparent 0.17rem),
    linear-gradient(135deg, var(--fake-blue), var(--cta));
}

.fake-avatar--assistant {
  background:
    radial-gradient(circle at 50% 50%, var(--fake-sidebar) 0.18rem, transparent 0.2rem),
    linear-gradient(135deg, var(--fake-purple), var(--fake-orange));
}

.fake-evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.1rem;
}

.fake-evidence {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
  padding: 0.62rem;
  border: 1px solid var(--fake-sidebar-border);
  border-radius: 8px;
  background: var(--fake-sidebar-main);
}

.fake-evidence span,
.fake-evidence em {
  overflow: hidden;
  color: var(--fake-sidebar-muted);
  font-size: 0.68rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fake-evidence strong {
  overflow: hidden;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fake-tool-card {
  display: grid;
  gap: 0.6rem;
  padding: 0.72rem 0.78rem;
  border: 1px dashed color-mix(in srgb, var(--fake-purple) 46%, var(--fake-sidebar-border));
  background: color-mix(in srgb, var(--fake-purple) 8%, var(--fake-sidebar-main));
}

.fake-tool-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xs);
}

.fake-tool-pulse {
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 50%;
  background: var(--fake-purple);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--fake-purple) 48%, transparent);
  animation: fake-tool-pulse 1.8s ease-out infinite;
}

.fake-tool-rows {
  display: grid;
  gap: 0.42rem;
}

.fake-tool-rows span {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  color: var(--fake-sidebar-muted);
  font-size: 0.76rem;
}

.fake-tool-rows b {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--fake-green);
}

.fake-plan {
  display: grid;
  gap: 0.35rem;
  margin: 0.12rem 0 0;
  padding-left: 1.3rem;
}

.fake-composer {
  display: grid;
  gap: 0.55rem;
  padding: 0.7rem 0.75rem 0.8rem;
  border-top: 1px solid var(--fake-sidebar-border);
  background: linear-gradient(to top, var(--fake-sidebar), color-mix(in srgb, var(--fake-sidebar), transparent 6%));
}

.fake-context-row {
  display: flex;
  gap: 0.35rem;
  min-width: 0;
  overflow: hidden;
}

.fake-context-row span {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  padding: 0.26rem 0.46rem;
  border: 1px solid var(--fake-sidebar-border);
  border-radius: 999px;
  color: var(--fake-sidebar-muted);
  background: var(--fake-sidebar-main);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fake-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.7rem;
  gap: 0.52rem;
  align-items: center;
  min-height: 2.65rem;
  padding: 0.38rem;
  border: 1px solid var(--fake-sidebar-border);
  border-radius: 8px;
  background: var(--fake-sidebar-main);
}

.fake-input-row input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--fake-sidebar-text);
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
}

.fake-input-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border: 0;
  border-radius: 50%;
  color: #ffffff;
  background: var(--fake-orange);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

@keyframes fake-tool-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--fake-purple) 48%, transparent);
  }
  100% {
    box-shadow: 0 0 0 0.62rem transparent;
  }
}

@media (max-width: 980px) {
  .fake-assistant-stage {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: auto;
  }

  .fake-dashboard {
    order: 2;
    min-height: 24rem;
  }

  .fake-assistant-sidebar {
    order: 1;
    min-height: 42rem;
    border-top: 1px solid var(--fake-sidebar-border);
    border-left: 0;
  }
}

@media (max-width: 640px) {
  .fake-assistant {
    padding: 0.75rem;
  }

  .fake-dashboard {
    grid-template-columns: minmax(0, 1fr);
  }

  .fake-grafana-rail {
    display: none;
  }

  .fake-dashboard-main {
    padding: 0.85rem;
  }

  .fake-dashboard-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .fake-dashboard-topbar strong {
    white-space: normal;
  }

  .fake-dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .fake-panel,
  .fake-panel--wide,
  .fake-panel--logs {
    grid-column: auto;
  }

  .fake-panel--wide {
    min-height: 15rem;
  }

  .fake-assistant-sidebar {
    min-height: 44rem;
  }

  .fake-evidence-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .site-header-inner {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.5rem;
    padding-inline: 1rem;
  }

  .brand {
    margin-right: 0;
  }

  .site-header .brand-wordmark {
    display: none;
  }

  .header-actions {
    gap: 0.25rem;
  }

  .footer-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
  }

  .footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 1.25rem;
    padding-left: 0;
  }

  .site-nav {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 0.3rem;
    min-width: 0;
    max-width: 100%;
  }

  .nav-item--secondary-start {
    margin-left: 0;
  }

  .nav-link {
    padding: 0.35rem 0.55rem;
    font-size: 0.9rem;
  }

  .nav-menu {
    display: none;
  }

  /* JS-enhanced collapsible navigation. When `has-js` is set the inline nav is
     tucked behind the hamburger toggle and every top-level link plus its
     submenu links live inside a full-width panel. Without JS the wrapped inline
     nav above stays visible as a no-script fallback. */
  html.has-js .site-header-inner {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }

  html.has-js .nav-toggle {
    display: inline-flex;
    margin-left: auto;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    justify-content: center;
  }

  html.has-js .nav-toggle-text {
    display: none;
  }

  html.has-js .header-actions {
    margin-left: 0;
  }

  html.has-js .site-nav {
    display: none;
    order: 3;
    flex: 1 1 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.1rem;
    max-width: 100%;
    max-height: 70vh;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    overflow-y: auto;
    border-top: 1px solid var(--color-border);
  }

  html.has-js .site-header.is-open .site-nav {
    display: flex;
  }

  html.has-js .site-nav .nav-item {
    width: 100%;
  }

  html.has-js .site-nav .nav-item:has(> .nav-link--try) {
    margin-left: 0;
  }

  html.has-js .site-nav .nav-link {
    display: block;
    width: 100%;
    padding: 0.7rem 0.75rem;
    font-size: 1rem;
    text-align: left;
  }

  html.has-js .site-nav .nav-link--try {
    justify-content: center;
    margin-top: 0.5rem;
    text-align: center;
  }

  /* The theme control sits full-width at the foot of the open panel. */
  html.has-js .site-nav .nav-item--theme {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--color-border);
  }

  /* Submenus drop their absolute dropdown treatment and render inline as
     expanded, indented sections inside the open panel. */
  html.has-js .site-nav .nav-menu {
    display: grid;
    position: static;
    min-width: 0;
    margin: 0 0 0.35rem;
    padding: 0.1rem 0 0.35rem 0.75rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  html.has-js .site-nav .nav-menu a {
    padding: 0.55rem 0.6rem;
    font-size: 0.95rem;
    white-space: normal;
  }

  .product-inner {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
  }

  /* Product copy carries the mobile layout without the decorative visualizations. */
  .home-products .product-media {
    display: none;
  }

  .product-section:nth-child(odd) .product-copy {
    text-align: left;
  }

  .product-section:nth-child(odd) .cta-row {
    justify-content: flex-start;
  }

  .product-section:nth-child(odd) .product-title::after {
    margin-left: 0;
  }

  .product-section:nth-child(odd) .product-lede {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .btn,
  .home-cta-primary,
  .home-tour-play,
  .home-next-section,
  .content-cta,
  .product-cta,
  .hero-corner,
  .product-screenshot,
  .home::before,
  .wave-layer,
  .fake-tool-pulse {
    animation: none;
    transition: none;
  }

  /* The document-level gradient is static by default; keep this guard for any
     local animated accent that opts into the shared keyframes. */
  body {
    animation: none;
  }

}

/* ============================================================
   x/illustrations — Brand illustration set (prototype, noindex)
   Additive only: every rule is scoped under .illustration-set and
   every @keyframes is prefixed il-, so nothing existing is changed.
   Page markup lives in src/routes/x/illustrations/.
   ============================================================ */
.illustration-set {
  --bg: #0d1117;
  --panel: #161b24;
  --line: #222936;
  --text: #e8e8ea;
  --muted: #8a8a90;
  --orange: #ff671d;
  --blue: #3865f2;
  --blue-light: #5b8def;
  --purple: #8b5cf6;
  --purple-light: #b794f6;
  --lavender: #c9bdfb;
  --green: #5bb85c;
  --green-bright: #6ccb5f;
  --green-deep: #2f7d4f;
  --yellow: #ffd23f;
  --brown: #4a2a18;
  --cream: #f5f0e6;
  --il-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --il-display: "Poppins", system-ui, sans-serif;
  color: var(--text);
  font-family: var(--il-mono);
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(56, 101, 242, 0.06), transparent),
    radial-gradient(700px 500px at 5% 110%, rgba(255, 103, 29, 0.05), transparent),
    var(--bg);
}
.illustration-set * {
  box-sizing: border-box;
}
.illustration-set .il-intro {
  padding: 2.4rem 2rem 0.6rem;
  max-width: 1400px;
  margin: 0 auto;
}
.illustration-set .il-eyebrow {
  color: var(--orange);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin: 0;
}
.illustration-set .il-intro h1 {
  font-family: var(--il-display);
  font-weight: 600;
  font-size: 1.5rem;
  margin: 0.2rem 0 0.5rem;
  color: #fff;
}
.illustration-set .il-intro p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.6;
  max-width: 64ch;
}
.illustration-set .grid {
  display: grid;
  gap: 1.4rem;
  padding: 1.6rem 2rem 3rem;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  max-width: 1400px;
  margin: 0 auto;
}
.illustration-set .card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.illustration-set .art {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 31px, rgba(255, 255, 255, 0.015) 31px, rgba(255, 255, 255, 0.015) 32px),
    repeating-linear-gradient(90deg, transparent, transparent 31px, rgba(255, 255, 255, 0.015) 31px, rgba(255, 255, 255, 0.015) 32px),
    var(--bg);
}
.illustration-set .art svg {
  width: 100%;
  height: 100%;
  display: block;
}
.illustration-set .label {
  padding: 0.85rem 1.05rem;
  border-top: 1px solid var(--line);
}
.illustration-set .label .name {
  font-family: var(--il-display);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
}
.illustration-set .label .tag {
  color: var(--muted);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 0.2rem;
}
.illustration-set .label .desc {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
  margin-top: 0.3rem;
}

/* motion — layered, staggered, eased; subtle by design */
.illustration-set .travel {
  offset-rotate: 0deg;
  offset-anchor: center;
  animation: il-travel 22s linear infinite;
}
@keyframes il-travel {
  to {
    offset-distance: 100%;
  }
}
.illustration-set .ring {
  animation: il-ringflow 6s linear infinite;
}
@keyframes il-ringflow {
  to {
    stroke-dashoffset: -11;
  }
}
.illustration-set .tdot {
  transform-box: fill-box;
  transform-origin: center;
  animation: il-tdot 1.5s ease-in-out infinite;
}
.illustration-set .tdot.d1 {
  animation-delay: 0.2s;
}
.illustration-set .tdot.d2 {
  animation-delay: 0.4s;
}
@keyframes il-tdot {
  0%, 65%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}
.illustration-set .float {
  transform-box: fill-box;
  transform-origin: center;
  animation: il-float 5s ease-in-out infinite;
}
.illustration-set .float.s1 {
  animation-duration: 5.7s;
  animation-delay: -1.3s;
}
.illustration-set .float.s2 {
  animation-duration: 6.4s;
  animation-delay: -2.6s;
}
.illustration-set .float.s3 {
  animation-duration: 5.2s;
  animation-delay: -3.4s;
}
.illustration-set .float.s4 {
  animation-duration: 6.1s;
  animation-delay: -0.8s;
}
@keyframes il-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
.illustration-set .eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: il-eyeblink 5.4s ease-in-out infinite;
}
@keyframes il-eyeblink {
  0%, 93%, 100% {
    transform: scaleY(1);
  }
  96.5% {
    transform: scaleY(0.08);
  }
}
.illustration-set .pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: il-pulse 3.6s ease-in-out infinite;
}
@keyframes il-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}
.illustration-set .halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: il-halo 3.6s ease-out infinite;
}
@keyframes il-halo {
  0% {
    transform: scale(0.55);
    opacity: 0.55;
  }
  70%, 100% {
    transform: scale(1.9);
    opacity: 0;
  }
}
.illustration-set .flow {
  offset-rotate: 0deg;
  offset-anchor: center;
  animation: il-flow 2.8s cubic-bezier(0.5, 0, 0.7, 1) infinite;
}
@keyframes il-flow {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  72% {
    opacity: 1;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}
.illustration-set .bar {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: il-bar 3.4s ease-in-out infinite;
}
.illustration-set .bar.b2 {
  animation-duration: 4.1s;
  animation-delay: -1.1s;
}
.illustration-set .bar.b3 {
  animation-duration: 2.9s;
  animation-delay: -2s;
}
@keyframes il-bar {
  0%, 100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.16);
  }
}
.illustration-set .spark {
  transform-box: fill-box;
  transform-origin: center;
  animation: il-shimmer 5.4s ease-in-out infinite;
}
.illustration-set .spark.t1 {
  animation-duration: 4.8s;
  animation-delay: -0.4s;
}
.illustration-set .spark.t2 {
  animation-duration: 5.6s;
  animation-delay: -2.2s;
}
.illustration-set .spark.t3 {
  animation-duration: 6.4s;
  animation-delay: -4s;
}
@keyframes il-shimmer {
  0%, 46% {
    opacity: 0;
    transform: scale(0.2) rotate(-8deg);
  }
  72% {
    opacity: 1;
    transform: scale(1) rotate(6deg);
  }
  96%, 100% {
    opacity: 0;
    transform: scale(0.2) rotate(-8deg);
  }
}
.illustration-set .type {
  transform-box: fill-box;
  transform-origin: left center;
  animation: il-type 5.6s ease-in-out infinite;
}
.illustration-set .type.t2 {
  animation-delay: 0.45s;
}
@keyframes il-type {
  0% {
    transform: scaleX(0);
  }
  13% {
    transform: scaleX(1);
  }
  86% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
.illustration-set .out {
  animation: il-out 5.6s ease-in-out infinite;
}
@keyframes il-out {
  0%, 32% {
    opacity: 0;
  }
  44%, 90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.illustration-set .blink {
  animation: il-blink 1.1s steps(1) infinite;
}
@keyframes il-blink {
  50% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .illustration-set .travel,
  .illustration-set .ring,
  .illustration-set .tdot,
  .illustration-set .float,
  .illustration-set .eye,
  .illustration-set .pulse,
  .illustration-set .halo,
  .illustration-set .flow,
  .illustration-set .bar,
  .illustration-set .spark,
  .illustration-set .type,
  .illustration-set .out,
  .illustration-set .blink {
    animation: none;
  }
  .illustration-set .type {
    transform: scaleX(1);
  }
  .illustration-set .out {
    opacity: 1;
  }
}

/* ---- Blog feed ------------------------------------------------------------ */

/* The /blog page is a data-driven feed: monthly JSON files under src/data/blog
   drive a picture-forward gallery, newest first (see grafana/grafana.ai#263).
   Posts flow through one continuous grid; month boundaries are marked inline by
   a chip on the first card of each month, so a single-post month doesn't strand
   a lone card under its own section header. It carries the AI-adjacent purple
   accent so the feed reads with a single colour identity across both canvases. */
.blog-page {
  max-width: none;
  padding-inline: clamp(0.85rem, 2vw, 2rem);
  --blog-accent: light-dark(
    color-mix(in srgb, #a855f7 76%, #000),
    color-mix(in srgb, #a855f7 78%, #fff)
  );
}

.blog-hero {
  max-width: 60rem;
  padding: 1.75rem 0 1.4rem;
}

/* A bold accent kicker in the blog's purple so the page announces itself from
   the top, folding in what used to be the separate What's New feed
   (see grafana/grafana.ai#367). */
.blog-eyebrow {
  color: var(--blog-accent);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.blog-hero h1 {
  margin: 0.4rem 0 0.55rem;
  font-size: clamp(2rem, 4.4vw, 2.9rem);
  letter-spacing: 0;
  line-height: 1.12;
  font-weight: 800;
  /* Match the prose page title: white on dark, near-black on light
     (see grafana/grafana.ai#320). A short accent bar under the title gives the
     blog a stronger identity without repainting the whole heading. */
  color: light-dark(var(--color-text), #fff);
  text-decoration: none;
}

.blog-hero h1::after {
  content: "";
  display: block;
  width: clamp(3rem, 8vw, 4.5rem);
  height: 4px;
  margin-top: 0.55rem;
  border-radius: 999px;
  background: var(--blog-accent);
}

.blog-lead {
  max-width: 42rem;
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.3;
  color: var(--color-text);
  text-wrap: balance;
}

/* A quiet byline under the lead — how many posts, how often — so the page shows
   it is alive and maintained. */
.blog-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  max-width: 42rem;
  margin: 0.9rem 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.blog-hero-count {
  color: var(--blog-accent);
}

.blog-hero-sep {
  color: color-mix(in srgb, var(--blog-accent) 45%, var(--color-text-muted));
}

.blog-feed {
  margin-top: 1.75rem;
}

/* An editorial card grid: artwork on top, then tags, headline, summary, and a
   date/source byline, so each post reads as a self-contained card. */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  /* Dense flow backfills the gaps that double-width featured cards leave
     behind, at the cost of occasionally reordering neighbours. */
  grid-auto-flow: dense;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Featured posts — picked at random on every render — spread across two
   columns and swap the muted summary for a fat callout, so a few cards
   anchor the feed instead of every post carrying equal weight. */
.blog-card--featured {
  grid-column: span 2;
  border-color: color-mix(in srgb, var(--blog-accent) 32%, var(--color-border));
}

.blog-card--featured .blog-card-body {
  gap: 0.65rem;
  padding: 1.1rem 1.25rem 1.25rem;
}

.blog-card--featured h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.2;
}

.blog-card-callout {
  margin: 0.1rem 0 0;
  padding-left: 0.8rem;
  border-left: 3px solid var(--blog-accent);
  color: var(--color-text);
  font-size: clamp(1.02rem, 1.8vw, 1.3rem);
  font-weight: 800;
  line-height: 1.3;
  /* Fat but short: two lines, then it stops. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* The first card of each month carries an inline month chip over its artwork,
   replacing block-level month headers so the grid never breaks its flow. */
.blog-month-marker {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 1;
  padding: 0.24rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--blog-accent) 45%, transparent);
  border-radius: 999px;
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-bg) 78%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.blog-card {
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: color-mix(in srgb, var(--color-surface) 86%, transparent);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.blog-card:hover {
  border-color: color-mix(in srgb, var(--blog-accent) 45%, var(--color-border));
  box-shadow:
    0 12px 32px -24px color-mix(in srgb, var(--blog-accent) 74%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--blog-accent) 16%, transparent);
}

.blog-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* The global a:hover underline outweighs the class rule above and would
   underline the whole card — tag chips, title, summary, and byline at once.
   The card already answers the hover with its lift, border tint, and accent
   title, so keep every line of it underline-free. */
.blog-card-link:hover {
  text-decoration: none;
}

.blog-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--blog-accent) 10%, var(--color-surface));
}

.blog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.blog-card:hover .blog-thumb img {
  transform: scale(1.04);
}

/* Gradient artwork stands in when a post ships no image, keeping the grid
   visual rather than dropping back to a bare text card. */
.blog-thumb-art {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 120% at 15% 10%, color-mix(in srgb, var(--blog-accent) 55%, transparent), transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--blog-accent) 30%, var(--color-surface)), var(--color-surface));
}

.blog-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.9rem 1rem 1rem;
}

.blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-tags li {
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  color: color-mix(in srgb, var(--blog-accent) 82%, var(--color-text));
  background: color-mix(in srgb, var(--blog-accent) 14%, transparent);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}

.blog-card h3 {
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--color-text);
}

.blog-card:hover h3 {
  color: var(--blog-accent);
}

.blog-card-summary {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
  /* Bound long summaries so every card in a row stays a similar height. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.blog-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  margin: 0.15rem 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.blog-card-source {
  color: var(--blog-accent);
}

.blog-empty {
  margin: 1.75rem 0 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text-muted);
  background: var(--color-surface);
  font-size: var(--text-sm);
}

/* Below two comfortable columns the featured span would overflow the grid, so
   featured cards fall back to normal width while keeping their callout. */
@media (max-width: 620px) {
  .blog-card--featured {
    grid-column: auto;
  }
}

@media (max-width: 540px) {
  .blog-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Tour (/tour) ---------------------------------------------------------- */

/* The tour is a bespoke full-screen deck built on reveal.js (vendored under
   /static/vendor/reveal). The base template still renders the site chrome, but
   here it sleeps: the deck owns the whole viewport and the proximity-revealed
   X in the top-right corner is the way home. Reveal's stylesheet loads after
   this one, so every override below rides the body.tour-page prefix to win
   the specificity contest without fighting load order. */

body.tour-page .site-header,
body.tour-page .site-footer {
  display: none;
}

body.tour-page {
  overflow: hidden;
  /* Per-slide accent, set from each slide's data-accent by the deck script.
     The text-safe mix follows the product-tint recipe so accents stay
     readable on both canvases. */
  --tour-accent: #ff671d;
  --tour-accent-text: light-dark(
    color-mix(in srgb, var(--tour-accent) 66%, #000),
    color-mix(in srgb, var(--tour-accent) 64%, #fff)
  );
  /* The two arcs each own an accent family: Arc 1 (AI for Observability) reads
     warm, Arc 2 (Observability for AI) reads cool. These representative tokens
     drive the duality strap and the setup split so the map stays legible even
     while the per-slide --tour-accent eases through its family. */
  --tour-arc-a: #ff671d;
  --tour-arc-b: #1b55f5;
  --tour-arc-a-text: light-dark(
    color-mix(in srgb, var(--tour-arc-a) 66%, #000),
    color-mix(in srgb, var(--tour-arc-a) 64%, #fff)
  );
  --tour-arc-b-text: light-dark(
    color-mix(in srgb, var(--tour-arc-b) 66%, #000),
    color-mix(in srgb, var(--tour-arc-b) 64%, #fff)
  );
}

/* Reveal claims the body as its viewport and paints it white; hand the canvas
   back to the site's scheme-aware tokens. */
body.tour-page.reveal-viewport {
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* The homepage's isometric net as a fixed stage: the deck script pans it one
   bay per slide, re-tints it to the slide accent, and sweeps the light across
   on each transition. */
.tour-isolines {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: color-mix(in srgb, var(--cta-text) 45%, var(--color-text-muted));
  opacity: light-dark(0.55, 0.68);
}

.tour-deck {
  position: fixed;
  inset: 0;
  z-index: 1;
  font-family: var(--font-body);
  font-size: var(--text-base);
  /* Reveal's viewport flattens line-height to 1; restore the site rhythm. */
  line-height: 1.55;
}

/* disableLayout mode: no transform scaling, so sections simply span the stage
   and the site's clamp()-based type rules keep every glyph sharp. A tall slide
   scrolls within its own box on short viewports. */
body.tour-page .reveal .slides > section,
body.tour-page .reveal .slides > section > section {
  height: 100%;
  padding: 0;
  overflow: hidden auto;
}

/* A stack is only the container for a set of vertical slides, never a scroll
   surface itself. Reveal parks the off-screen vertical slides far above and
   below the stack with transforms; if the stack is allowed to scroll, those
   parked slides inflate its scroll height, so you can drag the whole stack
   into empty space and then get stranded there — able to scroll down but not
   back up. Keep the scroll on the leaf slide inside, where the content is. */
body.tour-page .reveal .slides > section.stack {
  overflow: hidden;
}

.tour-slide {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 100%;
  max-width: min(1080px, 100%);
  margin: 0 auto;
  padding: clamp(3.25rem, 9vh, 6rem) clamp(1.4rem, 6vw, 4.5rem);
  text-align: left;
  transform: translateY(clamp(-1.5rem, -2.5vh, -0.75rem));
}

.tour-slide--center {
  align-items: center;
  text-align: center;
}

/* Accented highlights inside tour headings, following the homepage product
   mark. Each heading owns an isolated stack and the marked fragment sits in
   its negative layer, so a later line's wash can never paint over text on the
   line above it. box-decoration-break keeps wrapped marks as separate swipes. */
.tour-chapter-title,
.tour-product-title,
.tour-opening-question,
.tour-pressure-title,
.tour-shift-title,
.tour-shift-arrival,
.tour-quote {
  isolation: isolate;
}

body.tour-page .tour-deck mark {
  position: relative;
  z-index: -1;
  padding: 0 0.14em;
  border-radius: 4px;
  color: inherit;
  background: color-mix(in srgb, var(--tour-accent) 28%, transparent);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* -- Opening question and short story beats -- */

.tour-opening-question {
  margin: 0;
  max-width: 12ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 9vw, 7.25rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: light-dark(var(--color-text), #fff);
  text-wrap: balance;
}

.tour-opening-answer {
  margin: clamp(1.1rem, 3vh, 1.6rem) 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 2.4vw, 1.65rem);
  line-height: 1.3;
  color: var(--tour-accent-text);
  text-wrap: balance;
}

body.tour-page .reveal .slides section.present .tour-opening-question {
  animation: tour-burst-arrive 0.62s cubic-bezier(0.22, 0.78, 0.24, 1) both;
}

body.tour-page .reveal .slides section.present .tour-slide--burst > .tour-support,
body.tour-page .reveal .slides section.present .tour-opening-answer {
  animation: tour-burst-arrive 0.52s ease-out 0.16s both;
}

@keyframes tour-burst-arrive {
  from {
    opacity: 0;
    transform: translateY(0.65rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.tour-hint {
  margin: clamp(1.8rem, 6vh, 3.5rem) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.tour-hint kbd {
  margin-right: 0.15em;
  padding: 0.12em 0.5em;
  border: 1px solid var(--color-border);
  border-bottom-width: 2px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--bg-2);
}

/* -- Belief slides: one monumental word, a line that completes it, and a
      quiet supporting sentence. -- */

.tour-word {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(4rem, 15vw, 10.5rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: light-dark(var(--color-text), #fff);
}

/* The accent underline every page title wears, scaled up to the monument. */
.tour-word::after {
  content: "";
  display: block;
  width: clamp(3rem, 8vw, 5rem);
  height: 4px;
  margin: 1.3rem auto 0;
  border-radius: 2px;
  background: var(--tour-accent-text);
}

.tour-line {
  margin: 1.5rem 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.45rem, 3.6vw, 2.5rem);
  line-height: 1.2;
  color: var(--tour-accent-text);
  text-wrap: balance;
}

.tour-support {
  margin: 1.2rem auto 0;
  max-width: 44rem;
  font-size: clamp(1rem, 1.6vw, 1.28rem);
  line-height: 1.6;
  color: var(--color-text-muted);
  text-wrap: balance;
}

/* -- The Shift ------------------------------------------------------------
   The opening movement advances in short Reveal beats, then opens a literal
   fault line between the old operating model and the agentic one. */

.tour-slide--shift-table,
.tour-slide--control,
.tour-slide--outcomes {
  max-width: min(1160px, 100%);
}

.tour-control-grid span {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--tour-accent-text);
}

.tour-shift-table-note,
.tour-outcome-note {
  margin: clamp(1.2rem, 3vh, 1.8rem) 0 0;
  max-width: 52rem;
  font-size: clamp(0.95rem, 1.4vw, 1.12rem);
  font-weight: 600;
  line-height: 1.55;
  color: var(--color-text-muted);
  text-wrap: balance;
}

.tour-slide--pressure::before {
  content: "×";
  position: absolute;
  z-index: -1;
  font-family: var(--font-display);
  font-size: min(72vh, 46vw);
  font-weight: 600;
  line-height: 0.7;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--tour-accent) 22%, transparent);
  opacity: 0.7;
  transform: rotate(8deg);
  pointer-events: none;
}

.tour-pressure-title {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 5.8rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--color-text);
  text-align: center;
  text-wrap: balance;
}

.tour-pressure-title > span {
  display: block;
}

.tour-pressure-title > span:nth-child(1) {
  opacity: 0.42;
}

.tour-pressure-title > span:nth-child(2) {
  opacity: 0.68;
}

.tour-pressure-title > span + span {
  margin-top: 0.13em;
}

.tour-slide--shift {
  position: relative;
  isolation: isolate;
  max-width: min(1180px, 100%);
  overflow: hidden;
}

/* The thin hot core and broad translucent halo are one fault line. It grows
   through the stage when Reveal marks this slide present. */
.tour-shift-rift {
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: 50%;
  z-index: -1;
  width: clamp(3px, 0.5vw, 7px);
  background: linear-gradient(
    to bottom,
    transparent,
    color-mix(in srgb, var(--tour-accent) 82%, #fff) 18%,
    var(--tour-accent) 52%,
    color-mix(in srgb, var(--tour-accent) 82%, #fff) 82%,
    transparent
  );
  box-shadow:
    0 0 18px color-mix(in srgb, var(--tour-accent) 78%, transparent),
    0 0 84px 24px color-mix(in srgb, var(--tour-accent) 17%, transparent);
  opacity: 0;
  transform: rotate(11deg) scaleY(0.03);
  transform-origin: 50% 50%;
}

body.tour-page .reveal .slides section.present .tour-shift-rift {
  animation: tour-shift-open 1.05s cubic-bezier(0.2, 0.82, 0.22, 1) 0.15s forwards;
}

@keyframes tour-shift-open {
  0% {
    opacity: 0;
    transform: rotate(11deg) scaleY(0.03);
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0.72;
    transform: rotate(11deg) scaleY(1);
  }
}

.tour-shift-copy {
  position: relative;
  z-index: 1;
  width: min(100%, 60rem);
}

.tour-shift-title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6.3vw, 5.2rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: light-dark(var(--color-text), #fff);
  text-wrap: balance;
}

.tour-shift-arrival {
  margin: 0.65rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.7rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--tour-accent-text);
  text-wrap: balance;
}

.tour-shift-contrast {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(0.8rem, 2.2vw, 1.5rem);
  width: 100%;
  margin-top: clamp(2rem, 5vh, 3.25rem);
}

.tour-shift-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 7.5rem;
  padding: clamp(1rem, 2.4vw, 1.4rem);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-bg) 86%, transparent);
  backdrop-filter: blur(10px);
}

.tour-shift-side span {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.tour-shift-side strong {
  display: block;
  margin-top: 0.55rem;
  max-width: 28ch;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  line-height: 1.3;
  color: var(--color-text);
}

.tour-shift-side--before {
  opacity: 0.7;
}

.tour-shift-side--after {
  border-color: color-mix(in srgb, var(--tour-accent) 62%, var(--color-border));
  background: color-mix(in srgb, var(--tour-accent) 10%, var(--color-bg));
  box-shadow: 0 22px 60px -42px color-mix(in srgb, var(--tour-accent) 85%, transparent);
}

.tour-shift-side--after span {
  color: var(--tour-accent-text);
}

.tour-shift-arrow {
  align-self: center;
  color: var(--tour-accent-text);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--tour-accent) 64%, transparent));
}

body.tour-page .reveal .slides section.present .tour-shift-side--before {
  animation: tour-shift-before 0.75s ease-out 0.25s both;
}

body.tour-page .reveal .slides section.present .tour-shift-side--after {
  animation: tour-shift-after 0.75s ease-out 0.45s both;
}

@keyframes tour-shift-before {
  from {
    opacity: 0;
    transform: translateX(1.5rem);
  }

  to {
    opacity: 0.7;
    transform: none;
  }
}

@keyframes tour-shift-after {
  from {
    opacity: 0;
    transform: translateX(-1.5rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.tour-slide--shift-table .tour-chapter-title,
.tour-slide--control .tour-chapter-title,
.tour-slide--outcomes .tour-chapter-title {
  max-width: 21ch;
}

.tour-shift-table {
  width: 100%;
  margin-top: clamp(1.6rem, 4vh, 2.4rem);
  border-top: 1px solid color-mix(in srgb, var(--tour-accent) 42%, var(--color-border));
}

.tour-shift-table-head,
.tour-shift-table-row {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(1rem, 4vw, 3rem);
}

.tour-shift-table-head {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--color-border);
}

.tour-shift-table-head span {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.tour-shift-table-head span:last-child {
  color: var(--tour-accent-text);
}

.tour-shift-table-row {
  align-items: center;
  padding: clamp(0.7rem, 1.8vh, 1rem) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  line-height: 1.4;
}

.tour-shift-table-row > span {
  color: var(--color-text-muted);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--tour-accent) 45%, transparent);
}

.tour-shift-table-row > strong {
  position: relative;
  padding-left: 1.5rem;
  font-weight: 600;
  color: var(--color-text);
}

.tour-shift-table-row > strong::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--tour-accent-text);
}

.tour-shift-table-note,
.tour-outcome-note {
  color: var(--tour-accent-text);
}

.tour-control-grid,
.tour-outcome-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.65rem, 1.8vw, 1.1rem);
  width: 100%;
  margin-top: clamp(1.8rem, 5vh, 3rem);
}

.tour-control-grid > div,
.tour-outcome-grid > div {
  display: flex;
  flex-direction: column;
  min-height: clamp(9rem, 23vh, 12rem);
  padding: clamp(1rem, 2.3vw, 1.4rem);
  border: 1px solid var(--color-border);
  border-top-color: color-mix(in srgb, var(--tour-accent) 68%, var(--color-border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-bg) 84%, transparent);
  box-shadow: 0 24px 60px -50px color-mix(in srgb, var(--tour-accent) 80%, transparent);
  backdrop-filter: blur(10px);
}

.tour-control-grid strong,
.tour-outcome-grid strong {
  display: block;
  margin-top: auto;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  line-height: 1.25;
  color: var(--color-text);
}

.tour-control-grid small,
.tour-outcome-grid span {
  display: block;
  margin-top: 0.55rem;
  font-size: clamp(0.78rem, 1.2vw, 0.94rem);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.tour-outcome-grid > div {
  min-height: clamp(8.5rem, 20vh, 10.5rem);
}

@media (max-width: 760px) {
  .tour-control-grid,
  .tour-outcome-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tour-shift-contrast {
    grid-template-columns: minmax(0, 1fr);
  }

  .tour-shift-arrow {
    justify-self: center;
    line-height: 0.8;
    transform: rotate(90deg);
  }

  .tour-shift-side {
    min-height: auto;
  }

  .tour-shift-rift {
    left: 72%;
  }
}

@media (max-width: 520px) {
  .tour-shift-table-head,
  .tour-shift-table-row {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 0.8rem;
  }

  .tour-shift-table-row > strong {
    padding-left: 1.1rem;
  }

  .tour-control-grid > div,
  .tour-outcome-grid > div {
    min-height: 7.5rem;
  }
}

@media (max-height: 700px) and (min-width: 761px) {
  .tour-control-grid,
  .tour-outcome-grid {
    margin-top: 1.25rem;
  }

  .tour-control-grid > div,
  .tour-outcome-grid > div {
    min-height: 7.25rem;
    padding: 0.9rem;
  }

  .tour-shift-contrast {
    margin-top: 1.25rem;
  }
}

/* -- Quote slides -- */

.tour-quote {
  position: relative;
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.8vw, 3.7rem);
  line-height: 1.16;
  color: light-dark(var(--color-text), #fff);
  text-wrap: balance;
}

/* An oversized ghost quotation mark floats above the spoken beliefs. */
.tour-quote--speech::before {
  content: "\201C";
  position: absolute;
  top: -0.62em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.2em;
  line-height: 1;
  color: color-mix(in srgb, var(--tour-accent) 42%, transparent);
  pointer-events: none;
}

/* -- Published reactions ---------------------------------------------------
   A true browser capture of the lead tweet anchors a loose wall of linked
   reactions. The source image is the full X viewport so it remains an honest
   capture; the crop simply removes surrounding product chrome. */

.tour-slide--proof {
  justify-content: flex-start;
  padding-top: clamp(2.25rem, 6vh, 4rem);
  padding-bottom: clamp(1.2rem, 3vh, 2.4rem);
  transform: none;
}

.tour-slide--proof .tour-eyebrow {
  margin-bottom: 0.75rem;
}

.tour-slide--proof .tour-chapter-title {
  font-size: clamp(1.8rem, 4.2vw, 3.1rem);
}

.tour-proof-stage {
  position: relative;
  width: min(100%, 72rem);
  height: clamp(22rem, 57vh, 31rem);
  margin-top: clamp(0.8rem, 2.5vh, 1.5rem);
}

body.tour-page .tour-tweet-shot,
body.tour-page .tour-proof-quote {
  color: inherit;
  text-decoration: none;
}

body.tour-page .tour-tweet-shot {
  position: absolute;
  top: 56%;
  left: 50%;
  z-index: 2;
  display: block;
  width: min(48vw, 34rem);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #fff 15%, transparent);
  border-radius: 16px;
  background: #000;
  box-shadow:
    0 28px 72px -34px color-mix(in srgb, var(--tour-accent) 72%, transparent),
    0 18px 42px -28px rgba(0, 0, 0, 0.9);
  transform: translate(-50%, -50%) rotate(-0.35deg);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.tour-tweet-shot:hover,
.tour-tweet-shot:focus-visible {
  color: inherit;
  border-color: color-mix(in srgb, var(--tour-accent) 70%, #fff);
  text-decoration: none;
  transform: translate(-50%, -50%) rotate(0) scale(1.015);
}

.tour-tweet-crop {
  position: relative;
  display: block;
  aspect-ratio: 598 / 100;
  overflow: hidden;
  background: #000;
}

/* Crop coordinates match the lead article inside the saved 1280 × 720 X
   viewport: x 283.5, y 53, width 598, height 100 — ending just below the
   post text so the views count and reply/retweet/like row stay out of
   frame. */
.tour-tweet-crop img {
  position: absolute;
  top: -53%;
  left: -47.41%;
  display: block;
  width: 214.05%;
  max-width: none;
  height: auto;
}

.tour-proof-source {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.62rem 0.82rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-mono);
  font-size: clamp(0.62rem, 0.9vw, 0.72rem);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.68);
  background: #000;
}

body.tour-page .tour-proof-quote {
  position: absolute;
  z-index: 1;
  display: block;
  width: clamp(12rem, 21vw, 16rem);
  padding: clamp(0.8rem, 1.5vw, 1.1rem);
  border: 1px solid color-mix(in srgb, var(--tour-accent) 34%, var(--color-border));
  border-radius: 13px;
  background: color-mix(in srgb, var(--color-bg) 84%, transparent);
  box-shadow: 0 18px 42px -32px color-mix(in srgb, var(--tour-accent) 64%, transparent);
  backdrop-filter: blur(10px);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.tour-proof-quote:hover,
.tour-proof-quote:focus-visible {
  color: inherit;
  border-color: color-mix(in srgb, var(--tour-accent) 72%, var(--color-border));
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  box-shadow: 0 18px 46px -30px color-mix(in srgb, var(--tour-accent) 76%, transparent);
  text-decoration: none;
  transform: rotate(0);
}

.tour-proof-quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.9rem, 1.45vw, 1.08rem);
  line-height: 1.35;
  color: light-dark(var(--color-text), #fff);
  text-wrap: balance;
}

.tour-proof-quote cite {
  display: block;
  margin-top: 0.65rem;
  font-family: var(--font-mono);
  font-size: clamp(0.58rem, 0.8vw, 0.68rem);
  font-style: normal;
  line-height: 1.35;
  color: var(--color-text-muted);
}

.tour-proof-quote--northwest {
  top: 2%;
  left: -4%;
  transform: rotate(-2.6deg);
}

.tour-proof-quote--northeast {
  top: 0;
  right: -4%;
  transform: rotate(2.1deg);
}

.tour-proof-quote--southwest {
  bottom: 1%;
  left: -2%;
  transform: rotate(1.8deg);
}

.tour-proof-quote--southeast {
  right: -7%;
  bottom: 0;
  transform: rotate(-2.2deg);
}

@media (max-width: 900px) {
  .tour-proof-stage {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.45rem, 1.4vw, 0.8rem);
    height: auto;
  }

  body.tour-page .tour-tweet-shot {
    position: relative;
    top: auto;
    left: auto;
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 38rem);
    transform: none;
  }

  .tour-tweet-shot:hover,
  .tour-tweet-shot:focus-visible {
    border-color: color-mix(in srgb, var(--tour-accent) 70%, #fff);
    box-shadow:
      0 26px 72px -34px color-mix(in srgb, var(--tour-accent) 76%, transparent),
      0 16px 40px -28px rgba(0, 0, 0, 0.9);
  }

  body.tour-page .tour-proof-quote,
  body.tour-page .tour-proof-quote--northwest,
  body.tour-page .tour-proof-quote--northeast,
  body.tour-page .tour-proof-quote--southwest,
  body.tour-page .tour-proof-quote--southeast {
    position: relative;
    inset: auto;
    width: auto;
    transform: none;
  }
}

@media (max-height: 680px) {
  .tour-slide--proof {
    padding-top: clamp(1.75rem, 5vh, 2.5rem);
    padding-bottom: 0.9rem;
  }

  .tour-proof-stage {
    margin-top: 0.65rem;
  }

  .tour-proof-quote {
    padding: 0.72rem;
  }

  .tour-proof-quote blockquote {
    font-size: 0.82rem;
  }
}

/* The cost slide takes its headline literally: a single overhead spotlight
   searches briefly from centre stage, then settles on the word "cost". */
.tour-slide--spotlight {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.tour-slide--spotlight > :not(.tour-spotlights) {
  position: relative;
  z-index: 1;
}

.tour-spotlights {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}

.tour-spotlight-beam {
  position: absolute;
  top: -22%;
  width: 32%;
  height: 142%;
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--tour-accent) 30%, transparent),
    color-mix(in srgb, var(--tour-accent) 10%, transparent) 58%,
    transparent 88%
  );
  filter: blur(12px);
  opacity: 0.72;
  transform-origin: 50% 0;
  will-change: transform, opacity;
}

.tour-spotlight-beam--center {
  --tour-spotlight-rest-angle: -8deg;
  left: 34%;
  transform: rotate(var(--tour-spotlight-rest-angle));
}

/* Reveal adds .present when the slide arrives and removes it on departure, so
   this small search-and-settle movement naturally replays on every visit. */
body.tour-page .reveal .slides section.present .tour-spotlight-beam--center {
  animation: tour-spotlight-find-cost 1.35s cubic-bezier(0.22, 0.75, 0.28, 1) both;
}

@keyframes tour-spotlight-find-cost {
  0% {
    opacity: 0.28;
    transform: rotate(calc(var(--tour-spotlight-rest-angle) + 7deg));
  }

  72% {
    opacity: 0.8;
    transform: rotate(calc(var(--tour-spotlight-rest-angle) - 1.25deg));
  }

  100% {
    opacity: 0.72;
    transform: rotate(var(--tour-spotlight-rest-angle));
  }
}

@media (max-width: 620px) {
  /* The headline wraps to three lines here, dropping "cost" to the left of the
     second line, so the beam drops its tilt and shifts left to stay on it. */
  .tour-spotlight-beam--center {
    --tour-spotlight-rest-angle: 0deg;
    left: 20%;
  }
}

/* -- Chapter slides (Assistant, products intro) -- */

.tour-eyebrow {
  margin: 0 0 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}

.tour-eyebrow-index {
  margin-right: 0.7rem;
  font-family: var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--tour-accent-text);
}

.tour-chapter-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.08;
  color: light-dark(var(--color-text), #fff);
  text-wrap: balance;
}

.tour-assistant-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 7vw, 6rem);
  width: min(100%, 50rem);
}

/* The animated Loader used in grafana-assistant-app chat: five independently
   pulsing bars with five particles lifting away from them. The original 8px
   spacing geometry is preserved and scaled as a unit for the tour. */
.tour-assistant-loader {
  flex: 0 0 4.25rem;
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 3.5rem;
  color: var(--color-text);
}

.tour-assistant-loader-core {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  width: fit-content;
  height: 16px;
  padding: 4px 4px 0;
  transform: scale(2);
}

.tour-assistant-loader-bar {
  --loader-start: 4px;
  --loader-low: 3.2px;
  --loader-max: 12px;
  --loader-near-max: 10.8px;
  display: inline-block;
  width: 4px;
  height: var(--loader-start);
  border-radius: 3px;
  background: currentColor;
  opacity: 0.7;
  transform-origin: bottom;
  animation: tour-assistant-loader-pulse 1.2s ease-in-out infinite;
}

.tour-assistant-loader-bar:nth-child(1) {
  --loader-start: 6.4px;
  --loader-low: 5.12px;
  --loader-max: 14.4px;
  --loader-near-max: 12.96px;
  animation-duration: 1.4s;
  animation-delay: 0.1s;
}

.tour-assistant-loader-bar:nth-child(2) {
  --loader-start: 4.8px;
  --loader-low: 3.84px;
  --loader-max: 12.8px;
  --loader-near-max: 11.52px;
  animation-duration: 1.1s;
  animation-delay: 0.3s;
}

.tour-assistant-loader-bar:nth-child(3) {
  --loader-start: 5.6px;
  --loader-low: 4.48px;
  --loader-max: 13.6px;
  --loader-near-max: 12.24px;
  animation-duration: 1.3s;
  animation-delay: 0.5s;
}

.tour-assistant-loader-bar:nth-child(4) {
  animation-delay: 0.7s;
}

.tour-assistant-loader-bar:nth-child(5) {
  --loader-start: 7.2px;
  --loader-low: 5.76px;
  --loader-max: 15.2px;
  --loader-near-max: 13.68px;
  animation-duration: 1.5s;
  animation-delay: 0.9s;
}

@keyframes tour-assistant-loader-pulse {
  0%,
  100% {
    height: var(--loader-start);
    opacity: 0.7;
  }

  25% {
    height: var(--loader-max);
    opacity: 1;
  }

  50% {
    height: var(--loader-low);
    opacity: 0.8;
  }

  75% {
    height: var(--loader-near-max);
    opacity: 0.9;
  }
}

.tour-assistant-loader-particle {
  --tx: 0;
  --ty: 0;
  position: absolute;
  width: 1.6px;
  height: 1.6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  animation: tour-assistant-loader-sparkle 1s ease-out infinite;
}

.tour-assistant-loader-particle:nth-child(6) {
  top: 60%;
  left: 5%;
  --tx: 8px;
  --ty: -20px;
  animation-delay: 0.2s;
}

.tour-assistant-loader-particle:nth-child(7) {
  top: 50%;
  left: 25%;
  --tx: -6px;
  --ty: -25px;
  animation-delay: 0.4s;
}

.tour-assistant-loader-particle:nth-child(8) {
  top: 55%;
  left: 45%;
  --tx: 10px;
  --ty: -18px;
  animation-delay: 0.6s;
}

.tour-assistant-loader-particle:nth-child(9) {
  top: 45%;
  left: 65%;
  --tx: -8px;
  --ty: -22px;
  animation-delay: 0.8s;
}

.tour-assistant-loader-particle:nth-child(10) {
  top: 50%;
  left: 85%;
  --tx: 6px;
  --ty: -28px;
  animation-delay: 1s;
}

@keyframes tour-assistant-loader-sparkle {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(1);
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(var(--tx), var(--ty)) scale(0);
  }
}

@media (max-width: 620px) {
  .tour-assistant-heading {
    align-items: flex-start;
    gap: 1rem;
  }

  .tour-assistant-loader {
    flex-basis: 3rem;
    width: 3rem;
    transform: scale(0.82);
    transform-origin: top right;
  }
}

.tour-features {
  margin: clamp(1.6rem, 4vh, 2.6rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(0.85rem, 2.2vh, 1.3rem);
  max-width: 46rem;
}

.tour-features li {
  position: relative;
  padding-left: 1.7rem;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.55;
  color: var(--color-text-muted);
}

.tour-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.85rem;
  height: 2px;
  border-radius: 1px;
  background: var(--tour-accent-text);
}

.tour-features strong {
  font-weight: 600;
  color: var(--color-text);
}

/* The Assistant list types rapidly when its slide arrives. Hidden characters
   keep their width, so the copy never reflows as it is written. */
.tour-features.is-typewriter-ready .tour-type-char {
  visibility: hidden;
}

.tour-features.is-typewriter-ready .tour-type-char.is-typed {
  visibility: visible;
}

.tour-type-caret {
  display: inline-block;
  width: 0.08em;
  height: 1em;
  margin-left: 0.08em;
  vertical-align: -0.12em;
  background: var(--tour-accent-text);
  animation: tour-caret-blink 0.7s steps(1, end) infinite;
}

@keyframes tour-caret-blink {
  50% {
    opacity: 0;
  }
}

.tour-chapter-note {
  margin: clamp(1.4rem, 3.5vh, 2.2rem) 0 0;
  max-width: 46rem;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--tour-accent-text);
}

.tour-chapter-note.is-typewriter-ready,
.tour-payoff-outcome.is-typewriter-ready {
  opacity: 0;
  transform: translateY(0.5rem);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.tour-chapter-note.is-typewriter-ready.is-typed,
.tour-payoff-outcome.is-typewriter-ready.is-typed {
  opacity: 1;
  transform: none;
}

/* -- Product views inside the products chapter -- */

.tour-slide--product {
  position: relative;
}

.tour-product-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  line-height: 1.08;
  color: light-dark(var(--color-text), #fff);
  text-wrap: balance;
}

.tour-product-lede {
  margin: 1.1rem 0 0;
  max-width: 40rem;
  font-size: clamp(1.02rem, 1.7vw, 1.28rem);
  line-height: 1.6;
  color: var(--color-text);
}

.tour-product-points {
  margin: clamp(1.2rem, 3vh, 1.8rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.65rem;
  max-width: 42rem;
}

.tour-product-points li {
  position: relative;
  padding-left: 1.7rem;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.55;
  color: var(--color-text-muted);
}

.tour-product-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.85rem;
  height: 2px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--tour-accent) 55%, transparent);
}

.tour-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: clamp(1.4rem, 3.5vh, 2.2rem);
  font-weight: 600;
  color: var(--tour-accent-text);
}

.tour-link:hover {
  color: var(--tour-accent-text);
  text-decoration: none;
}

.tour-link:hover .tour-link-label {
  text-decoration: underline;
}

.tour-link-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem clamp(1rem, 3vw, 2rem);
}

/* -- The duality: two arcs, always on the map ------------------------------
   The strap rides above every capability slide and names both arcs, lighting
   the half the current slide belongs to. The setup split plants the same two
   arcs side by side before either arc begins, and the finale strap relights
   both at once as the rejoin. */

.tour-duality-strap {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4em;
  margin: 0 0 1.1rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tour-duality-strap-half {
  color: var(--color-text-muted);
  opacity: 0.5;
  border-bottom: 2px solid transparent;
  transition: color 0.3s ease, opacity 0.3s ease, border-color 0.3s ease;
}

.tour-duality-strap-sep {
  color: var(--color-text-muted);
  opacity: 0.4;
}

.tour-duality-strap[data-arc="1"] .tour-duality-strap-half--a,
.tour-duality-strap[data-arc="2"] .tour-duality-strap-half--b,
.tour-duality-strap--rejoin .tour-duality-strap-half {
  opacity: 1;
}

.tour-duality-strap[data-arc="1"] .tour-duality-strap-half--a,
.tour-duality-strap--rejoin .tour-duality-strap-half--a {
  color: var(--tour-arc-a-text);
  border-bottom-color: color-mix(in srgb, var(--tour-arc-a) 60%, transparent);
}

.tour-duality-strap[data-arc="2"] .tour-duality-strap-half--b,
.tour-duality-strap--rejoin .tour-duality-strap-half--b {
  color: var(--tour-arc-b-text);
  border-bottom-color: color-mix(in srgb, var(--tour-arc-b) 60%, transparent);
}

/* The setup split: the two arcs as co-equal panels, each in its own family. */
.tour-duality-split {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(0.8rem, 2.5vw, 1.8rem);
  width: 100%;
  margin-top: clamp(2rem, 5vh, 3.25rem);
}

.tour-duality-arc {
  display: flex;
  flex-direction: column;
  padding: clamp(1.1rem, 2.6vw, 1.6rem);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-bg) 86%, transparent);
  backdrop-filter: blur(10px);
}

.tour-duality-arc strong {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1.15;
  color: light-dark(var(--color-text), #fff);
}

.tour-duality-arc small {
  margin-top: 0.45rem;
  font-size: clamp(0.85rem, 1.3vw, 1rem);
  line-height: 1.45;
  color: var(--color-text-muted);
}

.tour-duality-arc--a {
  border-top-color: color-mix(in srgb, var(--tour-arc-a) 64%, var(--color-border));
  background: color-mix(in srgb, var(--tour-arc-a) 9%, var(--color-bg));
  box-shadow: 0 22px 60px -46px color-mix(in srgb, var(--tour-arc-a) 82%, transparent);
}

.tour-duality-arc--b {
  border-top-color: color-mix(in srgb, var(--tour-arc-b) 64%, var(--color-border));
  background: color-mix(in srgb, var(--tour-arc-b) 9%, var(--color-bg));
  box-shadow: 0 22px 60px -46px color-mix(in srgb, var(--tour-arc-b) 82%, transparent);
}

.tour-duality-plus {
  align-self: center;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 600;
  color: var(--color-text-muted);
}

body.tour-page .reveal .slides section.present .tour-duality-arc--a {
  animation: tour-duality-arc-in 0.7s ease-out 0.3s both;
}

body.tour-page .reveal .slides section.present .tour-duality-arc--b {
  animation: tour-duality-arc-in 0.7s ease-out 0.45s both;
}

@keyframes tour-duality-arc-in {
  from {
    opacity: 0;
    transform: translateY(0.7rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Left-aligned setup and arc openers keep their supporting sentence hard left
   rather than centred by the shared .tour-support auto margins. */
.tour-slide--opener .tour-support {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

/* -- Capability slides: a denser two-panel layout so each remaining slide
      rewards the visitor for holding on it — the capability list on the left,
      a payoff panel on the right with a concrete outcome and the product link. */

.tour-slide--capability {
  max-width: min(1160px, 100%);
}

.tour-capability-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: start;
  gap: clamp(1.4rem, 4vw, 3.5rem);
  width: 100%;
  margin-top: clamp(1.4rem, 3.5vh, 2.2rem);
}

.tour-capability-main .tour-product-lede,
.tour-capability-main .tour-product-points,
.tour-capability-main .tour-features {
  margin-top: 0;
}

.tour-capability-main .tour-product-points,
.tour-capability-main .tour-features {
  margin-top: clamp(1rem, 2.5vh, 1.5rem);
}

.tour-payoff {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: clamp(1.2rem, 2.6vw, 1.7rem);
  border: 1px solid var(--color-border);
  border-top-color: color-mix(in srgb, var(--tour-accent) 68%, var(--color-border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--tour-accent) 8%, var(--color-bg));
  box-shadow: 0 24px 60px -50px color-mix(in srgb, var(--tour-accent) 80%, transparent);
  backdrop-filter: blur(10px);
}

.tour-payoff-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tour-accent-text);
}

.tour-payoff-outcome {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  font-weight: 600;
  line-height: 1.3;
  color: light-dark(var(--color-text), #fff);
  text-wrap: balance;
}

.tour-payoff .tour-link {
  margin-top: 0.3rem;
}

/* The Assistant slide keeps the animated chat Loader; inside the payoff it sits
   left-aligned as the accent-tinted affordance rather than centred. */
.tour-payoff .tour-assistant-loader {
  place-items: start;
  justify-content: flex-start;
  margin-bottom: 0.4rem;
}

@media (max-width: 860px) {
  .tour-capability-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.2rem, 3vh, 1.8rem);
  }
}

@media (max-width: 760px) {
  .tour-duality-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .tour-duality-plus {
    justify-self: center;
  }
}

@media (max-height: 700px) and (min-width: 761px) {
  .tour-capability-grid {
    margin-top: 1.2rem;
  }

  .tour-duality-split {
    margin-top: 1.25rem;
  }
}

/* -- Finale CTA -- */

.tour-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  padding: 0.75rem 1.4rem;
  border-radius: 6px;
  font-weight: 600;
  color: #fff;
  background: var(--cta);
  box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--cta) 70%, transparent);
}

.tour-cta:hover {
  color: #fff;
  background: var(--cta-hover);
  text-decoration: none;
}

.tour-finale-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

.tour-finale-actions .tour-cta {
  margin-top: 0;
}

.tour-replay {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.15rem;
  border: 1px solid color-mix(in srgb, var(--tour-accent) 45%, var(--color-border));
  border-radius: 6px;
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-bg) 72%, transparent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.tour-replay:hover,
.tour-replay:focus-visible {
  color: var(--tour-accent-text);
  border-color: var(--tour-accent-text);
  background: color-mix(in srgb, var(--tour-accent) 10%, var(--color-bg));
}

.tour-replay svg {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
}

/* The opening transport is a single, oversized play icon. Its circular shape
   keeps the title slide spare while giving the primary action plenty of weight. */
.tour-begin {
  display: grid;
  place-items: center;
  width: clamp(4.5rem, 8vw, 5.5rem);
  height: clamp(4.5rem, 8vw, 5.5rem);
  padding: 0;
  border: 0;
  border-radius: 50%;
  font: inherit;
  cursor: pointer;
}

.tour-begin[hidden] {
  display: none;
}

.tour-begin svg {
  display: block;
  width: clamp(1.5rem, 2.8vw, 1.9rem);
  height: clamp(1.5rem, 2.8vw, 1.9rem);
  transform: translateX(0.08em);
}

/* -- Edge arrows: < and > at the vertical centre of each side, hidden until
   the pointer drifts near their edge (or they take keyboard focus). Same
   proximity-and-hysteresis idea as the exit X. Each retires at its own end
   of the deck, and touch screens keep both quietly visible. -- */

.tour-arrow {
  position: fixed;
  top: 50%;
  z-index: 30;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-bg) 72%, transparent);
  backdrop-filter: blur(6px);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-50%) scale(0.92);
  transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.tour-arrow--prev {
  left: clamp(0.9rem, 2.5vw, 1.5rem);
}

.tour-arrow--next {
  right: clamp(0.9rem, 2.5vw, 1.5rem);
}

.tour-arrow svg {
  display: block;
  width: 1rem;
  height: 1rem;
}

.tour-arrow.is-near,
.tour-arrow:hover,
.tour-arrow:focus-visible {
  opacity: 1;
  transform: translateY(-50%);
}

.tour-arrow:hover,
.tour-arrow:focus-visible {
  border-color: color-mix(in srgb, var(--tour-accent) 55%, var(--color-border));
}

/* Nothing before the first slide, nothing after the last. */
.tour-arrow.is-retired {
  opacity: 0;
  pointer-events: none;
}

/* The product stack advertises its real spatial routes directly: large bare
   carets sit on the edge they travel toward, with no explanatory chrome. */
.tour-route-nav[hidden],
.tour-route-button[hidden] {
  display: none;
}

.tour-route-button {
  position: fixed;
  z-index: 31;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  padding: 0;
  border: 0;
  color: color-mix(in srgb, var(--tour-accent-text) 82%, var(--color-text));
  background: transparent;
  cursor: pointer;
  opacity: 0.82;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.tour-route-button--up {
  top: clamp(1.1rem, 3vh, 1.8rem);
  left: 50%;
  transform: translateX(-50%);
}

.tour-route-button--down {
  bottom: clamp(3.8rem, 8vh, 5.2rem);
  left: 50%;
  transform: translateX(-50%);
}

.tour-route-button--right {
  top: 50%;
  right: clamp(0.8rem, 2.2vw, 1.4rem);
  transform: translateY(-50%);
}

.tour-route-button svg {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--tour-accent) 70%, transparent));
  transition: transform 0.2s ease;
}

.tour-route-button:hover,
.tour-route-button:focus-visible {
  color: var(--tour-accent-text);
  opacity: 1;
}

.tour-route-button:hover svg,
.tour-route-button:focus-visible svg {
  transform: scale(1.16);
}

/* The always-visible right route replaces the proximity-only edge arrow while
   the product stack is active. */
body.has-tour-route-carets .tour-arrow--next {
  display: none;
}

@media (hover: none) {
  .tour-arrow {
    opacity: 0.85;
    transform: translateY(-50%);
  }

  .tour-arrow.is-retired {
    opacity: 0;
  }
}

/* -- The way out: an X that fades in as the pointer approaches the corner. -- */

.tour-exit {
  position: fixed;
  top: clamp(0.9rem, 2.5vh, 1.5rem);
  right: clamp(0.9rem, 2.5vw, 1.5rem);
  z-index: 30;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-bg) 72%, transparent);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(-6px) scale(0.92);
  transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.tour-exit svg {
  display: block;
  width: 1rem;
  height: 1rem;
}

.tour-exit.is-near,
.tour-exit:hover,
.tour-exit:focus-visible {
  opacity: 1;
  transform: none;
}

.tour-exit:hover,
.tour-exit:focus-visible {
  border-color: color-mix(in srgb, var(--tour-accent) 55%, var(--color-border));
}

/* No pointer to approach with: keep the exit quietly visible on touch. */
@media (hover: none) {
  .tour-exit {
    opacity: 0.85;
    transform: none;
  }
}

.tour-exit-dialog {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: color-mix(in srgb, var(--color-bg) 58%, transparent);
  backdrop-filter: blur(8px);
}

.tour-exit-dialog[hidden] {
  display: none;
}

.tour-exit-dialog-card {
  width: min(100%, 28rem);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid color-mix(in srgb, var(--tour-accent) 42%, var(--color-border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.tour-exit-dialog-card h2 {
  margin: 0;
  color: var(--color-text);
  font-size: clamp(1.5rem, 4vw, 2rem);
}

.tour-exit-dialog-card p {
  margin: 0.75rem 0 0;
  color: var(--color-text-muted);
}

.tour-exit-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.tour-exit-dialog-actions button,
.tour-exit-dialog-actions a {
  padding: 0.7rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text);
  background: transparent;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.tour-exit-dialog-actions a {
  color: #fff;
  border-color: var(--cta);
  background: var(--cta);
  text-decoration: none;
}

.tour-exit-dialog-actions button:hover,
.tour-exit-dialog-actions button:focus-visible {
  border-color: var(--tour-accent-text);
}

.tour-exit-dialog-actions a:hover,
.tour-exit-dialog-actions a:focus-visible {
  color: #fff;
  background: var(--cta-hover);
}

.tour-noscript {
  position: fixed;
  inset: auto 0 40%;
  z-index: 40;
  margin: 0;
  text-align: center;
}

/* -- Reveal chrome, dressed in the site's voice. -- */

body.tour-page .reveal .progress {
  height: 4px;
  color: var(--tour-accent-text);
  background: color-mix(in srgb, var(--color-text) 10%, transparent);
  box-shadow: 0 -1px 14px color-mix(in srgb, var(--tour-accent) 72%, transparent);
}

body.tour-page .reveal .progress span {
  box-shadow: 0 0 12px color-mix(in srgb, var(--tour-accent) 88%, transparent);
}

.tour-progress-top {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 31;
  width: 100%;
  height: 4px;
  background: var(--tour-accent-text);
  box-shadow: 0 1px 14px color-mix(in srgb, var(--tour-accent) 78%, transparent);
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: transform 0.8s cubic-bezier(0.26, 0.86, 0.44, 0.985);
}

body.tour-page .reveal .controls {
  color: var(--tour-accent-text);
}

@media (prefers-reduced-motion: reduce) {
  .tour-assistant-loader-bar,
  .tour-assistant-loader-particle {
    animation: none;
  }

  body.tour-page .reveal .slides section.present .tour-opening-question,
  body.tour-page .reveal .slides section.present .tour-slide--burst > .tour-support,
  body.tour-page .reveal .slides section.present .tour-opening-answer {
    animation: none;
  }

  body.tour-page .reveal .slides section.present .tour-shift-rift,
  body.tour-page .reveal .slides section.present .tour-shift-side--before,
  body.tour-page .reveal .slides section.present .tour-shift-side--after,
  body.tour-page .reveal .slides section.present .tour-duality-arc--a,
  body.tour-page .reveal .slides section.present .tour-duality-arc--b {
    animation: none;
  }

  .tour-shift-rift {
    opacity: 0.72;
    transform: rotate(11deg) scaleY(1);
  }

  body.tour-page .reveal .slides section.present .tour-spotlight-beam--center {
    animation: none;
  }

  .tour-exit {
    transition: none;
  }

  .tour-progress-top {
    transition: none;
  }
}

/* Technology / AI SDK is a "coming soon" placeholder: a calm greyscale panel
   lit by the orange-pink-blue AI gradient, with a status pill and GitHub link. */
.ai-sdk-coming {
  --page-accent: light-dark(#5f6670, #aeb5c0);
  display: grid;
  place-items: center;
  min-height: clamp(30rem, 62vh, 44rem);
}

.ai-sdk-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  width: min(100%, 46rem);
  margin-top: 0.8rem;
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--page-accent) 22%, transparent);
  border-radius: 8px;
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--page-accent) 12%, transparent), transparent 60%),
    var(--bg-2);
  box-shadow:
    0 32px 80px -46px color-mix(in srgb, var(--page-accent) 60%, transparent),
    0 0 46px -34px rgba(255, 62, 168, 0.5);
}

/* The isometric net fills the hero and sits behind the glow and copy, feathered
   at the edges so the lattice dissolves into the frame rather than hitting it. */
.ai-sdk-iso {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: color-mix(in srgb, var(--page-accent) 55%, var(--color-text-muted));
  opacity: light-dark(0.6, 0.7);
  -webkit-mask-image: radial-gradient(120% 120% at 50% 42%, #000 46%, transparent 92%);
  mask-image: radial-gradient(120% 120% at 50% 42%, #000 46%, transparent 92%);
}

/* A slow AI-gradient glow drifts behind the otherwise greyscale interface. */
.ai-sdk-hero-glow {
  position: absolute;
  inset: -30% -10% auto;
  z-index: -1;
  height: 22rem;
  background:
    radial-gradient(42% 55% at 26% 34%, rgba(255, 103, 29, 0.3), transparent 72%),
    radial-gradient(44% 58% at 50% 22%, rgba(255, 62, 168, 0.26), transparent 72%),
    radial-gradient(42% 55% at 76% 34%, rgba(27, 85, 245, 0.3), transparent 72%);
  filter: blur(10px);
  opacity: 0.82;
  animation: ai-sdk-drift 9s ease-in-out infinite alternate;
}

@keyframes ai-sdk-drift {
  from { transform: translateX(-6%) scale(1); }
  to { transform: translateX(6%) scale(1.08); }
}

.ai-sdk-hero h1 {
  margin: 0;
  font-size: 4rem;
  line-height: 1.02;
  color: light-dark(#141419, #ffffff);
}

/* The title bar carries the AI identity while the UI itself stays grey. */
.ai-sdk-hero h1::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  margin: 0.85rem auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #ff671d, #ff3ea8, #1b55f5);
}

.ai-sdk-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.4rem 0.95rem;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: 999px;
  color: color-mix(in srgb, var(--page-accent) 85%, var(--text-body));
  border: 1px solid color-mix(in srgb, var(--page-accent) 34%, transparent);
  background: color-mix(in srgb, var(--page-accent) 10%, transparent);
}

.ai-sdk-lede {
  margin: 0;
  max-width: 34rem;
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--text-body);
}

.ai-sdk-github {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
  padding: 0.7rem 1.2rem;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  border-radius: 999px;
  border: 1px solid light-dark(#24292f, #30363d);
  background: light-dark(#24292f, #24292f);
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.ai-sdk-github:hover {
  border-color: light-dark(#1f2328, #484f58);
  background: light-dark(#1f2328, #30363d);
  box-shadow: 0 8px 20px light-dark(rgba(36, 41, 47, 0.2), rgba(0, 0, 0, 0.34));
  text-decoration: none;
}

.ai-sdk-github:hover .ai-sdk-github-label {
  text-decoration: underline;
}

.ai-sdk-github:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--page-accent) 60%, transparent);
  outline-offset: 3px;
}

.ai-sdk-github-mark {
  width: 1.15rem;
  height: 1.15rem;
}

.ai-sdk-github-arrow {
  transition: transform 0.18s ease;
}

.ai-sdk-github:hover .ai-sdk-github-arrow {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .ai-sdk-hero-glow,
  .ai-sdk-github,
  .ai-sdk-github-arrow {
    animation: none;
    transition: none;
  }
}

@media (max-width: 760px) {
  .ai-sdk-hero h1 {
    font-size: 2.8rem;
  }
}

/* ---- 2026 homepage direction --------------------------------------------- */

/* The redesigned /home keeps the shared shell and both colour schemes, while
   giving its opening act the quieter, cinematic composition of the reference
   design. */
.route-home .new-home-hero {
  position: relative;
  isolation: isolate;
  min-height: min(54rem, calc(100svh - 7rem));
  padding: clamp(5.5rem, 10vw, 8.5rem) var(--page-gutter) clamp(4.5rem, 8vw, 7rem);
  overflow: hidden;
  color: light-dark(#17171c, #ffffff);
  background:
    radial-gradient(ellipse 80% 52% at 50% -8%, light-dark(rgba(93, 115, 180, 0.2), rgba(59, 74, 140, 0.3)), transparent 64%),
    linear-gradient(180deg, light-dark(#f6f7fb, #101327) 0%, light-dark(#eef1f8, #080808) 72%);
}

.route-home .new-home-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 12rem;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, light-dark(#ffffff, #080808));
}

.new-home-stars {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.new-home-stars::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: light-dark(0.16, 0.34);
  background-image:
    radial-gradient(circle at 19% 33%, currentColor 0 1px, transparent 1.5px),
    radial-gradient(circle at 68% 28%, currentColor 0 1px, transparent 1.5px),
    radial-gradient(circle at 43% 68%, currentColor 0 1px, transparent 1.5px),
    radial-gradient(circle at 87% 77%, currentColor 0 1px, transparent 1.5px);
  background-size: 13rem 11rem, 17rem 15rem, 19rem 17rem, 23rem 21rem;
}

.new-home-stars i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  background: currentColor;
  opacity: light-dark(0.24, 0.62);
  animation: new-home-star 5s ease-in-out infinite alternate;
}

.new-home-stars i:nth-child(3n) {
  animation-delay: -2.4s;
}

.new-home-diamond {
  position: absolute;
  width: 0.72rem;
  height: 1.25rem;
  background: var(--orange);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  opacity: 0.52;
}

.new-home-diamond--one {
  top: 22%;
  left: 8%;
}

.new-home-diamond--two {
  right: 17%;
  bottom: 20%;
  transform: scale(0.7);
}

@keyframes new-home-star {
  to { opacity: 0.14; }
}

.new-home-hero-stage {
  position: relative;
  width: min(100%, 76rem);
  margin: auto;
  text-align: center;
}

.new-home-bio-pill {
  position: absolute;
  top: -4.8rem;
  right: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1.4rem 0.65rem 0.65rem;
  border: 1px solid light-dark(rgba(29, 31, 42, 0.08), rgba(255, 255, 255, 0.04));
  border-radius: 999px;
  text-align: left;
  color: light-dark(#1a1a20, #ffffff);
  background: light-dark(rgba(255, 255, 255, 0.86), #1c1c1c);
  box-shadow: 0 1rem 2.6rem light-dark(rgba(35, 43, 70, 0.12), rgba(0, 0, 0, 0.36));
  transform: rotate(2deg);
}

.new-home-bio-pill > span:last-child {
  display: grid;
}

.new-home-bio-pill strong {
  font-size: 0.88rem;
  line-height: 1.25;
}

.new-home-bio-pill small {
  color: var(--color-text-muted);
  font-size: 0.74rem;
}

.new-home-bio-avatar {
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #555a7c, #171721 72%);
}

.new-home-shift-label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1.5rem;
  color: var(--orange);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.new-home-shift-label::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: currentColor;
}

.route-home .new-home-hero h1 {
  width: min(100%, 76rem);
  margin: 0 auto;
  color: inherit;
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 7.4vw, 7rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1.04;
  text-wrap: balance;
}

.new-home-hero-summary {
  margin: clamp(2.6rem, 5vw, 4rem) auto 0;
  color: light-dark(#4e5261, #c9cad2);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.45;
  text-wrap: balance;
}

.new-home-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.9rem;
}

.new-home-primary,
.new-home-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.2rem;
  padding: 0.75rem 1.45rem;
  border-radius: 0.65rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.new-home-primary {
  color: #fff;
  border: 1px solid #3a5eff;
  background: #3a5eff;
  box-shadow: 0 0.8rem 2rem -1rem rgba(58, 94, 255, 0.72);
}

.new-home-primary svg {
  width: 0.75rem;
  height: 0.75rem;
  fill: currentColor;
}

.new-home-primary:hover {
  color: #fff;
  background: #5574ff;
  border-color: #5574ff;
  transform: translateY(-2px);
}

.new-home-secondary {
  color: var(--color-text);
  border: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent);
  background: color-mix(in srgb, var(--color-bg) 50%, transparent);
}

.new-home-secondary:hover {
  color: var(--color-text);
  border-color: color-mix(in srgb, var(--color-text) 34%, transparent);
  background: var(--color-surface);
  transform: translateY(-2px);
}

.new-home-scroll {
  position: absolute;
  top: calc(100% + clamp(2.25rem, 5vw, 4rem));
  left: 50%;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-text-muted);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.new-home-scroll:hover {
  color: var(--color-text);
  text-decoration: none;
}

.new-home-next,
.new-home-products-intro,
.new-home-try,
.new-home-hiring {
  position: relative;
  z-index: 1;
}

.new-home-next {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: end;
  width: min(100% - (2 * var(--page-gutter)), var(--wide-maxw));
  margin: 0 auto;
  padding: clamp(7rem, 13vw, 12rem) 0 clamp(6rem, 10vw, 9rem);
}

.new-home-next > .home-eyebrow {
  grid-column: 1 / -1;
  margin-bottom: -1rem;
}

.new-home-next h2 {
  margin: 0;
  font-size: clamp(3.1rem, 6.3vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
  color: var(--color-text);
}

.new-home-next h2 span {
  display: block;
}

.new-home-next h2 span:last-child {
  color: var(--orange);
}

.new-home-next-lede {
  grid-column: 1;
  margin: 1.4rem 0 0;
  max-width: 42rem;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  color: var(--color-text-muted);
}

.new-home-next-proof {
  grid-column: 2;
  grid-row: 2 / span 2;
  margin: 0;
  padding: 1.6rem;
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
}

.new-home-next-proof blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.45;
}

.new-home-next-proof figcaption {
  margin-top: 1rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.new-home-products-intro {
  width: min(100% - (2 * var(--page-gutter)), var(--wide-maxw));
  margin: 0 auto;
  padding: clamp(7rem, 11vw, 10rem) 0 clamp(3rem, 5vw, 4.5rem);
}

.new-home-products-intro h2 {
  margin: 0;
  color: var(--color-text);
  font-size: clamp(3.1rem, 6vw, 5.8rem);
  line-height: 1;
  letter-spacing: -0.055em;
}

.new-home-products-intro h2 span,
.new-home-try h2 span {
  color: var(--orange);
}

.new-home-products-intro > p:last-child {
  max-width: 42rem;
  margin: 1.4rem 0 0;
  color: var(--color-text-muted);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
}

.new-home-try {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.55fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: center;
  width: min(100% - (2 * var(--page-gutter)), var(--wide-maxw));
  margin: clamp(7rem, 12vw, 11rem) auto 0;
  padding: clamp(3.25rem, 7vw, 6rem);
  border: 1px solid var(--color-border);
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, #3a5eff 20%, transparent), transparent 42%),
    var(--color-surface);
}

.new-home-try h2 {
  margin: 0;
  font-size: clamp(3rem, 5.4vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
  color: var(--color-text);
}

.new-home-try > div:first-child > p:last-child {
  max-width: 45rem;
  margin: 1.5rem 0 0;
  color: var(--color-text-muted);
  font-size: 1.05rem;
  line-height: 1.65;
}

.new-home-try-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
}

.new-home-try-actions > a:last-child {
  align-self: center;
  margin-top: 0.4rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.new-home-hiring {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: min(100% - (2 * var(--page-gutter)), var(--wide-maxw));
  margin: 1.25rem auto clamp(7rem, 12vw, 11rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 4vw, 3rem);
  border: 1px solid color-mix(in srgb, var(--orange) 34%, var(--color-border));
  border-radius: 1rem;
  background: color-mix(in srgb, var(--orange) 7%, var(--color-surface));
}

.new-home-hiring h2,
.new-home-hiring p {
  margin: 0;
}

.new-home-hiring h2 {
  color: var(--color-text);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
}

.new-home-hiring p {
  margin-top: 0.25rem;
  color: var(--color-text-muted);
}

.new-home-hiring > a {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 0.65rem;
  background: var(--color-bg);
  text-decoration: none;
}

@media (max-width: 68rem) {
  .route-home .new-home-hero {
    min-height: 44rem;
    padding-top: 6.5rem;
  }

  .new-home-bio-pill {
    top: -4.4rem;
    right: 1rem;
  }

  .new-home-next,
  .new-home-try {
    grid-template-columns: minmax(0, 1fr);
  }

  .new-home-next-proof {
    grid-column: 1;
    grid-row: auto;
    max-width: 38rem;
  }
}

@media (max-width: 760px) {
  .route-home .new-home-hero {
    min-height: 42rem;
    padding: 6.5rem 1.25rem 4.5rem;
  }

  .new-home-bio-pill {
    top: -5rem;
    right: 0;
    padding-right: 1rem;
    transform: rotate(1deg) scale(0.9);
    transform-origin: right top;
  }

  .new-home-shift-label {
    margin-bottom: 1.1rem;
  }

  .route-home .new-home-hero h1 {
    font-size: clamp(2.7rem, 13vw, 4.2rem);
    letter-spacing: -0.06em;
  }

  .new-home-hero-summary br {
    display: none;
  }

  .new-home-actions {
    flex-direction: column;
  }

  .new-home-actions a {
    width: min(100%, 18rem);
  }

  .new-home-scroll {
    display: none;
  }

  .home-hero-fly-layer {
    display: none !important;
  }

  .home-ops.is-in .home-ops-sparkle {
    opacity: 1;
    transform: none;
  }

  .new-home-next {
    padding-block: 6rem;
  }

  .new-home-next h2,
  .new-home-products-intro h2,
  .new-home-try h2 {
    font-size: clamp(2.65rem, 13vw, 4rem);
  }

  .new-home-products-intro {
    padding-top: 6rem;
  }

  .new-home-try {
    margin-top: 6rem;
    padding: 2.25rem 1.35rem;
  }

  .new-home-hiring {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .new-home-stars i,
  .new-home-primary,
  .new-home-secondary {
    animation: none;
    transition: none;
  }
}

/* ---- Reference-aligned homepage ----------------------------------------- */

.ai-week-bar-event {
  display: none;
  align-items: baseline;
  gap: 0.45rem;
  color: #ff9bcf;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.ai-week-bar-event span {
  color: #ffb390;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
}

.ai-week-bar-event b {
  color: #74e7df;
  font: inherit;
}

.route-home {
  --home-canvas: light-dark(#f8f9fc, #080808);
  --home-surface: light-dark(#ffffff, #111114);
  --home-surface-2: light-dark(#f0f2f8, #17171b);
  --home-ink: light-dark(#101116, #ffffff);
  --home-dim: light-dark(#555b69, #d8d8df);
  --home-faint: light-dark(#777e8c, #85858f);
  --home-line: light-dark(rgba(18, 23, 35, 0.12), rgba(255, 255, 255, 0.1));
  --home-blue: #3a5eff;
  background: var(--home-canvas);
}

.route-home .ai-week-bar-inner {
  justify-content: center;
  min-height: 2.5rem;
  padding-block: 0.35rem;
}

.route-home .ai-week-bar-event {
  position: absolute;
  left: 50%;
  display: inline-flex;
  margin-left: 0;
  transform: translateX(-50%);
}

.route-home .ai-week-bar-dates {
  display: none;
}

.route-home .ai-week-bar-badge {
  margin-left: 0;
}

.route-home .ai-week-bar-save {
  margin-left: auto;
}

.route-home .site-header {
  margin: 0 0 -4.75rem;
  color: var(--home-ink);
}

.route-home .site-header .brand {
  color: var(--home-ink);
}

.route-home .site-header .brand-wordmark {
  font-size: 1.08rem;
  font-weight: 600;
}

.route-home .nav-item:has(> .nav-link--try) {
  margin-left: auto;
}

.route-home .nav-link {
  color: color-mix(in srgb, var(--home-ink) 72%, transparent);
}

.route-home .nav-link:hover,
.route-home .nav-item:hover .nav-link,
.route-home .nav-item:focus-within .nav-link,
.route-home .nav-link.is-active {
  color: var(--home-ink);
  background: transparent;
}

.route-home .nav-link--try,
.route-home .nav-link--try.is-active {
  color: #fff;
  border-color: var(--home-blue);
  background: var(--home-blue);
  box-shadow: 0 0.5rem 1.5rem rgba(58, 94, 255, 0.26);
}

.route-home .home--new {
  overflow: clip;
  color: var(--home-ink);
  background: var(--home-canvas);
}

.home-hero-track {
  position: relative;
  height: 420vh;
  min-height: 180rem;
}

.home-hero-sticky {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  min-height: 42rem;
  overflow: hidden;
  color: var(--home-ink);
  background:
    radial-gradient(ellipse 74% 58% at 50% 0%, light-dark(rgba(78, 102, 178, 0.18), rgba(50, 61, 126, 0.35)), transparent 66%),
    linear-gradient(180deg, light-dark(#f4f6fb, #101327), var(--home-canvas) 78%);
}

.home-hero-sticky::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 18vh;
  pointer-events: none;
  background: linear-gradient(transparent, var(--home-canvas));
}

.home-hero-stage {
  position: relative;
  z-index: 2;
  width: min(92vw, 73.75rem);
  text-align: center;
}

.home-hero-quote {
  margin: 0;
  color: var(--home-ink);
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7.4vw, 6.6rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1.05;
  text-wrap: balance;
  will-change: opacity, transform, filter;
}

.home-hero-quote-word {
  display: inline-block;
  will-change: opacity, transform, filter;
}

.home-hero-headline {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 100%;
  color: var(--home-ink);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6.6vw, 5.9rem);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 1.03;
  opacity: 0;
  transform: translate(-50%, -42%) scale(0.92);
  will-change: opacity, transform, filter;
}

.home-hero-headline-word {
  display: inline-block;
  will-change: opacity, transform, filter;
}

.home-shift-word {
  color: var(--orange);
  white-space: nowrap;
}

.home-shift-word i {
  display: inline-block;
  font-style: normal;
  transform-origin: center;
}

.home-hero-sparkle,
.home-ops-sparkle {
  position: absolute;
  display: block;
  color: var(--orange);
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}

.home-hero-sparkle::before,
.home-ops-sparkle::before,
.home-hero-fly::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12%;
  background: currentColor;
  transform: rotate(45deg) skew(-8deg, -8deg);
}

.home-hero-sparkle--1 { top: -0.64em; right: 7%; width: 0.46em; height: 0.46em; }
.home-hero-sparkle--2 { top: 0; right: 3%; width: 0.2em; height: 0.2em; }
.home-hero-sparkle--3 { bottom: -0.48em; left: 9%; width: 0.4em; height: 0.4em; }
.home-hero-sparkle--4 { top: -0.45em; left: 3%; width: 0.23em; height: 0.23em; }
.home-hero-sparkle--5 { bottom: -0.8em; left: 5%; width: 0.19em; height: 0.19em; }
.home-hero-sparkle--6 { top: 0; left: 7%; width: 0.15em; height: 0.15em; }
.home-hero-sparkle--7 { right: 5%; bottom: -0.42em; width: 0.36em; height: 0.36em; }

.home-hero-sparkle--1::before,
.home-hero-sparkle--4::before,
.home-ops-sparkle--1::before,
.home-ops-sparkle--4::before,
.home-hero-fly.is-outline::before {
  border: 0.08em solid currentColor;
  background: transparent;
}

.home-hero-fly-layer {
  position: fixed;
  z-index: 40;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.home-hero-fly-layer[hidden] {
  display: none;
}

.home-hero-fly {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  color: var(--orange);
  transform-origin: center;
  will-change: transform;
}

.home-hero-summary {
  margin: 3.5rem auto 0;
  opacity: 0;
  transform: translateY(1.5rem);
  will-change: opacity, transform;
}

.home-hero-summary > p {
  max-width: 39rem;
  margin: 0 auto;
  color: var(--home-dim);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.55;
}

.new-home-bio-pill {
  z-index: 3;
  gap: 0.75rem;
  padding: 0.65rem 1.6rem 0.65rem 0.75rem;
  transition: none;
  will-change: opacity, transform;
}

.new-home-bio-avatar {
  width: 3.25rem;
  height: 3.25rem;
  font-size: 1.3rem;
}

.new-home-bio-pill strong {
  font-size: 0.94rem;
}

.new-home-bio-pill small {
  font-size: 0.82rem;
}

.new-home-scroll {
  position: absolute;
  z-index: 4;
  top: auto;
  bottom: 1.75rem;
  left: 50%;
  will-change: opacity, transform;
}

.new-home-stars {
  z-index: 0;
}

.home-telemetry {
  position: relative;
  height: 18rem;
  margin: -2rem 0 -2rem;
  overflow: hidden;
  background: var(--home-canvas);
}

.home-telemetry::before {
  content: "";
  position: absolute;
  inset: 1rem 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--home-ink) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--home-ink) 6%, transparent) 1px, transparent 1px);
  background-size: 2.1rem 2.1rem;
  mask-image: radial-gradient(ellipse 80% 74% at 50% 50%, #000 40%, transparent 100%);
}

.home-telemetry svg {
  position: absolute;
  inset: 3.2rem 0 auto;
  width: 100%;
  height: 11.5rem;
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}

.home-telemetry line {
  stroke: var(--home-ink);
  stroke-width: 1.2;
  opacity: 0.07;
}

.home-telemetry-wire,
.home-telemetry-pulse {
  fill: none;
  stroke: var(--orange);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-telemetry-wire {
  stroke-width: 2.8;
  opacity: 0.3;
}

.home-telemetry-pulse {
  stroke-width: 3.8;
  stroke-dasharray: 9 991;
  filter: drop-shadow(0 0 0.4rem var(--orange));
  animation: home-telemetry-run 4.6s linear infinite;
}

.home-telemetry-pulse--slow {
  stroke-dasharray: 5 995;
  opacity: 0.8;
  animation-duration: 7.4s;
  animation-delay: -2.6s;
}

@keyframes home-telemetry-run {
  from { stroke-dashoffset: 1000; }
  to { stroke-dashoffset: 0; }
}

.home-section-eyebrow,
.new-home-products-intro .home-eyebrow,
.new-home-try .home-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin: 0 0 2.25rem;
  color: var(--home-faint);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.home-section-eyebrow::before,
.home-section-eyebrow::after,
.new-home-products-intro .home-eyebrow::before,
.new-home-products-intro .home-eyebrow::after {
  content: "";
  width: 3rem;
  height: 1px;
  background: var(--home-line);
}

.home-ops {
  min-height: 63rem;
  padding: 7.5rem 1.5rem 9.25rem;
  background: var(--home-canvas);
}

.home-ops-inner {
  width: min(100%, 71.25rem);
  margin: 0 auto;
  text-align: center;
}

.home-ops h2 {
  margin: 0;
  color: var(--home-ink);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6.2vw, 5.8rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1;
}

.home-ops h2 span {
  display: block;
}

.home-ops-head-wrap {
  position: relative;
}

.home-ops-sparkle {
  transition: opacity 400ms ease, transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.home-ops-sparkle--1 { top: -2.25rem; right: 8%; width: 1.875rem; height: 1.875rem; }
.home-ops-sparkle--2 { top: 0.125rem; right: 2%; width: 0.9375rem; height: 0.9375rem; }
.home-ops-sparkle--3 { bottom: -1.625rem; left: 5%; width: 1.625rem; height: 1.625rem; }
.home-ops-sparkle--4 { top: -1.875rem; left: -2%; width: 0.875rem; height: 0.875rem; }
.home-ops-sparkle--5 { bottom: -2.875rem; left: 0; width: 0.8125rem; height: 0.8125rem; }
.home-ops-sparkle--6 { top: -0.875rem; left: -4%; width: 0.6875rem; height: 0.6875rem; }
.home-ops-sparkle--7 { right: -2%; bottom: -1.25rem; width: 1.5625rem; height: 1.5625rem; }

.home-ops.sparkles-landed .home-ops-sparkle {
  opacity: 1;
  transform: none;
}

.home-ops h2 span:last-child {
  color: var(--orange);
}

.home-ops-lede {
  margin: 2.2rem auto 0;
  color: var(--home-dim);
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
}

.home-ops-proof {
  width: min(100%, 55rem);
  margin: 5rem auto 0;
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 1px solid var(--home-line);
  border-radius: 1.6rem;
  text-align: left;
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--orange) 15%, transparent), transparent 36%),
    var(--home-surface);
  box-shadow: 0 2rem 6rem light-dark(rgba(43, 52, 82, 0.1), rgba(0, 0, 0, 0.28));
}

.home-ops-proof blockquote {
  margin: 0;
  color: var(--home-ink);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  letter-spacing: -0.025em;
  line-height: 1.35;
}

.home-ops-proof figcaption {
  margin-top: 1.5rem;
  color: var(--home-faint);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-lifecycle {
  padding: 5.5rem 1.5rem 9.25rem;
  background: var(--home-canvas);
}

.home-lifecycle-inner {
  width: min(100%, 71.25rem);
  margin: 0 auto;
}

.home-lifecycle h2 {
  width: min(100%, 48rem);
  margin: 0;
  color: var(--home-ink);
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.8vw, 4rem);
  letter-spacing: -0.045em;
  line-height: 1.04;
  font-weight: 500;
  text-align: left;
}

.home-lifecycle-lede {
  width: min(100%, 36rem);
  margin: 1.5rem 0 4.25rem;
  color: var(--home-dim);
  font-size: clamp(1rem, 1.4vw, 1.16rem);
  line-height: 1.65;
  text-align: left;
}

.home-lifecycle .home-section-eyebrow {
  display: none;
}

.home-lifecycle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--home-line);
  border-radius: 1.6rem;
  background: var(--home-surface);
}

.home-lifecycle-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 27.5rem;
  padding: clamp(1.6rem, 3vw, 2.6rem);
}

.home-lifecycle-card:nth-child(odd) {
  border-right: 1px solid var(--home-line);
}

.home-lifecycle-card:nth-child(-n + 2) {
  border-bottom: 1px solid var(--home-line);
}

.home-lifecycle-stage {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 2;
  padding: 0.35rem 0.7rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home-lifecycle-stage--plan { color: #48a8ff; }
.home-lifecycle-stage--build { color: #b794ff; }
.home-lifecycle-stage--ship { color: #51c982; }
.home-lifecycle-stage--run { color: #ff8450; }

.home-lifecycle-viz {
  display: grid;
  place-items: center;
  height: 14.5rem;
  margin: 1rem 0 0.8rem;
  color: var(--home-faint);
}

.home-lifecycle-viz svg {
  width: min(100%, 20rem);
  height: 100%;
  overflow: visible;
}

.home-viz-map g,
.home-viz-map circle,
.home-viz-ship path,
.home-viz-ship line {
  fill: none;
  stroke: color-mix(in srgb, var(--home-ink) 30%, transparent);
  stroke-width: 1.4;
}

.home-viz-map circle {
  fill: var(--home-surface-2);
}

.home-viz-map .home-viz-hot {
  fill: var(--orange);
  stroke: color-mix(in srgb, var(--orange) 38%, transparent);
  stroke-width: 12;
}

.home-viz-map text,
.home-viz-ship text {
  fill: var(--home-faint);
  font: 10px var(--font-mono);
}

.home-viz-editor {
  width: min(100%, 21rem);
  padding: 1rem 1.15rem 1.1rem;
  border: 1px solid var(--home-line);
  border-radius: 0.75rem;
  background: var(--home-surface-2);
  box-shadow: 0 1.2rem 3rem light-dark(rgba(35, 42, 70, 0.1), rgba(0, 0, 0, 0.3));
}

.home-viz-dots {
  display: flex;
  gap: 0.28rem;
  margin-bottom: 0.8rem;
}

.home-viz-dots i {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--home-faint);
  opacity: 0.45;
}

.home-viz-editor code {
  display: block;
  color: var(--home-dim);
  font-size: 0.75rem;
  line-height: 1.65;
}

.home-viz-editor b { color: #b794ff; }
.home-viz-editor em { color: #71c4ff; font-style: normal; }
.home-viz-editor strong { color: #61d494; font-weight: 500; }

.home-viz-caret {
  display: inline-block;
  width: 0.45rem;
  height: 0.85rem;
  background: #b794ff;
  animation: home-viz-blink 1s steps(1) infinite;
}

@keyframes home-viz-blink { 50% { opacity: 0; } }

.home-viz-ship .home-viz-metric {
  stroke: #51c982;
  stroke-width: 2.4;
  filter: drop-shadow(0 0 0.35rem rgba(81, 201, 130, 0.45));
}

.home-viz-ship line {
  stroke: #ff8450;
  stroke-dasharray: 3 4;
}

.home-viz-run {
  display: grid;
  gap: 0.45rem;
  width: min(100%, 22rem);
}

.home-viz-run span {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--home-faint);
  font: 0.68rem var(--font-mono);
}

.home-viz-run span i {
  color: var(--home-dim);
  font-style: normal;
}

.home-viz-run progress {
  width: 100%;
  height: 0.38rem;
  margin-bottom: 0.7rem;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  color: #ff8450;
  background: var(--home-surface-2);
}

.home-viz-run progress::-webkit-progress-bar { background: var(--home-surface-2); }
.home-viz-run progress::-webkit-progress-value { background: #ff8450; }
.home-viz-run progress::-moz-progress-bar { background: #ff8450; }

.home-lifecycle-card h3 {
  margin: 0;
  color: var(--home-ink);
  font-size: clamp(1.25rem, 1.7vw, 1.4rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.home-lifecycle-card mark,
.route-home .product-lede mark {
  padding: 0;
  color: var(--orange);
  background: none;
  box-shadow: none;
}

.home-lifecycle-card > p {
  margin: 0.9rem 0 1.4rem;
  color: var(--home-dim);
  font-size: 0.96rem;
  line-height: 1.55;
}

.home-lifecycle-card .prompt-link {
  align-self: flex-start;
  margin-top: auto;
  color: var(--home-ink);
  font-size: 0.85rem;
}

.route-home .new-home-products-intro {
  width: min(calc(100% - 3rem), 75rem);
  min-height: auto;
  padding: clamp(2.75rem, 7vh, 5.25rem) 0 0;
  text-align: center;
}

.route-home .new-home-products-intro h2 {
  color: var(--home-ink);
  font-size: clamp(3rem, 6vw, 5.8rem);
}

.route-home .new-home-products-intro > p:last-child {
  margin-inline: auto;
  color: var(--home-dim);
}

.route-home .home-products {
  width: 100%;
  margin: -15vh 0 0;
  padding: 0 0 3.875rem;
  background: var(--home-canvas);
}

.route-home .product-section,
.route-home .product-section:nth-child(n) {
  min-height: 100vh;
  padding: 0 1.5rem;
  color: var(--home-ink);
  background: var(--home-canvas);
}

.route-home .product-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  width: min(100%, 72.25rem);
  min-height: 100vh;
  margin: 0 auto;
  padding: 4rem 0;
}

.route-home .product-copy,
.route-home .product-section:nth-child(odd) .product-copy {
  grid-column: 1;
  max-width: 31rem;
  left: 0.5rem;
  position: relative;
  text-align: left;
}

.home-product-eyebrow {
  margin: 0 0 1.2rem;
  color: var(--orange);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.route-home .product-title,
.route-home .product-section:nth-child(odd) .product-title {
  color: var(--home-ink);
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.18;
  text-align: left;
}

.route-home .product-title::after {
  display: none;
}

.route-home .product-lede,
.route-home .product-section:nth-child(odd) .product-lede {
  max-width: none;
  margin: 1.5rem 0 0;
  color: var(--home-dim);
  font-size: 1.03rem;
  line-height: 1.65;
  text-align: left;
}

.route-home .product-lede mark {
  color: inherit;
  font-weight: inherit;
}

.route-home .customer-proof--product,
.route-home .product-section:nth-child(odd) .customer-proof--product {
  margin: 1.5rem 0 0;
  padding: 0.75rem 0 0;
  border: 0;
  border-top: 1px solid var(--home-line);
  border-radius: 0;
  text-align: left;
  background: none;
}

.route-home .customer-proof--product blockquote {
  color: var(--home-dim);
  font-size: 0.92rem;
}

.route-home .customer-proof--product blockquote strong {
  color: inherit;
}

.route-home .customer-proof--product figcaption {
  color: var(--home-faint);
}

.route-home .cta-row,
.route-home .product-section:nth-child(odd) .cta-row {
  justify-content: flex-start;
  margin-top: 1.625rem;
}

.route-home .product-section .product-cta,
.route-home .product-section .prompt-link--button {
  padding: 0;
  color: var(--home-ink);
  border: 0;
  background: transparent;
  font-size: 0.9rem;
}

.route-home .product-media,
.route-home .product-section:nth-child(n) .product-media {
  grid-column: 2;
  width: 100%;
  max-width: 34rem;
  min-height: 31rem;
  margin: 0;
  order: 0;
  transform: none !important;
}

.route-home .product-art {
  border-color: var(--home-line);
  border-radius: 1.4rem;
  background: var(--home-surface);
  box-shadow: 0 2.5rem 7rem light-dark(rgba(48, 58, 88, 0.12), rgba(0, 0, 0, 0.32));
}

.route-home .home-products .art-canvas {
  transform: none;
}

/* The desktop product story uses one pinned illustration stage. JavaScript
   moves the five source-order figures into this stack only after the complete
   enhancement is available, so the ordinary two-column layout remains the
   no-script fallback. */
.home-products-stage-col {
  display: none;
}

@media (min-width: 901px) {
  .route-home .home-products.is-scroll-story {
    position: relative;
  }

  .route-home .home-products.is-scroll-story .home-products-stage-col {
    position: absolute;
    z-index: 2;
    top: 0;
    right: max(1.5rem, calc((100vw - 72.25rem) / 2));
    bottom: 3.875rem;
    left: calc(50% + clamp(1.25rem, 3vw, 3rem));
    display: block;
    pointer-events: none;
  }

  .home-products-stage {
    position: sticky;
    top: 0;
    display: grid;
    place-items: center;
    height: 100vh;
  }

  .home-products-stack {
    position: relative;
    width: 100%;
    height: min(31rem, 64vh);
  }

  .route-home .home-products.is-scroll-story .product-section {
    transition: opacity 500ms ease;
  }

  .route-home .home-products.is-scroll-story .product-copy {
    opacity: 0.28;
    transition: opacity 500ms ease, transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .route-home .home-products.is-scroll-story .product-section.is-active .product-copy {
    opacity: 1;
  }

  .route-home .home-products.is-scroll-story .home-products-stack .product-media {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    min-height: 100%;
    opacity: 0;
    transform: scale(0.97) !important;
    transition: opacity 620ms ease, transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .route-home .home-products.is-scroll-story .home-products-stack .product-media.is-active {
    z-index: 1;
    opacity: 1;
    transform: none !important;
  }
}

.route-home .home-news {
  min-height: 31.875rem;
  margin: 0;
  padding: 4.5rem 0 5rem;
  background: var(--home-canvas);
}

.route-home .home-news-head {
  width: min(calc(100% - 3rem), 75rem);
  flex-wrap: nowrap;
  align-items: center;
}

.route-home .home-news-title {
  display: block;
  margin: 0;
  padding: 0;
  color: var(--home-ink);
  background: none;
  font-size: clamp(2.1rem, 3.3vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.route-home .home-news-all {
  color: var(--home-ink);
}

.route-home .home-news .home-eyebrow {
  display: none;
}

.route-home .home-news-gallery .feed-tile,
.route-home .home-news-gallery .feed-tile:nth-child(5n + 1) {
  flex-basis: 24.5rem;
  aspect-ratio: 1.9;
}

.route-home .home-news-gallery {
  margin-top: 2.65rem;
}

.route-home .new-home-try {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 92vh;
  margin: 0;
  padding: clamp(5.5rem, 12vh, 8.75rem) 1.5rem;
  overflow: hidden;
  border: 0;
  border-top: 1px solid var(--home-line);
  border-radius: 0;
  text-align: center;
  background:
    radial-gradient(ellipse 62% 70% at 50% 6%, rgba(255, 103, 29, 0.18), transparent 60%),
    radial-gradient(ellipse 72% 80% at 50% 118%, rgba(58, 94, 255, 0.16), transparent 60%),
    var(--home-canvas);
}

.route-home .new-home-try::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--home-ink) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--home-ink) 5%, transparent) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
  mask-image: radial-gradient(ellipse 76% 72% at 50% 44%, #000 28%, transparent 78%);
}

.new-home-try-inner {
  position: relative;
  z-index: 2;
  width: min(100%, 62.5rem);
  margin: 0 auto;
}

.route-home .new-home-try .home-eyebrow {
  display: inline-flex;
  margin-bottom: 1.6rem;
  color: var(--orange);
}

.route-home .new-home-try .home-eyebrow::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  background: var(--orange);
  box-shadow: 0 0 0.75rem var(--orange);
  transform: rotate(45deg);
}

.route-home .new-home-try h2 {
  margin: 0;
  color: var(--home-ink);
  font-size: clamp(2.2rem, 5.4vw, 4.4rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.06;
}

.route-home .new-home-try h2 span {
  color: var(--orange);
}

.route-home .new-home-try .new-home-try-lede {
  max-width: 39.5rem;
  margin: 1.5rem auto 0;
  color: var(--home-dim);
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  line-height: 1.62;
}

.new-home-prompt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 37.5rem;
  margin: 2.5rem auto 0;
  padding: 0.9rem 0.9rem 0.9rem 1.2rem;
  border: 1px solid var(--home-line);
  border-radius: 1rem;
  color: var(--home-ink);
  text-align: left;
  background: var(--home-surface);
  box-shadow: 0 1.5rem 3.75rem light-dark(rgba(38, 46, 74, 0.14), rgba(0, 0, 0, 0.5));
}

.new-home-prompt::after {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: 1rem;
  pointer-events: none;
  background: linear-gradient(120deg, transparent, rgba(255, 103, 29, 0.55), transparent 42%);
  background-size: 260% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: home-prompt-sheen 4.8s linear infinite;
}

@keyframes home-prompt-sheen { to { background-position: -260% 0; } }

.new-home-prompt svg {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--orange);
}

.new-home-prompt > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 1rem;
  white-space: nowrap;
}

.new-home-prompt > i {
  width: 2px;
  height: 1.05em;
  background: var(--orange);
  animation: home-viz-blink 1s steps(1) infinite;
}

.new-home-prompt > b {
  flex: none;
  padding: 0.6rem 1rem;
  border-radius: 0.65rem;
  color: #fff;
  background: var(--home-blue);
  font-size: 0.875rem;
  font-weight: 600;
}

.new-home-prompt > b em {
  font-style: normal;
}

.new-home-prompt-answer {
  min-height: 2.4rem;
  margin-top: 0.8rem;
}

.new-home-prompt-answer span {
  display: inline-flex;
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(76, 175, 114, 0.32);
  border-radius: 999px;
  color: light-dark(#267c4a, #8fe6b4);
  background: rgba(76, 175, 114, 0.13);
  font-size: 0.8rem;
  font-weight: 600;
}

.route-home .new-home-try-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 1.1rem;
}

.route-home .new-home-try-actions .new-home-primary,
.route-home .new-home-try-actions .new-home-secondary {
  width: auto;
  min-height: 3.35rem;
  padding-inline: 1.9rem;
}

.route-home .new-home-try-fine,
.route-home .new-home-try > div:first-child > .new-home-try-fine {
  margin: 1.35rem 0 0;
  color: var(--home-faint);
  font-size: 0.84rem;
}

.new-home-try-fine span {
  margin-inline: 0.5rem;
}

.new-home-try-fine a {
  color: var(--home-dim);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (prefers-reduced-motion: no-preference) {
  .home-ops.is-scroll-reveal .home-section-eyebrow,
  .home-ops.is-scroll-reveal h2 > span,
  .home-ops.is-scroll-reveal .home-ops-lede,
  .home-ops.is-scroll-reveal .home-ops-proof,
  .home-lifecycle.is-scroll-reveal h2,
  .home-lifecycle.is-scroll-reveal .home-lifecycle-lede,
  .home-lifecycle.is-scroll-reveal .home-lifecycle-grid,
  .new-home-products-intro.is-scroll-reveal > *,
  .home-news.is-scroll-reveal .home-news-head,
  .home-news.is-scroll-reveal .home-news-gallery,
  .new-home-try.is-scroll-reveal .new-home-try-inner > * {
    opacity: 0;
    transform: translateY(2.4rem) scale(0.98);
    filter: blur(0.35rem);
    transition:
      opacity 700ms ease,
      transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1),
      filter 700ms ease;
  }

  .home-ops.is-scroll-reveal h2 > span:last-child,
  .home-lifecycle.is-scroll-reveal .home-lifecycle-lede,
  .new-home-products-intro.is-scroll-reveal > :nth-child(2),
  .new-home-try.is-scroll-reveal .new-home-try-inner > :nth-child(2) {
    transition-delay: 90ms;
  }

  .home-ops.is-scroll-reveal .home-ops-lede,
  .home-lifecycle.is-scroll-reveal .home-lifecycle-grid,
  .new-home-products-intro.is-scroll-reveal > :nth-child(3),
  .home-news.is-scroll-reveal .home-news-gallery,
  .new-home-try.is-scroll-reveal .new-home-try-inner > :nth-child(3) {
    transition-delay: 180ms;
  }

  .home-ops.is-scroll-reveal .home-ops-proof,
  .new-home-try.is-scroll-reveal .new-home-try-inner > :nth-child(n + 4) {
    transition-delay: 270ms;
  }

  .home-ops.is-scroll-reveal.is-in .home-section-eyebrow,
  .home-ops.is-scroll-reveal.is-in h2 > span,
  .home-ops.is-scroll-reveal.is-in .home-ops-lede,
  .home-ops.is-scroll-reveal.is-in .home-ops-proof,
  .home-lifecycle.is-scroll-reveal.is-in h2,
  .home-lifecycle.is-scroll-reveal.is-in .home-lifecycle-lede,
  .home-lifecycle.is-scroll-reveal.is-in .home-lifecycle-grid,
  .new-home-products-intro.is-scroll-reveal.is-in > *,
  .home-news.is-scroll-reveal.is-in .home-news-head,
  .home-news.is-scroll-reveal.is-in .home-news-gallery,
  .new-home-try.is-scroll-reveal.is-in .new-home-try-inner > * {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

.route-home .new-home-hiring {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 31.25rem;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  text-align: center;
  justify-content: center;
  color: #fff;
  background: #090909;
}

.new-home-hiring-bg,
.new-home-hiring-scrim {
  position: absolute;
  inset: 0;
}

.new-home-hiring-bg {
  background: url("/static/ai-week-gtv-hiring.jpg") center 43% / cover no-repeat;
  filter: blur(1.5px);
  transform: scale(1.025);
}

.new-home-hiring-scrim {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.28) 50%, rgba(0, 0, 0, 0.6));
}

.new-home-hiring-copy {
  position: relative;
  z-index: 2;
}

.route-home .new-home-hiring-copy {
  justify-self: center;
}

.route-home .new-home-hiring h2 {
  color: #fff;
  font-size: clamp(2.2rem, 3.5vw, 2.8rem);
  letter-spacing: -0.035em;
}

.route-home .new-home-hiring p {
  margin-top: 0.45rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
}

.route-home .new-home-hiring .new-home-primary {
  margin-top: 1.6rem;
  padding-inline: 1.7rem;
}

.route-home .site-footer {
  width: min(100%, 78rem);
  max-width: 78rem;
  min-height: 82.7rem;
  margin-top: 0;
  padding: 3.9rem 1.5rem 3rem;
  color: #85858f;
  background: #080808;
}

.route-home .site-footer::before {
  top: 0;
  background: #080808;
  opacity: 1;
  mask-image: none;
}

.footer-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(3rem, 12vw, 10rem);
  min-height: 12.3rem;
  padding-bottom: 3.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.footer-action h2 {
  margin: 0;
  color: #f5f5f7;
  font-size: clamp(1.65rem, 2.5vw, 2rem);
  line-height: 1.2;
}

.footer-action > p {
  margin: 0.55rem 0 1.15rem;
  color: #85858f;
  font-size: 0.88rem;
}

.footer-question-field {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 3.25rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid #25252b;
  border-radius: 0.6rem;
  color: #85858f;
  background: #111114;
}

.footer-question-field:hover {
  color: #d8d8df;
  text-decoration: none;
  border-color: #3a3a42;
}

.footer-question-field > span {
  color: var(--orange);
  font-size: 1.25rem;
}

.footer-question-field > b {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-left: auto;
  border: 1px solid rgba(58, 94, 255, 0.45);
  border-radius: 50%;
  color: #7f96ff;
  background: rgba(58, 94, 255, 0.12);
}

.footer-subscribe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
}

.footer-subscribe input {
  min-width: 0;
  min-height: 3.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid #25252b;
  border-radius: 0.6rem;
  color: #f5f5f7;
  background: #111114;
  font: inherit;
}

.footer-subscribe > a {
  display: grid;
  place-items: center;
  padding: 0.75rem 1.4rem;
  border-radius: 0.6rem;
  color: #fff;
  background: var(--home-blue);
  font-weight: 600;
}

.footer-action small {
  display: block;
  margin-top: 0.55rem;
  color: #6d6d75;
  font-size: 0.75rem;
}

.footer-action small a {
  color: #a3a3aa;
  text-decoration: underline;
}

.route-home .footer-top {
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  margin-top: 2.7rem;
}

.route-home .footer-nav {
  padding-left: 0;
}

@media (max-width: 900px) {
  .home-hero-track {
    height: auto;
    min-height: 48rem;
  }

  .home-hero-sticky {
    position: relative;
    height: auto;
    min-height: 48rem;
    padding: 8rem 1.25rem 5rem;
  }

  .home-hero-quote {
    font-size: clamp(2.6rem, 11vw, 4.8rem);
  }

  .home-hero-headline {
    display: none;
  }

  .home-hero-summary {
    opacity: 1;
    transform: none;
  }

  .new-home-bio-pill {
    position: static;
    width: max-content;
    max-width: 100%;
    margin: 0 auto 2.25rem;
    transform: rotate(1deg);
  }

  .new-home-scroll {
    display: none;
  }

  .home-lifecycle-grid {
    grid-template-columns: 1fr;
  }

  .home-lifecycle-card:nth-child(n) {
    border-right: 0;
    border-bottom: 1px solid var(--home-line);
  }

  .home-lifecycle-card:last-child {
    border-bottom: 0;
  }

  .route-home .new-home-products-intro {
    min-height: auto;
    padding: 7rem 0 5rem;
  }

  .route-home .home-products {
    margin-top: 0;
    padding-bottom: 0;
  }

  .route-home .product-section,
  .route-home .product-section:nth-child(n) {
    min-height: auto;
    padding-block: 4rem;
  }

  .route-home .product-inner {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 0;
  }

  .route-home .product-copy,
  .route-home .product-section:nth-child(n) .product-copy,
  .route-home .product-media,
  .route-home .product-section:nth-child(n) .product-media {
    grid-column: 1;
  }

  .route-home .product-media,
  .route-home .product-section:nth-child(n) .product-media {
    min-height: min(34rem, 84vw);
  }
}

@media (max-width: 760px) {
  .route-home .ai-week-bar-event {
    font-size: 0.7rem;
  }

  .route-home .ai-week-bar-event span {
    display: none;
  }

  .route-home .ai-week-bar-save {
    display: none;
  }

  .home-ops {
    min-height: auto;
    padding-block: 7rem;
  }

  .home-ops-proof {
    margin-top: 3.5rem;
    padding: 1.6rem;
  }

  .home-lifecycle {
    padding-inline: 1rem;
  }

  .home-lifecycle-card {
    min-height: 26rem;
    padding: 1.35rem;
  }

  .home-lifecycle-viz {
    height: 10rem;
  }

  .route-home .new-home-hiring-copy {
    width: calc(100% - 2rem);
  }

  .footer-actions {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .route-home .site-footer {
    min-height: auto;
    padding-inline: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-telemetry-pulse,
  .home-viz-caret {
    animation: none;
  }

  .home-hero-fly-layer {
    display: none !important;
  }

  .home-ops.is-in .home-ops-sparkle {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .home-telemetry-pulse {
    display: none;
  }
}