/* 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; }
.site-nav .site-nav-cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px var(--space-4);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.site-nav .site-nav-cta .btn:hover,
.site-nav .site-nav-cta .btn:focus-visible {
  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);
  scroll-margin-top: 64px;
}
.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;
}
/* Extra breathing room above the "Tarkoitus..." callout in the Haaste
   section only - scoped via the .problem-list precursor (unique to this
   section) so no other .section-callout instance is affected. Box size,
   text, and colors are untouched; only margin-top changes. */
.problem-list + .section-callout {
  margin-top: 24px;
}
@media (min-width: 900px) {
  .problem-list + .section-callout { margin-top: 32px; }
}

/* ============ Hero ============ */
/* Dark, premium showroom-evening hero - visual direction from the approved
   "Yksi linkki. Kaupanteko jatkuu." LinkedIn image. That reference image
   itself is never used directly: it bakes its headline/CTA/copy into the
   raster image, which isn't responsive, isn't selectable, and isn't read
   correctly by screen readers or search engines. Every word here is real
   HTML; the image (hero-car-*) is a separately commissioned, text-free
   piece built to the same art direction (dark #00091C showroom-evening
   mood, a generic car, a blue light trail leading to a lit dealership) -
   no car brand, model badge, UI-card mockup, or legible plate anywhere
   in it.
   Two-column layout: text column first in DOM (so mobile, which stacks
   to one column, shows text before the image, per spec), image column
   second - the image is its own grid item, never a background sitting
   behind the text, so text contrast never depends on image content at
   all. The section's own solid background is #00091C (the image's own
   base tone) at every breakpoint, and reuses --header-text/
   --header-text-muted - the same tokens styles.css already documents as
   AA/AAA against the header's #101B3D, itself darker still against
   #00091C. */
.hero-showroom {
  position: relative;
  background: #00091C;
  padding: clamp(56px, 10vw, 104px) var(--space-3);
}
.hero-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 6vw, 56px);
  align-items: center;
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.05fr 1fr; }
}
.hero-inner {
  display: grid;
  gap: clamp(18px, 3vw, 24px);
  text-align: center;
  justify-items: center;
}
@media (min-width: 900px) {
  .hero-inner { text-align: left; justify-items: start; }
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 100px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--header-text);
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.hero h1 {
  color: var(--header-text);
  font-size: clamp(32px, 5.2vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 16ch;
}
.hero-lede {
  color: var(--header-text-muted);
  font-size: clamp(var(--text-md), 2vw, var(--text-lg));
  line-height: 1.6;
  max-width: 48ch;
}
.hero-tagline {
  color: var(--header-text);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 6px 16px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 100px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
}
@media (min-width: 900px) {
  .hero-actions { justify-content: flex-start; width: auto; }
}
.hero-actions .btn {
  min-height: 48px;
  padding: 12px 24px;
  font-size: var(--text-sm);
  flex: 0 1 auto;
}
/* Pilot CTA (Käyttöönotto section) reuses .hero-actions purely for its
   button-sizing cascade (.hero-actions .btn above) - color and size are
   untouched. Only the container's own width/alignment is overridden here
   so the button centers under the pilot-steps list instead of inheriting
   the hero's two-column left-aligned desktop layout. The compound
   selector's higher specificity wins over both the base .hero-actions
   rule and its 900px override regardless of source order; centering
   itself comes from the existing .landing-section-inner > * auto-margin
   rule, which this element already qualifies for once its width is
   content-sized instead of 100%. */
.hero-actions.pilot-cta {
  width: max-content;
  max-width: 100%;
}
.btn-outline-inverse {
  background: transparent;
  color: var(--header-text);
  border: 1px solid rgba(255,255,255,0.4);
}
.btn-outline-inverse:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.7); }
/* #00091C is at least as dark as --header-bg everywhere in the hero (it's
   a flat color, not variable artwork behind text), so the page's default
   blue focus ring (--primary, tuned for light backgrounds) would still
   have too little contrast here - a visible focus state inside the hero
   must not depend on that. */
.hero-showroom :focus-visible {
  outline-color: #FFFFFF;
}
.hero-note {
  color: var(--header-text-muted);
  font-size: var(--text-xs);
}
.hero-visual {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  /* The mobile crop (1620x911) and the desktop crop (1520x855) are both
     16:9 - the same landscape composition at every breakpoint, so a
     single ratio covers the <picture> element's source switch in
     index.html without needing a matching breakpoint override here. */
  aspect-ratio: 16 / 9;
}
.hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============ 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(--accent-blue);
}

