/* ============================================================
   In Cloud Solutions — Main Stylesheet
   styles.css
   ============================================================ */

/* ── Custom Properties ─────────────────────────────────────── */
:root {
  /* Backgrounds */
  --color-bg:             #ffffff;
  --color-surface:        #fafafa;
  --color-surface-alt:    #f5f5f5;
  --color-surface-hover:  #f3f4f6;
  --color-border:         #e5e7eb;

  /* Text */
  --color-text:           #111827;
  --color-heading:        #111827;
  --color-text-secondary: #4b5563;
  --color-text-muted:     #9ca3af;

  /* Accent — indigo */
  --color-accent:         #6366f1;
  --color-accent-hover:   #4f46e5;
  --color-accent-subtle:  rgba(99, 102, 241, 0.07);
  --color-accent-ring:    rgba(99, 102, 241, 0.18);
  --color-text-on-accent: #ffffff;

  /* Typography */
  --font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-xs:      0.75rem;
  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-lg:      1.125rem;
  --text-xl:      1.25rem;
  --text-2xl:     1.5rem;
  --text-3xl:     1.875rem;
  --text-4xl:     2.25rem;
  --text-5xl:     3rem;

  /* Spacing */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  /* Border radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* Shadows — light and minimal */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.07), 0 4px 8px rgba(0, 0, 0, 0.03);

  /* Transitions */
  --ease:        200ms ease;
  --ease-slow:   350ms ease;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
}

/* ── Layout helpers ────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.section {
  padding-block: var(--space-24);
}

.section--alt {
  background: var(--color-surface);
}

.section--contrast {
  background: var(--color-surface-alt);
}

/* ── Generic item-list section skins ──────────────────────────
   Activated by the class added during section-shell synthesis.
   Per-instance skins (e.g. .products, .experience) still override
   these defaults when they exist alongside.
   ────────────────────────────────────────────────────────────── */

/* Shared grid-base for synthesised sections */
.section--card-grid .section__grid,
.section--stat-grid .section__grid,
.section--pillar-grid .section__grid {
  display: grid;
  gap: var(--space-5);
}

/* Card grid: responsive 3-column */
.section--card-grid .section__grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Stat grid: compact 2-column (4-column on wide) */
.section--stat-grid .section__grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  text-align: center;
}

/* Pillar grid: 3-column */
.section--pillar-grid .section__grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Step list: vertical stack */
.section--step-list .section__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 720px;
  margin-inline: auto;
}

.section__header {
  text-align: center;
  margin-bottom: var(--space-16);
}

.section__title {
  font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl));
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--color-heading);
  margin-bottom: var(--space-3);
}

.section__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  max-width: 540px;
  margin-inline: auto;
  line-height: 1.7;
}

/* ── Focus visible ─────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--text-base);
  line-height: 1;
  white-space: nowrap;
  transition:
    background var(--ease),
    color var(--ease),
    border-color var(--ease),
    box-shadow var(--ease),
    transform var(--ease);
  min-height: 48px;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
}

.btn--sm {
  padding: 0.5rem 1rem;
  font-size: var(--text-sm);
  min-height: 38px;
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-accent) 28%, transparent);
  transform: translateY(-1px);
}

.btn--outline {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  border-color: var(--color-text-secondary);
  color: var(--color-text);
  transform: translateY(-1px);
}

/* btn--secondary mirrors btn--outline */
.btn--secondary {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  border-color: var(--color-text-secondary);
  color: var(--color-text);
  transform: translateY(-1px);
}

.btn--full {
  width: 100%;
}

/* ── Header ────────────────────────────────────────────────── */
.header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition:
    border-color var(--ease),
    box-shadow var(--ease),
    background var(--ease);
}

.header.scrolled {
  border-bottom-color: var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 97%, transparent);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: opacity var(--ease);
}

.header__logo:hover {
  opacity: 0.85;
}

.header__logo-img {
  height: 48px;
  width: auto;
  display: block;
}

/* Desktop nav — hidden on mobile */
.header__nav {
  display: none;
}

.header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.header__nav-link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: color var(--ease);
}

.header__nav-link:hover,
.header__nav-link:focus-visible {
  color: var(--color-text);
}

.header__nav-link--active {
  color: var(--color-accent);
  font-weight: 600;
}

/* Mobile menu toggle */
.header__menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  transition: background var(--ease);
}

.header__menu-toggle:hover {
  background: var(--color-surface);
}

.header__menu-icon,
.header__menu-icon::before,
.header__menu-icon::after {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--ease), opacity var(--ease);
}

.header__menu-icon {
  position: relative;
}

.header__menu-icon::before,
.header__menu-icon::after {
  content: '';
  position: absolute;
  left: 0;
}

.header__menu-icon::before { top: -6px; }
.header__menu-icon::after  { top:  6px; }

/* Open state — icon becomes × */
.header__menu-toggle[aria-expanded="true"] .header__menu-icon {
  background: transparent;
}

.header__menu-toggle[aria-expanded="true"] .header__menu-icon::before {
  transform: rotate(45deg);
  top: 0;
}

.header__menu-toggle[aria-expanded="true"] .header__menu-icon::after {
  transform: rotate(-45deg);
  top: 0;
}

/* Mobile nav dropdown */
.header__mobile-nav {
  display: none;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
  padding-block: var(--space-2);
}

.header__mobile-nav.open {
  display: block;
}

.header__mobile-nav-list {
  display: flex;
  flex-direction: column;
}

.header__mobile-nav-link {
  display: block;
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color var(--ease), background var(--ease);
}

.header__mobile-nav-link:hover {
  color: var(--color-text);
  background: var(--color-surface);
}

.header__mobile-nav-link--active {
  color: var(--color-accent);
  font-weight: 600;
}

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  padding-top: var(--space-24);
  padding-bottom: var(--space-32, 8rem);
  overflow: hidden;
}

/* ── Hero layout variants ────────────────────────────────── */
/* split-right is the default — no extra CSS needed */
/* split-left: visual on the left side */
/* centered: single-column centred content */
/* image-bg: background image fills section */

