:root {
  --font-heading: 'Sora', sans-serif;
  --font-body: 'Inter', sans-serif;
  --color-bg: #0f182b;
  --color-surface: #1e293b;
  --color-surface-elevated: #1c2739;
  --color-text: #f8fafc;
  --color-surface-text: #f8fafc;
  --color-safe-on-surface: #f8fafc;
  --color-text-muted: #c7cbd0;
  --color-safe-muted: #c7cbd0;
  --color-border: #36425e;
  --color-primary: #8079d1;
  --color-accent: #a085c9;
  --color-link: #f8fafc;
  --color-link-hover: #f8fafc;
  --color-nav-link: #f8fafc;
  --color-safe-outline: #f8fafc;
  --color-safe-on-primary: #000000;
  --color-safe-on-accent: #000000;
  --color-on-primary: #000000;
  --color-on-accent: #000000;
  --color-on-hero: #000000;
  --color-on-hero-strong: #000000;
  --hero-solid-bg: #907fcd;
  --hero-overlay: linear-gradient(180deg, rgba(248, 250, 252, 0.22), rgba(248, 250, 252, 0.1));
  --gradient-hero: linear-gradient(135deg, #8079d1 0%, #a085c9 100%);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --space-xs: 0.45rem;
  --space-sm: 0.8rem;
  --space-md: 1.2rem;
  --space-lg: 1.7rem;
  --space-xl: 2.8rem;
  --container-width: 1200px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
}

body.is-rtl {
  direction: rtl;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--color-primary);
  color: var(--color-safe-on-primary);
  border-radius: 6px;
  z-index: 1000;
  text-decoration: none;
}

.skip-link:focus {
  left: 1rem;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Header */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-md) 0;
  position: relative;
}

.top-bar {
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent 22%);
  font-size: 0.78rem;
  color: var(--color-surface-text);
}

.top-bar-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0.35rem var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.top-bar-left,
.top-bar-right {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.top-bar a {
  color: var(--color-surface-text);
  text-decoration: none;
}

.top-bar .btn {
  color: var(--color-surface-text);
  border-color: color-mix(in srgb, var(--color-border) 52%, var(--color-surface-text) 48%);
}

.top-bar a:hover {
  color: var(--color-surface-text);
  text-decoration: underline;
}







.top-bar-variant-7 {
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 24%, var(--color-surface) 76%), color-mix(in srgb, var(--color-accent) 20%, var(--color-surface) 80%));
}













.site-header.header-sticky-0,
.site-header.header-sticky-1,
.site-header.header-sticky-2,
.site-header.header-sticky-3,
.site-header.header-sticky-4,
.site-header.header-sticky-5,
.site-header.header-sticky-6,
.site-header.header-sticky-7,
.site-header.header-sticky-8,
.site-header.header-sticky-9,
.site-header.header-sticky-10,
.site-header.header-sticky-11,
.site-header.header-sticky-12,
.site-header.header-sticky-13,
.site-header.header-sticky-14,
.site-header.header-sticky-15,
.site-header.header-sticky-16,
.site-header.header-sticky-17,
.site-header.header-sticky-18,
.site-header.header-sticky-19 {
  position: sticky;
  top: 0;
  z-index: 70;
}

.site-header.header-sticky-0 {
  backdrop-filter: blur(8px);
}

.site-header.header-sticky-1 {
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
}

.site-header.header-sticky-2 {
  border-bottom-width: 2px;
}

.site-header.header-sticky-3 {
  background: color-mix(in srgb, var(--color-surface) 92%, #ffffff 8%);
}

.site-header.header-sticky-4 {
  border-bottom-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border) 60%);
}

.site-header.header-sticky-5 {
  backdrop-filter: saturate(120%) blur(5px);
}

.site-header.header-sticky-6 {
  border-bottom-style: dashed;
}

.site-header.header-sticky-7 {
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.09);
  border-bottom-width: 2px;
}

.site-header.header-sticky-8 {
  background: color-mix(in srgb, var(--color-surface) 82%, var(--color-bg) 18%);
}

.site-header.header-sticky-9 {
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--color-primary) 36%, transparent 64%);
}

.site-header.header-sticky-10 {
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  border-bottom-style: dotted;
}

.site-header.header-sticky-11 {
  backdrop-filter: blur(6px) saturate(120%);
}

.site-header.header-sticky-12 {
  border-bottom-width: 3px;
}

.site-header.header-sticky-13 {
  background: color-mix(in srgb, var(--color-surface) 76%, var(--color-bg) 24%);
}

.site-header.header-sticky-14 {
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--color-accent) 34%, transparent 66%);
}

.site-header.header-sticky-15 {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
  border-bottom-width: 2px;
}

.site-header.header-sticky-16 {
  border-bottom-style: dashed;
  background: color-mix(in srgb, var(--color-surface) 88%, var(--color-bg) 12%);
}

.site-header.header-sticky-17 {
  backdrop-filter: blur(10px) saturate(118%);
  border-bottom-color: color-mix(in srgb, var(--color-primary) 48%, var(--color-border) 52%);
}

.site-header.header-sticky-18 {
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--color-primary) 42%, transparent 58%);
}

.site-header.header-sticky-19 {
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
  background: color-mix(in srgb, var(--color-surface) 80%, var(--color-bg) 20%);
}

.site-header.header-sticky-none {
  position: relative;
}
























body.header-style-15 .site-header .nav-container {
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--color-border) 66%, transparent 34%);
  padding: 0.45rem 0.65rem;
}
























.nav-container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}

.nav-brand {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.nav-links a {
  color: var(--color-text);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  transition: background 0.2s, color 0.2s;
  opacity: 0.92;
}

.nav-links a:hover {
  background: color-mix(in srgb, var(--color-border) 86%, transparent 14%);
  color: var(--color-text);
  opacity: 1;
}

.nav-links a.is-active {
  color: var(--color-text);
  font-weight: 600;
  opacity: 1;
}

.nav-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}

.nav-tagline {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.nav-meta {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.header--stacked .nav-container {
  flex-direction: column;
  align-items: flex-start;
}

.header--stacked .nav-links {
  padding-top: var(--space-sm);
}

.header--centered .nav-container {
  flex-direction: column;
  align-items: center;
}

.header--centered .nav-brand {
  margin-bottom: var(--space-sm);
}

.header--centered .nav-links {
  justify-content: center;
}

.header--minimal .nav-links a {
  padding: 0.35rem 0.65rem;
  font-size: 0.95rem;
}

.header--glass {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(14px);
}

.header--overlay {
  background: color-mix(in srgb, var(--color-surface) 88%, transparent 12%);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent 28%);
  backdrop-filter: blur(8px) saturate(112%);
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10;
}

.header--overlay + .main-content {
  padding-top: calc(var(--space-xl) + 70px);
}

.header--overlay .nav-brand,
.header--overlay .nav-links a,
.header--overlay .nav-meta {
  color: var(--color-text);
}

.header--overlay .nav-links a:hover {
  background: rgba(255,255,255,0.15);
}

.header-template-classic-center .nav-links {
  justify-content: center;
  gap: 0.4rem;
}

.header-template-double-row-nav .nav-container {
  align-items: stretch;
  gap: 0.35rem;
}

.header-template-double-row-nav .nav-links {
  border-top: 1px solid var(--color-border);
  padding-top: 0.45rem;
  justify-content: flex-start;
}

.header-template-centered-nav .nav-container {
  flex-direction: column;
  align-items: center;
}

.header-template-centered-nav .nav-links {
  justify-content: center;
}

.header-template-minimal .nav-brand {
  font-size: 1.3rem;
  letter-spacing: 0.01em;
}

.header-template-minimal .nav-links a {
  padding: 0.32rem 0.58rem;
  font-size: 0.9rem;
}

.header-template-glass-nav {
  background: color-mix(in srgb, var(--color-surface) 70%, transparent 30%);
  backdrop-filter: blur(12px);
}

.header-template-glass-nav .nav-container {
  border: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent 35%);
  border-radius: var(--radius-lg);
  padding: 0.45rem 0.65rem;
}

.header-template-transparent-nav {
  background: transparent;
  border-bottom-color: color-mix(in srgb, var(--color-border) 50%, transparent 50%);
}

.header-template-split-nav .nav-links a {
  border-right: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent 45%);
  border-radius: 0;
  padding-inline: 0.85rem;
}

.header-template-split-nav .nav-links a:last-child {
  border-right: none;
}

.header-template-pill-nav .nav-links a {
  border: 1px solid color-mix(in srgb, var(--color-border) 74%, transparent 26%);
  border-radius: 999px;
  padding-inline: 0.78rem;
}

.header-template-pill-nav .nav-links a.is-active {
  border-color: color-mix(in srgb, var(--color-primary) 68%, transparent 32%);
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface) 88%);
}

.header-template-underline-nav .nav-links a {
  border-radius: 0;
  border-bottom: 2px solid transparent;
  padding-inline: 0.7rem;
}

.header-template-underline-nav .nav-links a:hover,
.header-template-underline-nav .nav-links a.is-active {
  border-bottom-color: color-mix(in srgb, var(--color-primary) 82%, transparent 18%);
  color: var(--color-text);
}

.header-template-compact-right .nav-container {
  justify-content: flex-start;
}

.header-template-compact-right .nav-links {
  margin-left: auto;
}








.header--newsroom .nav-container {
  align-items: stretch;
}

.newsroom-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.newsroom-date {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

.header--forum .nav-container,
.header--store .nav-container {
  gap: var(--space-sm);
}

.forum-brand-wrap {
  display: grid;
  gap: 0.2rem;
}

.forum-tagline {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* Main Content */
.main-content {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-sm);
  min-height: calc(100vh - 200px);
  overflow-x: clip;
}

.content-shell {
  display: grid;
  gap: var(--space-lg);
  align-items: start;
}

.content-shell > * {
  /* Ensure grid children can shrink; prevents side rails from forcing primary column too narrow. */
  min-width: 0;
}

.content-shell-default {
  grid-template-columns: minmax(0, 1fr);
}

.content-shell-news {
  /* Slightly narrower rails for news to keep primary content readable on desktop. */
  grid-template-columns: minmax(120px, 170px) minmax(0, 1fr) minmax(140px, 190px);
}

.content-shell-news-left {
  grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
}

.content-shell-news-right {
  grid-template-columns: minmax(0, 1fr) minmax(190px, 250px);
}

.content-shell-blog {
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) minmax(160px, 210px);
}

.content-shell-forum {
  grid-template-columns: minmax(160px, 210px) minmax(0, 1fr) minmax(150px, 200px);
}

.content-shell-forum-left {
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
}

.content-shell-forum-right {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
}

.content-shell-ecommerce {
  grid-template-columns: minmax(170px, 220px) minmax(0, 1fr) minmax(150px, 200px);
}

.content-shell-ecommerce-left {
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
}

.content-shell-ecommerce-right {
  grid-template-columns: minmax(0, 1fr) minmax(200px, 270px);
}

.content-shell-saas {
  grid-template-columns: minmax(160px, 210px) minmax(0, 1fr) minmax(160px, 210px);
}

.content-shell-saas-left {
  grid-template-columns: minmax(200px, 270px) minmax(0, 1fr);
}

.content-shell-saas-right {
  grid-template-columns: minmax(0, 1fr) minmax(200px, 270px);
}

.content-shell-restaurant {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 250px);
}

.content-shell-restaurant-dual {
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) minmax(180px, 250px);
}

.layout-primary {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.layout-primary > .block:last-child {
  margin-bottom: 0;
}

.layout-rail {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  color: var(--color-safe-on-surface);
  position: static;
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}











body.sidebar-variant-10 .layout-rail {
  border-right: 4px solid color-mix(in srgb, var(--color-accent) 56%, transparent 44%);
}










.layout-rail h3 {
  font-size: 1rem;
  margin: 0;
}

.rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.rail-list li {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.rail-list a {
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.rail-list a:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.shell-leadbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.rail-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  text-decoration: none;
  color: var(--color-text-muted);
  font-size: 0.86rem;
}

.rail-pill:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.main--landing .content-shell-default,
.main--agency .content-shell-default,
.main--corporate .content-shell-default,
.main--portfolio .content-shell-default {
  grid-template-columns: minmax(0, 1fr);
}

/* Surface and density DNA */
body.surface-paper,
body.surface-paper .main-content {
  background-image: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.01) 100%);
}

.surface-paper .section,
.surface-paper .card {
  box-shadow: none;
  border-width: 1px;
}