/* ============ 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; }
.commerce-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; }
.steps-grid.rollout-grid { grid-template-columns: repeat(3, 1fr); }
.step-card code {
  color: var(--primary-dark);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .92em;
  overflow-wrap: anywhere;
}
.admin-proof-block {
  margin-top: var(--space-4);
  max-width: 760px;
}
.admin-proof-heading {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--space-1);
}
.admin-proof-intro {
  font-size: var(--text-sm);
  color: var(--text2);
  margin-bottom: var(--space-3);
  line-height: 1.5;
}
.admin-proof-figure {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.admin-proof-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.admin-proof-caption {
  padding: var(--space-2) var(--space-3);
  color: var(--text2);
  font-size: var(--text-xs);
  font-weight: 500;
  background: var(--white);
}

.magic-link-preview {
  margin-top: var(--space-4);
  max-width: 760px;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  box-shadow: var(--shadow);
}
.magic-link-preview figcaption {
  color: var(--text2);
  font-size: var(--text-xs);
  font-weight: 600;
}
.magic-link-preview-content {
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.magic-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--white);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}
.magic-link-target {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.magic-link-target-label {
  color: var(--text2);
  font-size: var(--text-2xs);
  font-weight: 600;
}
.magic-link-preview code {
  color: var(--primary-dark);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}
/* No color overrides here - falls back to .section-callout's own blue
   (border-left: var(--primary), background: var(--primary-light), color:
   var(--primary-dark)), same as every other blue callout on this page.
   Class kept for semantic identification (tests, future targeting). */
.payment-boundary {
  margin-top: var(--space-4);
  max-width: 760px;
  font-weight: 400;
}

