/* Kopilotti Sales — B2B landing page.
   Reuses tokens (:root) and .btn/.skip-link/:focus-visible from styles.css;
   this file only adds the marketing-page-specific layout. */

.landing-page { background: var(--bg); overflow-x: hidden; }

/* ============ Header + nav ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  min-height: 64px;
  padding: 0 max(var(--space-3), calc((100vw - 1180px) / 2));
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.site-brand {
  color: var(--header-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-2) 0;
}
.site-brand > span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.site-brand strong { font-size: var(--text-sm); }
.site-brand small { color: var(--header-text-muted); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .06em; }

.site-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--header-border);
  border-radius: var(--radius-sm);
  background: var(--header-badge-bg);
  color: var(--header-text);
  cursor: pointer;
}
.site-nav-toggle svg { display: block; }
.site-nav-toggle .icon-close { display: none; }
.site-nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.site-nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.site-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  list-style: none;
}
.site-nav a {
  color: var(--header-text-muted);
  text-decoration: none;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-2) 0;
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--header-text); }
.site-nav .btn-primary { color: white; }

@media (max-width: 899px) {
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.2s ease;
  }
  /* visibility:hidden (not just max-height:0) so the collapsed menu's links
     are removed from the tab order — max-height alone still left them
     keyboard-focusable while invisible, which is a real trap for keyboard
     users, not just a visual detail. */
  .site-nav.is-open { max-height: 420px; visibility: visible; }
  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2) var(--space-3) var(--space-3);
  }
  .site-nav li { border-top: 1px solid var(--header-border); }
  .site-nav li:first-child { border-top: 0; }
  .site-nav a { display: block; padding: 14px 4px; }
  .site-nav-cta { padding: var(--space-2) 0 0; }
  .site-nav-cta .btn { width: 100%; }
}
@media (min-width: 900px) {
  .site-nav-toggle { display: none; }
  .site-nav { position: static; max-height: none; overflow: visible; visibility: visible; background: none; border: 0; }
  .site-nav ul { padding: 0; }
  .site-nav li { border: 0; }
}

/* ============ Shared section layout ============ */
.landing-section {
  padding: clamp(48px, 9vw, 96px) var(--space-3);
}
.landing-section-inner {
  max-width: 1080px;
  margin: 0 auto;
}
/* Every direct child (problem-list, security-list, bullet-grid, pilot-steps,
   demo-callout, contact-card, etc.) sets its own narrower max-width for
   readability, but without this it sits flush against this container's
   left edge instead of being centered within it — on a wide viewport that
   reads as "the heading is centered, the body text is stuck on the left."
   Grid-based children with no max-width (steps-grid, compare-grid) already
   fill the full width, so this has no visible effect on them. */
.landing-section-inner > * {
  margin-inline: auto;
}
/* --surface2 equals --bg exactly (both #F5F7FA), so it can't create visible
   banding against the page background — use --white so alt sections
   actually alternate instead of silently no-op'ing. */
.landing-section.alt { background: var(--white); }
/* Centered to match the hero's header treatment — on wide viewports the
   .landing-section-inner container is centered (max-width:1080px + auto
   margins), but left-aligned text inside it still starts flush at the
   container's left edge, which reads as "hero is centered, everything
   else is shoved left" once there's enough side space to notice. List/card
   body content below (steps-grid, security-list, etc.) stays left-aligned
   on purpose — only the eyebrow/heading/intro "chapter title" cluster is
   centered, same pattern the hero already uses. */
.section-eyebrow {
  color: var(--primary);
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: center;
}
.section-heading {
  margin-top: 8px;
  font-size: clamp(24px, 4vw, var(--text-xl));
  letter-spacing: -0.02em;
  line-height: 1.2;
  max-width: 40ch;
  margin-inline: auto;
  text-align: center;
}
.section-intro {
  margin-top: var(--space-3);
  color: var(--text2);
  font-size: var(--text-md);
  line-height: 1.6;
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}
.section-callout {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight: 600;
  font-size: var(--text-sm);
  max-width: 62ch;
}