.surface-frost .section,
.surface-frost .card,
.surface-frost .layout-rail {
  backdrop-filter: blur(3px);
  background: color-mix(in srgb, var(--color-surface) 84%, #ffffff 16%);
  border-width: 1px;
}

.surface-contrast .section,
.surface-contrast .card {
  border-width: 2px;
}

.surface-contrast .btn.btn-primary {
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.surface-depth .hero {
  box-shadow: 0 24px 48px rgba(2, 6, 23, 0.24);
}

.surface-depth .section,
.surface-depth .card {
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
}

.density-tight .block {
  margin-bottom: calc(var(--space-xl) * 0.72);
}

.density-tight .section {
  padding: calc(var(--space-md) * 0.82);
}

.density-tight .hero {
  padding-top: calc(var(--space-xl) * 0.9);
  padding-bottom: calc(var(--space-xl) * 0.9);
}

.density-relaxed .block {
  margin-bottom: calc(var(--space-xl) * 1.15);
}

.density-relaxed .section {
  padding: calc(var(--space-md) * 1.2);
}

.density-relaxed .hero {
  padding-top: calc(var(--space-xl) * 1.2);
  padding-bottom: calc(var(--space-xl) * 1.2);
}

/* Slot-based visual layer */
body.look-gridline .section,
body.look-gridline .card,
body.look-gridline .layout-rail {
  border-radius: 6px;
  box-shadow: none;
}

body.look-gridline .btn {
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.82rem;
}

body.look-softglass .hero {
  border-radius: 24px;
  box-shadow: 0 22px 44px rgba(15, 23, 42, 0.2);
}

body.look-softglass .section,
body.look-softglass .card,
body.look-softglass .layout-rail {
  border-radius: 18px;
  backdrop-filter: blur(4px);
  background: color-mix(in srgb, var(--color-surface) 86%, #ffffff 14%);
}

body.look-contrast .hero {
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.25);
}

body.look-contrast .section,
body.look-contrast .card {
  border-width: 2px;
}

body.look-contrast .btn.btn-primary {
  font-weight: 700;
}

body.look-editorial .hero {
  background: color-mix(in srgb, var(--color-surface) 88%, var(--color-bg) 12%);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: none;
}

body.look-editorial {
  --color-on-hero: var(--color-safe-on-surface);
  --color-on-hero-strong: var(--color-safe-on-surface);
}

body.look-editorial .hero .btn-outline {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

body.look-editorial h1,
body.look-editorial h2,
body.look-editorial h3 {
  letter-spacing: -0.015em;
  line-height: 1.2;
}

body.look-editorial .nav-links a {
  font-size: 0.88rem;
}

body.look-brutalist .hero,
body.look-brutalist .section,
body.look-brutalist .card,
body.look-brutalist .layout-rail {
  border-radius: 0;
  box-shadow: none;
  border-width: 2px;
}

body.look-brutalist .btn {
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

body.look-minimal-ink .hero {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: none;
}

body.look-minimal-ink {
  --color-on-hero: var(--color-safe-on-surface);
  --color-on-hero-strong: var(--color-safe-on-surface);
}

body.look-minimal-ink .section,
body.look-minimal-ink .card,
body.look-minimal-ink .layout-rail {
  background: transparent;
  border-radius: 4px;
  box-shadow: none;
}

body.look-minimal-ink .btn.btn-primary {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

body.look-data-grid .hero {
  border-radius: 10px;
}

body.look-data-grid .section,
body.look-data-grid .card,
body.look-data-grid .layout-rail {
  border-radius: 10px;
  position: relative;
}

body.look-data-grid .section::before,
body.look-data-grid .card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image: linear-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px);
  background-size: 14px 14px;
}

body.look-neo-paper .hero,
body.look-neo-paper .section,
body.look-neo-paper .card,
body.look-neo-paper .layout-rail {
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent 30%);
  box-shadow: 12px 12px 24px rgba(15, 23, 42, 0.08), -8px -8px 18px rgba(255, 255, 255, 0.55);
}

body.look-neo-paper .btn {
  border-radius: 12px;
}

body.look-signal-lines .hero,
body.look-signal-lines .section,
body.look-signal-lines .card,
body.look-signal-lines .layout-rail {
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent 28%);
  box-shadow: none;
}

body.look-signal-lines .section {
  background-image: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--color-border) 11%, transparent 89%) 100%);
}

body.look-signal-lines .btn.btn-primary {
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

body.look-noir-panel {
  --color-bg: #0f1423;
  --color-surface: #111a2f;
  --color-surface-elevated: #18233d;
  --color-text: #dbe7ff;
  --color-surface-text: #e8edf7;
  --color-text-muted: #c8d4ef;
  --color-safe-on-surface: #e8edf7;
  --color-safe-muted: #c8d4ef;
  --color-safe-outline: #c6dcff;
  --color-border: #2a3b63;
  --color-nav-link: #cfdcf8;
  --color-link: #9fd7ff;
  --color-link-hover: #cbe8ff;
  --color-on-primary: #0a1020;
  --color-on-hero: #f1f6ff;
  --color-on-hero-strong: #ffffff;
  background: #0f1423;
  color: #e5ecff;
}

body.look-noir-panel .site-header,
body.look-noir-panel .site-footer {
  background: #0a1020;
  border-color: #24314f;
}

body.look-noir-panel .hero,
body.look-noir-panel .section,
body.look-noir-panel .card,
body.look-noir-panel .layout-rail {
  background: #111a2f;
  color: #e5ecff;
  border-color: #2a3b63;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}

body.look-noir-panel a {
  color: #a5d8ff;
}

body.look-noir-panel .text-muted,
body.look-noir-panel p {
  color: #c8d4ef;
}

body.look-noir-panel .btn.btn-primary {
  background: #22d3ee;
  border-color: #22d3ee;
  color: #0a1020;
}

body.look-circuit-sheen .hero,
body.look-circuit-sheen .section,
body.look-circuit-sheen .card,
body.look-circuit-sheen .layout-rail {
  border-radius: 12px;
  border-top: 4px solid color-mix(in srgb, var(--color-accent) 72%, white 28%);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.1);
}

body.look-circuit-sheen .nav-links a,
body.look-circuit-sheen .shell-leadbar a {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

body.look-circuit-sheen .btn {
  border-radius: 10px;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--color-border) 65%, transparent 35%);
}

body.look-sunlit-canvas {
  --color-on-hero: var(--color-safe-on-surface);
  --color-on-hero-strong: var(--color-safe-on-surface);
  background:
    radial-gradient(circle at 5% 0%, color-mix(in srgb, var(--color-accent) 10%, transparent 90%) 0%, transparent 32%),
    radial-gradient(circle at 95% 12%, color-mix(in srgb, var(--color-primary) 12%, transparent 88%) 0%, transparent 28%),
    var(--color-bg);
}

body.look-sunlit-canvas .hero,
body.look-sunlit-canvas .section,
body.look-sunlit-canvas .card,
body.look-sunlit-canvas .layout-rail {
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent 40%);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.09);
}

body.look-sunlit-canvas .hero,
body.look-sunlit-canvas .hero h1,
body.look-sunlit-canvas .hero p,
body.look-sunlit-canvas .hero li,
body.look-sunlit-canvas .hero span {
  color: var(--color-text);
}

body.look-sunlit-canvas h1,
body.look-sunlit-canvas h2 {
  letter-spacing: -0.02em;
}

body.look-classic-print {
  --color-on-hero: var(--color-safe-on-surface);
  --color-on-hero-strong: var(--color-safe-on-surface);
  background: #f7f4ec;
}

body.look-classic-print .hero,
body.look-classic-print .section,
body.look-classic-print .card,
body.look-classic-print .layout-rail {
  border-radius: 3px;
  border: 1px solid #c9c1ae;
  box-shadow: none;
}

body.look-classic-print .hero {
  background: #f2ede2;
  color: var(--color-text);
}

body.look-classic-print .hero h1,
body.look-classic-print .hero p,
body.look-classic-print .hero li,
body.look-classic-print .hero span,
body.look-classic-print .hero a:not(.btn) {
  color: var(--color-text);
}

body.look-classic-print .btn {
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  font-size: 0.78rem;
}

body.look-classic-print h1,
body.look-classic-print h2,
body.look-classic-print h3 {
  line-height: 1.15;
}

body.look-neon-mesh {
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--color-primary) 18%, transparent 82%) 0%, transparent 38%),
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--color-accent) 16%, transparent 84%) 0%, transparent 34%),
    var(--color-bg);
}

body.look-neon-mesh .hero,
body.look-neon-mesh .section,
body.look-neon-mesh .card,
body.look-neon-mesh .layout-rail {
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border) 72%);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
}

body.look-neon-mesh .btn.btn-primary {
  border-radius: 999px;
}

body.look-editorial-air .hero {
  background: color-mix(in srgb, var(--color-surface) 76%, #ffffff 24%);
  box-shadow: none;
  border-radius: 10px;
  color: var(--color-text);
}

body.look-editorial-air {
  --color-on-hero: var(--color-safe-on-surface);
  --color-on-hero-strong: var(--color-safe-on-surface);
}

body.look-editorial-air .section,
body.look-editorial-air .card,
body.look-editorial-air .layout-rail {
  border-radius: 8px;
  box-shadow: none;
  border-color: color-mix(in srgb, var(--color-border) 82%, transparent 18%);
}

body.look-editorial-air h1,
body.look-editorial-air h2,
body.look-editorial-air h3 {
  font-family: var(--font-heading);
  letter-spacing: -0.018em;
}

body.look-product-glass .hero,
body.look-product-glass .section,
body.look-product-glass .card,
body.look-product-glass .layout-rail {
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--color-border) 58%, transparent 42%);
  background: color-mix(in srgb, var(--color-surface) 72%, #ffffff 28%);
  backdrop-filter: blur(8px) saturate(115%);
}

body.look-product-glass {
  --color-on-hero: var(--color-safe-on-surface);
  --color-on-hero-strong: var(--color-safe-on-surface);
}

body.look-product-glass .hero,
body.look-product-glass .hero h1,
body.look-product-glass .hero p,
body.look-product-glass .hero li {
  color: var(--color-text);
}

body.look-product-glass .btn {
  border-radius: 11px;
}

body.look-quiet-lux {
  background: color-mix(in srgb, var(--color-bg) 88%, #ffffff 12%);
}

body.look-quiet-lux .hero,
body.look-quiet-lux .section,
body.look-quiet-lux .card,
body.look-quiet-lux .layout-rail {
  border-radius: 14px;
  box-shadow: none;
  border: 1px solid color-mix(in srgb, var(--color-border) 84%, transparent 16%);
}

body.look-quiet-lux .btn.btn-primary {
  border-radius: 999px;
  letter-spacing: 0.015em;
}

body.look-tech-matrix .hero,
body.look-tech-matrix .section,
body.look-tech-matrix .card,
body.look-tech-matrix .layout-rail {
  border-radius: 10px;
  border-width: 2px;
  position: relative;
}

body.look-tech-matrix .section::before,
body.look-tech-matrix .card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--color-border) 12%, transparent 88%) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--color-border) 12%, transparent 88%) 1px, transparent 1px);
  background-size: 16px 16px;
}

body.look-tech-matrix .btn.btn-primary {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

body.modern-kit-0 .hero,
body.modern-kit-0 .section,
body.modern-kit-0 .card {
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

body.modern-kit-0 .btn {
  border-radius: 12px;
}

body.modern-kit-1 .hero,
body.modern-kit-1 .section,
body.modern-kit-1 .card {
  backdrop-filter: blur(14px) saturate(118%);
  background: color-mix(in srgb, var(--color-surface) 86%, transparent 14%);
  border-width: 1px;
}

body.modern-kit-1 .btn.btn-primary {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-primary) 32%, transparent 68%);
}

body.modern-kit-2 .hero,
body.modern-kit-2 .section,
body.modern-kit-2 .card,
body.modern-kit-2 .layout-rail {
  border-radius: 4px;
  border-width: 2px;
  box-shadow: none;
}

body.modern-kit-2 .btn {
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

body.modern-kit-3 .hero {
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 88%, transparent 12%), color-mix(in srgb, var(--color-accent) 84%, transparent 16%));
}

body.modern-kit-3 .section,
body.modern-kit-3 .card {
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--color-border) 62%, transparent 38%);
}

body.modern-kit-3 .btn.btn-outline {
  border-style: dashed;
}

body.modern-kit-4 h1,
body.modern-kit-4 h2,
body.modern-kit-4 h3 {
  font-family: 'Merriweather', serif;
  letter-spacing: -0.015em;
}

body.modern-kit-4 .hero,
body.modern-kit-4 .section,
body.modern-kit-4 .card {
  border-radius: 8px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-border) 70%, transparent 30%);
}

