@charset "UTF-8";
/**
 * Ultra-Minimalist CSS Foundation
 * Based on Pico principles, stripped to the structural minimum.
 */
/* -------------------------------------------------------------------------- */
/*                                  :root                                     */
/*     Core variables for typography, spacing, and essential colors.          */
/* -------------------------------------------------------------------------- */
:root {
  /* ---------------------------------------- */
  /* THEME COLORS                             */
  /* ---------------------------------------- */
  --color-background: #ffffff;
  --color-background-alt: #f8f9fa;
  --color-text-primary: #1a202c;
  --color-text-secondary: #4A5568;
  --color-text-tertiary: #718096;
  --color-text-subtle: #a0aec0;
  --color-text-on-accent: #ffffff;
  /* ---------------------------------------- */
  /* ACCENT & BRAND COLORS                    */
  /* ---------------------------------------- */
  --color-accent: #2868b4;
  --color-accent-light: #81cdfa;
  --color-accent-vibrant-blue: #4F9CF9;
  --color-accent-green: #007E9A;
  --color-accent-green-bright: #28a745;
  --color-perimeter-blue: var(--color-accent-vibrant-blue);
  /* ---------------------------------------- */
  /* UI & STATE COLORS                        */
  /* ---------------------------------------- */
  --color-border-primary: #e2e8f0;
  --color-border-secondary: #cbd5e0;
  --color-border-subtle: #e0e0e0;
  --color-background-success-light: #BEE3F8;
  --color-background-error-light: #f8D0D0;
  --color-status-success: #0d9488;
  /* Refined teal */
  --color-status-success-bg: #f0fdfa;
  --color-status-warning: #f59e0b;
  --color-status-warning-bg: #fef3c7;
  --color-status-error: #E53E3E;
  --color-status-error-bg: #fee2e2;
  --color-status-verifying: #4338ca;
  /* Refined indigo */
  --color-shadow: rgba(0, 0, 0, 0.1);
  /* ---------------------------------------- */
  /* TYPOGRAPHY                               */
  /* ---------------------------------------- */
  --font-family: 'Simplon Norm';
  --line-height: 1.5;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-xxl: 4rem;
  --border-radius: 0.25rem;
  --border-radius-xl: 1.25rem;
  --border-radius-full: 9999px;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-xxl: 2.25rem;
  --font-weight-light: 200;
  --font-weight-thin: 100;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  --header-font-weight: var(--font-weight-bold);
  --header-line-height: 1.2;
  /** How large an h1 header is */
  --header-base-size: 2.25rem;
  /** How we scale down for each element below that. */
  --header-scale-factor: 0.25; }

/** dark mode adjustments */
/* :root[data-theme="dark"] {
  --color-accent: rgb(40, 104, 180);
} */
/* -------------------------------------------------------------------------- */
/*                                Global Reset                                */
/* -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

html {
  font-size: 100%;
  scroll-behavior: smooth;
  background-color: var(--color-background); }

body {
  color: var(--color-text-primary);
  font-family: var(--font-family);
  line-height: var(--line-height); }

figure {
  justify-content: center;
  display: flex; }

/* Essential rule for responsive images */
img,
video {
  max-width: 100%;
  height: auto; }

/* -------------------------------------------------------------------------- */
/*                                Core Layout                                 */
/* -------------------------------------------------------------------------- */
/* The single, fluid container for your main content */
main {
  display: block;
  margin-inline: auto;
  margin-left: auto;
  margin-right: auto;
  width: calc(min(70rem, 100% - 2rem));
  padding-block: calc(var(--spacing-md) * 2); }

.main-full-width {
  width: 100%;
  max-width: 100%;
  padding: 0; }

/* Consistent vertical spacing for block elements */
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
blockquote,
pre,
table,
form {
  margin-bottom: var(--spacing-md); }

/* -------------------------------------------------------------------------- */
/*                                 Typography                                 */
/* -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--header-font-weight);
  line-height: var(--header-line-height); }

:root {
  /* The two variables you control */
  --base-size: 1rem;
  --scale-factor: 0.25; }

h1 {
  font-size: var(--header-base-size); }

h2 {
  font-size: calc(var(--header-base-size) - var(--header-scale-factor) * 1rem); }

h3 {
  font-size: calc(var(--header-base-size) - var(--header-scale-factor) * 2rem); }

h4 {
  font-size: calc(var(--header-base-size) - var(--header-scale-factor) * 3rem); }

h5 {
  font-size: calc(var(--header-base-size) - var(--header-scale-factor) * 4rem); }

h6 {
  font-size: calc(var(--header-base-size) - var(--header-scale-factor) * 5rem); }

p {
  letter-spacing: normal;
  /* Ensure body copy is readable */ }

a {
  color: var(--color-accent);
  text-decoration: none;
  /* Remove underline by default for a cleaner look */
  transition: color 0.2s ease-in-out; }

a:hover {
  color: var(--color-accent-light); }

a:focus {
  outline: 2px solid var(--color-accent-light);
  /* Modern focus indicator */
  outline-offset: 2px;
  border-radius: var(--border-radius); }

ul,
ol {
  padding-inline-start: 1.5rem; }

blockquote {
  padding-inline-start: var(--spacing-md);
  border-inline-start: 0.25rem solid var(--border-color); }

code {
  font-family: ui-monospace, Monaco, Consolas, monospace; }

pre {
  overflow-x: auto;
  padding: var(--spacing-md);
  border-radius: var(--border-radius); }

em {
  color: var(--color-accent);
  font-style: normal; }

strong {
  font-weight: var(--font-weight-medium); }

/* -------------------------------------------------------------------------- */
/*                                    Forms                                   */
/* -------------------------------------------------------------------------- */
button,
input,
select,
textarea {
  border: 1px solid var(--color-border-primary);
  border-radius: var(--border-radius);
  padding: 0.5rem 0.75rem;
  width: 100%;
  background-color: transparent;
  /* Make background neutral */
  color: inherit;
  /* Inherit text color */
  font-family: inherit;
  /* Inherit font */
  font-size: inherit;
  /* Inherit font size */ }

input,
select,
textarea {
  margin-bottom: var(--spacing-md); }

label {
  display: block;
  font-weight: var(--font-weight-semibold);
  margin-bottom: 0.375rem; }

button {
  width: auto;
  cursor: pointer;
  border-color: var(--accent-color);
  background-color: var(--accent-color);
  color: var(--color-text-on-accent);
  /* Hardcoded white for button text is safest */
  font-weight: var(--font-weight-semibold); }

/* Specificity for native-looking checkboxes and radios */
input[type="checkbox"],
input[type="radio"] {
  width: auto;
  accent-color: var(--accent-color); }

/* mark mermaid classes as transparent background */
pre.mermaid {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  padding: var(--spacing-lg); }

/* -------------------------------------------------------------------------- */
/*                                    Light & Dark Modes                      */
/* -------------------------------------------------------------------------- */
/* A simple utility class to hide elements accessibly */
.is-hidden {
  display: none; }

.hidden-by-default {
  display: none; }

[data-theme=light] .hide-light {
  display: none; }

/* [data-theme=dark] .hide-dark {
  display: none;
} */
/* 
  ___  _  _  ____  ____  __   _  _    ____  _  _  ____  ____  __ _  ____  __  __   __ _  ____ 
 / __)/ )( \/ ___)(_  _)/  \ ( \/ )  (  __)( \/ )(_  _)(  __)(  ( \/ ___)(  )/  \ (  ( \/ ___) 
( (__ ) \/ (\___ \  )( (  O )/ \/ \   ) _)  )  (   )(   ) _) /    /\___ \ )((  O )/    /\___ \ 
 \___)\____/(____/ (__) \__/ \_)(_/  (____)(_/\_) (__) (____)\_)__)(____/(__)\__/ \_)__)(____/ 

*/
/* 
  Style the h2 inside that specific header structure.
*/
header:has(> h2 + p) > h2 {
  margin-top: var(--spacing-xxl);
  text-transform: uppercase;
  font-weight: var(--font-weight-thin);
  letter-spacing: 0.1em; }

body > main > section.stop-fighting-systems-section > div > div.section-header {
  margin-top: 8rem; }

/* A reusable, sophisticated header style for major sections */
.section-header {
  text-align: center;
  margin-bottom: var(--spacing-xxl);
  margin-top: 16rem; }

.section-header h2 {
  font-size: 3rem;
  font-weight: var(--font-weight-black);
  text-transform: uppercase;
  letter-spacing: -0.04em;
  margin-bottom: 0.5rem; }