/* ── Hero theme variants ─────────────────────────────────── */
.hero--gradient-purple {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 4%, transparent) 0%, rgba(168,85,247,0.03) 100%);
}
.hero--gradient-cyan {
  background: linear-gradient(135deg, rgba(6,182,212,0.07) 0%, color-mix(in srgb, var(--color-accent) 4%, transparent) 100%);
}
.hero--dark-mesh {
  background: #0f0f1a;
}
.hero--dark-mesh .hero__headline,
.hero--dark-mesh .hero__subheadline,
.hero--dark-mesh .hero__eyebrow,
.hero--dark-mesh .hero__footnote {
  color: #e2e8f0;
}
.hero--light-clean {
  background: var(--color-bg);
}
.hero--image-bg {
  background-size: cover;
  background-position: center;
  position: relative;
}
.hero--image-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 0;
}
.hero--image-bg .hero__inner {
  position: relative;
  z-index: 1;
}
.hero--image-bg .hero__headline,
.hero--image-bg .hero__subheadline,
.hero--image-bg .hero__eyebrow,
.hero--image-bg .hero__footnote {
  color: #fff;
}

/* ── Per-block / per-section backgrounds (Design 144) ───────
   Generic props.background on any section block. Token-driven only — no
   hard-coded brand colour (Prime Directive #7). The full-bleed background lives
   on the section wrapper; the inner .container / .hero__inner stays contained.
   The scrim is a tenant-overridable custom property, not a baked rgba(). */
:root {
  --block-bg-overlay-dark:  color-mix(in srgb, #000 50%, transparent);
  --block-bg-overlay-light: color-mix(in srgb, #fff 55%, transparent);
}

.block-bg { position: relative; }
.block-bg > .container,
.block-bg .hero__inner { position: relative; z-index: 1; }

.block-bg--color { background: var(--block-bg); }

/* Gradient presets — composed from theme tokens, mirroring the hero gradients. */
.block-bg--gradient-accent-soft {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-accent) 6%, transparent) 0%,
    var(--color-surface) 100%);
}
.block-bg--gradient-accent-cyan {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-accent) 8%, transparent) 0%,
    color-mix(in srgb, var(--color-accent-subtle) 60%, var(--color-surface)) 100%);
}
.block-bg--gradient-ink {
  background: var(--color-surface-alt);
}

/* Image background — the new --block-bg-image primitive feeds background-image. */
.block-bg--image {
  background-image: var(--block-bg-image);
  background-size: cover;
  background-position: center;
}

/* Overlays (scrim / tint) — generalises .hero--image-bg::before, but tokenised. */
.block-bg--overlay-scrim-dark::before,
.block-bg--overlay-scrim-light::before,
.block-bg--overlay-tint-accent::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.block-bg--overlay-scrim-dark::before  { background: var(--block-bg-overlay-dark); }
.block-bg--overlay-scrim-light::before { background: var(--block-bg-overlay-light); }
.block-bg--overlay-tint-accent::before {
  background: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

/* Forced text contrast over a background. */
.block-bg--text-light,
.block-bg--text-light :where(h1, h2, h3, p, li, .section__title, .section__subtitle) {
  color: var(--color-text-on-accent, #fff);
}
.block-bg--text-dark,
.block-bg--text-dark :where(h1, h2, h3, p, li, .section__title, .section__subtitle) {
  color: var(--color-heading);
}

/* Hero unification (Design 144 Phase 2): a generic per-block background on the
   hero supersedes the legacy `theme` treatment. The `background` property is
   already won by source order (these rules come after .hero--*); here we only
   neutralise the legacy dark-mesh / image-bg TEXT overrides so a light band
   isn't stuck with white text. The generic block-bg--text-* contrast (when set,
   e.g. an image scrim) re-asserts with higher specificity. */
.hero.block-bg :where(.hero__headline, .hero__subheadline, .hero__eyebrow, .hero__footnote) {
  color: inherit;
}
.hero.block-bg.block-bg--text-light :where(.hero__headline, .hero__subheadline, .hero__eyebrow, .hero__footnote) {
  color: var(--color-text-on-accent, #fff);
}
.hero.block-bg.block-bg--text-dark :where(.hero__headline, .hero__subheadline, .hero__eyebrow, .hero__footnote) {
  color: var(--color-heading);
}

/* ── Hero visual-none: hide the visual column ───────────── */
.hero--visual-none .hero__visual {
  display: none !important;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  align-items: center;
}

.hero__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
  min-height: 0;
}
.hero__eyebrow:empty { display: none; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.35rem 1rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 12%, transparent) 0%, rgba(168,85,247,0.1) 100%);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-6);
  border: 1px solid color-mix(in srgb, var(--color-accent) 28%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 6%, transparent), inset 0 1px 0 rgba(255,255,255,0.6);
  background-clip: padding-box;
  /* Gradient text */
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 12%, transparent) 0%, rgba(168,85,247,0.1) 100%);
  position: relative;
  overflow: hidden;
}
/* Hide the badge pill when it has no text — managed pages (Design 117) often leave it empty. */
.hero__badge:has(span:empty) { display: none; }
.hero__badge::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: badgeShimmer 3.5s ease-in-out infinite;
}
@keyframes badgeShimmer {
  0%   { transform: translateX(-100%); }
  45%, 100% { transform: translateX(200%); }
}
.hero__badge span {
  background: linear-gradient(90deg, var(--color-accent) 0%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__headline {
  font-size: clamp(2.4rem, 5.5vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.08;
  color: var(--color-heading);
  margin-bottom: var(--space-5);
}

.hero__subheadline {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: 1.75;
  max-width: 500px;
  margin-bottom: var(--space-10);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero__footnote {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary, var(--color-text-secondary));
  margin-top: var(--space-5);
}
.hero__footnote:empty { display: none; }

/* Hero decorative visual */
.hero__visual {
  display: none; /* shown when a split layout has a real visual (any width) */
  position: relative;
  height: 300px; /* mobile; bumped to 440px at 768px+ */
}

/* Show the visual whenever a split layout has an image/diagram — at ALL widths.
   On mobile the hero is single-column, so it stacks beneath the text; at 768px+
   it sits side-by-side (see the two-column grid below). */
.hero--split-right.hero--visual-diagram .hero__visual,
.hero--split-left.hero--visual-diagram .hero__visual,
.hero--split-right.hero--visual-image .hero__visual,
.hero--split-left.hero--visual-image .hero__visual {
  display: flex;
}

/* Canvas fills the visual area */
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-xl);
}

/* Image scales to fit fully inside the visual area (whole image, no crop) */
.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-xl);
}
/* Optional clickable hero visual (Design 121): the link wrapper fills the visual
   area so the whole image is the click target; only a real href is interactive. */
.hero__image-link { position: absolute; inset: 0; display: block; }
.hero__image-link[href] { cursor: pointer; }
/* Video still fills/crops */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-xl);
}