body.modern-kit-5 {
  --color-bg: #0b1220;
  --color-surface: #141c2f;
  --color-surface-elevated: #1a243a;
  --color-text: #e2e8f0;
  --color-text-muted: #94a3b8;
  --color-safe-on-surface: #e2e8f0;
  --color-safe-muted: #a9b7cc;
  --color-safe-outline: #c7d4eb;
  --color-border: #243045;
  --color-link: var(--color-safe-outline);
  --color-link-hover: var(--color-safe-on-surface);
  --color-nav-link: var(--color-safe-on-surface);
  --color-on-hero: var(--color-safe-on-surface);
  --color-on-hero-strong: var(--color-safe-on-surface);
}

body.modern-kit-5 .site-header,
body.modern-kit-5 .site-footer {
  background: color-mix(in srgb, var(--color-surface) 94%, #020617 6%);
}

body.modern-kit-5 .btn.btn-primary {
  box-shadow: 0 10px 26px color-mix(in srgb, var(--color-primary) 34%, transparent 66%);
}

body.modern-kit-6 .hero,
body.modern-kit-6 .section,
body.modern-kit-6 .card {
  border-radius: 22px;
  border-width: 1px;
}

body.modern-kit-6 .grid > .card {
  padding: calc(var(--space-md) + 2px);
}

body.modern-kit-6 .btn {
  border-radius: 999px;
}

body.modern-kit-7 .hero,
body.modern-kit-7 .section,
body.modern-kit-7 .card {
  border: 1px solid color-mix(in srgb, var(--color-primary) 46%, transparent 54%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 26%, transparent 74%);
}

body.modern-kit-7 .btn.btn-primary {
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 52%, transparent 48%);
}

body.modern-kit-8 .hero,
body.modern-kit-8 .section,
body.modern-kit-8 .card,
body.modern-kit-8 .layout-rail {
  border: none;
  box-shadow: none;
}

body.modern-kit-8 .hero {
  background: color-mix(in srgb, var(--color-primary) 86%, var(--color-accent) 14%);
}

body.modern-kit-8 .section + .section {
  border-top: 1px solid color-mix(in srgb, var(--color-border) 66%, transparent 34%);
}

body.modern-kit-9 .hero,
body.modern-kit-9 .section,
body.modern-kit-9 .card {
  border-width: 1px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

body.modern-kit-9 .section::before,
body.modern-kit-9 .card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--color-border) 10%, transparent 90%) 1px, transparent 1px);
  background-size: 14px 14px;
}

body.modern-kit-10 {
  --color-bg: #fffaf4;
  --color-surface: #fffefb;
  --color-border: #f1ddc8;
}

body.modern-kit-10 .hero,
body.modern-kit-10 .section,
body.modern-kit-10 .card {
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--color-border) 82%, transparent 18%);
  box-shadow: 0 10px 28px rgba(120, 60, 20, 0.08);
}

body.modern-kit-10 .btn {
  border-radius: 999px;
}

body.modern-kit-11 .hero,
body.modern-kit-11 .section,
body.modern-kit-11 .card,
body.modern-kit-11 .layout-rail {
  border-radius: 2px;
  border-width: 1px;
  box-shadow: none;
}

body.modern-kit-11 .btn {
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body.modern-kit-12 {
  --color-bg: #060b14;
  --color-surface: #0f1828;
  --color-surface-elevated: #17253a;
  --color-text: #e6eefc;
  --color-text-muted: #9fb4d8;
  --color-safe-on-surface: #e6eefc;
  --color-safe-muted: #b3c3de;
  --color-safe-outline: #d0def7;
  --color-border: #28364f;
  --color-link: var(--color-safe-outline);
  --color-link-hover: var(--color-safe-on-surface);
  --color-nav-link: var(--color-safe-on-surface);
  --color-on-hero: var(--color-safe-on-surface);
  --color-on-hero-strong: var(--color-safe-on-surface);
}

body.modern-kit-12 .hero {
  background-image: linear-gradient(128deg, color-mix(in srgb, var(--color-primary) 68%, #020617 32%), color-mix(in srgb, var(--color-accent) 42%, #020617 58%));
}

body.modern-kit-12 .section,
body.modern-kit-12 .card {
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent 28%);
  box-shadow: 0 16px 32px rgba(2, 6, 23, 0.34);
}

body.modern-kit-13 .hero,
body.modern-kit-13 .section,
body.modern-kit-13 .card {
  border-radius: 12px;
  border-width: 1px;
  transform: skewX(-1.1deg);
}

body.modern-kit-13 .section > *,
body.modern-kit-13 .card > * {
  transform: skewX(1.1deg);
}

body.modern-kit-13 .btn {
  border-radius: 10px;
}

body.modern-kit-14 {
  --color-border: color-mix(in srgb, var(--color-text) 16%, transparent 84%);
}

body.modern-kit-14 .hero,
body.modern-kit-14 .section,
body.modern-kit-14 .card {
  border-width: 2px;
  border-radius: 8px;
  box-shadow: none;
}

body.modern-kit-14 .btn.btn-primary {
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

body.modern-kit-15 h1,
body.modern-kit-15 h2,
body.modern-kit-15 h3 {
  font-family: 'Playfair Display', 'Merriweather', serif;
  letter-spacing: -0.01em;
}

body.modern-kit-15 .hero {
  border-radius: 24px 24px 8px 8px;
}

body.modern-kit-15 .section,
body.modern-kit-15 .card {
  border-radius: 8px;
  border-style: solid;
  border-width: 1px 1px 3px;
}

body.modern-kit-16 .hero,
body.modern-kit-16 .section,
body.modern-kit-16 .card {
  border-radius: 28px;
  border-width: 1px;
  box-shadow: 0 14px 30px rgba(10, 20, 40, 0.09);
}

body.modern-kit-16 .btn {
  border-radius: 999px;
  padding-inline: calc(var(--space-md) + 6px);
}

body.modern-kit-16 .hero::after {
  content: '';
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  right: -40px;
  top: -50px;
  pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 36%, transparent 64%) 0%, transparent 66%);
}

body.modern-kit-17 .section,
body.modern-kit-17 .card {
  border-radius: 10px;
  border-style: dashed;
  border-width: 1px;
}

body.modern-kit-17 .hero {
  border-radius: 10px;
  border-style: solid;
  border-width: 1px;
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--color-border) 14%, transparent 86%) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--color-border) 14%, transparent 86%) 1px, transparent 1px);
  background-size: 18px 18px;
}

body.modern-kit-17 .btn.btn-outline {
  border-style: dashed;
}

body.modern-kit-18 {
  --color-bg: #0a1022;
  --color-surface: #121b34;
  --color-surface-elevated: #1a2746;
  --color-text: #e9f1ff;
  --color-text-muted: #a1b4d8;
  --color-safe-on-surface: #e9f1ff;
  --color-safe-muted: #b8c8e4;
  --color-safe-outline: #d5e4ff;
  --color-border: #2a3f69;
  --color-link: var(--color-safe-outline);
  --color-link-hover: var(--color-safe-on-surface);
  --color-nav-link: var(--color-safe-on-surface);
  --color-on-hero: var(--color-safe-on-surface);
  --color-on-hero-strong: var(--color-safe-on-surface);
}

body.modern-kit-18 .hero,
body.modern-kit-18 .section,
body.modern-kit-18 .card {
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 42%, transparent 58%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 24%, transparent 76%);
}

body.modern-kit-18 .btn.btn-primary {
  box-shadow: 0 0 18px color-mix(in srgb, var(--color-accent) 40%, transparent 60%);
}

body.modern-kit-19 {
  --space-lg: 2rem;
}

body.modern-kit-19 .hero,
body.modern-kit-19 .section,
body.modern-kit-19 .card {
  border-radius: 24px;
  border-width: 1px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

body.modern-kit-19 .grid {
  gap: calc(var(--space-md) + 6px);
}

body.modern-kit-19 .btn {
  border-radius: 14px;
}











body.type-rhythm-0 h1,
body.type-rhythm-0 h2,
body.type-rhythm-0 h3 {
  letter-spacing: -0.01em;
}

body.type-rhythm-1 h1,
body.type-rhythm-1 h2 {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

body.type-rhythm-1 h1 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
}

body.type-rhythm-2 h1 {
  font-size: clamp(2.3rem, 5.5vw, 3.8rem);
  letter-spacing: -0.03em;
}

body.type-rhythm-2 h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
}

body.type-rhythm-3 h1,
body.type-rhythm-3 h2,
body.type-rhythm-3 h3 {
  letter-spacing: 0.005em;
  line-height: 1.28;
}

body.type-rhythm-3 p {
  line-height: 1.8;
}

body.type-rhythm-4 h1,
body.type-rhythm-4 h2 {
  letter-spacing: -0.025em;
  line-height: 1.14;
}

body.type-rhythm-4 p {
  font-size: 1.02rem;
}

.header-slot-0 .nav-actions .btn {
  border-radius: 999px;
}

.header-slot-1 .nav-links a {
  border-bottom: 1px solid transparent;
}

.header-slot-1 .nav-links a:hover {
  border-color: var(--color-primary);
  background: transparent;
}

.header-slot-2 .nav-brand {
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.header-slot-3 .nav-links a {
  font-size: 0.86rem;
}

.header-slot-4 .nav-brand {
  font-size: 1.35rem;
}

.header-slot-4 .nav-actions .btn {
  letter-spacing: 0.02em;
}

.header-slot-5 .nav-links a {
  border: 1px solid transparent;
}

.header-slot-5 .nav-links a:hover {
  border-color: var(--color-border);
}

.header-slot-6 .nav-container {
  gap: calc(var(--space-sm) * 0.8);
}

.header-slot-6 .nav-links a {
  padding-inline: 0.55rem;
}

.header-slot-7 .nav-brand {
  font-weight: 800;
  letter-spacing: -0.01em;
}

.header-slot-7 .nav-actions .btn {
  border-radius: 10px;
}

.header-slot-8 .nav-links a {
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
}

.header-slot-9 .nav-actions .btn {
  min-height: 2.35rem;
  padding-inline: 1.05rem;
}

.header-slot-10 .nav-brand {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.header-slot-10 .nav-links a {
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent 30%);
}

.header-slot-11 .nav-links a {
  color: var(--color-text);
  font-weight: 600;
}

.header-slot-12 .nav-container {
  border: 1px solid color-mix(in srgb, var(--color-border) 64%, transparent 36%);
  border-radius: 12px;
  padding-block: 0.35rem;
}

.header-slot-13 .nav-brand {
  font-size: 1.65rem;
}

.header-slot-13 .nav-links a {
  font-size: 0.8rem;
  text-transform: uppercase;
}

.header-slot-14 .nav-links a {
  border-bottom: 2px solid transparent;
}

.header-slot-14 .nav-links a:hover,
.header-slot-14 .nav-links a.is-active {
  border-bottom-color: color-mix(in srgb, var(--color-accent) 65%, transparent 35%);
}

.header-slot-15 .nav-actions .btn {
  border-radius: 999px;
  min-height: 2.25rem;
}

.header-slot-16 .nav-container {
  gap: calc(var(--space-sm) * 0.65);
}

.header-slot-16 .nav-links a {
  padding-inline: 0.48rem;
}

.header-slot-17 .nav-brand {
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Rhythm layer */
body.rhythm-0 .hero {
  padding-top: calc(var(--space-xl) * 1.25);
  padding-bottom: calc(var(--space-xl) * 1.25);
}

body.rhythm-1 .grid {
  gap: calc(var(--space-lg) * 0.85);
}

body.rhythm-2 .card {
  padding: calc(var(--space-lg) * 0.85);
}

body.rhythm-3 .section--alt {
  border-style: dashed;
}

/* Blocks */
.block {
  margin-bottom: var(--space-xl);
}

.block h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.block p {
  color: var(--color-safe-muted);
}

/* Hero Section */
.hero {
  background-color: var(--hero-solid-bg);
  background-image: var(--gradient-hero);
  color: var(--color-on-hero);
  padding: calc(var(--space-xl) * 1.1) var(--space-lg);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-xl);
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  background: var(--hero-overlay);
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero--minimal::after,
.hero--overlay::after {
  display: none;
}

.hero h1 {
  font-size: 2.6rem;
  margin-bottom: 1rem;
  color: var(--color-on-hero-strong);
}

.hero p {
  font-size: 1.2rem;
  opacity: 1;
  color: var(--color-on-hero-strong);
}

.hero li,
.hero span,
.hero strong,
.hero a:not(.btn) {
  color: var(--color-on-hero-strong);
}

.hero--centered {
  text-align: center;
}

.hero--split-media-left,
.hero--split-media-right {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  text-align: left;
}

.hero--split-media-right {
  flex-direction: row-reverse;
}

.hero--vertical {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  text-align: left;
}

.hero--minimal {
  background: var(--color-surface);
  background-image: none;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.hero--minimal .btn-outline {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.hero--compact-banner {
  padding: calc(var(--space-xl) * 0.9) var(--space-lg);
}

.hero--kpi-strip {
  display: grid;
  gap: var(--space-lg);
}

.hero--kpi-strip .stats-row {
  margin-top: 0.35rem;
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent 30%);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.6rem;
}

.hero-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.hero--overlay {
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.hero--overlay .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15,23,42,0.7), rgba(15,23,42,0.35));
}

.hero--overlay .hero-content {
  position: relative;
  z-index: 1;
  max-width: 640px;
}

.hero-media--centered {
  margin-top: var(--space-lg);
  display: flex;
  justify-content: center;
}

.hero-media img {
  width: 100%;
  max-width: 520px;
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 30px rgba(0,0,0,0.2);
  display: block;
}

.hero--split-media-left .hero-media,
.hero--split-media-right .hero-media {
  flex: 1 1 50%;
  min-width: 0;
}
.hero--split-media-left .hero-content,
.hero--split-media-right .hero-content {
  flex: 1 1 50%;
}
.hero--split-media-left .hero-media img,
.hero--split-media-right .hero-media img {
  max-width: 100%;
  max-height: 520px;
  object-fit: cover;
}

.hero-media--centered img {
  max-width: 960px;
  max-height: 480px;
  object-fit: cover;
}

.hero-media-placeholder {
  width: 100%;
  max-width: 520px;
  min-height: 280px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 30px rgba(0,0,0,0.2);
}

.hero--split-media-left .hero-media-placeholder,
.hero--split-media-right .hero-media-placeholder {
  max-width: 100%;
}
.hero-media--centered .hero-media-placeholder {
  max-width: 960px;
}

.hero-media-placeholder::after {
  content: '';
  position: absolute;
  inset: 18px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.25);
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.3), transparent 55%),
              radial-gradient(circle at 80% 30%, rgba(255,255,255,0.2), transparent 50%),
              radial-gradient(circle at 40% 80%, rgba(255,255,255,0.25), transparent 55%);
}

