/* Shared site styles built on the design tokens (src/tokens.css).
   Component classes here (site-header, btn, card, footer, …) are the start
   of the src/components library referenced in .agentlane.yml — Features and
   Pricing pages reuse these same classes rather than redefining them. */

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

body {
  margin: 0;
  font-family: 'Nunito Sans', var(--font-family-sans); /* Nunito Sans for body */
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-base);
  background: var(--color-surface-base);
  /* The Figma frame is 1920px wide, but content sits within a responsive container.
     No explicit 1920px body width. Container max-width and margin auto centers content. */
}

h1, h2, h3 {
  font-family: 'Poppins', var(--font-family-sans); /* Poppins for headings */
  margin: 0;
}
p, figure, blockquote { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--color-primary-600); /* Keep original, matches primary theme */
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  background: var(--color-primary-700); /* Keep primary-700 for accessibility */
  color: white;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  z-index: 100;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: var(--space-4);
}

.container {
  max-width: 74rem; /* Equivalent to 1184px, assuming Figma content area */
  margin-inline: auto;
  padding-inline: var(--space-6);
}
@media (min-width: 768px) {
  .container { padding-inline: var(--space-8); }
}
@media (min-width: 1280px) { /* Adjust padding for larger screens to match Figma if needed, inferring from design. */
  .container { padding-inline: var(--space-16); } /* Increased padding for XL screens */
}

.section {
  padding-block: 8rem; /* 128px, increased from 64px (space-16) to match Figma sections' vertical spacing */
}
.section--muted {
  background: var(--color-surface-muted);
}
.section-footer-link {
  margin-top: var(--space-16); /* Increased from 48px to 64px (1rem) */
  text-align: center;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.section-header {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--space-12);
}
.section-header h2 {
  font-size: var(--font-size-4xl); /* Increased from 3xl to 4xl for larger heading */
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
}
.section-header p {
  margin-top: var(--space-4);
  color: var(--color-text-light);
  font-size: var(--font-size-xl); /* Increased from lg to xl */
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.875rem 1.5rem; /* ~14px 24px, adjusted from space-3/space-6 for more precise match */
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-primary {
  background: var(--color-primary-500);
  color: white;
}
.btn-primary:hover { background: var(--color-primary-600); }
.btn-secondary {
  background: transparent;
  border-color: var(--color-neutral-300);
  color: var(--color-text-base);
}
.btn-secondary:hover { background: var(--color-neutral-100); /* Use neutral-100 for hover */ }
.btn-inverse {
  background: white;
  color: var(--color-primary-700);
}
.btn-inverse:hover { background: var(--color-primary-50); }
.btn-outline-inverse {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.6);
  color: white;
}
.btn-outline-inverse:hover { background: rgba(255, 255, 255, 0.12); }
.btn-outline-primary {
  background: var(--color-surface-base);
  border-color: var(--color-primary-500);
  color: var(--color-primary-500);
}
.btn-outline-primary:hover { background: var(--color-primary-50); }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-surface-base);
  border-bottom: 1px solid var(--color-neutral-200);
}
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  text-decoration: none;
}
.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; /* Increased size from 2rem */
  height: 2.5rem; /* Increased size from 2rem */
  border-radius: var(--radius-lg);
  background: var(--color-primary-500);
  color: white; /* Not used for img, but for consistency if it was SVG */
}
.logo-mark img { width: 1.5rem; height: 1.5rem; } /* Adjusted size for img inside logo-mark */
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  text-decoration: none;
  font-weight: var(--font-weight-normal);
  color: var(--color-text-light);
}
.site-nav a:hover { color: var(--color-text-base); }
.site-nav a[aria-current="page"] {
  color: var(--color-primary-500);
  font-weight: var(--font-weight-bold);
}
.site-nav .caret {
  width: 1rem;
  height: 1rem;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.link-login {
  font-weight: var(--font-weight-normal);
  color: var(--color-primary-500);
  text-decoration: none;
}
.link-login:hover { color: var(--color-primary-600); }

/* Hero */
.hero {
  padding-block: 8.5rem 6.5rem; /* Adjusted from space-16/space-20 to match Figma's larger padding */
  background: var(--color-surface-base);
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-12);
}
.hero-content {
  position: relative;
  text-align: center;
}
.hero-decor {
  display: none;
}
.hero h1 {
  font-size: var(--font-size-5xl); /* Adjusted for larger hero heading */
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  line-height: var(--line-height-tight);
}
.hero .text-accent {
  color: var(--color-primary-500);
}
.hero .lede {
  margin-top: var(--space-5);
  font-size: var(--font-size-xl); /* Adjusted from lg to xl */
  color: var(--color-text-light);
}
.hero-actions {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .hero-actions { flex-direction: row; justify-content: center; }
  .hero h1 { font-size: var(--font-size-6xl); } /* Even larger on wide screens */
}
@media (min-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr 1fr; }
  .hero-content { text-align: left; }
  .hero-content .hero-actions { justify-content: flex-start; }
  .hero-decor {
    display: block;
    position: absolute;
    top: -3rem; /* Adjusted position */
    left: -2.5rem; /* Adjusted position */
    width: 3.5rem; /* Adjusted size */
    height: 3.5rem; /* Adjusted size */
    /* SVG is now an img, so color property won't apply directly. */
  }
  .hero h1 { font-size: var(--font-size-6xl); }
}