.section-header h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-light);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em; }

@media (max-width: 767px) {
  .section-header h2 {
    font-size: 2.5rem;
    /* 3rem - 0.5rem */ }
  .section-header h3 {
    font-size: 1.25rem;
    /* 1.5rem - 0.25rem */ } }

/** FOR SECTIONS INSIDE PAGES */
main > section {
  /* Center the block */
  margin-inline: auto;
  /* 
    The Magic Line:
    - The width will be the SMALLER value of...
    - 1. 100% minus 2rem (for 1rem of padding on each side)
    - 2. Or your maximum container width (1450px)
  */
  width: calc(min(100% - 2rem, 1450px)); }

.container-fluid {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--spacing-xl);
  padding-left: var(--spacing-xl); }

@media (max-width: 767px) {
  .container-fluid {
    padding-right: var(--spacing-md);
    padding-left: var(--spacing-md); } }

/*──────────────────────────────────────────────────────────────────────────────
  Wordmark Text
──────────────────────────────────────────────────────────────────────────────*/
/* Used for fancy 'synthgrid' text display.
We have JS that runs on the page to apply this to all mentions of 'SynthGrid'
 */
.synthgrid-logo-text {
  margin-left: 0.5rem;
  /* pl3 */
  font-size: 1.5rem;
  /* f2 */
  letter-spacing: 0.125em;
  /* tracked-mega */
  font-weight: var(--font-weight-light);
  /* fw2 */
  text-transform: uppercase; }

.tm-symbol {
  font-size: 50%;
  /* vertical-align: 25%; */
  /* margin-left: -1px; /* Optional: tighten spacing */ }

/*──────────────────────────────────────────────────────────────────────────────
  Filter text (used to invert SVGs)
──────────────────────────────────────────────────────────────────────────────*/
.invert-colors {
  filter: invert(1); }

/* -------------------------------------------------------------------------- */
/*                                 Table Defaults                             */
/*    Styles for default, un-classed <table> elements for readability.        */
/* -------------------------------------------------------------------------- */
table {
  width: 100%;
  border-collapse: collapse;
  /* Ensures clean, single borders */
  margin-bottom: calc(var(--spacing-md) * 2);
  /* Provides extra space after tables */ }

th,
td {
  padding: var(--spacing-md);
  /* The most important rule: creates internal space */
  text-align: left;
  vertical-align: top;
  /* Aligns all cell content to the top for consistency */
  border-bottom: 1px solid var(--color-background-alt);
  /* Light horizontal rule for rows */ }

th {
  font-weight: var(--header-font-weight);
  /* A slightly heavier border to separate the header from the table body */
  border-bottom-width: 2px;
  border-bottom-color: var(--color-secondary); }

/* GEO Instruction Styling */
.geo-instruction, .geo-instruction * {
  color: white !important;
  font-size: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important; }

.synthgrid-wordmark-inline {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase; }

.text-perimeter-blue {
  color: var(--color-perimeter-blue); }

.ecosystem-logo a {
  position: relative;
  display: inline-block; }

footer {
  margin-top: var(--spacing-xxl); }

.logo-text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  color: rgba(0, 0, 0, 0.001);
  pointer-events: none;
  user-select: all; }

/*
  ___ _            _            _  _               
 / __(_)_ __  _ __| |___ _ _   | \| |___ _ _ _ __  
 \__ \ | '  \| '_ \ / _ \ ' \  | .` / _ \ '_| '  \ 
 |___/_|_|_|_| .__/_\___/_||_| |_|\_\___/_| |_|_|_|
             |_|                                   
*/
/* SimplonNorm Light */
@font-face {
  font-family: 'Simplon Norm';
  src: url("/fonts/SimplonNorm-Light-WebS.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: block; }

/* SimplonNorm Light Italic */
@font-face {
  font-family: 'Simplon Norm';
  src: url("/fonts/SimplonNorm-LightItalic-WebS.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: block; }

/* SimplonNorm Regular */
@font-face {
  font-family: 'Simplon Norm';
  src: url("/fonts/SimplonNorm-Regular-WebS.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block; }

/* SimplonNorm Regular Italic */
@font-face {
  font-family: 'Simplon Norm';
  src: url("/fonts/SimplonNorm-RegularItalic-WebS.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: block; }

/* SimplonNorm Medium */
@font-face {
  font-family: 'Simplon Norm';
  src: url("/fonts/SimplonNorm-Medium-WebS.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: block; }

/* SimplonNorm Medium Italic */
@font-face {
  font-family: 'Simplon Norm';
  src: url("/fonts/SimplonNorm-MediumItalic-WebS.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: block; }

/* SimplonNorm Bold */
@font-face {
  font-family: 'Simplon Norm';
  src: url("/fonts/SimplonNorm-Bold-WebS.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block; }

/* SimplonNorm Bold Italic */
@font-face {
  font-family: 'Simplon Norm';
  src: url("/fonts/SimplonNorm-BoldItalic-WebS.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: block; }

/* NewPanamSkyline Black */
@font-face {
  font-family: 'NewPanamSkyline';
  src: url("/fonts/NewPanamSkyline-Black-WebXL.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: block; }

/** The top-left mindfront logo */
.site-title {
  object-fit: contain;
  width: 10rem;
  display: block;
  position: relative; }

.header-container {
  width: 100%;
  padding: 0 var(--spacing-xl);
  box-sizing: border-box; }

.header-nav {
  padding-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: end;
  max-width: 87.5rem;
  /* 1400px */
  margin: 0 auto; }

.site-title .hanging {
  position: absolute;
  top: 90%;
  right: 0;
  color: var(--color-accent); }

.site-title:hover .hanging {
  color: var(--color-accent); }

.header-nav a, .header-nav a:visited {
  text-decoration: none;
  text-underline-offset: 4px; }

.header-nav h1 {
  margin: 0rem;
  padding: 0rem; }

.theme-switcher svg {
  width: 1.125rem;
  height: 1.125rem; }

@media (max-width: 767px) {
  .header-container {
    padding: 0; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--spacing-md);
    width: 250px;
    /* background-color: var(--color-background-alt); */
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    box-shadow: var(--shadow); }
  .header-nav {
    margin-top: var(--spacing-md);
    max-width: 100vw; }
  .sidebar.active {
    transform: translateX(0); } }

.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--color-accent-color); }

@media (max-width: 767px) {
  .hamburger {
    display: block; } }

@media (min-width: 768px) {
  body > main > nav[aria-label=breadcrumb] {
    display: none; } }

@media (min-width: 768px) {
  .hero-wordmark {
    font-size: 8rem; } }

.no-underline {
  text-decoration: none; }

/* New Menu+Chevron navigation styles */
/* Nav container */
.nav-container {
  display: flex;
  align-items: center; }

/* Desktop nav as a unified block */
.desktop-nav {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--border-radius);
  overflow: hidden;
  /* Ensures the rounded corners clip the children */ }

.desktop-nav a, .desktop-nav a:visited {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-base);
  text-decoration: none;
  padding: var(--spacing-sm) var(--spacing-md);
  border-left: 1px solid var(--color-border-primary);
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; }

.desktop-nav a:first-child {
  border-left: none; }

.desktop-nav a:not(.nav-perimeter-cta):hover,
.desktop-nav a.active {
  background-color: var(--color-background-alt); }

/* Specific CTA style for the Security button */
.nav-perimeter-cta {
  background-color: #0f172a;
  /* Dark Slate */
  color: var(--color-text-on-accent) !important; }

.nav-perimeter-cta:hover {
  background-color: #334155;
  /* Lighter Slate for hover */ }

.nav-link-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; }

.nav-icon {
  width: 1rem;
  height: 1rem; }

.nav-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor; }

.mobile-nav {
  display: none;
  /* Hidden by default on desktop */ }

/* --- Mobile Header & Dropdown Styles --- */
@media (max-width: 767px) {
  .desktop-nav {
    display: none;
    /* Hide the desktop block */ }
  .mobile-nav {
    display: block;
    position: relative; }
  .nav-toggle {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-primary);
    cursor: pointer; }
  .nav-toggle svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s ease-in-out; }
  .mobile-nav:hover .nav-toggle svg {
    transform: rotate(180deg); }
  .nav-content {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background-color: var(--color-background);
    min-width: 250px;
    z-index: 1000;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius);
    overflow: hidden;
    /* Clip children to the rounded border */
    padding: 0;
    /* Remove padding to make items flush */ }
  .mobile-nav:hover .nav-content {
    display: block; }
  .nav-item a {
    display: flex;
    /* Use flex for alignment */
    align-items: center;
    justify-content: flex-end;
    /* Right-align the content */
    gap: 0.5rem;
    padding: var(--spacing-sm) var(--spacing-md);
    text-decoration: none;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border-primary);
    transition: background-color 0.2s ease-in-out; }
  .nav-items .nav-item:last-child a {
    border-bottom: none;
    /* No border on the last item */ }
  .nav-item a:not(.nav-perimeter-cta):hover {
    background-color: var(--color-background-alt); }
  /* Ensure the nav-icon styles apply in mobile too */
  .nav-item .nav-icon {
    width: 1rem;
    height: 1rem; }
  .nav-item .nav-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor; } }

/* FOOTER (THE COMMAND BAR) PROTOCOL */
.command-bar-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-xl);
  background-color: var(--color-background);
  border-top: 1px solid var(--color-border-primary);
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary); }

.footer-left,
.footer-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg); }

.footer-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-background);
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border-primary);
  text-decoration: none;
  color: var(--color-text-tertiary); }