.hero-slot-0 {
  border-top: 3px solid color-mix(in srgb, var(--color-primary) 70%, transparent 30%);
}

.hero-slot-1 {
  border-left: 4px solid color-mix(in srgb, var(--color-accent) 72%, transparent 28%);
}

.hero-slot-2.hero--minimal {
  border-width: 2px;
}

.hero-slot-3 .hero-actions .btn {
  box-shadow: 0 8px 18px color-mix(in srgb, var(--color-primary) 24%, transparent 76%);
}

.hero-slot-4.hero--kpi-strip .stats-row .stat {
  border-style: dashed;
}

.hero-slot-5 .hero-kicker {
  background: color-mix(in srgb, var(--color-accent) 16%, var(--color-surface) 84%);
}

.hero-slot-6 {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border) 65%, transparent 35%);
}

.hero-slot-7.hero--overlay .hero-overlay {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.76), rgba(15, 23, 42, 0.26));
}

.hero-slot-8 {
  border-bottom: 3px solid color-mix(in srgb, var(--color-accent) 62%, transparent 38%);
}

.hero-slot-9 .hero-actions .btn {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.hero-slot-10.hero--split-media-left .hero-media img,
.hero-slot-10.hero--split-media-right .hero-media img {
  border-radius: 10px;
}

.hero-slot-11.hero--kpi-strip .stats-row .stat {
  border-top: 2px solid color-mix(in srgb, var(--color-primary) 46%, transparent 54%);
}

.hero-slot-12 {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-border) 72%, transparent 28%);
}

.hero-slot-13.hero--overlay .hero-overlay {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.18));
}

.hero-slot-14 {
  border-right: 3px solid color-mix(in srgb, var(--color-primary) 56%, transparent 44%);
}

.hero-slot-15 .hero-content h1 {
  letter-spacing: -0.028em;
}

.hero-slot-16 .hero-actions .btn {
  border-width: 2px;
}

.hero-slot-17 {
  box-shadow: 0 22px 46px rgba(15, 23, 42, 0.2);
}


























/* Sections */
.section {
  padding: var(--space-xl) 0;
}

.section--alt {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

.section-slot-0 {
  border-left: 3px solid color-mix(in srgb, var(--color-primary) 62%, transparent 38%);
  padding-left: calc(var(--space-sm) + 0.2rem);
}

.section-slot-1 .card,
.section-slot-1 .stat {
  border-radius: 6px;
}

.section-slot-2 .card,
.section-slot-2 .feature-list li {
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

.section-slot-3 .card,
.section-slot-3 .tab-panel {
  border-style: dashed;
}

.section-slot-4 .card,
.section-slot-4 .stat,
.section-slot-4 .feature-list li {
  background: color-mix(in srgb, var(--color-surface) 85%, var(--color-bg) 15%);
}

.section-slot-5 .grid {
  gap: calc(var(--space-lg) * 0.75);
}

.section-slot-6 .btn.btn-primary {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.section-slot-7 .feature-list li strong {
  letter-spacing: 0.01em;
}

.section-slot-8 .card,
.section-slot-8 .stat,
.section-slot-8 .feature-list li {
  border-width: 2px;
}

.section-slot-9 .card {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
}

.section-slot-10 .feature-list li {
  border-style: dashed;
}

.section-slot-11 .grid > .card:nth-child(odd) {
  transform: translateY(-2px);
}

.section-slot-11 .grid > .card:nth-child(even) {
  transform: translateY(2px);
}

.section-slot-12 .btn.btn-primary {
  border-radius: 999px;
}

.section-slot-13 .tab-panel,
.section-slot-13 .card {
  background: color-mix(in srgb, var(--color-surface) 79%, var(--color-bg) 21%);
}






/* Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
}




















body.grid-variant-10 .grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.grid-variant-10 .grid > .card:nth-child(1) {
  grid-column: span 2;
}
















.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
}

.stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: grid;
  gap: 0.35rem;
  color: var(--color-surface-text);
}

.stat strong {
  font-size: 1.6rem;
}

.feature-list {
  list-style: none;
  display: grid;
  gap: var(--space-md);
  padding: 0;
}

.feature-list li {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md) calc(var(--space-md) * 1.1);
  color: var(--color-text);
  display: grid;
  gap: 0.35rem;
}





















.comparison-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.spotlight-layout {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

.spotlight-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.timeline-list {
  display: grid;
  gap: var(--space-md);
}

.timeline-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px dashed var(--color-border);
}

.timeline-item:last-child {
  border-bottom: none;
}

.timeline-index {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 15%, var(--color-surface) 85%);
  border: 1px solid color-mix(in srgb, var(--color-primary) 45%, var(--color-border) 55%);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.tab-btn {
  border: 1px solid var(--color-border);
  background: var(--color-surface-elevated);
  color: var(--color-safe-on-surface);
  padding: 0.5rem var(--space-md);
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
}

.tab-btn.is-active {
  background: var(--color-primary);
  color: var(--color-safe-on-primary);
  border-color: transparent;
}

.tab-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  background: var(--color-surface-elevated);
  color: var(--color-safe-on-surface);
}

.tab-panel[hidden] {
  display: none;
}

.tab-panel p {
  margin-bottom: var(--space-sm);
}

/* Cards */
.card {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  color: var(--color-safe-on-surface);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: transform 0.2s, box-shadow 0.2s;
}

.icon-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}





body.card-variant-3 .card {
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  border-color: color-mix(in srgb, var(--color-border) 70%, var(--color-primary) 30%);
}

body.card-variant-3 .grid > .card:nth-child(odd) {
  transform: rotate(-0.4deg);
}

body.card-variant-3 .grid > .card:nth-child(even) {
  transform: rotate(0.4deg);
}

















.card .meta {
  display: block;
  margin-top: 0.5rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.testimonials-stacked {
  display: grid;
  gap: var(--space-md);
}





.quote-row {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  background: var(--color-surface);
}






















.slider-variant-10 .card {
  border-top: 3px solid color-mix(in srgb, var(--color-primary) 56%, transparent 44%);
}

.testimonial-carousel.slider-variant-10 {
  gap: calc(var(--space-sm) * 0.75);
}



















.pricing-split {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 1.2fr);
  gap: var(--space-md);
}

.pricing-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.pricing-strip li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.85rem;
  background: var(--color-surface);
}

.card img {
  width: 100%;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.block-image {
  width: 100%;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
  box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}

.editorial-grid .story-card {
  border-left: 4px solid var(--color-primary);
  padding-left: var(--space-md);
}

.story-meta {
  color: var(--color-text-muted);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.text-link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.text-link:hover {
  text-decoration: underline;
}

.forum-toolbar {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  align-items: center;
  margin-bottom: var(--space-md);
}

.thread-list {
  display: grid;
  gap: var(--space-sm);
}

.faq-list {
  display: grid;
  gap: var(--space-sm);
}

.faq-list .faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 0.35rem 0.7rem;
}

.faq-list .faq-item summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.faq-list .faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-list .faq-item p {
  margin: 0.5rem 0 0.25rem;
}







.accordion-variant-3 .faq-item {
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.accordion-variant-3 .faq-item[open] {
  border-color: color-mix(in srgb, var(--color-primary) 44%, var(--color-border) 56%);
}



















.thread-row {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: grid;
  place-items: center;
  padding: var(--space-md);
  z-index: 1200;
}

.modal-overlay[hidden] {
  display: none;
}

.modal {
  width: min(680px, 100%);
  max-height: calc(100vh - 64px);
  overflow: auto;
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.35);
  padding: var(--space-lg);
}

.modal header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.modal-close {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text);
  padding: 0.25rem 0.75rem;
  cursor: pointer;
}

.thread-row h3 {
  font-size: 1.05rem;
}

.thread-row p {
  margin-top: 0.25rem;
  font-size: 0.9rem;
}

.thread-activity {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.story-list {
  display: grid;
  gap: 0.8rem;
}

.story-list article {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.8rem;
}

.story-list article:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.story-list h3 {
  margin: 0.15rem 0 0.35rem;
}

.story-list .story-kicker {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.thread-table {
  display: grid;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.thread-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 98px 112px;
  gap: var(--space-sm);
  align-items: center;
  padding: 0.7rem 0.9rem;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.thread-table-row:last-child {
  border-bottom: none;
}

.thread-table-row.is-head {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  background: color-mix(in srgb, var(--color-surface) 78%, var(--color-bg) 22%);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.thread-table-topic h3 {
  font-size: 1rem;
  margin: 0;
}

.thread-table-topic p {
  font-size: 0.9rem;
  margin-top: 0.18rem;
}

.commerce-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-sm);
}

.commerce-tile {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 0.8rem;
  display: grid;
  gap: 0.35rem;
}

.commerce-tile strong {
  font-size: 1.05rem;
}

.metric-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-sm);
}

.metric-band .metric {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.8rem;
  display: grid;
  gap: 0.2rem;
  /* Ensure readable text even when the surrounding section uses on-hero/on-primary colors. */
  color: var(--color-surface-text);
}

.metric-band .metric span {
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

.metric-band .metric strong {
  font-size: 1.25rem;
  color: var(--color-surface-text);
}

.timeline-list {
  display: grid;
  gap: var(--space-sm);
}

.timeline-step {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.85rem 0.95rem;
  background: var(--color-surface);
}

.timeline-step .step-label {
  color: var(--color-text-muted);
  font-size: 0.82rem;
  margin-bottom: 0.25rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.feature-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.feature-checklist li {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  padding: 0.65rem 0.8rem;
}

.quote-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-sm);
}

.quote-wall .quote-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 0.8rem 0.9rem;
}

.logo-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.logo-cloud .integration-pill {
  min-height: 2.05rem;
  display: inline-flex;
  align-items: center;
}

.sidebar-layout {
  display: grid;
  grid-template-columns: minmax(190px, 0.32fr) minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
}

.sidebar-nav {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-sm);
}

.sidebar-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.sidebar-nav a {
  display: block;
  color: var(--color-text);
  text-decoration: none;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid transparent;
}

.sidebar-nav a:hover {
  border-color: var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 78%, var(--color-bg) 22%);
}

.kpi-band .metric-band .metric {
  border-width: 2px;
}

.comparison-table-block .pricing-table th {
  width: 28%;
}

.stats-cards .card {
  text-align: center;
}

.stats-cards .card h3 {
  font-size: 1.35rem;
}

.pillars-grid .card {
  border-width: 2px;
}