/* Hero visual — illustration cards */
.hero-visual {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.visual-card {
  background: var(--color-surface-base);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.15);
  padding: var(--space-5);
}
.visual-card--chart {
  grid-column: 1 / -1;
}
.visual-card--chart h3 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
}
.chart-bars {
  margin-top: var(--space-4);
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  height: 4rem;
}
.chart-bars span {
  flex: 1;
  height: var(--v);
  background: var(--color-primary-500);
  border-radius: var(--radius-sm);
}
.chart-labels {
  margin-top: var(--space-2);
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
}
.visual-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; /* Adjusted size */
  height: 2.5rem; /* Adjusted size */
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-2);
}
.visual-icon img { width: 1.5rem; height: 1.5rem; } /* Adjusted size for img inside visual-icon */
.visual-icon--accent { background: var(--color-accent-50); } /* Color now handled by SVG img, not parent */
.visual-icon--success { background: var(--color-success-50); }
.visual-icon--warning { background: var(--color-warning-50); }
.visual-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}
.visual-stat {
  margin-top: var(--space-1);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
}
.visual-stat--sm { font-size: var(--font-size-xl); }
.visual-delta {
  margin-top: var(--space-1);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-success-500);
}
.visual-delta img { width: 0.9rem; height: 0.9rem; } /* Adjusted for img */
.visual-card--gain {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-success-50);
  border-color: var(--color-success-50);
}
.visual-card--gain .visual-caption {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

/* Stat row */
.stat-row {
  margin-top: 5rem; /* Adjusted from space-16 to 80px */
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  justify-items: center;
}
.stat-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.stat-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem; /* Adjusted from 3.5rem */
  height: 4rem; /* Adjusted from 3.5rem */
  border-radius: var(--radius-xl);
}
.stat-icon img { width: 2rem; height: 2rem; } /* Adjusted for img inside stat-icon */
.stat-icon--primary { background: var(--color-primary-50); }
.stat-icon--warning { background: var(--color-warning-50); }
.stat-icon--success { background: var(--color-success-50); }
.stat-text {
  display: flex;
  flex-direction: column;
}
.stat-value {
  font-family: 'Poppins', var(--font-family-sans);
  font-size: var(--font-size-4xl); /* Increased from 3xl to 4xl */
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
}
.stat-label {
  color: var(--color-text-light);
}
@media (min-width: 640px) {
  .stat-row { grid-template-columns: repeat(3, 1fr); }
}
.stat-row--quad { margin-top: var(--space-12); }
@media (min-width: 640px) {
  .stat-row.stat-row--quad { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .stat-row.stat-row--quad { grid-template-columns: repeat(4, 1fr); }
}

/* Split sections — collaborative-tracking (frame 1706:2184) and
   business-finance (frame 1706:773) content blocks */
.split-inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-12);
}
@media (min-width: 1024px) {
  .split-inner { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
}
.split-content h2 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--split-heading, var(--color-text-dark));
}
.split-content p {
  margin-top: var(--space-5);
  font-size: var(--font-size-xl);
  color: var(--split-body, var(--color-text-light));
}
.split-content .hero-actions {
  margin-top: var(--space-8);
  justify-content: flex-start;
}
.split-visual img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-2xl);
}
.btn-split {
  background: var(--split-accent, var(--color-primary-500));
  color: #ffffff;
  border-radius: var(--radius-full);
}
.btn-split:hover { filter: brightness(0.92); }