/* ============ Commerce layer ============ */
.journey-comparison {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-4);
}
.journey-row {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}
.journey-row.is-kopilotti {
  border-color: rgba(31,77,184,.35);
  background: linear-gradient(145deg, var(--white), var(--primary-light));
}
.journey-row h3 {
  color: var(--text2);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.journey-row.is-kopilotti h3 { color: var(--primary); }
.journey-steps {
  margin-top: var(--space-3);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
  list-style: none;
}
.journey-row.is-kopilotti .journey-steps {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.journey-steps li {
  position: relative;
  min-height: 68px;
  padding: 12px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface2);
  color: var(--text2);
  font-size: var(--text-xs);
  line-height: 1.35;
  text-align: center;
}
.journey-row.is-kopilotti .journey-steps li {
  border-color: rgba(31,77,184,.18);
  background: rgba(255,255,255,.72);
}
.journey-row.is-kopilotti .journey-steps li:nth-child(3),
.journey-row.is-kopilotti .journey-steps li:nth-child(4) {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}
.journey-steps li:not(:last-child)::after {
  content: '→';
  position: absolute;
  left: calc(100% + 7px);
  color: var(--muted);
  font-weight: 700;
}
.journey-row.is-kopilotti .journey-steps li:not(:last-child)::after { color: var(--primary); }
.commerce-boundary { max-width: 760px; }

/* ============ Trade-in + integration status ============ */
.trade-in-grid {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: var(--space-4);
  align-items: stretch;
}
.trade-in-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  list-style: none;
}
.trade-in-flow li {
  padding: var(--space-3);
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text2);
  font-size: var(--text-sm);
  line-height: 1.4;
  box-shadow: var(--shadow);
}
.trade-in-flow li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.trade-in-flow span {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-size: var(--text-xs);
  font-weight: 800;
}
.integration-status-stack {
  display: grid;
  gap: var(--space-3);
}
.integration-status {
  padding: var(--space-4);
  border: 1px solid rgba(31,77,184,.35);
  border-radius: var(--radius);
  background: linear-gradient(145deg, var(--white), var(--primary-light));
}
.integration-status-label {
  color: var(--primary);
  font-size: var(--text-2xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.integration-status h3 { margin-top: 8px; font-size: var(--text-lg); }
.integration-status > p:not(.integration-status-label) {
  margin-top: var(--space-3);
  color: var(--primary-dark);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.integration-status ul {
  margin-top: var(--space-3);
  display: grid;
  gap: 10px;
  list-style: none;
}
.integration-status li {
  display: flex;
  gap: 8px;
  color: var(--text2);
  font-size: var(--text-xs);
  line-height: 1.5;
}
.integration-status li::before {
  content: '✓';
  color: var(--success-text);
  font-weight: 800;
  flex-shrink: 0;
}
.product-status-note {
  margin-top: var(--space-3);
  max-width: 760px;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.55;
  text-align: center;
}

/* ============ 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;
}

/* ============ Frequently Asked Questions (UKK/FAQ) ============ */
.faq-list {
  margin-top: var(--space-4);
  display: grid;
  gap: 12px;
  max-width: 720px;
}
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  box-shadow: var(--shadow);
  transition: border-color 0.15s ease;
}
.faq-item[open] {
  border-color: var(--primary);
}
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.faq-question::-webkit-details-marker {
  display: none;
}
.faq-question::after {
  content: '+';
  font-size: 1.25rem;
  line-height: 1;
  color: var(--primary);
  font-weight: 700;
  flex-shrink: 0;
  margin-left: 12px;
}
.faq-item[open] > .faq-question::after {
  content: '−';
}
.faq-question:hover {
  background: var(--surface2);
  color: var(--primary-dark);
}
.faq-question:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.faq-answer {
  padding: 0 20px 16px;
  color: var(--text2);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.faq-answer p {
  margin: 0;
}
.faq-answer p + p {
  margin-top: 8px;
}

/* ============ 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-heading {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.contact-card p { color: var(--text2); font-size: var(--text-sm); max-width: 46ch; }
.contact-card .btn { min-height: 48px; margin-top: var(--space-4); }

/* Real contact form inside the existing .contact-card (js/contact-form.js).
   Elements that toggle via the `hidden` attribute deliberately set no
   `display` here so the UA's `hidden` rule keeps winning. */
.contact-form { margin-top: var(--space-4); display: grid; gap: var(--space-3); max-width: 100%; }
/* An author `display` beats the UA's `[hidden]` rule, so the form's own
   display:none is spelled out here - the success view hides it via `hidden`. */
.contact-form[hidden] { display: none; }
.contact-field { display: grid; gap: 6px; }
.contact-field label { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.contact-optional { font-weight: 400; color: var(--muted); }
.contact-hint { font-size: var(--text-xs); color: var(--text2); }
.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  /* --muted (not --border): a control boundary needs to read as a control,
     so a mid-strength grey rather than the faint hairline used for cards. */
  border: 1px solid var(--muted);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text);
  font: inherit;
  font-size: var(--text-sm);
}
.contact-field textarea { min-height: 96px; resize: vertical; }
.contact-field input[aria-invalid="true"],
.contact-field select[aria-invalid="true"],
.contact-field textarea[aria-invalid="true"] {
  /* Colour is never the only signal: the field also gets an always-visible
     error message below it and aria-invalid for assistive tech. */
  border-color: var(--error);
  border-width: 2px;
}
.contact-field-error { font-size: var(--text-xs); font-weight: 600; color: var(--error-text); }
.contact-error-summary {
  border: 2px solid var(--error);
  border-radius: var(--radius-sm);
  background: var(--error-light);
  color: var(--error-text);
  padding: var(--space-3);
}
.contact-error-summary-heading { font-weight: 700; margin-bottom: 6px; }
.contact-error-summary ul { margin: 0; padding-left: 1.2em; }
.contact-error-summary a { color: var(--error-text); }
.contact-status { font-size: var(--text-sm); color: var(--text2); }
.contact-status.is-error { color: var(--error-text); font-weight: 600; }
.contact-success {
  margin-top: var(--space-4);
  border: 1px solid var(--success);
  border-radius: var(--radius-sm);
  background: var(--success-light);
  color: var(--success-text);
  padding: var(--space-4);
}
.contact-success-heading { font-weight: 700; }
.contact-alt { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text2); }
/* Honeypot: off-screen for people, still in the DOM for naive bots to fill.
   Not display:none (some bots skip that); the wrapper is aria-hidden and the
   input is tabindex="-1" so neither keyboard nor screen-reader users reach it. */
.contact-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============ 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); }
/* GitHub + YouTube icons share one list item so flex-wrap moves them as a pair,
   never splitting the row between them. gap matches the other footer links; the
   icon links' -12px margin cancels their +12px hit-area padding, so the two 44px
   targets sit edge to edge without overlapping and the layout is unaffected. */