/* Diagram (mermaid) sits centered within the visual area */
.hero__diagram {
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  overflow: auto;
  border-radius: var(--radius-xl);
}
.hero__diagram:not([hidden]) { display: flex; }
.hero__diagram svg {
  max-width: 100%;
  max-height: 100%;
  height: auto;
}

/* Chip container: overlay on visual */
.hero__chips {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Data-driven chip items inside .hero__chips */
.hero__chips .item-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem 0.45rem 0.7rem;
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text);
  box-shadow: 0 4px 24px color-mix(in srgb, var(--color-accent) 13%, transparent), 0 1px 4px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.9);
  white-space: nowrap;
  letter-spacing: 0.02em;
  user-select: none;
  text-transform: uppercase;
  pointer-events: auto;
}
.hero__chips .item-chip:nth-child(1) { top: 9%;    right: 3%;  animation: chipFloat 5s   ease-in-out infinite; }
.hero__chips .item-chip:nth-child(2) { top: 44%;   right: 14%; animation: chipFloat 5.6s ease-in-out infinite; animation-delay: -2.1s; }
.hero__chips .item-chip:nth-child(3) { bottom: 7%; right: 2%;  animation: chipFloat 4.9s ease-in-out infinite; animation-delay: -3.7s; }

.hero__chips .item-chip__icon {
  font-size: 0.65rem;
  color: color-mix(in srgb, var(--color-accent) 50%, transparent);
  line-height: 1;
}
.hero__chips .item-chip__led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 30%, transparent);
  flex-shrink: 0;
}
.hero__chips .item-chip__led--accent {
  background: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
  animation: ledPulse 2s ease-in-out infinite;
}

/* Glass-pill label chips */
.hero__chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem 0.45rem 0.7rem;
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text);
  box-shadow: 0 4px 24px color-mix(in srgb, var(--color-accent) 13%, transparent), 0 1px 4px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.9);
  white-space: nowrap;
  letter-spacing: 0.02em;
  user-select: none;
  text-transform: uppercase;
}
.hero__chip--1 { top: 9%;    right: 3%;  animation: chipFloat 5s   ease-in-out infinite; }
.hero__chip--2 { top: 44%;   right: 14%; animation: chipFloat 5.6s ease-in-out infinite; animation-delay: -2.1s; }
.hero__chip--3 { bottom: 7%; right: 2%;  animation: chipFloat 4.9s ease-in-out infinite; animation-delay: -3.7s; }
@keyframes chipFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

.hero__chip-icon {
  font-size: 0.65rem;
  color: color-mix(in srgb, var(--color-accent) 50%, transparent);
  line-height: 1;
}

.hero__chip-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 30%, transparent);
  flex-shrink: 0;
}
.hero__chip-led--accent {
  background: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
  animation: ledPulse 2s ease-in-out infinite;
}
@keyframes ledPulse {
  0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 12%, transparent); }
  50%       { box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 28%, transparent); }
}

/* ── Positioning Strip ─────────────────────────────────────── */
.positioning {
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-20);
}

.positioning__inner {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}

.positioning__statement {
  font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  line-height: 1.3;
}

.positioning__support {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.positioning__cta {
  display: inline-block;
  margin-top: var(--space-4);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
}
.positioning__cta:hover { text-decoration: underline; }

/* ── Architecture Explainer ─────────────────────────────── */
.architecture {
  padding-block: var(--space-20);
}

.architecture__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}

.architecture__content,
.architecture__visual {
  padding: var(--space-8);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
}

.architecture__content {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 5%, transparent) 0%, color-mix(in srgb, var(--color-accent) 1.5%, transparent) 100%),
    var(--color-bg);
}

.architecture__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.8rem;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-full);
  background: var(--color-accent-subtle);
  border: 1px solid color-mix(in srgb, var(--color-accent) 18%, transparent);
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.architecture__title {
  color: var(--color-heading);
  margin-bottom: var(--space-5);
  text-align: left;
}

.architecture__lead {
  font-size: var(--text-lg);
  color: var(--color-text);
  line-height: 1.75;
  margin-bottom: var(--space-4);
}

.architecture__text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.8;
}

.architecture__text + .architecture__text {
  margin-top: var(--space-4);
}

.architecture__text--subtle {
  color: var(--color-text);
}

.architecture__capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.architecture__capability,
.architecture__pill {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.2;
}

.architecture__visual {
  background: var(--color-surface);
}

.architecture__access {
  position: relative;
  margin-bottom: var(--space-5);
  padding: var(--space-5);
  border: 1px solid color-mix(in srgb, var(--color-accent) 16%, transparent);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 6%, transparent) 0%, color-mix(in srgb, var(--color-surface) 85%, transparent) 100%);
}

.architecture__access-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.architecture__access-card {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
}

.architecture__access-card strong {
  display: block;
  font-size: var(--text-lg);
  line-height: 1.3;
  color: var(--color-text);
}

.architecture__access-card--accent {
  border-color: var(--color-accent-ring);
  background: linear-gradient(135deg, var(--color-accent-subtle) 0%, var(--color-surface) 100%);
}

.architecture__access-label,
.architecture__output-label,
.architecture__step-kicker {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.architecture__access-label,
.architecture__output-label {
  white-space: nowrap;
}

.architecture__access-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
}

.architecture__panel {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 84%, transparent);
}

.architecture__panel-label {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.architecture__pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.architecture__flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-block: var(--space-5);
}

.architecture__step {
  position: relative;
  min-width: 0;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  box-shadow: var(--shadow-xs);
}

.architecture__step--stream::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -18px;
  width: 1px;
  height: 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 34%, transparent) 0%, color-mix(in srgb, var(--color-accent) 0%, transparent) 100%);
  transform: translateX(-50%);
}

.architecture__step--stream::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid color-mix(in srgb, var(--color-accent) 50%, transparent);
  border-bottom: 1.5px solid color-mix(in srgb, var(--color-accent) 50%, transparent);
  transform: translateX(-50%) rotate(45deg);
}

.architecture__step-title {
  display: block;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
}

.architecture__step-text {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.architecture__step--accent {
  border-color: color-mix(in srgb, var(--color-accent) 24%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 8%, transparent) 0%, color-mix(in srgb, var(--color-accent) 2%, transparent) 100%);
}

.architecture__arrow {
  display: none;
}

.architecture__outputs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.architecture__output {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
}

.architecture__output strong {
  display: block;
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: 1.5;
}