.badge-text-container {
  display: flex;
  flex-direction: column;
  line-height: 1.2; }

.badge-explainer {
  font-size: 0.65rem;
  color: var(--color-text-subtle); }

.footer-icon {
  width: 1em;
  height: 1em; }

.footer-icon svg {
  width: 100%;
  height: 100%; }

.security-badge ins {
  font-weight: var(--font-weight-bold);
  color: var(--color-status-success);
  text-decoration: none; }

.security-rating-explainer {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  margin-left: calc(var(--spacing-lg) * -0.5);
  /* Pull it closer to the badge */ }

@media (max-width: 768px) {
  .command-bar-footer {
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-md); }
  .footer-left,
  .footer-right {
    gap: var(--spacing-md); }
  .footer-right {
    flex-wrap: wrap;
    justify-content: center; }
  .footer-badge {
    padding: var(--spacing-sm);
    gap: var(--spacing-sm); } }

/* Benefits Section - Unified Interactive Visualization */
.section-benefits .benefits-container {
  margin-top: var(--spacing-xxl);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  align-items: center; }

@media (min-width: 992px) {
  .section-benefits .benefits-container {
    grid-template-columns: 1fr 1fr; } }

.section-benefits .benefit-visualization {
  width: 100%;
  height: 400px;
  /* Default height */
  min-height: 300px;
  position: relative;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--border-radius-xl); }

.section-benefits #benefits-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.section-benefits .benefit-triggers {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md); }

.section-benefits .benefit-trigger {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-xl);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease; }

.section-benefits .benefit-trigger:hover {
  background-color: var(--color-background-alt); }

.section-benefits .benefit-trigger.active {
  background-color: color-mix(in srgb, var(--color-accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-accent) 20%, transparent); }

.section-benefits .benefit-trigger.is-autoplaying {
  animation: subtle-pulse 2s infinite; }

@keyframes subtle-pulse {
  0% {
    background-color: color-mix(in srgb, var(--color-accent) 8%, transparent); }
  50% {
    background-color: color-mix(in srgb, var(--color-accent) 12%, transparent); }
  100% {
    background-color: color-mix(in srgb, var(--color-accent) 8%, transparent); } }

.section-benefits .trigger-icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-text-secondary);
  flex-shrink: 0;
  transition: color 0.3s ease; }

.section-benefits .benefit-trigger.active .trigger-icon {
  color: var(--color-accent); }

.section-benefits .trigger-icon svg {
  width: 100%;
  height: 100%; }

.section-benefits .trigger-text h4 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--spacing-sm) 0;
  color: var(--color-text-secondary);
  transition: color 0.3s ease; }

.section-benefits .benefit-trigger.active .trigger-text h4 {
  color: var(--color-text-primary); }

.section-benefits .trigger-text p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.6; }

.cognitive-enterprise-section {
  /* Common row styles */
  /* User-specific styles */
  /* Connection lines container */
  /* SynthGrid Section */
  /* Canvas for TypeScript drawing */
  /* Responsive styles */ }
  .cognitive-enterprise-section .diagram-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    width: 100%;
    max-width: 1280px; }
  .cognitive-enterprise-section .users-row,
  .cognitive-enterprise-section .systems-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    z-index: 2;
    padding: 0 5%;
    flex-wrap: nowrap; }
    .cognitive-enterprise-section .users-row .icon,
    .cognitive-enterprise-section .systems-row .icon {
      margin-top: 0.5rem;
      display: flex;
      justify-content: center; }
      .cognitive-enterprise-section .users-row .icon svg,
      .cognitive-enterprise-section .systems-row .icon svg {
        width: 3rem;
        height: 3rem; }
  .cognitive-enterprise-section .user-item,
  .cognitive-enterprise-section .system-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    flex: 1;
    max-width: 20%; }
    .cognitive-enterprise-section .user-item p,
    .cognitive-enterprise-section .system-item p {
      margin-top: 0.3rem;
      font-size: clamp(0.6rem, 2vw, 0.9rem);
      line-height: 1.1; }
  .cognitive-enterprise-section .connection-lines {
    width: 100%;
    height: calc(max(8rem, 10vh));
    position: relative; }
  .cognitive-enterprise-section .synthgrid-wordmark {
    font-size: 2.5rem;
    /* Standardized size */
    font-weight: var(--font-weight-light);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin-bottom: 0; }
  .cognitive-enterprise-section .synthgrid-section {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 0.5rem; }
    .cognitive-enterprise-section .synthgrid-section img {
      max-width: 4rem; }
  .cognitive-enterprise-section canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none; }
  @media (max-width: 1024px) {
    .cognitive-enterprise-section .connection-lines {
      display: block;
      height: clamp(4rem, 10vw, 8rem); }
    .cognitive-enterprise-section .users-row,
    .cognitive-enterprise-section .systems-row {
      flex-wrap: nowrap;
      justify-content: space-between; }
    .cognitive-enterprise-section .system-item {
      display: flex; } }
  @media (max-width: 768px) {
    .cognitive-enterprise-section .synths-row {
      flex-wrap: wrap; }
    .cognitive-enterprise-section .synth-avatar {
      margin-bottom: var(--spacing-lg); } }
@keyframes svg-pulse {
  0% {
    filter: drop-shadow(0 0 0 rgba(40, 104, 180, 0)); }
  50% {
    filter: drop-shadow(0 0 12px rgba(40, 104, 180, 0.7)); }
  100% {
    filter: drop-shadow(0 0 0 rgba(40, 104, 180, 0)); } }
  .cognitive-enterprise-section .svg-glow-container {
    position: relative;
    display: inline-block;
    transition: all 0.5s ease-out; }
  .cognitive-enterprise-section .svg-item.pulse svg {
    animation: svg-pulse 2s cubic-bezier(0.215, 0.61, 0.355, 1);
    z-index: 10;
    /* Ensures the pulsing element appears above others */ }

.section-cta .section-header {
  margin-bottom: var(--spacing-lg); }

.contact-card-container {
  max-width: 1100px;
  margin: 0 auto; }

.section-cta .contact-card {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--border-radius-xl);
  align-items: start;
  /* Align items to the top */ }

.contact-item {
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-lg);
  /* Consistent padding */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Align content to the top */
  align-items: center;
  min-height: 180px; }

/* Mobile: stack with horizontal dividers */
.contact-item:not(:last-child) {
  border-bottom: 1px solid var(--color-border-primary); }

/* Desktop: 3-column layout */
@media (min-width: 768px) {
  .section-cta .contact-card {
    grid-template-columns: 1fr 1.25fr 1fr; }
  .contact-item:not(:last-child) {
    border-bottom: none; }
  .contact-item--center {
    border-left: 1px solid var(--color-border-primary);
    border-right: 1px solid var(--color-border-primary); } }

.contact-item-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-lg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary); }

/* Form Styles */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  width: 100%;
  max-width: 300px; }

.contact-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  background-color: var(--color-background);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--border-radius);
  transition: border-color 0.2s, box-shadow 0.2s;
  color: var(--color-text-primary);
  text-align: center; }

.contact-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent); }

.contact-button {
  background-color: #000000;
  color: var(--color-background);
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  font-weight: var(--font-weight-bold);
  border-radius: var(--border-radius);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out; }

.contact-button:hover {
  background-color: var(--color-accent); }