/* ============ Hero ============ */
.hero {
  padding: clamp(56px, 12vw, 112px) var(--space-3) clamp(48px, 8vw, 88px);
}
.hero-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  gap: clamp(32px, 6vw, 56px);
  text-align: center;
  justify-items: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 100px;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.hero h1 {
  font-size: clamp(32px, 6.4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 18ch;
}
.hero-lede {
  color: var(--text2);
  font-size: clamp(var(--text-md), 2.4vw, var(--text-lg));
  line-height: 1.6;
  max-width: 56ch;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
}
.hero-actions .btn {
  min-height: 48px;
  padding: 12px 24px;
  font-size: var(--text-sm);
  flex: 0 1 auto;
}
.hero-note {
  color: var(--muted);
  font-size: var(--text-xs);
}
.hero-media {
  width: min(1040px, 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.hero-media img { display: block; width: 100%; height: auto; }
.hero-media figcaption {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--text-2xs);
  text-align: left;
}

/* ============ Problem section ============ */
.problem-list {
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-3);
  max-width: 720px;
  list-style: none;
}
.problem-list li {
  display: flex;
  gap: 12px;
  color: var(--text2);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.problem-list li::before {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--orange);
}

/* ============ Market evidence (research-backed stats) ============ */
/* This section's own .section-intro runs noticeably longer (4 sentences)
   than every other section-intro on this page - centered text over that
   many lines reads worse (uneven ragged edges on both sides), especially on
   mobile. Left-aligning it here is scoped to this one paragraph only via
   its own class, not a change to the shared .section-intro rule - every
   other, shorter section-intro elsewhere stays centered. Applies at every
   viewport width, not just mobile (confirmed with the requester it should
   also apply on desktop) - the block itself stays centered as a column
   (inherited max-width/margin-inline:auto from .section-intro), only the
   text's own alignment changes. */
.evidence-intro { text-align: left; }
.evidence-grid {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
}
.evidence-card {
  display: grid;
  gap: 6px;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
  text-align: center;
}
.evidence-card strong {
  font-size: clamp(28px, 4.5vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--primary-dark);
}
.evidence-card span {
  color: var(--text2);
  font-size: var(--text-sm);
  line-height: 1.4;
}
.source-note {
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: var(--text-2xs);
  text-align: center;
}

/* ============ Consumer commerce (not an auction) ============ */
.consumer-commerce-body {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-3);
  max-width: 720px;
}
.consumer-commerce-body p {
  color: var(--text2);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* ============ How it works ============ */
.steps-grid {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
}
.step-card {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}
.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-weight: 700;
  font-size: var(--text-sm);
}
.step-card h3 { margin-top: var(--space-3); font-size: var(--text-md); }
.step-card p { margin-top: 6px; color: var(--text2); font-size: var(--text-xs); line-height: 1.55; }

/* ============ Comparison ============ */
.compare-grid {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
.compare-card {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
}
.compare-card.is-kopilotti {
  border-color: rgba(31,77,184,.35);
  background: linear-gradient(145deg, var(--white), var(--primary-light));
}
.compare-card h3 { font-size: var(--text-md); }
.compare-card ul { margin-top: var(--space-3); display: grid; gap: 10px; list-style: none; font-size: var(--text-sm); color: var(--text2); }
.compare-card li { display: flex; gap: 8px; line-height: 1.5; }
.compare-card.is-kopilotti li::before { content: '✓'; color: var(--success-text); font-weight: 800; flex-shrink: 0; }
.compare-card:not(.is-kopilotti) li::before { content: '·'; color: var(--muted); font-weight: 800; flex-shrink: 0; }
.compare-note {
  grid-column: 1 / -1;
  margin-top: 4px;
  color: var(--text2);
  font-size: var(--text-sm);
}

/* ============ Architecture diagram ============ */
.architecture-diagram {
  margin-top: var(--space-5);
  display: grid;
  gap: 0;
  max-width: 420px;
  list-style: none;
  counter-reset: none;
}
.architecture-diagram li {
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-weight: 600;
  font-size: var(--text-sm);
  text-align: center;
  box-shadow: var(--shadow);
}
.architecture-diagram li:nth-child(2), .architecture-diagram li:nth-child(3) {
  border-color: rgba(31,77,184,.35);
  background: var(--primary-light);
  color: var(--primary-dark);
}
.architecture-diagram li:not(:last-child) {
  margin-bottom: 28px;
  position: relative;
}
.architecture-diagram li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -28px;
  width: 2px;
  height: 20px;
  background: var(--border);
  transform: translateX(-50%);
}
.architecture-diagram li:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -32px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--border);
  transform: translateX(-50%);
}