.theme-collab { --split-accent: #ff553e; --split-heading: #1c0e0d; --split-body: #40201e; }
.theme-finance { --split-accent: #5bc17f; --split-heading: #18063c; --split-body: #404040; }
.theme-collab .stat-value,
.theme-finance .stat-value { color: var(--split-heading); }
.theme-collab .stat-label,
.theme-finance .stat-label { color: var(--split-body); }

/* Feature / pricing card grids */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 640px) {
  .card-grid--features { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .card-grid--features { grid-template-columns: repeat(4, 1fr); }
  .card-grid--pricing { grid-template-columns: repeat(3, 1fr); }
  .card-grid--steps { grid-template-columns: repeat(3, 1fr); }
}

.feature-card {
  padding: var(--space-6);
  background: var(--color-surface-base);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-xl);
}
.feature-card .icon {
  width: 3.5rem; /* Adjusted size */
  height: 3.5rem; /* Adjusted size */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--color-primary-50);
  /* color: var(--color-primary-600); removed, handled by SVG img */
  margin-bottom: var(--space-4);
}
.feature-card .icon img { width: 1.75rem; height: 1.75rem; } /* Adjusted size for img */
.feature-card h3 {
  font-size: var(--font-size-xl); /* Increased from lg */
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
}
.feature-card p {
  margin-top: var(--space-2);
  color: var(--color-text-light);
}

/* How it works */
.step-card {
  text-align: center;
  padding-inline: var(--space-4);
}
.step-number {
  width: 3rem; /* Adjusted size */
  height: 3rem; /* Adjusted size */
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-primary-600);
  color: white;
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
}
.step-card h3 {
  font-size: var(--font-size-xl); /* Increased from lg */
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
}
.step-card p {
  margin-top: var(--space-2);
  color: var(--color-text-light);
}

/* Testimonial */
.testimonial {
  background: var(--color-surface-muted);
}
.testimonial blockquote {
  max-width: 50rem; /* Increased from 42rem */
  margin-inline: auto;
  text-align: center;
  font-size: var(--font-size-3xl); /* Increased from 2xl */
  font-weight: var(--font-weight-medium);
  color: var(--color-text-dark);
  line-height: var(--line-height-snug);
}
.testimonial figcaption {
  margin-top: var(--space-8); /* Increased from space-6 */
  text-align: center;
  color: var(--color-text-light);
}
.testimonial figcaption .name {
  color: var(--color-text-dark);
  font-weight: var(--font-weight-semibold);
}

/* Pricing teaser */
.pricing-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  background: var(--color-surface-base);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-xl);
}
.pricing-card--featured {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 1px var(--color-primary-500);
}
.pricing-card .badge {
  align-self: flex-start;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary-700);
  background: var(--color-primary-50);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}
.pricing-card h3 {
  font-size: var(--font-size-xl); /* Increased from lg */
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-dark);
}
.pricing-card .price {
  margin-top: var(--space-3);
  font-size: var(--font-size-5xl); /* Increased from 4xl */
  font-weight: var(--font-weight-extrabold);
  color: var(--color-text-dark);
}
.pricing-card .price span {
  font-size: var(--font-size-lg); /* Increased from base */
  font-weight: var(--font-weight-normal);
  color: var(--color-text-light);
}
.pricing-card .desc {
  margin-top: var(--space-2);
  color: var(--color-text-light);
}
.pricing-card ul {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.pricing-card li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--color-text-base);
}
.pricing-card li img { /* Changed from svg to img */
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  /* color: var(--color-success-500); removed */
  margin-top: 0.15rem;
}
.pricing-card .btn { margin-top: var(--space-8); }

/* Final CTA */
.cta-banner {
  background: var(--color-primary-700);
  color: white;
  text-align: center;
}
.cta-banner h2 {
  font-size: var(--font-size-4xl); /* Increased from 3xl */
  font-weight: var(--font-weight-bold);
}
.cta-banner p {
  margin-top: var(--space-4);
  font-size: var(--font-size-xl); /* Increased from lg */
  color: var(--color-primary-100);
}
.cta-banner .hero-actions { margin-top: var(--space-8); }

/* Footer */
.site-footer {
  background: var(--color-neutral-900);
  color: var(--color-neutral-300);
  padding-block: var(--space-12);
}
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: center;
  text-align: center;
}
.footer-inner .logo { color: white; }
.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
}
.footer-nav a { text-decoration: none; }
.footer-nav a:hover { color: white; }
.footer-copy {
  font-size: var(--font-size-sm);
  color: var(--color-neutral-500);
}
@media (min-width: 768px) {
  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}