/* Decryption Link Styles */
.contact-link--interactive {
  font-family: var(--font-family-mono);
  font-size: 1.75rem;
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  color: var(--color-text-primary);
  transition: color 0.3s ease; }

.contact-link--interactive:hover {
  color: var(--color-accent); }

.contact-link--interactive.is-verifying span {
  color: var(--color-status-verifying); }

.contact-link--interactive.is-verified span {
  color: var(--color-status-success); }

.contact-link--interactive.is-decrypted {
  text-decoration: underline; }

.contact-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--spacing-sm);
  opacity: 0;
  transition: opacity 0.3s ease-out; }

.contact-status.is-visible {
  opacity: 1; }

.contact-status-light {
  width: 8px;
  height: 8px;
  border-radius: var(--border-radius-full);
  background-color: var(--color-accent);
  animation: pulse-accent 2s infinite; }

@keyframes pulse-accent {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 70%, transparent); }
  70% {
    box-shadow: 0 0 0 8px transparent; }
  100% {
    box-shadow: 0 0 0 0 transparent; } }

.contact-status-text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary); }

.contact-status-text strong {
  font-weight: var(--font-weight-bold); }

header,
.tagline,
.hero-text,
.site-title,
.hero-wordmark,
.hero-oneliner {
  position: relative; }

/** shim that ensures we have a proper gradient mask against the scrolling text */
/* .tagline::before, */
.hero-text::before,
.header-nav::before {
  content: '';
  position: absolute;
  inset: 2rem;
  /* --color-background: red; */
  /* Uniform padding/fade */
  box-shadow: 0 0 3rem 3rem var(--color-background);
  background-color: var(--color-background);
  pointer-events: none;
  z-index: -1; }

.hero-oneliner::before {
  content: '';
  position: absolute;
  inset: 0rem;
  /* Uniform padding/fade */
  box-shadow: 0 0 3rem 3rem var(--color-background);
  background-color: var(--color-background);
  pointer-events: none;
  z-index: -2; }

.synthgrid-wordmark {
  display: inline-block;
  color: var(--color-accent);
  font-weight: var(--font-weight-light);
  letter-spacing: 0.3rem;
  margin-left: 1rem; }

.hero-cover {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  margin-bottom: var(--spacing-md); }
  .hero-cover .synthgrid-logo {
    max-height: calc(min(14rem, 20vw));
    max-width: calc(min(14rem, 20vw));
    aspect-ratio: 1;
    z-index: 2; }
  .hero-cover .synthgrid-wordmark {
    margin-top: var(--spacing-md);
    inset: 4rem;
    box-shadow: 0 0 3rem 3rem var(--color-background);
    background-color: var(--color-background);
    display: inline-block;
    color: var(--color-text-primary);
    font-size: calc(min(8rem, 10vw));
    font-weight: var(--font-weight-light);
    letter-spacing: 0.3rem;
    margin-top: calc(min(8rem, 10vw) * -1);
    margin-left: 1rem;
    margin-bottom: 0rem;
    padding-bottom: 0rem;
    margin-right: 1rem; }
  .hero-cover img {
    max-height: 20rem;
    max-width: 20rem;
    aspect-ratio: 1/1; }
  .hero-cover p {
    margin-left: -0.5rem;
    font-size: calc(min(3rem, 4vw));
    font-weight: var(--font-weight-light);
    color: var(--color-accent); }
    .hero-cover p strong, .hero-cover p em {
      font-weight: var(--font-weight-medium);
      color: var(--color-text-primary); }

.hero-form {
  margin-top: var(--spacing-md);
  z-index: 99;
  display: flex;
  align-items: center;
  justify-items: center; }
  .hero-form .hero-email-input {
    flex: 1;
    height: 3rem;
    width: 12rem;
    border: 2px solid var(--color-accent);
    border-radius: var(--border-radius);
    margin-right: 1rem;
    font-size: var(--font-size-sm);
    background: white;
    color: var(--color-primary);
    margin-bottom: 0; }
  .hero-form .hero-email-input:focus {
    outline: none;
    border-color: var(--color-accent-light); }
  .hero-form .hero-submit-btn {
    height: 3rem;
    border: 2px solid var(--color-accent);
    border-radius: var(--border-radius);
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    border: none;
    font-size: var(--font-size-sm);
    cursor: pointer;
    margin: 0; }
  .hero-form .hero-submit-btn:hover {
    background: var(--color-accent-light); }

/* FOR MOBILE WE USE THIS ADJUSTMENT */
@media (max-width: 480px) {
  .section-hero {
    width: 100%;
    margin-left: auto;
    margin-right: auto; }
  .hero-cover {
    flex-direction: column;
    align-items: center; }
    .hero-cover .synthgrid-logo {
      margin-bottom: var(--spacing-xl);
      max-height: calc(min(12rem, 50vw));
      max-width: calc(min(12rem, 50vw)); }
    .hero-cover .synthgrid-wordmark {
      font-size: 3.5rem; }
    .hero-cover .hero-text {
      font-size: 1.44rem; } }

.tagline {
  /* margin-top: 10vh; */
  display: inline-block;
  font-size: var(--font-size-xl);
  padding-bottom: 20vh; }

.section-hero {
  position: relative;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: calc(100svh - 6rem);
  width: 100vw; }

.section-hero::before {
  /* --color-background: red; */
  content: "";
  position: absolute;
  left: -20rem;
  right: -20em;
  overflow-x: hidden;
  top: 0;
  bottom: 0;
  z-index: 4;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-background) 0%, transparent) 0%, color-mix(in srgb, var(--color-background) 0%, transparent) 75%, color-mix(in srgb, var(--color-background) 100%, transparent) 98%); }

.section-hero > img {
  max-height: 50svh; }

/* SYNTHS INTRO SECTION */
.section-header {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-bottom: var(--spacing-lg); }

.section-header.align-left {
  padding-left: 1rem; }

.section-header.align-right {
  padding-left: 0rem;
  padding-right: 1rem;
  text-align: right; }

/* Left aligned accent */
.section-header.align-left::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0.15rem;
  background: var(--color-accent); }

/* Right aligned accent */
.section-header.align-right {
  text-align: right; }

.section-header.align-right::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 0.15rem;
  background: var(--color-accent); }

.section-synths {
  margin-bottom: var(--spacing-lg); }

.section-title {
  margin-top: var(--spacing-xxl);
  text-transform: uppercase;
  font-weight: var(--font-weight-thin);
  text-align: center;
  letter-spacing: calc(var(--font-size-base)*.125);
  padding-bottom: calc(var(--font-size-base)* var(--line-height)*0.5); }

.section-subtitle {
  text-align: center;
  font-style: italic;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  margin-bottom: 0rem;
  font-weight: var(--font-weight-normal); }

.section-header h3 {
  font-weight: var(--font-weight-thin);
  letter-spacing: calc(var(--font-size-base)*.125);
  margin-bottom: 0px;
  padding-bottom: calc(var(--font-size-base)* var(--line-height)*0.125); }

.section-header .explanation {
  color: var(--color-text-primary); }

.section-grid {
  display: grid;
  grid-template-columns: fit-content(40%) 1fr;
  gap: var(--spacing-xxl); }

.section-grid-right {
  grid-template-columns: 1fr fit-content(40%); }

.bullets-panel-right {
  text-align: right; }

.bullets-panel-right .bullet {
  flex-direction: row-reverse;
  justify-content: flex-start; }

.bullets-panel-right .bullet svg {
  margin-left: 0rem;
  margin-right: 0; }

.bullet {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  cursor: pointer;
  padding: 0.5rem; }

.bullet .icon {
  width: 1.5 rem;
  height: 1.5 rem; }

.bullet:hover {
  color: var(--color-accent-hover); }

.bullet.active {
  color: var(--color-accent); }

.bullet.active:hover {
  color: var(--color-accent); }

.bullet svg {
  width: 1.25rem;
  min-width: 1.25rem;
  fill: currentColor;
  stroke-width: 0.5px; }

.bullet.active svg {
  fill: currentColor;
  /* Will inherit from the active state color */ }

.content-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-lg);
  /* Center the text */
  height: 100%; }

.content-block {
  padding: var(--spacing-md); }

.content-block .content-text {
  max-width: 800px;
  margin: 0 auto; }

.content-block .content-pictogram {
  color: var(--color-accent);
  fill: currentColor;
  width: 100%;
  height: 100%;
  max-width: 10rem;
  max-height: 10rem;
  margin: 1rem;
  margin: 0 auto; }

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-xl);
  margin: 4rem auto;
  padding: 0 1rem; }