.architecture__note {
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 14%, transparent);
  color: var(--color-text);
  font-weight: 500;
  line-height: 1.7;
}

/* ── Products ──────────────────────────────────────────────── */
.products__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.product-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition:
    box-shadow var(--ease),
    border-color var(--ease),
    transform var(--ease);
}

.product-card:hover {
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  transform: translateY(-2px);
}

.product-card--soon {
  opacity: 0.6;
  border-style: dashed;
}

.product-card--soon:hover {
  opacity: 0.8;
  transform: none;
  box-shadow: none;
}

.product-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.product-card__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.product-card__badge {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  text-transform: uppercase;
}

.product-card__badge--live {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
}

.product-card__badge--soon {
  background: var(--color-surface-hover);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.product-card__name {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-2);
}

.product-card__description {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.7;
  flex: 1;
  margin-bottom: var(--space-6);
}

.product-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
  transition: gap var(--ease), color var(--ease);
  margin-top: auto;
}

.product-card__link:hover {
  gap: var(--space-2);
}

.product-card__link--muted {
  color: var(--color-text-muted);
  cursor: default;
}

.product-card__link--muted:hover {
  gap: var(--space-1);
  color: var(--color-text-muted);
}

/* ── Experience ────────────────────────────────────────────── */
.experience__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.experience__block {
  text-align: center;
  padding: var(--space-10) var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.experience__icon {
  display: flex;
  justify-content: center;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
  opacity: 0.8;
}

.experience__stat {
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: var(--space-2);
  line-height: 1;
}

.experience__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.55;
}

/* ── AI Native ─────────────────────────────────────────────── */
.ai-native__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.ai-native__grid--two-col {
  max-width: 760px;
  margin-inline: auto;
}

.ai-native__block {
  padding: var(--space-8) var(--space-7, 1.75rem);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: box-shadow var(--ease), border-color var(--ease);
}

.ai-native__block:hover {
  box-shadow: var(--shadow-sm);
  border-color: color-mix(in srgb, var(--color-accent) 22%, transparent);
}

.ai-native__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  margin-bottom: var(--space-5);
}

.ai-native__title {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-heading);
  margin-bottom: var(--space-3);
}

.ai-native__text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.75;
}

/* ── About ─────────────────────────────────────────────────── */
.about__inner {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.about__body {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: 1.9;
}

.about__body + .about__body {
  margin-top: 1.25rem;
}

/* ── AI Tooling ────────────────────────────────────────────── */
.ai-tooling__intro {
  max-width: 660px;
  margin-inline: auto;
  text-align: center;
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin-bottom: 3.5rem;
}

.ai-tooling__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.ai-tooling__card {
  padding: var(--space-8) var(--space-7, 1.75rem);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: box-shadow var(--ease), border-color var(--ease), transform var(--ease);
}

.ai-tooling__card:hover {
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--color-accent) 25%, transparent);
  transform: translateY(-2px);
}

.ai-tooling__icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}

.ai-tooling__title {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-heading);
  margin-bottom: var(--space-2);
}

.ai-tooling__text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.75;
}

/* ── What We Build footnote ────────────────────────────────── */
.what-we-build__footnote {
  text-align: center;
  margin-top: var(--space-10);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}
/* ── How We Build ──────────────────────────────────────────────── */
.how-we-build__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-10);
}

.how-we-build__step {
  padding: var(--space-8) var(--space-7);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: box-shadow var(--ease), border-color var(--ease), transform var(--ease);
}

.how-we-build__step:hover {
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  transform: translateY(-2px);
}

.how-we-build__step-number {
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
  line-height: 1;
}

.how-we-build__step-title {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-2);
}

.how-we-build__step-text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.75;
}

.how-we-build__callout {
  background: color-mix(in srgb, var(--color-accent) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 18%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-10);
  text-align: center;
}

.how-we-build__callout p {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.75;
  max-width: 700px;
  margin-inline: auto;
}
/* ── Contact ───────────────────────────────────────────────── */
.contact__form {
  max-width: 560px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.contact__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}

.contact__input {
  font-family: var(--font);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  width: 100%;
  transition: border-color var(--ease), box-shadow var(--ease);
  outline: none;
}

.contact__input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.contact__textarea {
  resize: vertical;
  min-height: 130px;
}

.contact__note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.6;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-subtle, #f0f0f0);
}

/* ── Footer ────────────────────────────────────────────────── */
.footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-8);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.footer__copy {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.footer__nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
}

.footer__nav-link {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition: color var(--ease);
}

.footer__nav-link:hover {
  color: var(--color-text);
}

/* ============================================================
   RESPONSIVE — Mobile-first breakpoints
   ============================================================ */