.checklist-panel-block .feature-checklist li p {
  margin: 0.3rem 0 0;
}

.quote-wall-block .feature-list li {
  border-style: dashed;
}

.action-banner-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.action-banner-block .hero.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.42fr);
  gap: var(--space-md);
  align-items: center;
}

.action-banner-block .hero-metrics {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  background: color-mix(in srgb, var(--color-surface) 72%, var(--color-bg) 28%);
}

.persona-tabs-block .tab-panels,
.offer-matrix-block .tab-panels,
.process-checkpoints-block .tab-panels {
  margin-top: var(--space-sm);
}

.offer-matrix-block .offer-card strong {
  display: block;
  margin-top: 0.45rem;
  font-size: 1.1rem;
}

.process-checkpoints-block .timeline-step h3 {
  margin-top: 0.15rem;
}

.signal-ticker-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.45rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scrollbar-width: thin;
}

.signal-ticker-track .integration-pill {
  white-space: nowrap;
}

.proof-strip-block .quote-row {
  margin-bottom: var(--space-sm);
}

.faq-chips-block .integration-pill {
  border-width: 2px;
}

.cta-dual-panel-block .cta-dual-grid {
  align-items: stretch;
}

.cta-dual-panel-block .metric-band {
  margin-top: var(--space-sm);
}

.insight-cards-block .card h3 {
  margin-top: 0.2rem;
}

.proof-matrix-block .metric-band .metric {
  border-width: 2px;
}

.journey-board-block .timeline-step {
  border-left: 3px solid var(--color-primary);
  padding-left: var(--space-sm);
}

.journey-board-block .timeline-step + .timeline-step {
  margin-top: var(--space-sm);
}

.carousel-cards-block .carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  gap: var(--space-sm);
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scroll-snap-type: x mandatory;
}

.carousel-cards-block .carousel-track .card {
  scroll-snap-align: start;
}

.sidebar-callouts-block .sidebar-layout {
  align-items: start;
}

.sidebar-callouts-block .sidebar-panel {
  position: sticky;
  top: calc(var(--space-lg) + 2.2rem);
}

.split-feature-panel-block .split-feature-layout {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: minmax(0, 1.2fr) minmax(230px, 0.8fr);
}

.prefooter-cta-block .prefooter-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 78%, var(--color-bg) 22%);
  padding: var(--space-md);
}

.lead-form-compact-block .lead-form-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  background: var(--color-surface);
}

.storyboard-cards-block .thread-row {
  align-items: start;
}

.storyboard-cards-block .thread-row strong {
  display: block;
}

.highlights-matrix-block .metric-band .metric {
  border-width: 2px;
}

.faq-timeline-block .timeline-step {
  border-left: 3px solid var(--color-primary);
  padding-left: var(--space-sm);
}

.faq-timeline-block .timeline-step + .timeline-step {
  margin-top: var(--space-sm);
}

.cta-offer-stack-block .hero-actions {
  margin-top: var(--space-sm);
}

.mini-lead-capture-block .mini-lead-form .grid {
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.comparison-cards-block .tabs {
  margin-bottom: var(--space-sm);
}

.feature-stories-block .timeline-step {
  border-left: 3px solid var(--color-primary);
  padding-left: var(--space-sm);
}

.faq-split-columns-block .split-feature-layout {
  align-items: start;
}

.cta-trust-strip-block .hero-actions {
  margin-top: var(--space-sm);
}

.quick-contact-bar-block .metric strong {
  font-size: clamp(0.82rem, 1.2vw, 1rem);
  line-height: 1.35;
  word-break: break-word;
}

.sidebar-filters-block .sidebar-layout {
  align-items: start;
}

.sidebar-filters-block .sidebar-panel {
  position: sticky;
  top: calc(var(--space-lg) + 2.2rem);
}

.product-grid .product-card {
  position: relative;
  padding-top: calc(var(--space-lg) + 1rem);
}

.product-badge {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  background: var(--color-primary);
  color: var(--color-safe-on-primary);
  border-radius: 999px;
  font-size: 0.75rem;
  padding: 0.2rem 0.55rem;
}

.product-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.menu-grid .menu-card {
  border: 1px dashed var(--color-border);
}

.menu-top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  align-items: baseline;
}

.menu-dietary {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.landing-story {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: var(--space-lg);
}

.landing-story ul {
  margin: 1rem 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.45rem;
}

.saas-highlights .grid,
.agency-proof .grid,
.portfolio-grid .grid,
.agency-process .grid,
.corporate-milestones .grid,
.portfolio-projects .grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.corporate-brief .pricing-table td {
  color: var(--color-text);
  vertical-align: top;
}

.corporate-brief .pricing-table td:last-child {
  color: var(--color-text-muted);
}

.agency-proof .meta,
.portfolio-grid .meta,
.agency-process .story-meta,
.corporate-milestones .story-meta,
.portfolio-projects .story-meta {
  color: var(--color-text-muted);
}

.site-type-news .main-content,
.site-type-blog .main-content {
  max-width: 1260px;
}

.site-type-news,
.site-type-blog {
  --type-surface-alt: #f7f3ed;
}

.site-type-news .hero,
.site-type-blog .hero {
  border: 1px solid var(--color-border);
  background: var(--type-surface-alt);
  color: var(--color-text);
  border-radius: 10px;
}

.site-type-news h1,
.site-type-news h2,
.site-type-news h3,
.site-type-blog h1,
.site-type-blog h2,
.site-type-blog h3 {
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.site-type-news .card,
.site-type-blog .card {
  border-radius: 8px;
  border-color: color-mix(in srgb, var(--color-border) 75%, #b8a58c 25%);
}

.site-type-news .section,
.site-type-blog .section {
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--color-border) 84%, #9b8b77 16%);
  box-shadow: none;
}

.site-type-news .story-card,
.site-type-blog .story-card {
  background: var(--color-surface);
  border-left: 4px solid var(--color-primary);
  box-shadow: none;
}

.site-type-news .btn,
.site-type-blog .btn {
  border-radius: 4px;
}

.site-type-news .layout-rail,
.site-type-blog .layout-rail {
  background: color-mix(in srgb, var(--color-surface) 90%, var(--color-bg) 10%);
  border-radius: 10px;
}

.site-type-news .hero .btn-outline,
.site-type-blog .hero .btn-outline {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.site-type-forum .main-content {
  max-width: 1180px;
}

.site-type-forum {
  --type-forum-soft: color-mix(in srgb, var(--color-primary) 8%, #ffffff 92%);
}

.site-type-forum .hero {
  background: var(--type-forum-soft);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 14px;
}

.site-type-forum .hero .btn-outline {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.site-type-forum .forum-board .thread-row {
  border-radius: 12px;
  border-color: color-mix(in srgb, var(--color-primary) 25%, var(--color-border) 75%);
  background: var(--color-surface);
}

.site-type-forum .thread-row .text-link {
  font-weight: 700;
}

.site-type-forum .layout-rail {
  border-radius: 12px;
}

.site-type-forum .btn {
  border-radius: 999px;
  font-size: 0.84rem;
}

.site-type-forum .section {
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border) 82%);
}

.site-type-ecommerce .hero {
  padding-bottom: calc(var(--space-xl) * 1.3);
  border-radius: 18px;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14);
}

.site-type-ecommerce .main-content {
  max-width: 1320px;
}

.site-type-ecommerce .card {
  border-radius: 16px;
  box-shadow: 0 8px 26px rgba(2, 6, 23, 0.08);
}

.site-type-ecommerce .product-card {
  background: var(--color-surface);
}

.site-type-ecommerce .product-meta strong {
  font-size: 1.15rem;
}

.site-type-ecommerce .product-grid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.site-type-ecommerce .btn.btn-outline {
  border-width: 2px;
}

.site-type-ecommerce .btn.btn-primary {
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.site-type-ecommerce .layout-rail {
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-surface) 80%, #ffffff 20%);
}

.site-type-landing .nav-links a {
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}

.site-type-landing .main-content {
  max-width: 1140px;
}

.site-type-landing .hero h1 {
  font-size: clamp(2rem, 5vw, 3.3rem);
}

.site-type-landing .hero {
  border-radius: 22px;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.2);
}

.site-type-landing .cta {
  border-radius: 22px;
  background: color-mix(in srgb, var(--color-surface) 75%, #ffffff 25%);
}

.site-type-landing .card {
  border-radius: 18px;
}

.site-type-landing .btn.btn-primary {
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.18);
}

.site-type-saas {
  --type-saas-surface: color-mix(in srgb, var(--color-surface) 88%, #ffffff 12%);
}

.site-type-saas .main-content {
  max-width: 1200px;
}

.site-type-saas .hero {
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
}

.site-type-saas .card,
.site-type-saas .tab-panel {
  border-radius: 12px;
  background: var(--type-saas-surface);
}

.site-type-saas .section {
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 16%, var(--color-border) 84%);
}

.site-type-saas .pricing-table th {
  background: color-mix(in srgb, var(--color-primary) 10%, #ffffff 90%);
}

.site-type-saas .integration-pill {
  border-style: dashed;
}

.site-type-agency .hero {
  border-radius: 22px;
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.22);
}

.site-type-agency .section {
  border-radius: 16px;
  border-left: 3px solid var(--color-accent);
}

.site-type-corporate .hero {
  border-radius: 10px;
  box-shadow: none;
  border: 1px solid var(--color-border);
}

.site-type-corporate .section {
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--color-border) 82%, var(--color-primary) 18%);
}

.site-type-corporate .card {
  border-radius: 6px;
}

.site-type-portfolio .hero {
  border-radius: 26px;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);
}

.site-type-portfolio .card {
  border-radius: 18px;
  overflow: hidden;
}

.site-type-portfolio .block-image {
  border-radius: 16px;
}

.site-type-blog .hero {
  border-left: 6px solid var(--color-accent);
}

.site-type-blog .story-card {
  border-left-width: 3px;
  border-left-style: solid;
}

.site-type-restaurant .hero {
  border-radius: 20px;
  box-shadow: 0 14px 28px rgba(21, 24, 37, 0.18);
}

.site-type-restaurant .menu-card {
  border-radius: 12px;
}

/* Distinct form factors by site type to reduce same-source perception */
.site-type-news .story-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

.site-type-news .story-list article {
  border: 1px solid color-mix(in srgb, var(--color-border) 78%, #91806d 22%);
  background: var(--color-surface);
  padding: var(--space-md);
}

.site-type-news.site-form-1 .story-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-type-news.site-form-2 .story-list article {
  border-left: 4px solid var(--color-primary);
}

.site-type-news.site-form-3 .story-list article {
  background: color-mix(in srgb, var(--color-surface) 88%, var(--color-bg) 12%);
}

.site-type-news.site-form-4 .story-list article {
  border-style: dashed;
}

.site-type-blog .main-content {
  max-width: 980px;
}

.site-type-blog .story-list {
  display: block;
}

.site-type-blog .story-list article {
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 88%, #a39382 12%);
  padding: 0 0 var(--space-md);
  margin-bottom: var(--space-md);
}

.site-type-blog.site-form-1 .story-list article {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-md);
}

.site-type-blog.site-form-2 .section {
  border-radius: 18px;
}

.site-type-blog.site-form-3 .main-content {
  max-width: 860px;
}

.site-type-blog.site-form-4 .section {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.site-type-forum .thread-table-row,
.site-type-forum .thread-row {
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, var(--color-primary) 20%);
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
}

.site-type-forum .thread-table-row + .thread-table-row,
.site-type-forum .thread-row + .thread-row {
  margin-top: 0.5rem;
}

.site-type-forum.site-form-1 .thread-table-row,
.site-type-forum.site-form-1 .thread-row {
  border-style: dashed;
}

.site-type-forum.site-form-2 .thread-table-row,
.site-type-forum.site-form-2 .thread-row {
  background: color-mix(in srgb, var(--color-surface) 90%, var(--color-bg) 10%);
}

.site-type-forum.site-form-3 .btn {
  border-radius: 10px;
}

.site-type-forum.site-form-4 .layout-rail {
  border-width: 2px;
}

.site-type-ecommerce .product-grid,
.site-type-ecommerce .commerce-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-md);
}

.site-type-ecommerce .commerce-tile,
.site-type-ecommerce .product-card {
  background: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-border) 82%, var(--color-primary) 18%);
  border-radius: 16px;
  padding: var(--space-md);
}