.metric-box {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-lg);
  text-align: center; }

.metric-number {
  font-size: calc(var(--font-size-base)*2);
  font-weight: unset;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: calc(var(--font-size-base)*.125);
  padding-bottom: 0;
  margin-bottom: 0;
  color: var(--color-accent); }

.metric-context {
  font-size: calc(var(--font-size-base));
  font-weight: var(--font-weight-medium);
  margin-top: 0.5rem;
  color: var(--color-text-primary); }

.metric-statement {
  margin-top: var(--spacing-md);
  color: var(--color-text-tertiary); }

@media (max-width: 640px) {
  .feature-section {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem; }
  .metrics-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md); }
  .section-grid {
    gap: var(--spacing-md); }
  .section-grid-right {
    gap: var(--spacing-md); } }

/* KEY QUOTE */
.section-key-quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center; }

.quote-container {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--spacing-xl);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--border-radius-xl); }

.quote-content {
  text-align: center;
  line-height: 1.7;
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-light); }

.quote-content p {
  margin: 0; }

.quote-footer {
  margin-top: var(--spacing-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  font-size: var(--font-size-md); }

/* TIMELINE */
.implementation-timeline {
  padding-top: 4rem;
  padding-left: 0rem;
  padding-right: 0rem;
  padding-bottom: 0rem;
  margin-bottom: -2rem; }
  .implementation-timeline .timeline-wrapper {
    padding-top: 1rem;
    max-width: 1200px;
    margin: 0 auto; }
  .implementation-timeline .timeline-nodes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2rem 0; }
  .implementation-timeline .node {
    text-align: center;
    cursor: pointer; }
  .implementation-timeline .node .icon:hover {
    background: var(--color-status-warning-bg);
    color: var(--color-text-on-accent); }
  .implementation-timeline .node.active .icon {
    background: var(--color-accent);
    color: var(--color-text-on-accent); }
  .implementation-timeline .node.active .icon:hover {
    background: var(--color-accent);
    color: var(--color-text-on-accent); }
  .implementation-timeline .connector {
    flex-grow: 1;
    height: 2px;
    background: var(--color-accent);
    margin: 0 1rem; }
  .implementation-timeline .icon {
    width: 40px;
    height: 40px;
    border: 2px solid var(--color-accent);
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem auto;
    transition: all 0.3s ease; }
  .implementation-timeline .week {
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.5rem; }
  .implementation-timeline .phase {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary); }
  .implementation-timeline .phase-details {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: var(--color-background-alt);
    border-radius: var(--border-radius); }
  .implementation-timeline .phase-details h4 {
    text-align: center; }
  .implementation-timeline .details-grid {
    display: grid;
    text-align: center;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
    padding: var(--spacing-md); }
  .implementation-timeline .detail-item {
    padding: 1.5rem;
    background: var(--color-background-alt);
    border-radius: var(--border-radius); }
  .implementation-timeline .detail-title {
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.5rem;
    color: var(--color-accent); }
  .implementation-timeline .detail-description {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm); }
  @media (max-width: 640px) {
    .implementation-timeline .phase-details {
      margin-top: var(--spacing-md); }
    .implementation-timeline .connector {
      display: none; }
    .implementation-timeline .detail-item {
      padding: 0.5rem; }
    .implementation-timeline .phase-details {
      padding-left: 0.25rem;
      padding-right: 0.25rem; }
    .implementation-timeline .details-grid {
      padding-left: 0rem;
      padding-right: 0rem;
      margin: 0rem; } }
  .implementation-timeline .section-benefits {
    margin-bottom: var(--spacing-lg); }
  .implementation-timeline .benefits-explanation {
    text-align: center; }
  .implementation-timeline .core-problem {
    margin-top: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    justify-items: center;
    align-items: center;
    text-align: center; }
  .implementation-timeline .core-problem .pictogram {
    width: 4rem;
    height: 4rem;
    margin-bottom: var(--spacing-lg); }

/*
   ___       _ _            ___         _ _         _              ___ _____ _   
  / _ \ _ _ | (_)_ _  ___  |_ _|_ _  __| (_)__ __ _| |_ ___ _ _   / __|_   _/_\  
 | (_) | ' \| | | ' \/ -_)  | || ' \/ _` | / _/ _` |  _/ _ \ '_| | (__  | |/ _ \ 
  \___/|_||_|_|_|_||_\___| |___|_||_\__,_|_\__\__,_|\__\___/_|    \___| |_/_/ \_\
                                                                                 
*/
.contact-container {
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-content: center;
  justify-content: center;
  align-items: center;
  text-align: center; }

.call-us {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium); }

.connection-promise {
  text-align: center;
  display: flex;
  color: var(--color-text-secondary); }

.online-indicator {
  display: flex;
  justify-items: center;
  align-content: center;
  justify-content: center;
  align-items: center; }

.online-indicator-ball {
  width: 0.7rem;
  height: 0.7rem;
  background-color: var(--color-accent-green-bright);
  border-radius: var(--border-radius-full);
  display: inline-block;
  animation: pulse 2s infinite; }

.status-text {
  color: var(--color-accent-green-bright); }

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); }
  70% {
    box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); }
  100% {
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); } }

.ecosystem-section {
  /* position: relative; */
  /* overflow-x: hidden; */
  margin-top: 8rem;
  margin-bottom: 8rem;
  text-align: center; }
  .ecosystem-section .ecosystem-logo-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-lg);
    max-width: 1200px;
    padding: 0 1rem;
    margin: 0 auto; }
  .ecosystem-section .ecosystem-logo {
    flex: 1 1 14rem;
    max-width: 14rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center; }
  .ecosystem-section img {
    object-fit: contain;
    display: inline-block;
    height: 3rem;
    max-width: 12rem; }
  .ecosystem-section .tech img {
    height: 3rem;
    max-width: 12rem; }
  @media (max-width: 480px) {
    .ecosystem-section .ecosystem-logo {
      margin: 0em;
      max-width: 30vw;
      max-height: 30vw;
      display: flex;
      align-items: center;
      justify-content: center; }
      .ecosystem-section .ecosystem-logo img {
        width: 100%;
        height: auto; } }
.process-flow-section {
  margin-top: 16rem;
  margin-bottom: 16rem; }

.process-flow-section .process-flow-container {
  margin-top: var(--spacing-xxl);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  position: relative; }

.process-flow-section .process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--spacing-md);
  transition: transform 0.3s ease;
  z-index: 2; }

.process-flow-section .process-step.highlight .step-icon-container {
  border: 1px solid var(--color-accent);
  border-radius: var(--border-radius-xl);
  animation: border-fade-in 0.5s ease-out forwards; }

.process-flow-section .process-step h3 {
  font-weight: var(--font-weight-normal);
  margin-top: var(--spacing-md);
  margin-bottom: 0.5rem; }

.process-flow-section .process-step p {
  max-width: 12rem;
  margin: 0;
  font-size: var(--font-size-sm); }

.process-flow-section .step-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.5rem;
  width: 4.5rem;
  transition: box-shadow 0.3s ease; }

.process-flow-section .pictogram {
  height: 3rem;
  width: 3rem;
  display: flex;
  align-items: center;
  justify-content: center; }

.process-flow-section .pictogram svg {
  max-height: 100%;
  max-width: 100%;
  height: auto !important;
  /* Override any height set in SVG */
  width: auto !important;
  /* Override any width set in SVG */ }

.process-flow-section .logo-container {
  height: 5rem;
  width: 5rem;
  display: flex;
  align-items: center;
  justify-content: center; }

.process-flow-section .logo-container img {
  max-height: 100%;
  max-width: 100%;
  height: auto !important;
  width: auto !important;
  object-fit: contain; }

.process-flow-section .process-connection {
  position: relative;
  width: 8rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center; }

.process-flow-section .process-connection .connection-line {
  position: absolute;
  /* height: 2px; */
  width: 100%;
  /* background-color: var(--color-border-subtle); */
  z-index: 1; }

.process-flow-section .process-connection .data-pulse-container {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2; }

.process-flow-section .data-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: var(--border-radius-full);
  background-color: var(--color-accent-light);
  transform: translateY(-50%);
  top: 50%;
  opacity: 0; }

.process-flow-section .data-particle.text-particle {
  width: 1rem;
  height: 1rem;
  border-radius: var(--border-radius-full); }

.process-flow-section .data-particle.number-particle {
  width: 4px;
  height: 4px; }