/* ── 640px+ ─── Tablet / wide mobile ── */
@media (min-width: 640px) {
  .architecture__access-options,
  .architecture__outputs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .architecture__flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .architecture__step {
    min-height: 148px;
  }

  .products__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ai-native__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ai-tooling__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .how-we-build__steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ── 768px+ ─── Desktop ──────────────── */
@media (min-width: 768px) {
  /* Show desktop nav, hide mobile toggle */
  .header__nav {
    display: flex;
  }

  .header__menu-toggle {
    display: none;
  }

  /* Hero two-column layout — only when a split layout actually has a visual to
     show; otherwise the inner stays single-column (full-width text, no gap). */
  .hero--split-right.hero--visual-diagram .hero__inner,
  .hero--split-left.hero--visual-diagram .hero__inner,
  .hero--split-right.hero--visual-image .hero__inner,
  .hero--split-left.hero--visual-image .hero__inner {
    grid-template-columns: 1fr 1fr;
  }

  /* split-left: flip column order */
  .hero--split-left .hero__visual {
    order: -1;
  }

  /* centered: single centered column */
  .hero--centered .hero__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    max-width: 760px;
    margin-inline: auto;
  }
  .hero--centered .hero__visual {
    display: none;
  }
  .hero--centered .hero__subheadline {
    max-width: 100%;
  }

  /* image-bg: hide the visual column (bg image fills section) */
  .hero--image-bg .hero__visual {
    display: none;
  }
  .hero--image-bg .hero__inner {
    grid-template-columns: 1fr;
    max-width: 680px;
  }

  /* Desktop: taller visual (visibility is handled by the base rule above). */
  .hero__visual {
    height: 440px;
  }

  .architecture__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }

  .architecture__flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* AI native 3 columns — but 2-col variant stays 2 */
  .ai-native__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .ai-native__grid--two-col {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── 1024px+ ─── Large desktop ────────── */
@media (min-width: 1024px) {
  .products__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .experience__grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .how-we-build__steps {
    grid-template-columns: repeat(4, 1fr);
  }}

/* ============================================================
   Article page
   ============================================================ */

/* ── Hero: dark, full-bleed ─────────────────────────────── */
.art-hero {
  background: #0c0d14;
  background-image:
    radial-gradient(ellipse 80% 60% at 60% -10%, color-mix(in srgb, var(--color-accent) 28%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 0% 80%,  rgba(168,85,247,0.14) 0%, transparent 55%);
  padding-top: calc(var(--space-24) + 4rem); /* clear fixed header */
  padding-bottom: var(--space-20);
}
.art-hero__inner {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.art-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  margin-bottom: var(--space-8);
  transition: color var(--ease);
}
.art-back:hover { color: rgba(255,255,255,0.85); }
.art-hero__top {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.art-label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a5b4fc;
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
  border-radius: var(--radius-full);
  padding: 0.25rem 0.8rem;
}
.art-meta {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.35);
}
.art-title {
  font-size: clamp(2rem, 5.5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.07;
  color: #ffffff;
  margin-bottom: var(--space-6);
}
.art-lede {
  font-size: var(--text-xl);
  color: rgba(255,255,255,0.6);
  line-height: 1.75;
  max-width: 660px;
}

/* ── Body ───────────────────────────────────────────────── */
.art-wrap {
  background: var(--color-bg);
  padding-block: var(--space-20) var(--space-24);
}
.art-body {
  max-width: 740px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.art-body h2 {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--color-heading);
  margin-top: var(--space-16);
  margin-bottom: var(--space-4);
  padding-left: var(--space-5);
  border-left: 3px solid var(--color-accent);
}
.art-body h2:first-child { margin-top: 0; }
.art-body p {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: 1.85;
  margin-bottom: var(--space-5);
}
.art-body ul {
  list-style: none;
  margin-bottom: var(--space-5);
  margin-left: 0;
}
.art-body ul li {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: 1.8;
  padding-left: var(--space-6);
  position: relative;
  margin-bottom: var(--space-3);
}
.art-body ul li::before {
  content: '';
  position: absolute;
  left: var(--space-1);
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* ── Callout / pull quote ───────────────────────────────── */
.art-callout {
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 18%, transparent);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--space-6) var(--space-8);
  margin-block: var(--space-8);
}
.art-callout p {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.7;
  margin: 0 !important;
}

/* ── Divider ────────────────────────────────────────────── */
.art-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-block: var(--space-12);
}

/* ── Bottom CTA ─────────────────────────────────────────── */
.art-cta {
  margin-top: var(--space-16);
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 8%, transparent) 0%, rgba(168,85,247,0.05) 100%);
  border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-10);
  text-align: center;
}
.art-cta__eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}
.art-cta__heading {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-heading);
  margin-bottom: var(--space-3);
}
.art-cta__sub {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
}
.art-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

@media (max-width: 600px) {
  .architecture {
    padding-block: var(--space-16);
  }

  .architecture__grid {
    gap: var(--space-5);
  }

  .architecture__content,
  .architecture__visual,
  .architecture__panel {
    padding: var(--space-6);
  }

  .architecture__eyebrow {
    margin-bottom: var(--space-4);
  }

  .architecture__title {
    margin-bottom: var(--space-4);
  }

  .architecture__lead {
    font-size: var(--text-base);
    line-height: 1.65;
    margin-bottom: var(--space-3);
  }

  .architecture__text,
  .architecture__note {
    line-height: 1.7;
  }

  .architecture__capabilities,
  .architecture__pill-list {
    gap: var(--space-2);
  }

  .architecture__access,
  .architecture__outputs {
    gap: var(--space-2);
  }

  .architecture__access-card strong {
    font-size: var(--text-xl);
  }

  .architecture__access-label {
    letter-spacing: 0.05em;
  }

  .architecture__capability,
  .architecture__pill {
    padding: 0.4rem 0.7rem;
    font-size: var(--text-xs);
  }

  .architecture__flow {
    margin-block: var(--space-4);
  }

  .architecture__step {
    padding: var(--space-4);
  }

  .art-hero { padding-top: calc(var(--space-16) + 4rem); }
  .art-title { font-size: 1.875rem; }
  .art-lede  { font-size: var(--text-lg); }
  .art-body h2 { font-size: var(--text-xl); }
  .art-callout { padding: var(--space-5) var(--space-6); }
  .art-cta { padding: var(--space-8) var(--space-6); }
}

/* ── Architecture diagram variants ───────────────────────────── */
.architecture__visual--swimlane .architecture__swimlane {
  display: flex;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
.architecture__lane {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: color-mix(in srgb, var(--color-accent) 3%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.architecture__lane-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}
.architecture__pill-list--lane {
  margin-bottom: var(--space-3);
}

.architecture__visual--layered .architecture__layered {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.architecture__layer {
  background: color-mix(in srgb, var(--color-accent) 3%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.architecture__layer-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}
.architecture__layer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.architecture__layer--accent {
  border: 2px solid var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.architecture__visual--hub-spoke .architecture__hub-wrap {
  display: flex;
  align-items: stretch;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
.architecture__hub-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  justify-content: center;
}
.architecture__hub-col--inputs {
  align-items: flex-end;
}
.architecture__hub-col--outputs {
  align-items: flex-start;
}
.architecture__hub {
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 8%, transparent) 0%, color-mix(in srgb, var(--color-surface) 96%, transparent) 100%);
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  min-height: 220px;
  min-width: 220px;
  position: relative;
  box-shadow: var(--shadow-xs);
  padding: var(--space-6);
}
.architecture__hub-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-accent-dk);
  margin-bottom: var(--space-2);
}
.architecture__hub-text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  text-align: center;
  margin-bottom: var(--space-3);
}
.architecture__hub-spoke {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-surface);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  padding: 0.35rem 0.8rem;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-accent);
  white-space: nowrap;
  pointer-events: none;
}
.architecture__hub-output {
  margin-bottom: var(--space-3);
}
@media (max-width: 900px) {
  .architecture__visual--swimlane .architecture__swimlane,
  .architecture__visual--hub-spoke .architecture__hub-wrap {
    flex-direction: column;
    gap: var(--space-3);
  }
  .architecture__hub {
    min-width: 160px;
    min-height: 160px;
    padding: var(--space-4);
  }
}