.site-type-ecommerce.site-form-1 .commerce-tile,
.site-type-ecommerce.site-form-1 .product-card {
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

.site-type-ecommerce.site-form-2 .commerce-tile,
.site-type-ecommerce.site-form-2 .product-card {
  border-radius: 10px;
}

.site-type-ecommerce.site-form-3 .commerce-tile,
.site-type-ecommerce.site-form-3 .product-card {
  border-left: 4px solid var(--color-accent);
}

.site-type-ecommerce.site-form-4 .product-grid,
.site-type-ecommerce.site-form-4 .commerce-strip {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.site-type-saas .section,
.site-type-saas .card {
  border: 1px solid color-mix(in srgb, var(--color-primary) 16%, var(--color-border) 84%);
}

.site-type-saas .pricing-table {
  border-radius: 12px;
  overflow: hidden;
}

.site-type-saas.site-form-1 .hero {
  border-radius: 24px;
}

.site-type-saas.site-form-2 .section,
.site-type-saas.site-form-2 .card {
  border-style: dashed;
}

.site-type-saas.site-form-3 .tab-panel,
.site-type-saas.site-form-3 .card {
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.08);
}

.site-type-saas.site-form-4 .pricing-table th {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Hard split of visual form factors by site type */
.site-type-news .content-shell-default {
  grid-template-columns: minmax(0, 1fr);
}

.site-type-news .hero {
  border-radius: 8px;
  box-shadow: none;
  border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent 28%);
}

.site-type-news .story-card,
.site-type-news .story-list article {
  border-radius: 4px;
  border-left: 3px solid color-mix(in srgb, var(--color-primary) 62%, transparent 38%);
}

.site-type-blog .content-shell-default {
  grid-template-columns: minmax(0, 1fr);
  max-width: 860px;
}

.site-type-blog .hero {
  border-radius: 0;
  box-shadow: none;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 76%, transparent 24%);
}

.site-type-blog .story-list article {
  border-left: 0;
  border-bottom-width: 2px;
}

.site-type-forum .content-shell-default {
  grid-template-columns: minmax(0, 1fr);
}

.site-type-forum .hero {
  border-radius: 12px;
}

.site-type-forum .thread-table-row,
.site-type-forum .thread-row {
  background: color-mix(in srgb, var(--color-surface) 92%, var(--color-bg) 8%);
  border-left: 4px solid color-mix(in srgb, var(--color-accent) 65%, transparent 35%);
}

.site-type-ecommerce .content-shell-default {
  grid-template-columns: minmax(0, 1fr);
}

.site-type-ecommerce .hero {
  border-radius: 18px;
}

.site-type-ecommerce .product-grid,
.site-type-ecommerce .commerce-strip {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.site-type-ecommerce .product-card,
.site-type-ecommerce .commerce-tile {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
}

.site-type-saas .content-shell-default {
  grid-template-columns: minmax(0, 1fr);
}

.site-type-saas .hero {
  border-radius: 18px;
  box-shadow: 0 16px 30px rgba(2, 6, 23, 0.14);
}

.site-type-saas .integrations-grid,
.site-type-saas .integrations-marquee {
  border: 1px dashed color-mix(in srgb, var(--color-border) 70%, var(--color-primary) 30%);
  border-radius: 12px;
  padding: 0.55rem;
}

.site-type-landing .content-shell-default {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1080px;
}

.site-type-landing .layout-rail {
  display: none;
}

.site-type-landing .hero {
  border-radius: 24px;
}

@media (max-width: 980px) {
  .site-type-news .content-shell-default,
  .site-type-forum .content-shell-default {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-type-news .story-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Additional form factors to widen visual DNA spread in batch generation */
body.site-form-5 .main-content {
  max-width: 1320px;
}

body.site-form-5 .section,
body.site-form-5 .card {
  border-radius: 24px;
}

body.site-form-5 .hero {
  border-radius: 28px;
  box-shadow: 0 26px 52px rgba(15, 23, 42, 0.2);
}

body.site-form-6 .main-content {
  max-width: 980px;
}

body.site-form-6 .section,
body.site-form-6 .card {
  border-radius: 10px;
  box-shadow: none;
}

body.site-form-6 .hero {
  border-radius: 12px;
}

body.site-form-6 .grid {
  gap: calc(var(--space-sm) * 0.9);
}

body.site-form-7 .section {
  border-left: 5px solid var(--color-primary);
}

body.site-form-7 .card {
  border-width: 2px;
}

body.site-form-7 .btn {
  border-radius: 8px;
}

body.site-form-8 .hero {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 88%, #ffffff 12%) 0%, color-mix(in srgb, var(--color-accent) 86%, #ffffff 14%) 100%);
  color: var(--color-on-hero);
}

body.site-form-8 .hero h1,
body.site-form-8 .hero p {
  color: var(--color-on-hero-strong);
}

body.site-form-8 .section,
body.site-form-8 .card {
  background: color-mix(in srgb, var(--color-surface) 84%, #ffffff 16%);
}

body.site-form-9 .site-header .nav-links a {
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.035em;
}

body.site-form-9 .section,
body.site-form-9 .card {
  border-radius: 6px;
}

body.site-form-10 .section,
body.site-form-10 .card {
  border: 1px solid color-mix(in srgb, var(--color-border) 52%, transparent 48%);
  backdrop-filter: blur(6px) saturate(110%);
}

body.site-form-10 .hero {
  border-radius: 20px;
}

body.site-form-11 .hero h1 {
  letter-spacing: -0.03em;
}

body.site-form-11 .section h2 {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(1.22rem, 1.6vw, 1.58rem);
}

body.site-form-12 .section,
body.site-form-12 .card {
  border-radius: 22px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
  border-color: color-mix(in srgb, var(--color-border) 46%, transparent 54%);
}

body.site-form-12 .hero {
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 34%, var(--color-border) 66%);
}

.site-type-landing .section {
  border-radius: 18px;
}

.site-type-landing.site-form-1 .hero {
  border-radius: 30px;
}

.site-type-landing.site-form-2 .section {
  border-left: 4px solid var(--color-accent);
}

.site-type-landing.site-form-3 .card {
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.site-type-landing.site-form-4 .hero {
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-border) 70%);
}

/* Site-type signature layer: stronger morphology split by product type */
body.site-type-news .content-shell,
body.site-type-blog .content-shell {
  max-width: min(1320px, 98%);
}

body.site-type-news .layout-primary,
body.site-type-blog .layout-primary {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: stretch;
}

body.site-type-news .layout-primary > section:first-child,
body.site-type-blog .layout-primary > section:first-child {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

body.site-type-news .layout-primary > section:not(:first-child),
body.site-type-blog .layout-primary > section:not(:first-child) {
  position: static;
  top: auto;
  align-self: auto;
}

body.site-type-news .card,
body.site-type-blog .card {
  border-radius: 10px;
  border-left: 3px solid color-mix(in srgb, var(--color-primary) 58%, transparent 42%);
}

body.site-type-forum .layout-primary {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

body.site-type-forum .card,
body.site-type-forum .section {
  border-radius: 12px;
  border-width: 1px;
  border-style: solid;
}

body.site-type-forum .thread-list,
body.site-type-forum .thread-table,
body.site-type-forum .faq-accordion,
body.site-type-forum .faq-timeline-block {
  border: 1px solid color-mix(in srgb, var(--color-border) 62%, transparent 38%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-surface) 94%, var(--color-bg) 6%);
}

body.site-type-forum .thread-row,
body.site-type-forum .thread-table-row,
body.site-type-forum .faq-item {
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 68%, transparent 32%);
}

body.site-type-saas .hero {
  border-radius: 18px;
  padding: calc(var(--space-lg) * 1.1);
  background: linear-gradient(
    142deg,
    color-mix(in srgb, var(--color-primary) 88%, #ffffff 12%) 0%,
    color-mix(in srgb, var(--color-accent) 84%, #ffffff 16%) 100%
  );
  color: var(--color-on-hero);
}

body.site-type-saas .hero h1,
body.site-type-saas .hero p {
  color: var(--color-on-hero);
}

body.site-type-saas .section {
  border-radius: 14px;
}

body.site-type-ecommerce .product-grid,
body.site-type-ecommerce .grid.products,
body.site-type-ecommerce .grid.catalog {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: calc(var(--space-sm) * 1.14);
}

body.site-type-ecommerce .card {
  border-radius: 14px;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--color-text) 8%, transparent 92%);
}

body.site-type-ecommerce .pricing-table th {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.78rem;
}

body.site-type-landing .main-content {
  max-width: min(1120px, 95%);
}

body.site-type-landing .hero {
  border-radius: 24px;
  text-align: center;
}

body.site-type-landing .hero .hero-actions {
  justify-content: center;
}

body.site-type-landing .section {
  border-radius: 18px;
}

@media (max-width: 980px) {
  body.site-type-news .layout-primary,
  body.site-type-blog .layout-primary {
    grid-template-columns: 1fr;
  }

  body.site-type-news .layout-primary > section:not(:first-child),
  body.site-type-blog .layout-primary > section:not(:first-child) {
    position: static;
  }
}

/* Design era layer: stronger visual differentiation without breaking semantics */
body.design-era-0 .hero {
  border-radius: clamp(20px, 2.8vw, 34px);
  box-shadow: 0 20px 42px color-mix(in srgb, var(--color-primary) 20%, transparent 80%);
}

body.design-era-0 .section,
body.design-era-0 .card {
  background: color-mix(in srgb, var(--color-surface) 86%, #ffffff 14%);
  border-color: color-mix(in srgb, var(--color-border) 56%, transparent 44%);
}

body.design-era-1 h1,
body.design-era-1 h2,
body.design-era-1 h3 {
  letter-spacing: -0.02em;
}

body.design-era-1 .section,
body.design-era-1 .card {
  border-radius: 8px;
  border-left: 4px solid color-mix(in srgb, var(--color-primary) 58%, transparent 42%);
}

body.design-era-2 .site-header .nav-links a {
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-size: 0.78rem;
}

body.design-era-2 .section,
body.design-era-2 .card {
  border-radius: 6px;
  box-shadow: none;
  border-width: 2px;
}

body.design-era-3 .hero {
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 82%, #ffffff 18%) 0%, color-mix(in srgb, var(--color-accent) 82%, #ffffff 18%) 100%);
  color: var(--color-on-hero-strong);
}

body.design-era-3 .hero h1,
body.design-era-3 .hero p {
  color: var(--color-on-hero-strong);
}

body.design-era-3 .btn.btn-primary {
  border-radius: 999px;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--color-primary) 34%, transparent 66%);
}

body.design-era-4 .section,
body.design-era-4 .card {
  border-radius: 16px;
  backdrop-filter: blur(8px) saturate(110%);
}

body.design-era-4 .layout-rail {
  border-radius: 14px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 72%, transparent 28%);
}

body.design-era-5 .main-content {
  max-width: min(1260px, 97%);
}

body.design-era-5 .section,
body.design-era-5 .card {
  border-radius: 4px;
  border-width: 2px;
  border-color: color-mix(in srgb, var(--color-border) 54%, var(--color-text) 46%);
}

body.design-era-5 .btn {
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Contrast safety layer */
.site .section,
.site .card,
.site .tab-panel,
.site .layout-rail,
.site .timeline-item,
.site .faq-item,
.site .thread-row,
.site .thread-table-row,
.site .pricing-table,
.site .pricing-table td,
.site .pricing-table th {
  color: var(--color-safe-on-surface);
}

.site .section h1,
.site .section h2,
.site .section h3,
.site .section h4,
.site .card h1,
.site .card h2,
.site .card h3,
.site .card h4 {
  color: var(--color-safe-on-surface);
}

.site .layout-rail h1,
.site .layout-rail h2,
.site .layout-rail h3,
.site .layout-rail h4,
.site .layout-rail p,
.site .layout-rail li,
.site .layout-rail span {
  color: var(--color-safe-on-surface);
}

/* Preserve a solid fallback under hero gradients from style variants. */
.site .hero {
  background-color: var(--hero-solid-bg) !important;
}

.site .section p,
.site .section li,
.site .section span,
.site .card p,
.site .card li,
.site .card span {
  color: inherit;
}

.site .section:not(.hero) :is(h1, h2, h3, h4, h5, h6, p, li, span, strong, small, em, b, label, figcaption) {
  color: var(--color-safe-on-surface) !important;
}

.site .hero:not(.hero--minimal) :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-on-hero-strong) !important;
}

.site .hero:not(.hero--minimal) :is(p, li, span, strong, small, em, b, label, figcaption) {
  color: var(--color-on-hero) !important;
}

.site .hero.hero--minimal :is(h1, h2, h3, h4, h5, h6, p, li, span, strong, small, em, b, label, figcaption) {
  color: var(--color-safe-on-surface) !important;
}

.site .hero.hero--minimal a:not(.btn) {
  color: color-mix(in srgb, var(--color-safe-on-surface) 84%, var(--color-primary) 16%) !important;
}