@keyframes step-glow {
  0% {
    box-shadow: 0 0 0 rgba(0, 102, 204, 0); }
  40% {
    box-shadow: 0 0 20px rgba(0, 102, 204, 0.4); }
  100% {
    box-shadow: 0 0 0 rgba(0, 102, 204, 0); } }

@keyframes particle-flow {
  0% {
    left: 0%;
    opacity: 0; }
  10% {
    opacity: 0.8; }
  90% {
    opacity: 0.8; }
  100% {
    left: 100%;
    opacity: 0; } }

/* Responsive adjustments */
@media (max-width: 768px) {
  .process-flow-section .process-flow-container {
    flex-direction: column; }
  .process-flow-section .process-connection {
    width: 4rem;
    height: 6rem;
    transform: rotate(90deg);
    margin: 1rem 0; } }

/* Stop Fighting With Systems Section */
.stop-fighting-systems-section {
  position: relative;
  overflow: hidden;
  /* Static Elements Positioning */
  /* Statically position the 'After' user icon */
  /* Statically position the 'After' user icon */
  /* Before side circular positioning using nth-child */
  /* After side positioning */
  /* After side user positioning */
  /* SynthGrid central element */
  /* System states */
  /* Speech bubble */
  /* Connection lines container */
  /* Responsive Design */
  /* Animation Classes */ }
  .stop-fighting-systems-section .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem; }
  .stop-fighting-systems-section .section-header {
    text-align: center;
    margin-bottom: var(--spacing-xxl); }
  .stop-fighting-systems-section .section-header h2 {
    font-size: 3rem;
    font-weight: var(--font-weight-black);
    text-transform: uppercase;
    letter-spacing: -0.04em;
    margin-bottom: 0.5rem; }
  .stop-fighting-systems-section .section-header h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-light);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em; }
  .stop-fighting-systems-section .comparison-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xxl); }
  .stop-fighting-systems-section .before-container,
  .stop-fighting-systems-section .after-container {
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-xl);
    padding: var(--spacing-lg); }
  .stop-fighting-systems-section .before-container h4,
  .stop-fighting-systems-section .after-container h4 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 1.25rem;
    letter-spacing: -0.01em; }
  .stop-fighting-systems-section .before-container h4 {
    color: var(--color-text-secondary); }
  .stop-fighting-systems-section .after-container h4 {
    color: var(--color-text-primary); }
  .stop-fighting-systems-section .before-container ul,
  .stop-fighting-systems-section .after-container ul {
    margin-bottom: var(--spacing-lg);
    padding-left: 0;
    list-style: none; }
  .stop-fighting-systems-section .before-container li,
  .stop-fighting-systems-section .after-container li {
    margin-bottom: var(--spacing-md);
    padding-left: 2rem;
    /* Make space for the icon */
    position: relative;
    line-height: 1.6;
    color: var(--color-text-secondary); }
  .stop-fighting-systems-section .list-icon {
    position: absolute;
    left: 0;
    top: 0.1em;
    /* Adjust vertical alignment */
    width: 1.25em;
    height: 1.25em; }
  .stop-fighting-systems-section .list-icon svg {
    width: 100%;
    height: 100%; }
  .stop-fighting-systems-section .before-container .list-icon svg {
    fill: var(--color-status-error); }
  .stop-fighting-systems-section .after-container .list-icon svg {
    fill: var(--color-status-success); }
  .stop-fighting-systems-section .canvas-wrapper {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden; }
  .stop-fighting-systems-section #before-canvas,
  .stop-fighting-systems-section #after-canvas {
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1; }
  .stop-fighting-systems-section .before-static-elements,
  .stop-fighting-systems-section .after-static-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5; }
  .stop-fighting-systems-section .system-item,
  .stop-fighting-systems-section .after-system-item {
    position: absolute;
    width: 6rem;
    height: 6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-xl);
    transition: all 0.3s ease; }
  .stop-fighting-systems-section .system-item .icon,
  .stop-fighting-systems-section .after-system-item .icon {
    width: 3rem;
    height: 3rem;
    margin-bottom: 4px; }
  .stop-fighting-systems-section .system-item .icon svg,
  .stop-fighting-systems-section .after-system-item .icon svg {
    width: 100%;
    height: 100%;
    fill: var(--color-text-tertiary); }
  .stop-fighting-systems-section .system-item .name,
  .stop-fighting-systems-section .after-system-item .name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    text-align: center;
    margin: 0;
    line-height: 1.2; }
  .stop-fighting-systems-section .after-system-item .abbr {
    display: block;
    font-size: 0.625rem;
    /* Corresponds to 10px, might need a new variable if used elsewhere */
    color: var(--color-text-subtle);
    margin-top: 2px; }
  .stop-fighting-systems-section .user-item {
    position: absolute;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: none;
    /* The user icon should move instantly, not transition */
    background-color: var(--color-text-primary);
    border-radius: var(--border-radius-full);
    padding: 8px; }
  .stop-fighting-systems-section .user-item .icon {
    width: 100%;
    height: 100%; }
  .stop-fighting-systems-section .user-item .icon svg {
    width: 100%;
    height: 100%;
    fill: var(--color-text-primary); }
  .stop-fighting-systems-section #after-user-icon {
    top: 50%;
    left: 80px;
    /* As defined in the original script */
    transform: translate(-50%, -50%); }
  .stop-fighting-systems-section .user-item {
    position: absolute;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    /* The user icon should not move with a transition, but instantly */
    transition: none; }
  .stop-fighting-systems-section .user-item .icon {
    width: 100%;
    height: 100%; }
  .stop-fighting-systems-section .user-item .icon svg {
    width: 100%;
    height: 100%;
    fill: var(--color-text-primary); }
  .stop-fighting-systems-section #after-user-icon {
    top: 50%;
    left: 80px;
    /* As defined in the original script */
    transform: translate(-50%, -50%); }
  .stop-fighting-systems-section .system-item:nth-child(1) {
    /* CRM - first system after user */
    top: 50%;
    right: 15%;
    transform: translate(50%, -50%); }
  .stop-fighting-systems-section .system-item:nth-child(2) {
    /* ERP */
    bottom: 12.5%;
    right: 35%;
    transform: translate(50%, 50%); }
  .stop-fighting-systems-section .system-item:nth-child(3) {
    /* Email */
    bottom: 12.5%;
    left: 35%;
    transform: translate(-50%, 50%); }
  .stop-fighting-systems-section .system-item:nth-child(4) {
    /* Docs */
    top: 50%;
    left: 15%;
    transform: translate(-50%, -50%); }
  .stop-fighting-systems-section .system-item:nth-child(5) {
    /* Analytics */
    top: 12.5%;
    left: 35%;
    transform: translate(-50%, -50%); }
  .stop-fighting-systems-section .system-item:nth-child(6) {
    /* Support */
    top: 12.5%;
    right: 35%;
    transform: translate(50%, -50%); }
  .stop-fighting-systems-section .after-system-item:nth-child(2) {
    /* First system after user and synthgrid */
    top: 2%;
    right: 28%; }
  .stop-fighting-systems-section .after-system-item:nth-child(3) {
    top: 7%;
    right: 12%; }
  .stop-fighting-systems-section .after-system-item:nth-child(4) {
    top: 29%;
    right: 2%; }
  .stop-fighting-systems-section .after-system-item:nth-child(5) {
    bottom: 29%;
    right: 2%; }
  .stop-fighting-systems-section .after-system-item:nth-child(6) {
    bottom: 7%;
    right: 12%; }
  .stop-fighting-systems-section .after-system-item:nth-child(7) {
    bottom: 2%;
    right: 28%; }
  .stop-fighting-systems-section .user-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: none; }
  .stop-fighting-systems-section .user-item .icon {
    width: 24px;
    height: 24px; }
  .stop-fighting-systems-section .user-item .icon svg {
    width: 100%;
    height: 100%;
    fill: var(--color-text-on-accent); }
  .stop-fighting-systems-section .after-static-elements .user-item {
    top: 50%;
    left: 15%;
    transform: translate(-50%, -50%); }
  .stop-fighting-systems-section .synthgrid-section {
    margin-top: -1rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: center; }
  .stop-fighting-systems-section .synthgrid-section img {
    margin-top: var(--spacing-lg);
    width: 8rem;
    height: 8rem; }
  .stop-fighting-systems-section .synthgrid-wordmark {
    font-size: 2rem;
    font-weight: var(--font-weight-light);
    color: var(--color-accent);
    margin: 0;
    text-align: center; }
  .stop-fighting-systems-section .system-item.loading,
  .stop-fighting-systems-section .after-system-item.loading {
    border-color: var(--color-accent);
    background: var(--color-background-alt);
    animation: pulse 1.5s ease-in-out infinite; }
  .stop-fighting-systems-section .system-item.error,
  .stop-fighting-systems-section .after-system-item.error {
    border-color: var(--color-status-error);
    background: var(--color-status-error-bg);
    animation: frustration 0.5s ease-in-out infinite; }
  .stop-fighting-systems-section .system-item.active,
  .stop-fighting-systems-section .after-system-item.active {
    border-color: var(--color-status-success);
    background: var(--color-status-success-bg); }
  .stop-fighting-systems-section .system-status {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 16px;
    height: 16px;
    border-radius: var(--border-radius-full);
    display: none; }
  .stop-fighting-systems-section .system-item.loading .system-status,
  .stop-fighting-systems-section .after-system-item.loading .system-status {
    display: block;
    background: var(--color-accent);
    animation: loading 1s linear infinite; }
  .stop-fighting-systems-section .system-item.error .system-status,
  .stop-fighting-systems-section .after-system-item.error .system-status {
    display: block;
    background: var(--color-status-error); }
  .stop-fighting-systems-section .system-item.active .system-status,
  .stop-fighting-systems-section .after-system-item.active .system-status {
    display: block;
    background: var(--color-status-success); }
  .stop-fighting-systems-section .speech-bubble {
    position: absolute;
    background: var(--color-background);
    border: 2px solid var(--color-border-primary);
    border-radius: var(--border-radius);
    padding: 8px 12px;
    max-width: 200px;
    font-size: var(--font-size-sm);
    display: none;
    z-index: 15;
    box-shadow: 0 2px 8px var(--color-shadow); }
  .stop-fighting-systems-section .speech-bubble.show {
    display: block; }
  .stop-fighting-systems-section .speech-bubble.loading {
    border-color: var(--color-status-warning);
    background: var(--color-status-warning-bg); }
  .stop-fighting-systems-section .speech-bubble.frustrated {
    border-color: var(--color-status-error);
    background: var(--color-status-error-bg); }
  .stop-fighting-systems-section .speech-bubble.command {
    border-color: var(--color-accent);
    background: var(--color-background-alt); }
  .stop-fighting-systems-section .speech-bubble.success {
    border-color: var(--color-status-success);
    background: var(--color-status-success-bg); }
  .stop-fighting-systems-section .bubble-content {
    color: var(--color-text-primary);
    line-height: 1.4; }
  .stop-fighting-systems-section .bubble-pointer {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--color-background); }
  .stop-fighting-systems-section .bubble-pointer::before {
    content: '';
    position: absolute;
    bottom: 2px;
    left: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--color-border-primary); }
  .stop-fighting-systems-section .connection-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; }
  .stop-fighting-systems-section .testimonial {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-xl);
    background: var(--color-background);
    border-radius: var(--border-radius);
    box-shadow: 0 1px 3px var(--color-shadow);
    border: 2px solid var(--color-border-primary); }
  .stop-fighting-systems-section .testimonial blockquote {
    font-size: var(--font-size-xl);
    font-style: italic;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
    line-height: 1.8; }
  .stop-fighting-systems-section .testimonial cite {
    font-size: var(--font-size-md);
    color: var(--color-text-tertiary);
    font-style: normal;
    font-weight: var(--font-weight-medium); }
  @media (max-width: 1024px) {
    .stop-fighting-systems-section .comparison-container {
      gap: var(--spacing-lg); }
    .stop-fighting-systems-section .canvas-wrapper {
      height: 350px; }
    .stop-fighting-systems-section .system-item,
    .stop-fighting-systems-section .after-system-item {
      width: 70px;
      height: 70px; }
    .stop-fighting-systems-section .system-item .icon,
    .stop-fighting-systems-section .after-system-item .icon {
      width: 28px;
      height: 28px; } }
  @media (max-width: 768px) {
    .stop-fighting-systems-section .container {
      padding: 0; }
    .stop-fighting-systems-section #after-user-icon {
      left: 15%; }
    .stop-fighting-systems-section .comparison-container {
      grid-template-columns: 1fr;
      gap: var(--spacing-lg); }
    .stop-fighting-systems-section .section-header h2 {
      font-size: 2rem; }
    .stop-fighting-systems-section .section-header h3 {
      font-size: var(--font-size-xl); }
    .stop-fighting-systems-section .before-container,
    .stop-fighting-systems-section .after-container {
      padding: 1.5rem; }
    .stop-fighting-systems-section .canvas-wrapper {
      height: 300px; }
    .stop-fighting-systems-section .system-item,
    .stop-fighting-systems-section .after-system-item {
      width: 60px;
      height: 60px; }
    .stop-fighting-systems-section .system-item .icon,
    .stop-fighting-systems-section .after-system-item .icon {
      width: 24px;
      height: 24px; }
    .stop-fighting-systems-section .user-item {
      width: 35px;
      height: 35px; }
    .stop-fighting-systems-section .testimonial {
      padding: var(--spacing-lg); }
    .stop-fighting-systems-section .testimonial blockquote {
      font-size: var(--font-size-lg); } }
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1; }
  50% {
    transform: scale(1.05);
    opacity: 0.8; }
  100% {
    transform: scale(1);
    opacity: 1; } }