/* ── Variant: mermaid ─────────────────────────────────────────────────────── */
.architecture__visual--mermaid {
  display: block;
  padding: var(--space-5);
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-alt) 100%);
  border: 1px solid color-mix(in srgb, var(--color-accent) 15%, transparent);
  border-radius: var(--radius-lg, 16px);
}
.architecture__mermaid-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 0;
  overflow-x: auto;
}
.architecture__mermaid-wrap:empty,
.architecture__mermaid-wrap:has(.architecture__mermaid-loading) {
  min-height: 180px;
}
.architecture__mermaid-wrap svg {
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
}
.architecture__mermaid-loading {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-style: italic;
}
.architecture__mermaid-wrap--error {
  flex-direction: column;
  align-items: flex-start;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-md, 8px);
  padding: var(--space-4);
  min-height: 0;
}

/* ── Site Builder hydration fade-in — prevents flash of stale hardcoded HTML ── */
/* Blocks start invisible; once hydrator patches the DOM it sets data-cms-hydrated */
/* on <html>. The hydrator JS itself enforces a last-resort reveal timeout, and    */
/* index.html has a <noscript> override so JS-disabled visitors still see content. */
[data-block] {
  opacity: 0;
  transition: opacity 0.25s ease;
}
:root[data-cms-hydrated] [data-block] {
  opacity: 1;
}

/* ── Site Builder admin mode — block click affordances ───────────────────────
   Applied when the page is loaded with ?_draft=1 (hydrator sets data-cms-admin).
   Gives blocks a pointer cursor and a subtle hover ring so the admin
   knows every block is clickable/selectable.
────────────────────────────────────────────────────────────────────────────── */
:root[data-cms-admin] [data-block] {
  cursor: pointer;
  transition: outline 0.12s ease, outline-offset 0.12s ease;
}
:root[data-cms-admin] [data-block]:hover {
  outline: 2px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  outline-offset: -2px;
}
/* Override hover ring when block is already highlighted (selected) */
:root[data-cms-admin] [data-block].cms-highlight:hover {
  outline: 3px solid #2563eb;
  outline-offset: -3px;
}

/* ── Site Builder preview highlight (admin sidebar selection) ──────────────── */
.cms-highlight {
  position: relative;
  outline: 3px solid #2563eb;
  outline-offset: -3px;
  box-shadow: inset 0 0 0 6px rgba(37, 99, 235, 0.12);
  animation: cmsHighlightPulse 1.6s ease-out 1;
  scroll-margin-top: 80px;
}
@keyframes cmsHighlightPulse {
  0%   { box-shadow: inset 0 0 0 0 rgba(37, 99, 235, 0.5); }
  60%  { box-shadow: inset 0 0 0 14px rgba(37, 99, 235, 0.04); }
  100% { box-shadow: inset 0 0 0 6px rgba(37, 99, 235, 0.12); }
}

/* ── Per-block padding tokens (set via props.padding or props.spacing) ── */
.block--pad-none  { padding: 0; }
.block--pad-tight { padding: 0.5rem; }
.block--pad-normal{ padding: 1rem; }
.block--pad-wide  { padding: 2rem; }
.block--pad-huge  { padding: 3rem; }

/* Block width control lives below (after the top-level block rules) so it can
   override their default max-width. */

/* Mermaid SVG fits its container (avoids overflow inside narrow columns) */
.architecture__mermaid-wrap { width: 100%; overflow-x: auto; }
.architecture__mermaid-wrap svg { max-width: 100%; height: auto; display: block; margin: 0 auto; }

/* ── Dynamic Site Builder block spacing ────────────────────────────────────
   These classes are added by hydrator.js when rendering inserted blocks
   (mermaid / text / image / video / row). They were previously unstyled,
   which caused them to mash up against neighbouring blocks. Spacing here
   uses the same vertical rhythm as the static section content.
────────────────────────────────────────────────────────────────────────── */
[data-block].block-mermaid,
[data-block].block-text,
[data-block].block-image,
[data-block].block-video,
[data-block].block-embed,
[data-block].block-row {
  margin: var(--space-10) 0;
}

/* When inserted at top level (between sections, parent is <main>/<body>) the
   block has no surrounding .container — apply container constraints inline so
   content doesn't bleed to the viewport edge. Inside a .container/.section
   the parent already provides the padding so we don't double up. */
:where(main, body) > [data-block].block-mermaid,
:where(main, body) > [data-block].block-text,
:where(main, body) > [data-block].block-image,
:where(main, body) > [data-block].block-video,
:where(main, body) > [data-block].block-embed,
:where(main, body) > [data-block].block-row {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--space-6);
  box-sizing: border-box;
}

/* Block width control — declared AFTER the default rule above with matching
   specificity ([data-block].x) so narrow/normal/wide actually override it. */
[data-block].block--w-narrow { max-width: 560px;  margin-inline: auto; }
[data-block].block--w-normal { max-width: 760px;  margin-inline: auto; }
[data-block].block--w-wide   { max-width: 1000px; margin-inline: auto; }

/* First/last block inside a section shouldn't double up on section padding */
[data-block].block-mermaid:first-child,
[data-block].block-text:first-child,
[data-block].block-image:first-child,
[data-block].block-video:first-child,
[data-block].block-embed:first-child,
[data-block].block-row:first-child { margin-top: 0; }
[data-block].block-mermaid:last-child,
[data-block].block-text:last-child,
[data-block].block-image:last-child,
[data-block].block-video:last-child,
[data-block].block-embed:last-child,
[data-block].block-row:last-child { margin-bottom: 0; }

/* Mermaid block (title + visual + caption) */
.block-mermaid {
  display: block;
}
.block-mermaid__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-heading);
  margin: 0 0 var(--space-5) 0;
  line-height: 1.3;
}
.block-mermaid__visual {
  /* The architecture__visual--mermaid class adds the gradient + border */
  margin: 0;
}
.block-mermaid__caption {
  margin: var(--space-4) 0 0 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  text-align: center;
  font-style: italic;
  line-height: 1.5;
}
.block-mermaid__placeholder {
  padding: var(--space-8);
  text-align: center;
  color: var(--color-text-secondary);
  font-style: italic;
  background: color-mix(in srgb, var(--color-accent) 4%, transparent);
  border: 1px dashed color-mix(in srgb, var(--color-accent) 30%, transparent);
  border-radius: var(--radius-md, 8px);
}