.integration-tags {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  max-width: 620px;
}
.integration-tags li {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: var(--white);
  color: var(--text2);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* ============ Pricing-model / security / pilot lists ============ */
.bullet-grid {
  margin-top: var(--space-4);
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
  max-width: 760px;
  list-style: none;
}
.bullet-grid li {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text2);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.bullet-grid li::before { content: '·'; color: var(--primary); font-weight: 800; flex-shrink: 0; }

.security-list {
  margin-top: var(--space-4);
  display: grid;
  gap: 10px;
  max-width: 720px;
  list-style: none;
}
.security-list li {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text2);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.security-list li::before { content: '✓'; color: var(--success-text); font-weight: 800; flex-shrink: 0; }

.pilot-steps {
  margin-top: var(--space-4);
  display: grid;
  gap: 10px;
  max-width: 640px;
}
.pilot-steps li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: baseline;
  color: var(--text2);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.pilot-steps li::marker { content: none; }
.pilot-steps { list-style: none; counter-reset: pilot; }
.pilot-steps li { counter-increment: pilot; }
.pilot-steps li::before {
  content: counter(pilot);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-size: var(--text-2xs);
  font-weight: 700;
}

/* ============ Demo callout ============ */
.demo-callout {
  margin-top: var(--space-4);
  padding: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
  max-width: 760px;
}
.demo-callout p { color: var(--text2); font-size: var(--text-sm); max-width: 46ch; }
.demo-callout .btn { min-height: 48px; flex-shrink: 0; }

/* ============ Contact ============ */
.contact-card {
  margin-top: var(--space-4);
  padding: var(--space-5);
  max-width: 640px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-lg);
  text-align: left;
}
.contact-card .btn { min-height: 48px; margin-top: var(--space-4); }

/* ============ Footer ============ */
.site-footer {
  padding: var(--space-5) var(--space-3);
  background: var(--header-bg);
  color: var(--header-text-muted);
}
.site-footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
}
.site-footer-brand { color: var(--header-text); font-weight: 700; font-size: var(--text-sm); }
.site-footer-desc { margin-top: 6px; font-size: var(--text-xs); max-width: 32ch; }
.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  list-style: none;
  font-size: var(--text-xs);
}
.site-footer-links a { color: var(--header-text-muted); text-decoration: none; }
.site-footer-links a:hover, .site-footer-links a:focus-visible { color: var(--header-text); }
.site-footer-note { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--header-border); font-size: var(--text-2xs); max-width: 1080px; margin-inline: auto; }

/* ============ Responsive ============ */
@media (max-width: 767px) {
  .steps-grid { grid-template-columns: 1fr; }
  .compare-grid { grid-template-columns: 1fr; }
  .bullet-grid { grid-template-columns: 1fr; }
  .evidence-grid { grid-template-columns: 1fr; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============ Legal/content pages (e.g. tietosuoja.html) ============
   Left-aligned prose instead of the marketing page's centered headers -
   a privacy notice should read as a document, not a hero section. */
.legal-content .landing-section-inner { max-width: 720px; }
.legal-content .section-heading,
.legal-content .section-intro,
.legal-content .section-callout {
  max-width: none;
  margin-inline: 0;
  text-align: left;
}
.legal-content h2 {
  margin-top: var(--space-5);
  font-size: var(--text-lg);
}
.legal-content p { margin-top: var(--space-3); color: var(--text2); line-height: 1.6; }
.legal-content .section-callout { margin-top: var(--space-4); }