@keyframes frustration {
  0%,
  100% {
    transform: translateX(0); }
  25% {
    transform: translateX(-2px); }
  75% {
    transform: translateX(2px); } }

@keyframes loading {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

/*
//  _                     ___ ___ ___ 
// | |   ___  __ _ ___   / __/ __/ __|
// | |__/ _ \/ _` / _ \ | (__\__ \__ \
// |____\___/\__, \___/  \___|___/___/
//           |___/                    
*/
:root {
  /* Animation timing */
  --synthgrid-animation-duration: 4s;
  /* Colors - blue gradient spectrum */
  --synthgrid-color-lightest: #A1E8FF;
  --synthgrid-color-light: #81CDFA;
  --synthgrid-color-medium: #61B3F5;
  --synthgrid-color-dark: #2868B4;
  --synthgrid-color-darker: #1685C7;
  --synthgrid-color-darkest: #04162F;
  /* Border color */
  --synthgrid-border-color: var(--color-background)fff;
  /* Background square color */
  --synthgrid-bg-square-color: rgba(255, 255, 255, 0.1);
  --synthgrid-drop-shadow-color: rgba(40, 120, 255, 0.5); }

/* Main logo container with background square */
.synthgrid-logo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 15%;
  width: 100%;
  /* background-color: green; */
  aspect-ratio: 1/1;
  position: relative;
  min-width: 4rem;
  overflow: visible; }

/* White background square */
.synthgrid-logo::before {
  content: "";
  position: absolute;
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  overflow: visible;
  /* center in parent? */
  background-color: var(--color-text-on-accent);
  box-sizing: border-box;
  z-index: -1;
  filter: drop-shadow(0 0 4rem var(--synthgrid-drop-shadow-color)); }

/* Each dot */
.synthgrid-logo > div {
  min-width: 1rem;
  min-height: 1rem;
  border-radius: var(--border-radius-full);
  background-color: var(--synthgrid-color-medium);
  /* width: 100%; */
  /* height: 100%; */
  box-sizing: border-box;
  border: 0.25rem solid var(--synthgrid-border-color); }

/* Color assignment for initial state */
.synthgrid-logo > div:nth-child(1) {
  background-color: var(--synthgrid-color-lightest); }

.synthgrid-logo > div:nth-child(2) {
  background-color: var(--synthgrid-color-medium); }

.synthgrid-logo > div:nth-child(3) {
  background-color: var(--synthgrid-color-dark); }

.synthgrid-logo > div:nth-child(4) {
  background-color: var(--synthgrid-color-medium); }

.synthgrid-logo > div:nth-child(5) {
  background-color: var(--synthgrid-color-darker); }

.synthgrid-logo > div:nth-child(6) {
  background-color: var(--synthgrid-color-medium); }

.synthgrid-logo > div:nth-child(7) {
  background-color: var(--synthgrid-color-dark); }

.synthgrid-logo > div:nth-child(8) {
  background-color: var(--synthgrid-color-medium); }

.synthgrid-logo > div:nth-child(9) {
  background-color: var(--synthgrid-color-lightest); }

/* Animation for the dots with subtle gradient transitions */
.synthgrid-logo > div {
  animation: synthgrid-pulse var(--synthgrid-animation-duration) infinite alternate; }