/* Text block */
.block-text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
}
.block-text > :first-child { margin-top: 0; }
.block-text > :last-child  { margin-bottom: 0; }
.block-text h2 { font-size: 1.75rem; font-weight: 700; color: var(--color-heading); margin: var(--space-8) 0 var(--space-4); line-height: 1.25; }
.block-text h3 { font-size: 1.25rem; font-weight: 700; color: var(--color-heading); margin: var(--space-6) 0 var(--space-3); line-height: 1.3; }
.block-text p  { margin: 0 0 var(--space-4) 0; }
.block-text ul, .block-text ol { margin: 0 0 var(--space-4) 0; padding-left: var(--space-6); }
.block-text li { margin-bottom: var(--space-2); }
.block-text a  { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
/* Article body links — text blocks don't carry .block-text, so theme them here
   (accent + underline) so inserted links are visible/distinguishable on light AND
   dark. Excludes the button block (a.block-button), which has its own styling. */
.art-body a:not(.block-button), .art-blocks a:not(.block-button) {
  color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px;
}
.art-body a:not(.block-button):hover, .art-blocks a:not(.block-button):hover { color: var(--color-accent-hover); }
.block-text__placeholder {
  color: var(--color-text-secondary);
  font-style: italic;
  opacity: 0.6;
}

/* Image block */
.block-image { display: block; }
.block-image__figure { margin: 0; }
.block-image__img    { display: block; width: 100%; height: auto; border-radius: var(--radius-md, 8px); }
.block-image--narrow .block-image__figure { max-width: 540px; margin: 0 auto; }
.block-image--wide   .block-image__figure { max-width: 100%; }
.block-image__caption {
  margin: var(--space-3) 0 0 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  text-align: center;
  font-style: italic;
}
.block-image__placeholder {
  padding: var(--space-10);
  text-align: center;
  color: var(--color-text-secondary);
  background: color-mix(in srgb, var(--color-accent) 4%, transparent);
  border: 1px dashed color-mix(in srgb, var(--color-accent) 30%, transparent);
  border-radius: var(--radius-md, 8px);
}

/* Video block */
.block-video { display: block; }
.block-video__wrap { width: 100%; border-radius: var(--radius-md, 8px); overflow: hidden; background: #000; }
.block-video__el   { width: 100%; height: auto; display: block; }
.block-video__placeholder {
  padding: var(--space-10);
  text-align: center;
  color: var(--color-text-secondary);
  background: color-mix(in srgb, var(--color-accent) 4%, transparent);
  border: 1px dashed color-mix(in srgb, var(--color-accent) 30%, transparent);
  border-radius: var(--radius-md, 8px);
}

/* Embed block (sandboxed external iframe) */
.block-embed { display: block; }

/* Button / link block */
.block-button-wrap { margin: var(--space-6) 0; }
.block-button {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 600; font-size: var(--text-sm); line-height: 1.2;
  text-decoration: none; border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
}
.block-button--button { background: var(--color-accent); color: var(--color-text-on-accent, #fff); padding: 0.65rem 1.15rem; }
.block-button--button:hover { background: var(--color-accent-hover); }
.block-button--link { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.block-button--link:hover { color: var(--color-accent-hover); }

/* Mermaid label text → theme colour. Mermaid's HTML labels don't reliably honour
   our themeVariables (it inlines its own colour), so node/edge/cluster text can
   stay dark on a dark theme. Force it to the token (light AND dark). */
.block-mermaid__svg .nodeLabel, .block-mermaid__svg .edgeLabel, .block-mermaid__svg .cluster-label,
.block-mermaid__svg .label, .block-mermaid__svg foreignObject div, .block-mermaid__svg foreignObject span,
.architecture__mermaid-wrap .nodeLabel, .architecture__mermaid-wrap .edgeLabel, .architecture__mermaid-wrap .cluster-label,
.architecture__mermaid-wrap .label, .architecture__mermaid-wrap foreignObject div, .architecture__mermaid-wrap foreignObject span {
  color: var(--color-text) !important;
}
.block-mermaid__svg text, .block-mermaid__svg tspan,
.architecture__mermaid-wrap text, .architecture__mermaid-wrap tspan { fill: var(--color-text) !important; }
/* edge-label chip background → page bg so the label reads on dark */
.block-mermaid__svg .edgeLabel rect, .block-mermaid__svg .edgeLabel .label-container,
.architecture__mermaid-wrap .edgeLabel rect, .architecture__mermaid-wrap .edgeLabel .label-container {
  fill: var(--color-bg) !important; background-color: var(--color-bg) !important;
}
.block-embed__title {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-heading);
  margin-bottom: var(--space-2);
}
.block-embed__caption {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-top: var(--space-3);
}
.block-embed__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* default; overridden by ratio modifiers below */
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.block-embed--ratio-4x3 .block-embed__frame { aspect-ratio: 4 / 3; }
.block-embed--ratio-1x1 .block-embed__frame { aspect-ratio: 1 / 1; }
.block-embed__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.block-embed__placeholder {
  padding: var(--space-10);
  text-align: center;
  color: var(--color-text-secondary);
  background: color-mix(in srgb, var(--color-accent) 4%, transparent);
  border: 1px dashed color-mix(in srgb, var(--color-accent) 30%, transparent);
  border-radius: var(--radius-md, 8px);
}

/* ═══════════════════════════════════════════════════════════
   Webform block — Design 041
   Themed via tokens only (works in light AND dark). The form is
   emitted server-side (no-JS-degraded) and re-rendered by the
   hydrators; the Turnstile widget mounts into .block-webform__turnstile.
   ═══════════════════════════════════════════════════════════ */
.block-webform {
  margin: var(--space-10) 0;
  text-align: center;
}
.block-webform__heading {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-heading);
  margin-bottom: var(--space-2);
}
.block-webform__intro {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-6);
}
.block-webform__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 32rem;
  margin-inline: auto;
  text-align: left;
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.05);
}
.block-webform__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.block-webform__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.block-webform__req { color: var(--color-accent); }
.block-webform__input,
.block-webform__textarea {
  font: inherit;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  padding: 0.6rem 0.75rem;
  width: 100%;
}
.block-webform__textarea { resize: vertical; min-height: 6rem; }
.block-webform__input:focus,
.block-webform__textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-ring, rgba(99,102,241,0.18));
}
.block-webform__input::placeholder,
.block-webform__textarea::placeholder { color: var(--color-text-muted); }
/* Honeypot — kept in the layout flow but hidden from humans + AT. */
.block-webform__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}
.block-webform__turnstile { min-height: 0; }
.block-webform__turnstile:not(:empty) { margin: var(--space-1) 0; }
.block-webform__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm, 6px);
  padding: var(--space-3) var(--space-4);
}
.block-webform__status {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  min-height: 1.2em;
}
.block-webform__status--error { color: var(--color-red, #ef4444); }
.block-webform__submit {
  align-self: stretch;
  margin-top: var(--space-2);
  font: inherit;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  color: var(--color-text-on-accent, #fff);
  background: var(--color-accent);
  border: 0;
  border-radius: var(--radius-sm, 6px);
  padding: 0.7rem 1.4rem;
}
.block-webform__submit:hover { background: var(--color-accent-hover); }
.block-webform__submit[data-busy] { opacity: 0.6; cursor: default; }
.block-webform__success {
  max-width: 32rem;
  margin-inline: auto;
  padding: var(--space-8);
  text-align: center;
  font-size: var(--text-base);
  color: var(--color-text);
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  border-radius: var(--radius-md, 8px);
}

/* Tighter spacing on small screens */
@media (max-width: 768px) {
  [data-block].block-mermaid,
  [data-block].block-text,
  [data-block].block-image,
  [data-block].block-video,
  [data-block].block-row {
    margin: var(--space-8) 0;
  }
  .block-mermaid__title { font-size: 1.125rem; }
}

/* ═══════════════════════════════════════════════════════════
   Item-list block skins — Design 012
   Generated by the generic item renderer in hydrator.js.
   Selectors mirror the existing .product-card / .experience__block
   et al. styles exactly; only the class names change.
   ═══════════════════════════════════════════════════════════ */

/* ── Product card ──────────────────────────────────────────── */
.item-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition:
    box-shadow var(--ease),
    border-color var(--ease),
    transform var(--ease);
}

.item-card:hover {
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  transform: translateY(-2px);
}

.item-card[data-status="coming-soon"] {
  opacity: 0.6;
  border-style: dashed;
}

.item-card[data-status="coming-soon"]:hover {
  opacity: 0.8;
  transform: none;
  box-shadow: none;
}

.item-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.item-card__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.item-card__badge {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  text-transform: uppercase;
}

.item-card__badge--live {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
}

.item-card__badge--soon {
  background: var(--color-surface-hover);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.item-card__name {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-2);
}

.item-card__description {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.7;
  flex: 1;
  margin-bottom: var(--space-6);
}

.item-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
  transition: gap var(--ease), color var(--ease);
  margin-top: auto;
}

.item-card__link:hover {
  gap: var(--space-2);
}

.item-card__link--muted {
  color: var(--color-text-muted);
  cursor: default;
}

.item-card__link--muted:hover {
  gap: var(--space-1);
  color: var(--color-text-muted);
}

/* ── Experience stat ───────────────────────────────────────── */
.item-stat {
  text-align: center;
  padding: var(--space-10) var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.item-stat__icon {
  display: flex;
  justify-content: center;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
  opacity: 0.8;
}

.item-stat__stat {
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: var(--space-2);
  line-height: 1;
}

.item-stat__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.55;
}

/* ── Pillar (ai-native) ────────────────────────────────────── */
.item-pillar {
  padding: var(--space-8) var(--space-7, 1.75rem);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: box-shadow var(--ease), border-color var(--ease);
}

.item-pillar:hover {
  box-shadow: var(--shadow-sm);
  border-color: color-mix(in srgb, var(--color-accent) 22%, transparent);
}

.item-pillar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  margin-bottom: var(--space-5);
}