.site-footer-icons { display: inline-flex; align-items: center; gap: var(--space-4); }
.site-footer-icon-link { display: inline-flex; align-items: center; padding: 12px; margin: -12px; }
.site-footer-icon { display: block; }
.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; }
  .steps-grid.rollout-grid { grid-template-columns: 1fr; }
  .magic-link-preview-content { align-items: flex-start; flex-direction: column; }
  .compare-grid { grid-template-columns: 1fr; }
  .bullet-grid { grid-template-columns: 1fr; }
  .evidence-grid { grid-template-columns: 1fr; }
  .journey-steps,
  .journey-row.is-kopilotti .journey-steps { grid-template-columns: 1fr; gap: 12px; }
  .journey-steps li { min-height: 0; justify-content: flex-start; text-align: left; }
  .journey-steps li:not(:last-child)::after { content: '↓'; left: 50%; top: calc(100% - 1px); transform: translateX(-50%); z-index: 1; }
  .trade-in-grid,
  .trade-in-flow { grid-template-columns: 1fr; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid.rollout-grid { grid-template-columns: 1fr; }
  .journey-steps,
  .journey-row.is-kopilotti .journey-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .journey-steps li:not(:last-child)::after { content: none; }
  .trade-in-grid { grid-template-columns: 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); }

/* ============ Partner-pages hero (kumppanit.html / en/partners.html) ============
   Scoped to .partner-hero only - .hero-showroom and every other
   .landing-section instance are untouched. The generic .hero-actions rule
   is built for two other contexts: the two-column hero-showroom grid, and
   the narrow pilot-steps list (.pilot-cta). Neither applies here - at
   >=900px plain .hero-actions is a block-level flex row that fills the
   full .landing-section-inner width (its width:auto still stretches to
   the containing block, same as any block box), so justify-content:
   flex-start lands the button against .landing-section-inner's own left
   edge, not against the narrower, centered .section-intro column above
   it - the button reads as stranded to the left of the copy. Giving both
   the intro and the CTA the same explicit max-width + margin-inline:auto
   makes their computed left edges coincide instead. */
.partner-hero {
  padding-bottom: clamp(24px, 4vw, 40px);
}
.partner-hero .section-intro {
  max-width: 780px;
}
.partner-hero .hero-actions.partner-hero-cta {
  max-width: 780px;
  margin-top: var(--space-4);
}
@media (min-width: 900px) {
  .partner-hero .section-intro {
    text-align: left;
  }
  .partner-hero .hero-actions.partner-hero-cta {
    margin-inline: auto;
  }
}
@media (max-width: 899px) {
  .partner-hero .section-eyebrow,
  .partner-hero .section-heading,
  .partner-hero .section-intro {
    text-align: left;
    margin-inline: 0;
  }
  .partner-hero .hero-actions.partner-hero-cta .btn {
    width: 100%;
  }
}

/* ============ Sales presentation video ============
   16:9 slot is reserved with aspect-ratio (plus the <video> width/height
   attributes) so the poster and player never cause layout shift. Frame
   background matches the video's own dark ground. Finnish caption track is
   available but off by default (English subtitles are burned into the image). */
.sales-video-section .section-intro { max-width: 820px; }
.sales-video-frame {
  max-width: 1080px;
  margin: var(--space-5) auto 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--header-bg);
  box-shadow: var(--shadow-lg);
}
.sales-video-frame .sales-video {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--header-bg);
}
.sales-video-frame p {
  margin: 0;
  padding: var(--space-4);
  color: #FFFFFF;
  font-size: var(--text-sm);
  text-align: center;
}
.sales-video-frame p a { color: #FFFFFF; }
.sales-video-note {
  max-width: 1080px;
  margin: var(--space-3) auto 0;
  color: var(--text2);
  font-size: var(--text-xs);
  text-align: center;
}
.sales-video-transcript {
  max-width: 820px;
  margin: var(--space-3) auto 0;
}
.sales-video-transcript > summary {
  cursor: pointer;
  padding: var(--space-2) 0;
  color: var(--primary-dark);
  font-size: var(--text-sm);
  font-weight: 600;
}
.sales-video-transcript-body {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  color: var(--text2);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.sales-video-transcript-body h3 {
  margin: var(--space-3) 0 var(--space-1);
  color: var(--text);
  font-size: var(--text-sm);
}
.sales-video-transcript-body h3:first-child { margin-top: 0; }
.sales-video-transcript-body p { margin: 0; }
@media (max-width: 767px) {
  .sales-video-frame { border-radius: var(--radius); }
}