/* Set different delays for each dot */
.synthgrid-logo > div:nth-child(1) {
  animation-delay: 0s; }

.synthgrid-logo > div:nth-child(2) {
  animation-delay: -0.4s; }

.synthgrid-logo > div:nth-child(3) {
  animation-delay: -0.8s; }

.synthgrid-logo > div:nth-child(4) {
  animation-delay: -0.4s; }

.synthgrid-logo > div:nth-child(5) {
  animation-delay: -0.8s; }

.synthgrid-logo > div:nth-child(6) {
  animation-delay: -1.2s; }

.synthgrid-logo > div:nth-child(7) {
  animation-delay: -0.8s; }

.synthgrid-logo > div:nth-child(8) {
  animation-delay: -1.2s; }

.synthgrid-logo > div:nth-child(9) {
  animation-delay: -1.6s; }

/* Animation keyframes for color transitions */
@keyframes synthgrid-pulse {
  0% {
    background-color: var(--synthgrid-color-lightest); }
  25% {
    background-color: var(--synthgrid-color-light); }
  50% {
    background-color: var(--synthgrid-color-medium); }
  75% {
    background-color: var(--synthgrid-color-dark); }
  100% {
    background-color: var(--synthgrid-color-darkest); } }

.synths-intro-section {
  margin-top: var(--spacing-xxl); }

.synths-intro {
  display: flex;
  justify-content: center;
  gap: var(--spacing-lg);
  /* Add space between the cards */
  /* Refined "Outline" Button Style */
  /* Conversation area */
  /* Continue button */
  /* Capabilities section */
  /* Typing indicator */ }
  .synths-intro .synth {
    max-width: 30vw;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-xl);
    padding: var(--spacing-lg);
    transition: all 0.3s ease;
    /** Chop padding off the text */ }
    .synths-intro .synth:hover {
      transform: translateY(-4px);
      border-color: var(--color-accent); }
    .synths-intro .synth * {
      text-align: center;
      width: 100%;
      margin-right: auto;
      margin-left: auto; }
    .synths-intro .synth p {
      margin: 0;
      padding: 0; }
    .synths-intro .synth .synth-name {
      font-size: var(--font-size-xl);
      margin-bottom: 0.5rem;
      font-weight: var(--font-weight-semibold);
      /* Bolder for emphasis */
      color: var(--color-text-primary);
      /* Monochrome */ }
    .synths-intro .synth .synth-role {
      font-style: italic;
      margin-bottom: 1.5rem; }
  .synths-intro .meet-synth-btn {
    background-color: transparent;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-secondary);
    width: auto;
    padding: 0.5rem 1.5rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease-in-out; }
  .synths-intro .meet-synth-btn:hover {
    background-color: var(--color-text-primary);
    color: var(--color-background);
    border-color: var(--color-text-primary); }
  .synths-intro .synth-conversation {
    margin-top: var(--spacing-md);
    padding-top: 1rem; }
  .synths-intro .conversation-container {
    margin-bottom: 1.5rem; }
  .synths-intro .message-bubble {
    min-height: 3rem;
    margin-bottom: var(--spacing-md);
    padding: 0.75rem;
    background-color: var(--color-background-alt);
    border-radius: var(--border-radius);
    max-width: 95%; }
  .synths-intro .continue-btn {
    background-color: var(--color-accent);
    color: var(--color-text-on-accent);
    border: none;
    padding: 0.4rem 1rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    margin-top: 0.5rem; }
  .synths-intro .continue-btn:hover {
    background-color: var(--color-accent); }
  .synths-intro .synth-capabilities {
    margin-top: 1.5rem; }
  .synths-intro .synth-capabilities h4,
  .synths-intro .synth-principles h4,
  .synths-intro .synth-tips h4 {
    margin: 1.5rem 0 0.75rem 0;
    font-size: var(--font-size-base);
    color: var(--color-text-secondary); }
  .synths-intro .capabilities-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-md); }
  .synths-intro .capability-item {
    margin-bottom: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border-primary); }
  .synths-intro .capability-item h5 {
    margin: 0 0 0.5rem 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary); }
  .synths-intro .capability-item p {
    margin: 0 0 0.5rem 0;
    font-size: var(--font-size-sm); }
  .synths-intro .capability-examples {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.85rem; }
  .synths-intro .capability-examples li {
    margin-bottom: 0.25rem; }
  .synths-intro .synth-principles ul,
  .synths-intro .synth-tips ul {
    margin: 0;
    padding-left: 1.25rem; }
  .synths-intro .synth-principles li,
  .synths-intro .synth-tips li {
    margin-bottom: 0.5rem;
    font-size: var(--font-size-sm); }
  .synths-intro .typing-indicator-wrapper {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: var(--color-background-alt);
    border-radius: 1rem; }
  .synths-intro .typing-indicator {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: var(--border-radius-full);
    background-color: var(--color-accent);
    background-size: cover; }

/* Responsive adjustments */
@media (max-width: 768px) {
  .synths-intro {
    flex-direction: column;
    gap: var(--spacing-xl); }
    .synths-intro .synth {
      max-width: 90vw; }
    .synths-intro .capabilities-list {
      grid-template-columns: 1fr; }
    .synths-intro .message-bubble {
      max-width: 95%; }
    .synths-intro .meet-synth-btn {
      display: none; } }

/* THE TESTAMENT PROTOCOL */
.testament-container {
  color: #000000;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin-top: -6rem;
  /* Offset for the top bar */ }

.testament-content {
  max-width: 1400px;
  text-align: left;
  width: 100%;
  container-type: inline-size;
  /* Establish this as a container */ }

.testament-headline {
  font-family: "NewPanamSkyline", var(--font-family);
  font-size: 10cqw;
  /* Use container query width units */
  font-weight: var(--font-weight-black);
  margin: 0;
  line-height: 0.95;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  width: 100%;
  overflow: hidden;
  padding-bottom: var(--spacing-lg); }

@keyframes slow-rotate {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }

.testament-headline .stylistic-alt {
  display: inline-block;
  /* Allows the transform to work */
  font-feature-settings: "ss01";
  animation: slow-rotate 14s linear infinite;
  transform-origin: 54.5% 50%;
  /* Adjust pivot point down */ }

.testament-body {
  margin-top: var(--spacing-lg);
  /* Adjusted for consistency */
  display: flex;
  padding-left: 1rem;
  padding-right: 1rem;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--spacing-lg); }

.testament-text {
  flex-basis: 650px;
  flex-grow: 1; }

.testament-paragraph-lead {
  font-family: var(--font-family);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.4;
  /* Tighter line height */
  font-weight: var(--font-weight-light); }

.testament-brand-name {
  color: #000000;
  font-weight: var(--font-weight-normal);
  /* Increased weight */ }

.testament-emphasis {
  font-weight: var(--font-weight-medium); }

.testament-paragraph-sub {
  font-family: var(--font-family);
  font-size: clamp(1rem, 1.75vw, 1.25rem);
  color: var(--color-text-tertiary);
  margin: var(--spacing-sm) 0 0 0;
  /* Reduced margin */
  line-height: 1.4;
  /* Tighter line height */
  font-weight: var(--font-weight-light); }

.testament-cta {
  flex-shrink: 0; }

.testament-button {
  background-color: #000000;
  color: var(--color-background);
  text-decoration: none;
  padding: 1.5rem 4rem;
  font-weight: var(--font-weight-extrabold);
  border-radius: var(--border-radius);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: inline-block;
  transition: background-color 0.2s ease-in-out;
  font-family: var(--font-family); }

.testament-button:hover {
  background-color: var(--color-accent); }

br.mobile-only {
  display: none; }

.headline-group {
  display: block; }

/* Responsive adjustments for mobile */
@media screen and (max-width: 768px) {
  br.mobile-only {
    display: initial; }
  .testament-container {
    padding-left: 0;
    padding-right: 0;
    margin-top: 4rem;
    margin-bottom: 4rem; }
  .testament-headline {
    font-size: 16cqw;
    /* Increased for mobile */
    text-align: center;
    padding-top: 4rem;
    padding-bottom: 6rem;
    /* Increased vertical spacing */
    display: flex;
    flex-direction: column;
    align-items: center; }
  .headline-group {
    display: inline; }
  .testament-body {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3rem;
    /* Increased vertical spacing */ }
  .testament-text {
    flex-basis: auto; }
  .testament-paragraph-lead {
    font-size: 2rem;
    margin-bottom: 2rem; }
  .testament-paragraph-sub {
    font-size: 1.25rem; } }