.site .text-muted,
.site .meta,
.site small,
.site .card .meta,
.site .contact-info {
  color: var(--color-safe-muted) !important;
}

/* Footer text uses dedicated footer palette to avoid low-contrast collisions. */
.site-footer,
.site-footer p,
.site-footer li,
.site-footer span,
.site-footer small,
.site-footer strong,
.site-footer h4 {
  color: var(--footer-text) !important;
}

.site-footer .footer-address,
.site-footer .footer-business-id,
.site-footer .footer-copyright,
.site-footer .footer-extra p,
.site-footer .footer-trust-list li {
  color: var(--footer-muted) !important;
}

.site-footer a,
.site-footer .footer-contact a,
.site-footer .footer-legal-links a,
.site-footer .footer-micro-links a {
  color: var(--footer-link) !important;
}

.site-footer a:hover,
.site-footer .footer-contact a:hover,
.site-footer .footer-legal-links a:hover,
.site-footer .footer-micro-links a:hover {
  color: var(--footer-link-hover) !important;
}

.site .hero .stat,
.site .hero .feature-list li,
.site .hero .pricing-table,
.site .hero .pricing-table td,
.site .hero .pricing-table th {
  background: color-mix(in srgb, var(--color-surface-elevated) 96%, var(--color-bg) 4%);
  color: var(--color-safe-on-surface) !important;
}

.site .hero .stat strong,
.site .hero .stat span,
.site .hero .stat p,
.site .hero .feature-list li,
.site .hero .feature-list li p,
.site .hero .feature-list li span,
.site .hero .feature-list li strong {
  color: var(--color-safe-on-surface) !important;
}

/* Guard against white-on-white collisions in hero sub-cards with light backgrounds. */
.site .hero :is(.metric-band .metric, .timeline-step, .thread-row, .card, .sidebar-nav, .sidebar-panel) {
  background: color-mix(in srgb, var(--color-surface-elevated) 96%, var(--color-bg) 4%) !important;
  border-color: color-mix(in srgb, var(--color-border) 72%, transparent 28%) !important;
  color: var(--color-safe-on-surface) !important;
}

.site .hero :is(.metric-band .metric, .timeline-step, .thread-row, .card, .sidebar-nav, .sidebar-panel) :is(h1, h2, h3, h4, h5, h6, p, li, span, strong, small, em, b, label, figcaption, a:not(.btn)) {
  color: var(--color-safe-on-surface) !important;
}

.site .section a:not(.btn),
.site .card a:not(.btn),
.site .layout-rail a:not(.btn) {
  color: color-mix(in srgb, var(--color-safe-on-surface) 88%, var(--color-primary) 12%);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site .section a:not(.btn):hover,
.site .card a:not(.btn):hover,
.site .layout-rail a:not(.btn):hover {
  color: color-mix(in srgb, var(--color-safe-on-surface) 72%, var(--color-primary) 28%);
}

.site .section :not(.btn)[style*="color:"],
.site .card :not(.btn)[style*="color:"],
.site .layout-rail :not(.btn)[style*="color:"] {
  color: inherit !important;
}

.site .btn,
.site button.btn {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.14);
}

.site .btn.btn-primary,
.site .btn-primary {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-safe-on-primary) !important;
}

.site .btn-secondary-emphasis {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-safe-on-primary) !important;
}

.site .btn.btn-outline {
  color: var(--color-safe-outline) !important;
  border-color: var(--color-safe-outline) !important;
  background: color-mix(in srgb, var(--color-surface) 82%, var(--color-bg) 18%);
}

.site .hero .btn.btn-outline,
.site .hero .btn-outline {
  color: var(--color-on-hero-strong) !important;
  border-color: var(--color-on-hero-strong) !important;
  background: color-mix(in srgb, var(--color-surface-elevated) 76%, transparent 24%) !important;
}

.site .hero.hero--minimal .btn.btn-outline,
.site .hero.hero--minimal .btn-outline {
  color: var(--color-safe-outline) !important;
  border-color: var(--color-safe-outline) !important;
  background: color-mix(in srgb, var(--color-surface) 92%, var(--color-bg) 8%) !important;
}

.site .hero.hero--minimal .btn.btn-primary,
.site .hero.hero--minimal .btn-primary {
  color: var(--color-safe-on-primary) !important;
}

.site .tab-btn,
.site .rail-pill,
.site .chip,
.site .badge,
.site .tag {
  color: var(--color-safe-on-surface) !important;
  border-color: color-mix(in srgb, var(--color-safe-on-surface) 42%, transparent 58%) !important;
  background: color-mix(in srgb, var(--color-surface) 92%, var(--color-bg) 8%) !important;
}

.site .tab-btn.is-active,
.site .rail-pill.is-active,
.site .chip.is-active,
.site .badge.is-active,
.site .tag.is-active,
.site .tab-btn[aria-selected="true"] {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-safe-on-primary) !important;
}

.site .hero .tab-btn,
.site .hero .rail-pill,
.site .hero .chip,
.site .hero .badge,
.site .hero .tag {
  color: var(--color-on-hero-strong) !important;
  border-color: color-mix(in srgb, var(--color-on-hero-strong) 46%, transparent 54%) !important;
  background: color-mix(in srgb, var(--color-surface-elevated) 88%, var(--color-bg) 12%) !important;
}

.site .hero .tab-btn.is-active,
.site .hero .rail-pill.is-active,
.site .hero .chip.is-active,
.site .hero .badge.is-active,
.site .hero .tag.is-active,
.site .hero .tab-btn[aria-selected="true"] {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-safe-on-primary) !important;
}

.site .integration-pill {
  color: var(--color-safe-on-surface) !important;
  border-color: color-mix(in srgb, var(--color-safe-on-surface) 38%, transparent 62%) !important;
  background: color-mix(in srgb, var(--color-surface-elevated) 92%, var(--color-bg) 8%) !important;
}

.site .hero .integration-pill {
  color: var(--color-on-hero-strong) !important;
  border-color: color-mix(in srgb, var(--color-on-hero-strong) 42%, transparent 58%) !important;
  background: color-mix(in srgb, var(--color-surface-elevated) 84%, var(--color-bg) 16%) !important;
}

.site .pricing-table th,
.site .pricing-table td {
  color: var(--color-safe-on-surface);
}

.site table th,
.site table td,
.site table caption,
.site table p,
.site table span,
.site table small,
.site table a:not(.btn) {
  color: var(--color-safe-on-surface) !important;
}

.site table th,
.site table td {
  background: color-mix(in srgb, var(--color-surface) 94%, var(--color-bg) 6%);
}

.site .pricing-table td,
.site .pricing-table th,
.site .pricing-table p,
.site .pricing-table span,
.site .pricing-table li,
.site .pricing-table a:not(.btn),
.site .pricing-table small {
  color: var(--color-safe-on-surface) !important;
}

.site .pricing-table th {
  background: color-mix(in srgb, var(--color-surface) 88%, var(--color-bg) 12%);
}

.site .hero table.hero-table-readable th,
.site .hero table.hero-table-readable td,
.site .hero table.hero-table-readable p,
.site .hero table.hero-table-readable span,
.site .hero table.hero-table-readable small,
.site .hero table.hero-table-readable a:not(.btn),
.site .hero table.hero-table-readable li {
  color: var(--color-on-hero-strong) !important;
}

