:root {
  /* Color Variables */
  --color-bg: #fff; /* Main background */
  --color-text: #0f0f0f; /* Main dark text */
  --color-muted: #555; /* Muted text (cap, some links) */
  --color-line: #e6e6e6; /* Light line/border (HR, footer border) */
  --color-accent: #1B9C85; /* Primary accent color (links, logo, nav) */
  --color-screenshot-bg: #fafafa; /* Specific background for soft cards/chip tint */
  --color-cta-border: #000; /* CTA border color */
  --color-text-subhead: #ffffff; /* Subhead text color (used in background image contexts) */
  
  /* Spacing & Sizing Variables */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 32px;
  --spacing-xl: 40px;
  
  --max-width: 760px; /* Max content width */
  --border-radius-base: 8px;
  --border-radius-small: 6px;
}

/* * Base and Layout 
 */
html, body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.65;
  font-size: 100%;
}

main { 
  max-width: var(--max-width); 
  margin: 0 auto; 
  padding: var(--spacing-lg) var(--spacing-md) 56px; 
}

/*
 * Typography
 */
h1, h2 { 
  line-height: 1.25;
  margin: 0 0 12px;
  font-weight: 600; 
}

h1 { 
  font-size: 1.75rem; 
  margin-top: 3rem; 
}

h2 { 
  font-size: 1.25rem; 
  margin-top: 28px;
}

p {
  margin: 12px 0;
}

ul {
  margin: 12px 0;
  padding-left: 20px;
}

li {
  margin-bottom: var(--spacing-xs);
}

.lede {
  font-size: 1.15rem; /* Make the intro paragraph stand out */
  margin-bottom: var(--spacing-lg);
  line-height: 1.5;
}

.muted {
  color: var(--color-muted);
}

.note { 
  color: var(--color-muted);
  font-size: 0.95rem; 
}

/*
 * Links
 */
a,
.cta a, 
.cta a:active, 
.cta a:link, 
.cta a:visited {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 400;
}

/*
 * Specific Components
 */

/* Logo */
h1.logo {
  font-family: "SUSE Mono", monospace;
  font-weight: 300; 
  color: var(--color-accent); 
  font-size: 3.2rem;
  margin: 0;
}

/* Header Nav */
nav a {
  margin-right: var(--spacing-md);
  font-family: "SUSE Mono", monospace;
  color: var(--color-accent);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  font-size: 0.8rem;
}

nav a.nav-active {
  color: var(--color-text);
}

/* Call-to-Action Button */
.cta {
  display: inline-block; 
  text-decoration: none; 
  padding: 10px 16px; 
  border: 1px solid var(--color-cta-border);
  border-radius: var(--border-radius-base); 
  margin-top: var(--spacing-sm); 
  font-weight: 600; 
}

/* Screenshot/Image Wrapper */
.screenshot-wrap {
  margin: 18px 0; 
  padding: 12px; 
  border: 1px solid var(--color-line); 
  border-radius: var(--border-radius-base);
  background: var(--color-screenshot-bg);
}

.screenshot-wrap img { 
  width: 100%; 
  height: auto; 
  display: block; 
  border-radius: var(--border-radius-small); 
}

.cap { 
  font-size: 0.9rem; 
  color: var(--color-muted);
  margin-top: var(--spacing-sm); 
}

/* * Separator and Footer 
 */

hr { 
  border: 0; 
  border-top: 1px solid var(--color-line); 
  margin: var(--spacing-lg) 0; 
}

footer { 
  margin-top: var(--spacing-xl);
  font-size: 0.9rem; 
  color: var(--color-muted);
}

/* --- Grid and Layout Utilities --- */
.grid {
display: grid;
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}

.cols-2 {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.cols-3 {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* NEW: Generic flex utility for layout rows (used in hero cards) */
.row {
display: flex; 
gap: var(--spacing-sm); 
align-items: flex-start;
}

/* NEW: Wrapper for multiple .chip elements (Trust & Protections) */
.chips { 
display:flex; 
flex-wrap:wrap; 
gap: var(--spacing-sm); 
margin: var(--spacing-sm) 0 var(--spacing-md) 0; 
} 

/* --- Enhanced Component Styles (Cards, Rows, Icons, Chips) --- */

/* Give cards a better aesthetic, leveraging shadows/borders */
.card {
border: 1px solid var(--color-line); 
border-radius: var(--border-radius-base);
padding: var(--spacing-md);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
transition: box-shadow 0.2s ease;
}

.card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Lift on hover */
}

/* Specific style for the "soft" cards (e.g., Hosting Models, How It Works) */
.card.soft {
background-color: var(--color-screenshot-bg); 
border: none;
box-shadow: none;
}

/* Ensure the title inside the card is styled well */
.card h3 {
font-size: 1.1rem;
margin-top: 0;
margin-bottom: var(--spacing-md);
}

/* For cards that hold stacked content (like the Key Guarantees section) */
.stack {
display: flex;
flex-direction: column;
}

/* Specific styling for ROWS *inside* cards (like in the Security page features) */
.card .row {
border-bottom: 1px solid var(--color-line); 
padding-bottom: var(--spacing-md);
margin-bottom: var(--spacing-md);
}

.card .row:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}

/* Text alignment inside the generic .row or .card .row component */
.row > div {
flex-grow: 1; /* Allows the text content to take up remaining space */
}

/* Force strong tag content to be block-level for better spacing with the muted paragraph */
.row strong {
  display: block;
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
  line-height: 1.2;
}

/* --- Icon and Alignment --- */
.icon {
width: 20px;
height: 20px;
flex-shrink: 0; 
margin-right: var(--spacing-sm);
color: var(--color-accent); /* Use accent color for non-chip icons */
}

/* Icon style specific to the top .chip container for the Security Page */
.chip .icon {
  width: 30px; 
  height: 30px;
  margin-right: 0;
  margin-bottom: var(--spacing-sm);
  color: var(--color-accent);
}

/* General chip styling (used in the Pilot page and Security page) */
.chip {
display: flex;
align-items: center;
background: var(--color-screenshot-bg); 
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--border-radius-small);
font-weight: 500;
color: var(--color-text);
white-space: nowrap; 
overflow: hidden;
text-overflow: ellipsis;
/* Styling for the Pilot page chips where icon and text are inline */
gap: var(--spacing-xs); 
}

/* Tighter list style */
ul.tight {
list-style-type: '— '; 
padding-left: var(--spacing-md);
}

/* Tighter margin for paragraphs within lists */
.tight li {
  margin-bottom: var(--spacing-xs);
  padding-left: 0;
  list-style-type: '— ';
}