.item-pillar__title {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-heading);
  margin-bottom: var(--space-3);
}

.item-pillar__text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.75;
}

/* ── Step (how-we-build) ───────────────────────────────────── */
.item-step {
  padding: var(--space-8) var(--space-7);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: box-shadow var(--ease), border-color var(--ease), transform var(--ease);
}

.item-step:hover {
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  transform: translateY(-2px);
}

.item-step__number {
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
  line-height: 1;
}

.item-step__title {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-heading);
  margin-bottom: var(--space-2);
}

.item-step__text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.75;
}

/* ── Hero chip / CTA (future hero section items) ───────────── */
.item-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
}

.item-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background var(--ease), transform var(--ease);
}

.item-cta--primary {
  background: var(--color-accent);
  color: var(--color-bg);
}

.item-cta--primary:hover {
  background: var(--color-accent-hover, #4338ca);
  transform: translateY(-1px);
}

.item-cta--secondary {
  background: transparent;
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
}

.item-cta--secondary:hover {
  background: var(--color-accent-subtle);
}

/* ── Pricing block (Design 116/117) — editable plan cards; token-only ─────────── */
.pricing.section .container { max-width: 68rem; }
.pr-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); padding: 1.5rem 0 1rem; align-items: stretch; }
.pr-card { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: 16px; padding: 1.5rem; background: var(--color-surface); }
.pr-card--featured { border-color: var(--color-accent); box-shadow: 0 10px 40px rgba(99,102,241,.12); position: relative; }
.pr-badge { position: absolute; top: -.7rem; left: 1.5rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-on-accent); background: var(--color-accent); padding: .25rem .6rem; border-radius: 999px; }
.pr-plan { font-size: 1.125rem; font-weight: 700; color: var(--color-text); margin: 0 0 .25rem; }
.pr-price { font-size: 2rem; font-weight: 700; color: var(--color-heading); margin: .25rem 0 .1rem; }
.pr-price span { font-size: .9rem; font-weight: 500; color: var(--color-text-muted); }
.pr-annual { font-size: .8rem; color: var(--color-text-muted); margin: 0 0 .25rem; }
.pr-tag { font-size: .9rem; color: var(--color-text-muted); margin: 0 0 1rem; min-height: 2.6em; }
.pr-cta { margin: .25rem 0 1.25rem; }
.pr-cta .btn { width: 100%; text-align: center; }
.pr-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.pr-feats li { font-size: .9rem; line-height: 1.45; color: var(--color-text); padding-left: 1.5rem; position: relative; }
.pr-feats li::before { content: "✓"; position: absolute; left: 0; color: var(--color-accent); font-weight: 700; }
.pr-feats li.pr-muted { color: var(--color-text-muted); }
.pr-feats li.pr-muted::before { content: "+"; color: var(--color-text-muted); }
.pr-note { font-size: .85rem; color: var(--color-text-muted); text-align: center; max-width: 42rem; margin: 1.5rem auto 0; }