.site .hero table.hero-table-readable th,
.site .hero table.hero-table-readable td {
  background: color-mix(in srgb, var(--hero-solid-bg) 72%, #0b1220 28%) !important;
  border-color: color-mix(in srgb, var(--color-on-hero-strong) 28%, transparent 72%) !important;
}

/* Visual DNA archetypes */
.archetype-conversion-neon .hero {
  box-shadow: 0 22px 44px rgba(17, 24, 39, 0.35);
  border-radius: 20px;
}

.archetype-conversion-neon .card {
  border-radius: 14px;
  border-width: 2px;
}

.archetype-conversion-neon .btn.btn-primary {
  border-radius: 999px;
  letter-spacing: 0.01em;
}

.archetype-story-canvas .hero h1,
.archetype-newsroom-desk .hero h1,
.archetype-magazine-stream .hero h1 {
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.archetype-story-canvas .section,
.archetype-newsroom-desk .section,
.archetype-magazine-stream .section {
  border-radius: 10px;
}

.archetype-story-canvas .card,
.archetype-newsroom-desk .card,
.archetype-magazine-stream .card {
  border-radius: 6px;
  border-left: 4px solid var(--color-primary);
}

.archetype-clean-b2b .hero,
.archetype-control-panel .hero,
.archetype-docs-first .hero {
  border-radius: 12px;
  box-shadow: none;
}

.archetype-clean-b2b .card,
.archetype-control-panel .card,
.archetype-docs-first .card {
  border-radius: 8px;
  box-shadow: none;
}

.archetype-clean-b2b .layout-rail,
.archetype-control-panel .layout-rail,
.archetype-docs-first .layout-rail {
  border-radius: 8px;
}

.archetype-catalog-dense .product-grid,
.archetype-trust-retail .product-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.archetype-catalog-dense .card,
.archetype-trust-retail .card {
  border-radius: 12px;
}

.archetype-showcase-editorial .hero,
.archetype-pipeline-dark .hero {
  border-radius: 24px;
  overflow: hidden;
}

.archetype-showcase-editorial .btn.btn-primary,
.archetype-pipeline-dark .btn.btn-primary {
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.26);
}

.archetype-community-stream .thread-row,
.archetype-knowledge-board .thread-row,
.archetype-pro-forum .thread-row {
  border-radius: 10px;
  border: 1px solid var(--color-border);
  padding: 0.85rem;
}

.archetype-community-stream .stats-row .stat {
  background: color-mix(in srgb, var(--color-primary) 10%, #ffffff 90%);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
}

.archetype-knowledge-board .faq-list details summary {
  font-weight: 700;
}

.archetype-pro-forum .hero-actions .btn {
  border-radius: 6px;
}

.archetype-growth-studio .hero,
.archetype-maker-canvas .hero {
  border-radius: 26px;
  box-shadow: 0 24px 46px rgba(15, 23, 42, 0.28);
}

.archetype-performance-lab .nav-links a,
.archetype-control-panel .nav-links a {
  border-radius: 999px;
}

.archetype-strategy-house .section,
.archetype-insight-journal .section {
  border-left: 4px solid var(--color-primary);
}

.archetype-boardroom-grid .card,
.archetype-enterprise-trust .card,
.archetype-policy-brief .card {
  border-radius: 6px;
  box-shadow: none;
}

.archetype-atelier-grid .card,
.archetype-minimal-showcase .card {
  border-radius: 14px;
}

.archetype-table-craft .hero,
.archetype-chef-story .hero {
  border-radius: 20px;
}

.archetype-urban-bistro .card {
  border-radius: 10px;
}

.header-dna-newsroom-desk .nav-links {
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-size: 0.82rem;
}

.header-dna-magazine-stream .newsroom-topline {
  border-bottom-style: dashed;
}

.header-dna-catalog-dense .nav-actions .btn {
  border-radius: 6px;
}

.header-dna-showcase-editorial .nav-brand {
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.header-dna-control-panel .nav-links a {
  border: 1px solid transparent;
}

.header-dna-control-panel .nav-links a:hover {
  border-color: var(--color-border);
}

.testimonial-carousel {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
}

.testimonial-carousel .card {
  min-width: 260px;
  scroll-snap-align: start;
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
}

.pricing-table th,
.pricing-table td {
  border: 1px solid var(--color-border);
  padding: 0.75rem 1rem;
  text-align: left;
}

.pricing-note {
  margin-top: 1rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

/* Integrations */
.integration-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-elevated);
  color: var(--color-safe-on-surface);
  font-weight: 600;
  font-size: 0.9rem;
}

/* Pricing */
.pricing-grid .card {
  border: 2px solid transparent;
}

.pricing-grid .card.is-featured {
  border-color: var(--color-accent);
}

/* CTA */
.cta {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 2.5rem;
  text-align: center;
}

.cta-layout {
  display: grid;
  gap: var(--space-md);
}

.cta-layout-split {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.cta-layout-banner {
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface) 85%, var(--color-bg) 15%);
}



















body.cta-style-slot-3 .cta {
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
}






















/* Footer */
.site-footer {
  --footer-bg: color-mix(in srgb, var(--color-bg) 32%, #0f172a 68%);
  --footer-text: color-mix(in srgb, #ffffff 86%, var(--color-surface-text) 14%);
  --footer-border: color-mix(in srgb, var(--footer-text) 22%, transparent 78%);
  --footer-link: color-mix(in srgb, var(--color-accent) 62%, #bcd4ff 38%);
  --footer-link-hover: #ffffff;
  --footer-muted: color-mix(in srgb, var(--footer-text) 78%, transparent 22%);
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 3rem 1rem 1rem;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-main {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--footer-border);
}

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

.footer-brand strong {
  font-size: 1.25rem;
  color: var(--footer-link-hover);
}

.footer-contact {
  text-align: right;
}

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

.footer-contact a:hover {
  text-decoration: underline;
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.footer-legal-links a {
  color: color-mix(in srgb, var(--footer-link) 70%, var(--footer-text) 30%);
  text-decoration: none;
  font-size: 0.875rem;
}

.footer-legal-links a:hover {
  color: var(--footer-link-hover);
}

.footer-business-id {
  text-align: center;
  font-size: 0.75rem;
  color: var(--footer-muted);
  margin-bottom: 1rem;
}

.footer-copyright {
  text-align: center;
  font-size: 0.875rem;
  color: var(--footer-muted);
}

.footer-extra {
  margin: 0 0 1.25rem;
  padding: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--footer-border) 78%, transparent 22%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--footer-bg) 86%, #ffffff 14%);
}

.footer-extra h4 {
  margin: 0 0 0.45rem;
  font-size: 0.96rem;
  color: var(--footer-link-hover);
}

.footer-extra p {
  margin: 0;
  color: color-mix(in srgb, var(--footer-text) 88%, #ffffff 12%);
}

.footer-micro-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.7rem;
}

.footer-micro-links a {
  border: 1px solid color-mix(in srgb, var(--footer-link) 45%, transparent 55%);
  color: var(--footer-link);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-size: 0.76rem;
  text-decoration: none;
}

.footer-micro-links a:hover {
  color: var(--footer-link-hover);
  border-color: color-mix(in srgb, var(--footer-link-hover) 55%, transparent 45%);
}

.footer-trust-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.32rem;
}

.footer-trust-list li {
  color: color-mix(in srgb, var(--footer-text) 88%, #ffffff 12%);
  font-size: 0.84rem;
}

.footer-extra-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.footer-extra-grid .footer-mini-card {
  border: 1px solid color-mix(in srgb, var(--footer-border) 72%, transparent 28%);
  border-radius: 9px;
  padding: 0.6rem 0.7rem;
  background: color-mix(in srgb, var(--footer-bg) 85%, #ffffff 15%);
}

.footer-extra-grid .footer-mini-card strong {
  display: block;
  font-size: 0.92rem;
  color: var(--footer-link-hover);
}

.footer-extra-grid .footer-mini-card span {
  color: var(--footer-text);
  font-size: 0.82rem;
}




















.site-footer .footer-main {
  grid-area: main;
}

.site-footer .footer-legal-links {
  grid-area: legal;
}

.site-footer .footer-business-id {
  grid-area: business;
}

.site-footer .footer-copyright {
  grid-area: copyright;
}

.footer-layout-1 .footer-container {
  display: grid;
  gap: 1rem;
  grid-template-areas:
    "legal"
    "main"
    "business"
    "copyright";
}

.footer-layout-1 .footer-legal-links {
  justify-content: flex-start;
}

.footer-layout-2 .footer-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.footer-layout-2 .footer-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.4rem;
}

.footer-layout-2 .footer-legal-links {
  justify-content: center;
}

.footer-layout-3 .footer-container {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "main legal"
    "business business"
    "copyright copyright";
}

.footer-layout-3 .footer-main {
  border-bottom: none;
  border-right: 1px solid var(--footer-border);
  padding-right: 1rem;
}

.footer-layout-3 .footer-legal-links {
  justify-content: flex-start;
  align-content: start;
}

.footer-layout-3 .footer-business-id,
.footer-layout-3 .footer-copyright {
  text-align: left;
}

.footer-tone-1 .footer-legal-links a {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.76rem;
}

.footer-tone-2 .footer-brand strong {
  letter-spacing: -0.01em;
  font-size: 1.15rem;
}

.footer-tone-2 .footer-contact p {
  font-size: 0.9rem;
}

.footer-structure-0 .footer-brand strong {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.footer-structure-1 .footer-main {
  justify-items: center;
  text-align: center;
}

.footer-structure-1 .footer-legal-links {
  justify-content: center;
}

.footer-structure-2 .footer-legal-links a {
  border: 1px solid color-mix(in srgb, var(--footer-link) 45%, transparent 55%);
  border-radius: 999px;
  padding: 0.28rem 0.62rem;
}

.footer-structure-3 .footer-contact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 0.9rem;
}

.footer-structure-4 .footer-brand {
  border-bottom: 1px dashed var(--footer-border);
  padding-bottom: 0.5rem;
}

.footer-structure-4 .footer-copyright {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.footer-structure-5 .footer-legal-links a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-structure-6 .footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

.footer-structure-6 .footer-contact {
  text-align: left;
}

.footer-structure-7 .footer-brand {
  border-left: 3px solid color-mix(in srgb, var(--footer-link) 54%, transparent 46%);
  padding-left: 0.6rem;
}

.footer-structure-8 .footer-legal-links a {
  border: 1px solid color-mix(in srgb, var(--footer-link) 42%, transparent 58%);
  border-radius: 7px;
  padding: 0.2rem 0.52rem;
}

.footer-structure-9 .footer-main {
  border-bottom-style: dashed;
  border-bottom-width: 2px;
}

.footer-structure-10 .footer-contact {
  border: 1px solid color-mix(in srgb, var(--footer-border) 66%, transparent 34%);
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
}



























































body.footer-style-slot-15 .site-footer .footer-main {
  border-bottom-width: 2px;
}










/* Consent Banner */
.consent-banner,
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #111827 !important;
  color: #f8fafc !important;
  padding: 1rem;
  z-index: 9999;
  border-top: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow: 0 -4px 12px rgba(0,0,0,0.2);
}

.consent-banner-container,
.cookie-banner-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.consent-banner-text,
.cookie-banner-text {
  flex: 1;
  min-width: 300px;
  color: #f8fafc !important;
  background: #111827 !important;
}

.consent-banner-text p,
.cookie-banner-text p {
  margin: 0;
  color: #f8fafc !important;
  background: #111827 !important;
}

.consent-banner-text a,
.cookie-banner-text a {
  color: #bfdbfe !important;
  text-decoration: underline;
}

.consent-banner-buttons,
.cookie-banner-buttons {
  display: flex;
  gap: 0.5rem;
}

.consent-btn,
.cookie-btn {
  padding: 0.5rem 1rem;
  border: 1px solid rgba(203, 213, 225, 0.72);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.25;
  font-weight: 600;
  background: #1f2937;
  color: #f8fafc;
  text-shadow: none;
}

.consent-btn-accept,
.cookie-btn-accept {
  /*
   * Keep consent CTA contrast stable regardless of theme overrides.
   * This button must remain readable even when look/kit classes remap
   * global tokens such as --color-safe-on-primary.
   */
  --consent-accept-bg: #34d399;
  --consent-accept-fg: #052e2b;
  background: var(--consent-accept-bg) !important;
  color: var(--consent-accept-fg) !important;
  border: 1px solid color-mix(in srgb, var(--consent-accept-fg) 36%, transparent 64%) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--consent-accept-fg) 18%, transparent 82%) inset;
  font-weight: 700;
}

.consent-btn-reject,
.cookie-btn-reject {
  background: #0f172a !important;
  color: #f8fafc !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
}

.consent-btn-settings,
.cookie-btn-settings {
  background: #1f2937 !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(148, 163, 184, 0.82) !important;
  text-decoration: none;
}

.consent-btn-reject:hover,
.cookie-btn-reject:hover,
.consent-btn-settings:hover,
.cookie-btn-settings:hover {
  filter: brightness(1.05);
}

.consent-btn-accept:hover,
.cookie-btn-accept:hover,
.consent-btn-accept:focus-visible,
.cookie-btn-accept:focus-visible {
  filter: brightness(0.96);
  outline: 2px solid color-mix(in srgb, var(--consent-accept-fg) 42%, transparent 58%);
  outline-offset: 1px;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s;
  color: var(--color-safe-on-surface);
  border: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent 28%);
  background: color-mix(in srgb, var(--color-surface) 94%, transparent 6%);
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-safe-on-primary) !important;
  border-color: color-mix(in srgb, var(--color-primary) 68%, #0f172a 32%);
}

.btn-outline {
  border: 2px solid var(--color-safe-outline);
  color: var(--color-safe-outline);
  background: color-mix(in srgb, var(--color-surface) 90%, transparent 10%);
}

.hero .btn-outline {
  border-color: var(--color-on-hero-strong);
  color: var(--color-on-hero-strong);
}

.btn-secondary-emphasis {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-safe-on-primary);
}

.btn-primary:hover {
  filter: brightness(0.95);
}

/* Keep content readability stable even before runtime contrast repairs run. */
.section,
.card,
.layout-rail,
.tab-panel,
.faq-item,
.thread-row,
.thread-table-row,
.pre-footer,
.shell-leadbar {
  color: var(--color-safe-on-surface);
}

.section p,
.section li,
.section span,
.section small,
.section label,
.section td,
.section th,
.card p,
.card li,
.card span,
.card small,
.layout-rail li,
.layout-rail a,
.tab-panel p,
.tab-panel li {
  color: var(--color-safe-on-surface);
}

.section a:not(.btn),
.card a:not(.btn),
.layout-rail a,
.tab-panel a:not(.btn) {
  color: var(--color-link);
}

/* Forms */
.form-group {
  margin-bottom: 1rem;
}

.contact-info {
  margin: var(--space-md) 0;
  color: var(--color-safe-muted);
  display: grid;
  gap: 0.35rem;
}

.form-control {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-surface);
}

.form-control::placeholder {
  color: var(--placeholder-color, color-mix(in srgb, var(--color-safe-on-surface) 60%, var(--color-surface) 40%));
  opacity: 1;
}

.form-control:focus {
  outline: none;
  border-color: var(--color-accent);
}

.form-status {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

.lead-form {
  display: grid;
  gap: 0.75rem;
}

.lead-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.65rem;
}

.lead-form-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
}




















body.lead-form-style-3 .lead-form .hero-actions .btn {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

















.pre-footer {
  margin-top: var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
}

.pre-footer-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-sm);
  display: grid;
  gap: var(--space-md);
}

.pre-footer .pre-footer-meta {
  color: var(--color-text-muted);
}
































body.pre-footer-style-3 .pre-footer .hero-actions .btn {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

















@media (max-width: 1180px) {
  .content-shell-news,
  .content-shell-news-left,
  .content-shell-news-right,
  .content-shell-blog,
  .content-shell-forum,
  .content-shell-forum-left,
  .content-shell-forum-right,
  .content-shell-ecommerce,
  .content-shell-ecommerce-left,
  .content-shell-ecommerce-right,
  .content-shell-saas,
  .content-shell-saas-left,
  .content-shell-saas-right,
  .content-shell-restaurant,
  .content-shell-restaurant-dual {
    grid-template-columns: minmax(0, 1fr);
  }

  .layout-rail {
    position: static;
    top: auto !important;
    order: 2;
  }
}

@media (max-width: 900px) {
  .top-bar-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .content-shell-news,
  .content-shell-news-left,
  .content-shell-news-right,
  .content-shell-blog,
  .content-shell-forum,
  .content-shell-forum-left,
  .content-shell-forum-right,
  .content-shell-ecommerce,
  .content-shell-ecommerce-left,
  .content-shell-ecommerce-right,
  .content-shell-saas,
  .content-shell-saas-left,
  .content-shell-saas-right,
  .content-shell-restaurant,
  .content-shell-restaurant-dual {
    grid-template-columns: minmax(0, 1fr);
  }

  .layout-rail {
    position: static;
  }








  .hero--split-media-left,
  .hero--split-media-right {
    flex-direction: column;
  }

  .spotlight-layout,
  .pricing-split,
  .cta-layout-split,
  .lead-form-split,

  .landing-story {
    grid-template-columns: 1fr;
  }

  .sidebar-layout {
    grid-template-columns: 1fr;
  }

  .action-banner-block .hero.split {
    grid-template-columns: 1fr;
  }

  .thread-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .forum-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-layout-3 .footer-container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "legal"
      "business"
      "copyright";
  }

  .footer-layout-3 .footer-main {
    border-right: none;
    border-bottom: 1px solid var(--footer-border);
    padding-right: 0;
  }

  .footer-layout-3 .footer-business-id,
  .footer-layout-3 .footer-copyright {
    text-align: center;
  }

  .footer-structure-3 .footer-contact {
    grid-template-columns: 1fr;
  }

  .footer-extra-grid {
    grid-template-columns: 1fr;
  }
}