/* ==========================================================================
   Flow AI – design system (styles.css)
   Editorial tech: white canvas, 1px hairline grid, hatch dividers,
   one bold accent (#F54927). Mobile first. Breakpoints: 640 / 900 / 1200.
   Fonts (loaded in <head> via <link>): Manrope (headings), Inter (body).

   CONTENTS
   01 Tokens            09 Cards (service, product, feature, job, team)
   02 Reset & base      10 Pricing
   03 Typography        11 Case row, data card, KPI, chart primitives
   04 Layout & grid     12 Process steps, logo row, testimonial
   05 Header & nav      13 FAQ, CTA band, forms, table, prose
   06 Buttons & links   14 Footer
   07 Badges & labels   15 Chat widget
   08 Hero variants     16 Utilities, reveal, print
   ========================================================================== */

/* 01 TOKENS ---------------------------------------------------------------- */
:root {
  /* Brand */
  --color-primary: #F54927;        /* accent: CTA bg, icons, highlight words (>=24px), chart main series */
  --color-primary-hover: #D63A1B;  /* hover/active; white text on this = 4.6:1 (AA) */
  --color-primary-ink: #C2361A;    /* accent for SMALL text on white = 5.4:1 (AA) */
  --color-primary-tint: #FEEDE9;   /* soft accent surface */
  --color-primary-line: #F9B3A5;   /* accent hairline */
  --color-secondary: #ABABAB;      /* decorative grey: comparison series, bullets, rules. NOT for text (2.3:1) */

  /* Neutrals */
  --color-black: #000;
  --color-text: #111;              /* body text 18.9:1 */
  --color-text-muted: #616161;     /* secondary text & labels 6.2:1 */
  --color-text-subtle: #6B6B6B;    /* lightest allowed grey text: 5.2:1 on #FAFAFA, 4.8:1 on #F4F4F4 */
  --color-bg: #fff;
  --color-surface: #FAFAFA;
  --color-surface-2: #F4F4F4;
  --color-line: #E6E6E6;           /* hairlines */
  --color-line-strong: #D4D4D4;
  --color-hatch: #EBEBEB;
  --color-success: #1E7F4F;
  --color-error: #C0261A;

  /* Type */
  --font-heading: "Manrope", "Inter", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --fs-xs: 0.75rem;                                   /* 12 labels, meta */
  --fs-sm: 0.875rem;                                  /* 14 */
  --fs-base: 1rem;                                    /* 16 */
  --fs-md: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* 17-19 lead */
  --fs-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);    /* 20-24 h4 / card title */
  --fs-xl: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);      /* 24-32 h3 */
  --fs-2xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);   /* 30-44 h2 */
  --fs-3xl: clamp(2.375rem, 1.6rem + 3.6vw, 4.5rem);  /* 38-72 h1 hero */
  --fs-kpi: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);   /* big numbers */

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.6;
  --ls-tight: -0.035em;
  --ls-label: 0.08em;

  /* Spacing scale (4px base) */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 2.5rem;   /* 40 */
  --space-8: 3rem;     /* 48 */
  --space-9: 4rem;     /* 64 */
  --space-10: 5rem;    /* 80 */
  --space-11: 6rem;    /* 96 */
  --section-y: clamp(3rem, 2rem + 4vw, 6rem);
  --cell-pad: clamp(1.25rem, 1rem + 1vw, 2rem);

  /* Layout */
  --container: 1200px;
  --gutter: 16px;
  --header-h: 64px;

  /* Shape */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --hairline: 1px solid var(--color-line);
  --hairline-strong: 1px solid var(--color-line-strong);
  --shadow-float: 0 12px 32px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06); /* only floating UI (chat, dropdown) */
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* 02 RESET & BASE ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video, picture { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
table { border-collapse: collapse; }
::selection { background: var(--color-primary); color: #000; }
:focus-visible { outline: 2px solid var(--color-black); outline-offset: 3px; border-radius: 2px; }
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  background: #000; color: #fff; padding: 10px 16px; font-weight: 700; border-radius: var(--radius-sm);
}
.skip-link:focus { top: 12px; }

/* 03 TYPOGRAPHY ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-black);
  text-wrap: balance;
}
h1, .h1 { font-size: var(--fs-3xl); }
h2, .h2 { font-size: var(--fs-2xl); }
h3, .h3 { font-size: var(--fs-xl); letter-spacing: -0.025em; line-height: var(--lh-snug); }
h4, .h4 { font-size: var(--fs-lg); letter-spacing: -0.02em; line-height: var(--lh-snug); font-weight: 700; }
p { text-wrap: pretty; }
.lead { font-size: var(--fs-md); color: var(--color-text-muted); line-height: 1.55; max-width: 62ch; }
.accent { color: var(--color-primary); }          /* only for words >= 24px (headings, KPI) */
.text-small { font-size: var(--fs-sm); }
.mono { font-family: var(--font-mono); }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-text-muted);
}
.eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--color-primary); border-radius: 1px; flex: none; }
.eyebrow--plain::before { display: none; }

/* 04 LAYOUT & GRID --------------------------------------------------------- */
/* .shell = the framed 1200px column with hairline side borders. All page content sits inside it. */
.shell {
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--container);
  margin-inline: auto;
  border-inline: var(--hairline);
}
.container { width: calc(100% - 2 * var(--gutter)); max-width: var(--container); margin-inline: auto; }

.section { border-bottom: var(--hairline); }
.section__inner { padding: var(--section-y) var(--cell-pad); }
.section__inner--tight { padding-block: var(--space-8); }
.section-head { display: grid; gap: var(--space-4); padding: var(--section-y) var(--cell-pad) var(--space-8); max-width: 860px; }
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.section-head--center .lead { margin-inline: auto; }
.section-head--split { max-width: none; }
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: 1.1fr 1fr; align-items: end; gap: var(--space-8); }
  .section-head--split > :first-child { display: grid; gap: var(--space-4); }
}
.section-head + .grid-lines,
.section-head + .case-list,
.section-head + .process-steps,
.section-head + .logo-row,
.section-head + .faq { border-top: var(--hairline); }

/* Hatch divider – 40px diagonal stripes between sections */
.divider-hatch {
  height: 40px;
  border-bottom: var(--hairline);
  background-image: repeating-linear-gradient(-45deg, var(--color-hatch) 0 1px, transparent 1px 9px);
}
.divider-hatch--sm { height: 24px; }

/* Hairline grid: 1px gap on a line-coloured background = perfect cell borders.
   Fill every row; use .cell-fill (hatched) or a CTA card to complete an uneven row. */
.grid-lines { display: grid; gap: 1px; background: var(--color-line); grid-template-columns: 1fr; }
.grid-lines > * { background: var(--color-bg); min-width: 0; }
.grid-lines > .cell-fill { background: var(--color-bg) repeating-linear-gradient(-45deg, var(--color-hatch) 0 1px, transparent 1px 9px); }
.cell { padding: var(--cell-pad); }
.grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid-lines.cols-2, .grid.cols-2, .grid-lines.cols-3, .grid.cols-3, .grid-lines.cols-4, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-lines.cols-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .grid-lines.cols-3, .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-lines.cols-4, .grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-lines.cols-6 { grid-template-columns: repeat(6, 1fr); }
  .span-2 { grid-column: span 2; }
}
.split { display: grid; gap: var(--space-8); }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; align-items: center; } .split--60 { grid-template-columns: 3fr 2fr; } }

/* 05 HEADER & NAV ---------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: #fff; /* solid: backdrop-filter would trap the fixed mobile nav inside the header */
  border-bottom: var(--hairline);
  transition: box-shadow .2s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  height: var(--header-h); padding-inline: var(--space-4);
}
.site-logo { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.site-logo img { width: 116px; height: auto; }
.site-header__actions { display: flex; align-items: center; gap: var(--space-2); }
.site-header__cta { display: none !important; }

.nav-toggle {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius);
  border: var(--hairline-strong);
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block; width: 18px; height: 2px; background: #000; border-radius: 2px; transition: transform .2s var(--ease), background-color .2s;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Mobile nav panel */
.site-nav {
  position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; z-index: 99;
  background: #fff; overflow-y: auto; padding: var(--space-4) var(--gutter) var(--space-8);
  border-top: var(--hairline);
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
}
.site-nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
body.nav-open { overflow: hidden; }
.nav-list { list-style: none; padding: 0; display: grid; }
.nav-list > li { border-bottom: var(--hairline); }
.nav-link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%;
  padding: var(--space-4) var(--space-2); font-weight: 600; font-size: 1.0625rem; text-decoration: none; color: var(--color-text);
  text-align: left;
}
.nav-link:hover { color: var(--color-primary-ink); }
.nav-link[aria-current="page"], .nav-link.is-active { color: var(--color-black); box-shadow: inset 3px 0 0 var(--color-primary); }
.nav-link__chevron { width: 16px; height: 16px; transition: transform .2s var(--ease); flex: none; }
.nav-dropdown__toggle[aria-expanded="true"] .nav-link__chevron { transform: rotate(180deg); }
.nav-mobile-cta { margin-top: var(--space-6); display: grid; gap: var(--space-3); }

.dropdown { display: none; list-style: none; padding: 0 0 var(--space-3) var(--space-2); }
.dropdown.is-open { display: grid; }
.dropdown__heading {
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--color-text-muted); padding: var(--space-4) var(--space-3) var(--space-2); border-top: var(--hairline); margin-top: var(--space-2);
}
.dropdown__link {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius);
  text-decoration: none; font-weight: 600; font-size: var(--fs-sm);
}
.dropdown__link:hover, .dropdown__link:focus-visible { background: var(--color-surface-2); }
.dropdown__link:hover .dropdown__icon, .dropdown__link[aria-current="page"] .dropdown__icon { color: var(--color-primary); }
.dropdown__icon { width: 20px; height: 20px; color: var(--color-text-muted); flex: none; }
.dropdown__text { display: grid; line-height: 1.3; }
.dropdown__desc { font-size: var(--fs-xs); color: var(--color-text-muted); font-weight: 400; }

@media (min-width: 900px) {
  .nav-toggle, .nav-mobile-cta { display: none; }
  .site-header__cta { display: inline-flex !important; }
  .site-header__inner { padding-inline: var(--space-5); }
  .site-nav {
    position: static; visibility: visible; opacity: 1; transform: none; background: none;
    padding: 0; overflow: visible; border: 0; transition: none;
  }
  .nav-list { display: flex; align-items: center; gap: var(--space-1); }
  .nav-list > li { border: 0; position: relative; }
  .nav-link { padding: var(--space-2) var(--space-3); font-size: var(--fs-sm); font-weight: 600; border-radius: var(--radius); }
  .nav-link:hover { background: var(--color-surface-2); color: var(--color-black); }
  .nav-link[aria-current="page"], .nav-link.is-active { box-shadow: inset 0 -2px 0 var(--color-primary); border-radius: 0; }
  .dropdown {
    position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
    width: 340px; padding: var(--space-2); background: #fff; border: var(--hairline); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-float);
    max-height: calc(100vh - 90px); overflow-y: auto;
  }
  .dropdown__heading { margin-top: var(--space-1); }
}

/* 06 BUTTONS & LINKS ------------------------------------------------------- */
/* Contrast: white on #F54927 = 3.6:1 -> only with bold >= 16px (.btn is 16px/700).
   Hover (#D63A1B) = 4.6:1. Use .btn-primary--ink (black text 5.9:1) where a strict AA pass is required. */
.btn {
  --btn-bg: transparent; --btn-fg: var(--color-black); --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0.75rem 1.375rem;
  font-family: var(--font-body); font-size: 1rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.005em;
  color: var(--btn-fg); background: var(--btn-bg); border: 1.5px solid var(--btn-bd); border-radius: var(--radius);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { --btn-bg: var(--color-primary); --btn-fg: #fff; --btn-bd: var(--color-primary); }
.btn-primary:hover { --btn-bg: var(--color-primary-hover); --btn-bd: var(--color-primary-hover); }
.btn-primary--ink { --btn-fg: #000; }
.btn-primary--ink:hover { --btn-fg: #fff; }
.btn-secondary { --btn-bg: var(--color-black); --btn-fg: #fff; --btn-bd: var(--color-black); }
.btn-secondary:hover { --btn-bg: #2a2a2a; --btn-bd: #2a2a2a; }
.btn-outline { --btn-bg: #fff; --btn-fg: var(--color-black); --btn-bd: var(--color-black); }
.btn-outline:hover { --btn-bg: var(--color-black); --btn-fg: #fff; }
.btn-ghost { --btn-fg: var(--color-black); --btn-bd: var(--color-line-strong); --btn-bg: #fff; }
.btn-ghost:hover { --btn-bd: var(--color-black); }
.btn-on-dark { --btn-bg: #fff; --btn-fg: #000; --btn-bd: #fff; }
.btn-on-dark:hover { --btn-bg: var(--color-primary); --btn-bd: var(--color-primary); --btn-fg: #000; }
.btn-ghost-dark { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: #555; }
.btn-ghost-dark:hover { --btn-bd: #fff; }
.btn-sm { min-height: 40px; padding: 0.5rem 1rem; }
.btn-lg { min-height: 56px; padding: 0.9rem 1.75rem; font-size: 1.1875rem; }
.btn-block { width: 100%; }
.btn-group { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.btn-group--center { justify-content: center; }
@media (max-width: 639px) { .btn-group--stack-mobile { flex-direction: column; align-items: stretch; width: 100%; } }

.link-arrow {
  min-height: 24px;
  display: inline-flex; align-items: center; gap: 0.4em;
  font-weight: 700; font-size: var(--fs-sm); color: var(--color-black); text-decoration: none;
}
.link-arrow::after { content: "\2192"; color: var(--color-primary); transition: transform .2s var(--ease); }
.link-arrow:hover { color: var(--color-primary-ink); }
.link-arrow:hover::after { transform: translateX(4px); }
.link-arrow--light { color: #fff; }
.text-link { color: var(--color-primary-ink); text-decoration: underline; font-weight: 600; }
.text-link:hover { color: var(--color-black); }

/* 07 BADGES & LABELS ------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.5;
  background: var(--color-primary); color: #000; white-space: nowrap;
}
.badge--soft { background: var(--color-primary-tint); color: var(--color-primary-ink); }
.badge--outline { background: #fff; color: var(--color-text-muted); border: var(--hairline-strong); }
.badge--dark { background: #000; color: #fff; }
.label {
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--color-text-muted);
}
.pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 5px 14px 5px 5px; border: var(--hairline-strong); border-radius: var(--radius-pill);
  font-size: var(--fs-sm); font-weight: 500; text-decoration: none; background: #fff; max-width: 100%;
}
.pill:hover { border-color: var(--color-black); }
.pill .badge { border-radius: var(--radius-pill); }
.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; }
.tag { font-size: var(--fs-xs); padding: 3px 9px; border: var(--hairline); border-radius: var(--radius-pill); color: var(--color-text-muted); background: #fff; }

/* 08 HERO VARIANTS --------------------------------------------------------- */
.hero { border-bottom: var(--hairline); position: relative; overflow: hidden; }
.hero__inner { padding: clamp(3rem, 2rem + 5vw, 6.5rem) var(--cell-pad) var(--space-8); display: grid; gap: var(--space-5); }
.hero--home .hero__inner { text-align: center; justify-items: center; }
.hero--home h1 { max-width: 15ch; }
.hero--home .lead { margin-inline: auto; }
.hero__actions { margin-top: var(--space-2); }
.hero--home .hero__actions { justify-content: center; }
.hero__visual { border-top: var(--hairline); position: relative; background: linear-gradient(#fff, var(--color-surface)); }
.hero__visual svg { width: 100%; height: auto; }
.hero__trust { font-size: var(--fs-sm); color: var(--color-text-muted); display: flex; align-items: center; gap: var(--space-2) var(--space-4); flex-wrap: wrap; justify-content: center; list-style: none; padding: 0; }
.hero__trust li { display: inline-flex; align-items: center; gap: 6px; }
.hero__trust svg { width: 16px; height: 16px; color: var(--color-primary); }

/* Subpage hero: left aligned + breadcrumb */
.hero--page .hero__inner { padding-top: var(--space-6); padding-bottom: var(--space-9); max-width: 900px; justify-items: start; }
.hero--page h1 { font-size: clamp(2.125rem, 1.5rem + 2.8vw, 3.75rem); }
.hero__grid { display: grid; }
.hero__aside { border-top: var(--hairline); padding: var(--cell-pad); background: var(--color-surface); display: grid; place-items: center; }
@media (min-width: 900px) {
  .hero--with-visual .hero__grid { grid-template-columns: 1.1fr .9fr; }
  .hero--with-visual .hero__aside { border-top: 0; border-left: var(--hairline); }
}

.breadcrumb { font-size: var(--fs-sm); color: var(--color-text-muted); }
.breadcrumb ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-2); }
.breadcrumb li + li::before { content: "/"; color: var(--color-secondary); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--color-black); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--color-black); font-weight: 600; }

/* Flow illustration (hero SVG) – class names keep colours in CSS */
.flow-art { display: block; width: 100%; height: auto; }
.flow-art .flow-line { fill: none; stroke: var(--color-line-strong); stroke-width: 1.25; }
.flow-art .flow-line--mid { stroke: var(--color-secondary); }
.flow-art .flow-line--accent { stroke: var(--color-primary); stroke-width: 2.5; stroke-linecap: round; }
.flow-art .flow-dash { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 26; }
.flow-art .flow-node { fill: #fff; stroke: #111; stroke-width: 1.25; }
.flow-art .flow-node--accent { fill: var(--color-primary); stroke: none; }
.flow-art .flow-grid { stroke: var(--color-line); stroke-width: 1; }
.flow-art .flow-chip { fill: #fff; stroke: var(--color-line-strong); stroke-width: 1; }
.flow-art .flow-chip--accent { fill: #fff; stroke: var(--color-primary); stroke-width: 1.5; }
.flow-art text { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; fill: #444; }
.flow-art text.flow-text--strong { font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: 0; fill: #000; }
@media (prefers-reduced-motion: no-preference) {
  .flow-art .flow-dash { animation: flow-dash 3.2s linear infinite; }
}
@keyframes flow-dash { to { stroke-dashoffset: -280; } }
/* Flow overview (hero-mallit A/B/C): core, bands, rings, small labels */
.flow-art .flow-core { fill: #111; }
.flow-art .flow-band { fill: var(--color-surface-2); stroke: var(--color-line); stroke-width: 1; }
.flow-art .flow-ring { fill: none; stroke: var(--color-line-strong); stroke-width: 1; stroke-dasharray: 3 5; }
.flow-art .flow-chip--strong { fill: #fff; stroke: #111; stroke-width: 1.25; }
.flow-art .flow-chip--ghost { fill: none; stroke: var(--color-line-strong); stroke-width: 1; stroke-dasharray: 4 4; }
.flow-art .flow-tick { fill: var(--color-primary); }
.flow-art text.flow-label { font-size: 11px; letter-spacing: .1em; fill: var(--color-text-muted); }
.flow-art text.flow-label--accent { fill: var(--color-primary-ink); }
.flow-art text.flow-sub { font-family: var(--font-body); font-size: 11px; letter-spacing: 0; fill: var(--color-text-muted); }
.flow-art text.flow-text--sm { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0; fill: #111; }
.flow-art text.flow-core-title { font-family: var(--font-heading); font-weight: 800; font-size: 19px; letter-spacing: -.02em; fill: #fff; }
.flow-art text.flow-core-sub { font-size: 11px; fill: #BDBDBD; }
/* Live hero flow (hero-flow.js): scenario highlight path, travelling dots, text crossfade, progress */
.flow-art--live text { transition: opacity .28s ease; }
.flow-art--live rect { transition: stroke .4s ease, stroke-width .4s ease; }
.flow-art--live circle { transition: fill .4s ease, stroke .4s ease; }
.flow-art .flow-is-hidden { display: none; }
.flow-art .flow-is-fading { opacity: 0; }
.flow-art rect.flow-is-active { stroke: var(--color-primary); stroke-width: 1.5; }
.flow-art .flow-hl__run { transition: opacity .7s ease; }
.flow-art .flow-hl__run.flow-is-leaving { opacity: 0; }
.flow-art .flow-hl__path { fill: none; stroke: var(--color-primary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.flow-art .flow-hl__dot { fill: #fff; stroke: var(--color-primary); stroke-width: 2; opacity: 0; transition: opacity .3s ease; }
.flow-art .flow-hl__dot.flow-is-on { opacity: 1; }
.flow-art .flow-progress { fill: none; stroke: var(--color-line); stroke-width: 2; stroke-linecap: round; }
.flow-art .flow-progress__bar { fill: none; stroke: var(--color-primary); stroke-width: 2; stroke-linecap: round; }
/* Palvelu-/tuotechipin korostuksen vaihto pehmeämmäksi kuin muiden rect-siirtymien */
.flow-art--live .flow-chip, .flow-art--live .flow-chip--accent, .flow-art--live .flow-chip--strong { transition: fill .3s ease, stroke .3s ease, stroke-width .3s ease; }

/* Mobiilin pelkistetty 3-solmu-näkymä: piilossa oletuksena, näkyy vain alle 640 px (ks. media-sääntö alla) */
.flow-art__mobile { display: none; }
.flow-art__mobile text.flow-text--strong { font-size: 16px; }
.flow-art__mobile text.flow-sub { font-size: 14px; }
.flow-art__mobile text.flow-label { font-size: 13px; }

/* Skenaariopisteet (klikattava esimerkkivalinta .hero__visual-kääreessä) */
.flow-dots { display: flex; gap: 0; justify-content: center; margin-top: var(--space-2); }
/* Kosketuskohde 24x24 px (WCAG 2.5.8); näkyvä piste 8 px piirretään ::before-elementillä. Epäaktiivinen piste #8F8F8F = 3,3:1 (WCAG 1.4.11). */
.flow-dots .flow-dot { position: relative; width: 24px; height: 24px; padding: 0; border: none; border-radius: 50%; background: none; cursor: pointer; }
.flow-dots .flow-dot::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #8F8F8F; transition: background .3s ease, transform .3s ease; }
.flow-dots .flow-dot:hover::before { background: #5C5C5C; }
.flow-dots .flow-dot.is-active::before { background: var(--color-primary); transform: scale(1.3); }
.flow-dots .flow-dot:focus-visible { outline: 2px solid var(--color-black); outline-offset: 0; }
@media (prefers-reduced-motion: reduce) { .flow-dots .flow-dot::before { transition: none; } }
/* Phones: hero visual is cropped (see 899px rule) – shift crop so the Flow AI core stays visible in model B.
   Model A (flow-art--a) has its own alle-640px pelkistetty näkymä (ks. yllä), joten se ei enää tarvitse rajausta. */
@media (max-width: 639px) { .hero__visual svg.flow-art--b { transform: translateX(calc(-50% + 90px)); } }

/* 09 CARDS ----------------------------------------------------------------- */
.icon { width: 24px; height: 24px; flex: none; }
.icon-box {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius); flex: none;
  background: var(--color-primary-tint); color: var(--color-primary);
}
.icon-box--line { background: #fff; border: var(--hairline); }
.icon-box--dark { background: #000; color: var(--color-primary); }
.icon-box svg { width: 24px; height: 24px; }

/* Service card */
.service-card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--cell-pad); height: 100%;
  transition: background-color .2s var(--ease);
}
.service-card::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--color-primary); transition: width .35s var(--ease); }
.service-card:hover { background: var(--color-surface); }
.service-card:hover::before { width: 100%; }
.service-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.service-card__title { font-size: var(--fs-lg); }
.service-card__title a { text-decoration: none; }
.service-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card clickable */
.service-card__text { color: var(--color-text-muted); }
.service-card__list { list-style: none; display: grid; gap: 6px; font-size: var(--fs-sm); color: var(--color-text-muted); border-top: var(--hairline); padding: var(--space-4) 0 0; }
.service-card__list li { display: flex; gap: var(--space-2); }
.service-card__list li::before { content: ""; width: 5px; height: 5px; margin-top: .6em; background: var(--color-secondary); border-radius: 50%; flex: none; }
.service-card__footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-2); flex-wrap: wrap; }
.service-card__price { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .04em; color: var(--color-text-muted); text-transform: uppercase; }
.service-card__price strong { color: var(--color-black); font-weight: 700; }
.service-card--cta { background: #000 !important; color: #fff; }
.service-card--cta .service-card__title, .service-card--cta h3 { color: #fff; }
.service-card--cta .service-card__text { color: #CFCFCF; }
.service-card--cta::before { display: none; }
.service-card--cta .btn { position: relative; z-index: 2; }

/* Product card */
.product-card { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--cell-pad); height: 100%; position: relative; }
.product-card__visual { border: var(--hairline); border-radius: var(--radius); background: var(--color-surface); padding: var(--space-4); overflow: hidden; }
.product-card__visual svg { width: 100%; height: auto; }
.product-card__head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.product-card__title { font-size: var(--fs-xl); }
.product-card__text { color: var(--color-text-muted); }
.product-card__features { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.product-card__features li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--fs-sm); }
.product-card__features svg { width: 18px; height: 18px; color: var(--color-primary); flex: none; margin-top: 2px; }
.product-card .link-arrow { margin-top: auto; }

/* Feature (icon + title + text) */
.feature { display: grid; gap: var(--space-3); padding: var(--cell-pad); align-content: start; }
.feature__title { font-size: var(--fs-lg); }
.feature__text { color: var(--color-text-muted); }
.feature-list { list-style: none; padding: 0; display: grid; gap: var(--space-5); }
.feature-list--inline .feature { padding: 0; grid-template-columns: 44px 1fr; column-gap: var(--space-4); }
.feature-list--inline .feature .icon-box { grid-row: span 2; }

/* Job card */
.job-card { display: grid; gap: var(--space-3); padding: var(--cell-pad); position: relative; }
.job-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.job-card__title { font-size: var(--fs-lg); }
.job-card__title a { text-decoration: none; }
.job-card__title a::after { content: ""; position: absolute; inset: 0; }
.job-card:hover { background: var(--color-surface); }
.job-card__text { color: var(--color-text-muted); }
@media (min-width: 900px) { .job-card { grid-template-columns: 1fr auto; align-items: center; column-gap: var(--space-8); } .job-card > .link-arrow { grid-row: 1 / span 3; grid-column: 2; } }

/* Team / contact card */
.team-card { display: grid; gap: var(--space-3); padding: var(--cell-pad); align-content: start; }
.team-card__avatar {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-surface-2); border: var(--hairline); font-family: var(--font-heading); font-weight: 800; font-size: 1.25rem; color: #000;
}
.team-card__avatar--accent { background: var(--color-primary); border-color: var(--color-primary); }
.team-card__name { font-size: var(--fs-lg); }
.team-card__role { font-size: var(--fs-sm); color: var(--color-text-muted); }
.contact-list { list-style: none; padding: 0; display: grid; gap: var(--space-2); font-size: var(--fs-sm); }
.contact-list a { display: inline-flex; gap: var(--space-2); align-items: center; text-decoration: none; font-weight: 600; }
.contact-list a:hover { color: var(--color-primary-ink); }
.contact-list svg { width: 18px; height: 18px; color: var(--color-primary); }

/* 10 PRICING --------------------------------------------------------------- */
.pricing-card { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--cell-pad); height: 100%; position: relative; }
.pricing-card__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.pricing-card__tier { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.pricing-card__name { font-size: var(--fs-xl); }
.pricing-card__desc { color: var(--color-text-muted); font-size: var(--fs-sm); }
.pricing-card__price { font-family: var(--font-heading); font-size: var(--fs-2xl); font-weight: 800; letter-spacing: var(--ls-tight); line-height: 1; }
.pricing-card__price small { display: block; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.pricing-card__unit { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500; color: var(--color-text-muted); letter-spacing: 0; }
.pricing-card__list { list-style: none; padding: var(--space-5) 0 0; border-top: var(--hairline); display: grid; gap: var(--space-3); font-size: var(--fs-sm); }
.pricing-card__list li { display: flex; gap: var(--space-2); align-items: flex-start; }
.pricing-card__list svg { width: 18px; height: 18px; color: var(--color-primary); flex: none; margin-top: 1px; }
.pricing-card__list li.is-muted { color: var(--color-text-subtle); }
.pricing-card__list li.is-muted svg { color: var(--color-secondary); }
.pricing-card__cta { margin-top: auto; }
.pricing-card--featured { background: var(--color-surface) !important; box-shadow: inset 0 3px 0 var(--color-primary); }

/* 11 CASE ROW, DATA CARD, KPI ---------------------------------------------- */
.case-list { display: grid; }
.case-row { display: grid; border-bottom: var(--hairline); }
.case-row:last-child { border-bottom: 0; }
.case-row__body { padding: var(--cell-pad); display: flex; flex-direction: column; gap: var(--space-4); justify-content: center; align-items: flex-start; }
.case-row__client { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.case-row__logo { font-family: var(--font-heading); font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 8px; }
.case-row__logo svg { width: 22px; height: 22px; color: var(--color-primary); }
.case-row__title { font-size: var(--fs-2xl); }
.case-row__title .accent { display: block; }
.case-row__text { color: var(--color-text-muted); max-width: 52ch; }
.case-row__visual { border-top: var(--hairline); background: var(--color-surface); padding: var(--cell-pad); display: grid; min-width: 0; }
@media (min-width: 900px) {
  .case-row { grid-template-columns: 1fr 1fr; }
  .case-row__body { padding: var(--space-9) var(--cell-pad); }
  .case-row__visual { border-top: 0; border-left: var(--hairline); }
  .case-row--reverse .case-row__body { order: 2; }
  .case-row--reverse .case-row__visual { border-left: 0; border-right: var(--hairline); }
}

.data-card { background: #fff; border: var(--hairline); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.data-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: var(--hairline); }
.data-card__label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-text-muted); }
.data-card__label b { color: #000; font-weight: 600; }
.data-card__live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); white-space: nowrap; }
.data-card__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); }
.data-card__chart { padding: var(--space-5) var(--space-4); display: grid; place-items: center; flex: 1; min-height: 200px; }
.data-card__chart svg { width: 100%; height: auto; }
.data-card__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding: 0 var(--space-4) var(--space-4); font-size: var(--fs-xs); color: var(--color-text-muted); }
.data-card__legend span { display: inline-flex; align-items: center; gap: 6px; }
.data-card__legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--color-secondary); display: inline-block; }
.data-card__legend i.is-primary { background: var(--color-primary); }
.data-card__legend i.is-dark { background: #111; }
.data-card__meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--color-line); border-top: var(--hairline); margin: 0; }
.data-card__meta > div { background: #fff; padding: var(--space-3) var(--space-4); display: grid; gap: 2px; min-width: 0; }
.data-card__meta dt { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-text-subtle); }
.data-card__meta dd { margin: 0; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: #000; overflow-wrap: anywhere; }
@media (min-width: 640px) { .data-card__meta { grid-template-columns: repeat(4, 1fr); } }

/* SVG chart primitives – use these classes inside data-card SVGs */
.chart-axis { stroke: var(--color-line-strong); stroke-width: 1; }
.chart-grid { stroke: var(--color-line); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-primary { fill: var(--color-primary); }
.chart-primary-stroke { fill: none; stroke: var(--color-primary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart-compare { fill: var(--color-secondary); }
.chart-compare-light { fill: #D9D9D9; }
.chart-compare-stroke { fill: none; stroke: var(--color-secondary); stroke-width: 2; stroke-dasharray: 5 4; stroke-linecap: round; }
.chart-track { fill: none; stroke: var(--color-surface-2); }
.chart-area { fill: var(--color-primary); opacity: .1; }
.chart-dark { fill: #111; }
.chart-muted { fill: var(--color-line); }
.chart-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; fill: #616161; }
.chart-value { font-family: var(--font-heading); font-weight: 800; fill: #000; letter-spacing: -0.03em; }
.chart-node { fill: #fff; stroke: #111; stroke-width: 1.25; }
.chart-node--accent { fill: var(--color-primary-tint); stroke: var(--color-primary); stroke-width: 1.5; }
.chart-node--dark { fill: #111; stroke: #111; }
.chart-link { fill: none; stroke: var(--color-secondary); stroke-width: 1.25; }
.chart-link--accent { fill: none; stroke: var(--color-primary); stroke-width: 2; }
.chart-text { font-family: var(--font-body); font-size: 12px; font-weight: 700; fill: #111; }
.chart-text--light { font-family: var(--font-body); font-size: 12px; font-weight: 700; fill: #fff; }
.chart-text--sm { font-family: var(--font-body); font-size: 10px; fill: #616161; }
.ui-frame { fill: #fff; stroke: var(--color-line-strong); stroke-width: 1; }
.ui-fill { fill: var(--color-surface-2); }
.ui-line { fill: var(--color-line); }
.ui-dark { fill: #111; }

/* KPI tile */
.kpi { display: grid; gap: var(--space-2); padding: var(--cell-pad); align-content: start; }
.kpi__value { font-family: var(--font-heading); font-size: var(--fs-kpi); font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: #000; white-space: nowrap; }
.kpi__unit { font-size: .5em; letter-spacing: -0.02em; margin-left: .15em; }
.kpi__value .accent, .kpi__unit { color: var(--color-primary); }
.kpi__label { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-text-muted); }
.kpi__text { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* 12 PROCESS, LOGO ROW, TESTIMONIAL ---------------------------------------- */
.process-steps { list-style: none; padding: 0; display: grid; counter-reset: step; }
.process-step { counter-increment: step; position: relative; padding: var(--cell-pad) var(--cell-pad) var(--cell-pad) calc(var(--cell-pad) + 60px); border-bottom: var(--hairline); display: grid; gap: var(--space-2); align-content: start; }
.process-step:last-child { border-bottom: 0; }
.process-step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: var(--cell-pad); top: var(--cell-pad);
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700; background: #fff; border: 1.5px solid #000; z-index: 1;
}
.process-step::after { content: ""; position: absolute; left: calc(var(--cell-pad) + 21px); top: calc(var(--cell-pad) + 42px); bottom: 0; width: 1px; background: var(--color-line-strong); }
.process-step:last-child::after { display: none; }
.process-step:first-child::before { background: var(--color-primary); border-color: var(--color-primary); color: #000; }
.process-step__title { font-size: var(--fs-lg); }
.process-step__text { color: var(--color-text-muted); font-size: var(--fs-sm); }
.process-step__meta { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--color-primary-ink); }
@media (min-width: 900px) {
  .process-steps { grid-template-columns: repeat(var(--steps, 4), 1fr); }
  .process-step { padding: calc(var(--cell-pad) + 66px) var(--cell-pad) var(--cell-pad); border-bottom: 0; border-right: var(--hairline); }
  .process-step:last-child { border-right: 0; }
  .process-step::after { left: calc(var(--cell-pad) + 42px); right: 0; top: calc(var(--cell-pad) + 21px); bottom: auto; width: auto; height: 1px; display: block; }
  .process-step:last-child::after { display: block; right: var(--cell-pad); background: linear-gradient(90deg, var(--color-line-strong), transparent); }
}

.logo-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--color-line); list-style: none; padding: 0; }
.logo-row__item { background: #fff; display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 84px; padding: var(--space-4); text-align: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.02em; color: #4A4A4A; transition: color .2s; }
.logo-row__item:hover { color: #000; }
.logo-row__item svg { width: 20px; height: 20px; color: var(--color-secondary); transition: color .2s; }
.logo-row__item:hover svg { color: var(--color-primary); }
.logo-row__caption { padding: var(--space-5) var(--cell-pad); text-align: center; }
@media (min-width: 640px) { .logo-row { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .logo-row { grid-template-columns: repeat(6, 1fr); } }

.testimonial-card { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--cell-pad); height: 100%; }
.testimonial-card__quote { font-size: var(--fs-md); line-height: 1.5; color: var(--color-text); }
.testimonial-card__quote::before { content: "\201C"; display: block; font-family: var(--font-heading); font-size: 3rem; line-height: .8; color: var(--color-primary); font-weight: 800; }
.testimonial-card__person { margin-top: auto; display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-4); border-top: var(--hairline); }
.testimonial-card__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--color-surface-2); display: grid; place-items: center; font-weight: 800; font-family: var(--font-heading); flex: none; }
.testimonial-card__name { font-weight: 700; font-size: var(--fs-sm); }
.testimonial-card__role { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* 13 FAQ, CTA BAND, FORMS, TABLE, PROSE ------------------------------------ */
.faq__item { border-bottom: var(--hairline); }
.faq__item:last-child { border-bottom: 0; }
.faq__q {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) var(--cell-pad); font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-md); letter-spacing: -0.015em; line-height: 1.35;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { background: var(--color-surface); }
.faq__icon { position: relative; width: 30px; height: 30px; flex: none; border: var(--hairline-strong); border-radius: 50%; transition: background-color .2s, border-color .2s; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: #000; transform: translate(-50%, -50%); transition: transform .2s var(--ease); }
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__icon { background: var(--color-primary); border-color: var(--color-primary); }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(0); }
.faq__a { padding: 0 var(--cell-pad) var(--space-6); color: var(--color-text-muted); max-width: 72ch; }
.faq__a p + p { margin-top: var(--space-3); }
@media (min-width: 900px) {
  .faq-layout { display: grid; grid-template-columns: 1fr 1.7fr; }
  .faq-layout > .section-head { border-right: var(--hairline); align-content: start; padding-bottom: var(--section-y); }
  .faq-layout > .faq { border-top: 0 !important; }
}

.cta-band { background: #000; color: #fff; position: relative; overflow: hidden; }
.cta-band__inner { position: relative; z-index: 1; padding: clamp(3rem, 2rem + 4vw, 5.5rem) var(--cell-pad); display: grid; gap: var(--space-6); }
.cta-band__text { display: grid; gap: var(--space-4); }
.cta-band h2 { color: #fff; max-width: 18ch; }
.cta-band p { color: #D6D6D6; max-width: 56ch; font-size: var(--fs-md); }
.cta-band .eyebrow { color: #BDBDBD; }
.cta-band .accent { color: var(--color-primary); }
.cta-band__art { position: absolute; right: 0; bottom: 0; width: min(620px, 90%); pointer-events: none; }
.cta-band__art path { fill: none; stroke: #2E2E2E; stroke-width: 1.25; }
.cta-band__art path.is-accent { stroke: var(--color-primary); stroke-width: 2; }
.cta-band__note { font-size: var(--fs-sm) !important; color: #BDBDBD !important; }
.cta-band__actions { display: grid; gap: var(--space-3); justify-items: start; }
.cta-band--primary { background: var(--color-primary); color: #000; }
.cta-band--primary h2, .cta-band--primary p, .cta-band--primary .eyebrow { color: #000; }
.cta-band--primary .eyebrow::before { background: #000; }
.cta-band--primary .cta-band__note { color: #1a1a1a !important; }
.cta-band--primary .cta-band__art path { stroke: rgba(0,0,0,.16); }
.cta-band--primary .cta-band__art path.is-accent { stroke: #000; }
@media (min-width: 900px) { .cta-band__inner { grid-template-columns: 1.5fr 1fr; align-items: end; } .cta-band__actions { justify-self: end; justify-items: end; } }

/* Forms */
.form { display: grid; gap: var(--space-5); }
.form-row { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-field { display: grid; gap: var(--space-2); }
.form-label { font-size: var(--fs-sm); font-weight: 600; }
.form-label .req { color: var(--color-primary-ink); }
.form-hint { font-size: var(--fs-xs); color: var(--color-text-muted); }
.form-input, .form-textarea, .form-select {
  width: 100%; min-height: 48px; padding: 0.7rem 0.9rem; background: #fff;
  border: 1px solid #BDBDBD; border-radius: var(--radius); font-size: 1rem; line-height: 1.4;
  transition: border-color .15s, box-shadow .15s;
}
.form-textarea { min-height: 140px; resize: vertical; }
.form-select { appearance: none; padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23111' stroke-width='1.75' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center; }
.form-input:hover, .form-textarea:hover, .form-select:hover { border-color: #8A8A8A; }
.form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; border-color: #000; box-shadow: 0 0 0 1px #000, 0 0 0 4px var(--color-primary-tint); }
.form-input::placeholder, .form-textarea::placeholder { color: #767676; }
.form-check { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-sm); cursor: pointer; }
.form-check input { appearance: none; width: 20px; height: 20px; flex: none; margin-top: 1px; border: 1.5px solid #767676; border-radius: 4px; background: #fff; display: grid; place-items: center; cursor: pointer; }
.form-check input:checked { background: var(--color-primary); border-color: var(--color-primary); }
.form-check input:checked::after { content: ""; width: 10px; height: 6px; border: 2px solid #000; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.form-check input:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.form-field.is-invalid .form-input, .form-field.is-invalid .form-textarea, .form-field.is-invalid .form-select { border-color: var(--color-error); box-shadow: 0 0 0 1px var(--color-error); }
.form-field.is-invalid .form-check input { border-color: var(--color-error); }
.form-error { display: none; font-size: var(--fs-xs); font-weight: 600; color: var(--color-error); }
.form-field.is-invalid .form-error { display: block; }
.form-status { padding: var(--space-4); border-radius: var(--radius); font-size: var(--fs-sm); border: 1px solid; }
.form-status[hidden] { display: none; }
.form-status--success { border-color: #A8D5BD; background: #EEF8F2; color: var(--color-success); }
.form-status--error { border-color: #F2B8B0; background: #FDF0EE; color: var(--color-error); }
.form-card { border: var(--hairline); border-radius: var(--radius-lg); padding: var(--cell-pad); background: #fff; }

/* Table */
.table-wrap { overflow-x: auto; border: var(--hairline); border-radius: var(--radius); -webkit-overflow-scrolling: touch; }
.table { width: 100%; min-width: 560px; font-size: var(--fs-sm); text-align: left; }
.table th, .table td { padding: var(--space-3) var(--space-4); border-bottom: var(--hairline); vertical-align: top; }
.table thead th { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-text-muted); background: var(--color-surface); }
.table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: 0; }
.table tbody tr:hover { background: var(--color-surface); }
.table .is-yes { color: var(--color-primary-ink); font-weight: 700; }
.table .is-no { color: var(--color-text-subtle); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 639px) {
  .table-wrap { overflow: visible; border: 0; border-radius: 0; }
  .table { min-width: 0; display: block; }
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table tbody, .table tr, .table th, .table td { display: block; }
  .table tbody tr { border: var(--hairline); border-radius: var(--radius); margin-bottom: var(--space-3); overflow: hidden; }
  .table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: var(--hairline); }
  .table tbody tr > :last-child, .table tbody tr:last-child > :last-child { border-bottom: 0 !important; }
  .table tbody th[scope="row"] { background: var(--color-surface); }
  .table td[data-label], .table th[data-label]:not([scope="row"]) { display: grid; grid-template-columns: minmax(84px, 34%) 1fr; column-gap: var(--space-3); overflow-wrap: anywhere; }
  .table td[data-label]::before { content: attr(data-label); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-text-muted); }
  .table .num { text-align: left; }
}

/* Prose (subpage body text) */
.prose { max-width: 70ch; font-size: 1.0625rem; line-height: 1.7; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--fs-xl); margin-top: 2em; }
.prose h3 { font-size: var(--fs-lg); margin-top: 1.6em; }
.prose h2 + *, .prose h3 + * { margin-top: .6em; }
.prose a { color: var(--color-primary-ink); font-weight: 600; }
.prose a:hover { color: #000; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose ul li::marker { color: var(--color-primary); }
.prose ol li::marker { font-family: var(--font-mono); font-size: .85em; color: var(--color-text-muted); }
.prose blockquote { border-left: 3px solid var(--color-primary); padding: .2em 0 .2em 1.2em; font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.02em; line-height: 1.35; }
.prose code { font-family: var(--font-mono); font-size: .9em; background: var(--color-surface-2); padding: .1em .35em; border-radius: 4px; }
.prose hr { border: 0; border-top: var(--hairline); margin-block: 2.5em; }
.prose strong { font-weight: 700; color: #000; }
.callout { border: var(--hairline); border-left: 3px solid var(--color-primary); background: var(--color-surface); padding: var(--space-4) var(--space-5); border-radius: 0 var(--radius) var(--radius) 0; font-size: var(--fs-sm); }

/* 14 FOOTER ---------------------------------------------------------------- */
.site-footer { font-size: var(--fs-sm); border-top: var(--hairline); }
.footer-grid { display: grid; gap: 1px; background: var(--color-line); grid-template-columns: 1fr; }
.footer-grid > * { background: #fff; padding: var(--cell-pad); }
.footer-col { display: grid; gap: var(--space-4); align-content: start; }
.footer-col__title { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-text-muted); }
.footer-links { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.footer-links a { text-decoration: none; color: var(--color-text); display: inline-flex; align-items: center; gap: var(--space-2); }
.footer-links a:hover { color: var(--color-primary-ink); text-decoration: underline; }
.footer-links svg { width: 16px; height: 16px; color: var(--color-primary); flex: none; }
.footer-brand img { width: 128px; }
.footer-brand p { color: var(--color-text-muted); max-width: 34ch; }
.footer-legal { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-text-muted); letter-spacing: .03em; line-height: 1.7; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) var(--cell-pad); color: var(--color-text-muted); font-size: var(--fs-xs); border-top: var(--hairline); }
.footer-bottom a { color: inherit; }
.footer-bottom a:hover { color: #000; }
.footer-bottom ul { list-style: none; padding: 0; display: flex; gap: var(--space-4); flex-wrap: wrap; }
.site-footer .shell { padding-bottom: 88px; } /* room for chat launcher */
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } .site-footer .shell { padding-bottom: 0; } }

/* 15 CHAT WIDGET ----------------------------------------------------------- */
.chat-widget { position: fixed; right: 16px; bottom: 16px; z-index: 150; }
.chat-launcher {
  display: inline-flex; align-items: center; gap: var(--space-3); height: 56px; padding: 0 20px 0 14px; border-radius: var(--radius-pill);
  background: #000; color: #fff; font-weight: 700; font-size: 1rem; box-shadow: var(--shadow-float);
  transition: transform .2s var(--ease), background-color .2s;
}
.chat-launcher:hover { background: #222; transform: translateY(-2px); }
.chat-launcher__dot { width: 30px; height: 30px; border-radius: 50%; background: var(--color-primary); display: grid; place-items: center; color: #000; flex: none; }
.chat-launcher__dot svg { width: 17px; height: 17px; }
.chat-launcher__text { display: none; }
@media (min-width: 640px) { .chat-launcher__text { display: inline; } }
@media (max-width: 639px) { .chat-launcher { width: 56px; padding: 0; justify-content: center; } }
.chat-widget.is-open .chat-launcher { visibility: hidden; }
.chat-panel {
  position: fixed; right: 16px; bottom: 16px; left: 16px; z-index: 151;
  height: min(580px, calc(100vh - 32px)); height: min(580px, calc(100dvh - 32px));
  display: flex; flex-direction: column; background: #fff; border: var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-float); overflow: hidden;
}
.chat-panel[hidden] { display: none; }
@media (min-width: 640px) { .chat-panel { left: auto; width: 390px; } }
.chat-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: var(--hairline); }
.chat-panel__title { display: flex; align-items: center; gap: var(--space-3); }
.chat-panel__title strong { display: block; font-family: var(--font-heading); font-size: 1rem; line-height: 1.2; }
.chat-panel__title span { font-size: var(--fs-xs); color: var(--color-text-muted); }
.chat-panel__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--color-primary-tint); color: var(--color-primary); display: grid; place-items: center; flex: none; }
.chat-panel__avatar svg { width: 20px; height: 20px; }
.chat-panel__close { width: 40px; height: 40px; border-radius: var(--radius); display: grid; place-items: center; flex: none; }
.chat-panel__close:hover { background: var(--color-surface-2); }
.chat-panel__close svg { width: 20px; height: 20px; }
.chat-messages { flex: 1; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); background: var(--color-surface); list-style: none; margin: 0; }
.chat-msg { max-width: 85%; padding: var(--space-3) var(--space-4); border-radius: 14px; font-size: var(--fs-sm); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg--bot { align-self: flex-start; background: #fff; border: var(--hairline); border-bottom-left-radius: 4px; }
.chat-msg--user { align-self: flex-end; background: #000; color: #fff; border-bottom-right-radius: 4px; }
.chat-msg--error { align-self: flex-start; background: var(--color-primary-tint); border: 1px solid var(--color-primary-line); }
.chat-msg--error a { color: var(--color-primary-ink); font-weight: 700; }
.chat-msg--typing { display: inline-flex; gap: 4px; align-items: center; }
.chat-msg--typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-secondary); animation: chat-dot 1s infinite ease-in-out; }
.chat-msg--typing i:nth-child(2) { animation-delay: .15s; }
.chat-msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.chat-suggestions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-4) var(--space-3); background: var(--color-surface); }
.chat-suggestions[hidden] { display: none; }
.chat-suggestions button { font-size: var(--fs-xs); padding: 6px 10px; border: var(--hairline-strong); border-radius: var(--radius-pill); background: #fff; font-weight: 500; }
.chat-suggestions button:hover { border-color: var(--color-primary); color: var(--color-primary-ink); }
.chat-form { display: flex; gap: var(--space-2); padding: var(--space-3); border-top: var(--hairline); }
.chat-form .form-input { min-height: 44px; }
.chat-form button { flex: none; width: 44px; height: 44px; border-radius: var(--radius); background: var(--color-primary); color: #000; display: grid; place-items: center; }
.chat-form button:hover { background: var(--color-primary-hover); color: #fff; }
.chat-form button:disabled { opacity: .5; cursor: not-allowed; }
.chat-form svg { width: 20px; height: 20px; }
.chat-panel__note { font-size: 0.6875rem; color: var(--color-text-subtle); padding: 0 var(--space-4) var(--space-3); }

/* 16 UTILITIES ------------------------------------------------------------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.text-muted { color: var(--color-text-muted); }
.text-primary { color: var(--color-primary-ink); }   /* small text; for large headings use .accent */
.text-center { text-align: center; }
.bg-surface { background: var(--color-surface); }
.bg-dark { background: #000; color: #fff; }
.border-top { border-top: var(--hairline); }
.border-bottom { border-bottom: var(--hairline); }
.mx-auto { margin-inline: auto; }
.mt-0 { margin-top: 0 !important; } .mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); }
.mb-0 { margin-bottom: 0 !important; } .mb-2 { margin-bottom: var(--space-2); } .mb-4 { margin-bottom: var(--space-4); } .mb-5 { margin-bottom: var(--space-5); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); }
.p-cell { padding: var(--cell-pad); }
.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.maxw-prose { max-width: 70ch; }

/* Scroll reveal: add .reveal; main.js adds .is-visible. Optional stagger: style="--reveal-delay:120ms".
   Hidden state only applies when JS is running (html.js) so content never disappears without JS. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--reveal-delay, 0ms); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Print */
@media print {
  .site-header, .site-nav, .chat-widget, .chat-panel, .cta-band, .divider-hatch, .hero__visual, .skip-link { display: none !important; }
  body { font-size: 11pt; color: #000; }
  .shell { border: 0; width: 100%; max-width: none; }
  .section, .grid-lines > *, .case-row { break-inside: avoid; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* Additions: extra chart text/ring primitives + hero visual cropping on small screens */
.chart-label--light { fill: #BDBDBD; }
.chart-text--msg { font-family: var(--font-body); font-size: 11px; fill: #111; }
.chart-text--msg-light { font-family: var(--font-body); font-size: 11px; fill: #fff; }
.chart-text--accent { font-family: var(--font-body); font-size: 11px; font-weight: 700; fill: var(--color-primary-ink); }
.chart-primary-ring { fill: none; stroke: var(--color-primary); }
.chart-compare-ring { fill: none; stroke: var(--color-secondary); }
.chart-compare-light-ring { fill: none; stroke: #D9D9D9; }
.chart-chip { fill: #fff; stroke: var(--color-line-strong); stroke-width: 1; }
.chart-chip--accent { fill: #fff; stroke: var(--color-primary); stroke-width: 1.5; }
@media (max-width: 899px) {
  .hero__visual { overflow: hidden; }
  .hero__visual .flow-art { width: 900px; max-width: none; margin-left: 50%; transform: translateX(-50%); }
}
/* Alle 640 px: koko lähtö-/palvelu-/tulos-diagrammi ei mahdu luettavasti, joten näytetään
   hero-flow.js:n vaihtama pelkistetty 3-solmu-näkymä (.flow-art__mobile) omalla, kapeammalla
   viewBox:lla koko leveydeltä sen sijaan että 1200-leveä kaavio rajattaisiin ja pienennettäisiin. */
@media (max-width: 639px) {
  .flow-art__desktop { display: none; }
  .flow-art__mobile { display: block; }
  .hero__visual { overflow: visible; }
  .hero__visual .flow-art { width: 100%; max-width: 420px; margin: 0 auto; transform: none; }
}
@media (min-width: 900px) {
  .faq-layout > .section-head { padding-top: var(--space-8); }
  .cta-band__actions .btn-group { flex-direction: column; align-items: stretch; }
  .footer-bottom { justify-content: flex-start; column-gap: var(--space-8); }
}
.dropdown__title { display: flex; align-items: center; gap: 6px; }

/* Hero KPI tiles: 2 columns already on phones */
@media (max-width: 639px) { .grid-lines.xs-cols-2 { grid-template-columns: repeat(2, 1fr); } }

/* Alustat etusivulla: ryhmitellyt tekstilogorivit, jotka täyttyvät aina tasaisesti (flex-wrap + kasvu) */
.platforms-label { display: block; padding: var(--space-4) var(--cell-pad) var(--space-3); border-top: var(--hairline); text-align: left; }
.logo-row.platforms-row { display: flex; flex-wrap: wrap; border-top: var(--hairline); }
.platforms-row > .logo-row__item { flex: 1 1 130px; min-height: 64px; font-size: 1rem; }
@media (max-width: 639px) { .platforms-row > .logo-row__item { flex-basis: 40%; font-size: .9375rem; } }

/* AI Kartoitus -kalenterivaraus (booking.js) */
.booking-grid { display: grid; gap: 1px; background: var(--color-line); border-top: var(--hairline); border-bottom: var(--hairline); }
.booking-grid > * { background: var(--color-bg); padding: var(--cell-pad); min-width: 0; }
@media (min-width: 900px) { .booking-grid { grid-template-columns: 1fr 1.2fr; } .booking-grid > * { padding: var(--space-8) var(--cell-pad); } }
.booking-intro { display: grid; gap: var(--space-4); align-content: start; }
.booking-intro .label { margin-top: var(--space-4); }
.booking-steps { list-style: none; padding: 0; display: grid; gap: var(--space-3); font-size: var(--fs-sm); }
.booking-steps li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--color-text-muted); }
.booking-steps__num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #000; color: #fff; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: .75rem; font-weight: 700; }
.booking-meta { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--fs-sm); }
.booking-meta li { border: var(--hairline); border-radius: 999px; padding: .35rem .8rem; }
.booking-meta strong { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-text-muted); margin-right: .35em; }
.booking-widget { display: grid; align-content: start; }
.booking-body { display: grid; gap: var(--space-4); }
.booking-cal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.booking-cal-title { font-size: var(--fs-lg); }
.booking-nav { width: 40px; height: 40px; border: var(--hairline); border-radius: var(--radius); background: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.booking-nav:hover:not(:disabled) { border-color: #000; }
.booking-nav:disabled { color: var(--color-line-strong); cursor: default; }
.booking-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--color-line); border: var(--hairline); border-radius: var(--radius); overflow: hidden; }
.booking-wd, .booking-pad { background: var(--color-surface); }
.booking-wd { padding: var(--space-2); text-align: center; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-text-muted); }
.booking-pad { background: var(--color-bg) repeating-linear-gradient(-45deg, var(--color-hatch) 0 1px, transparent 1px 9px); }
.booking-day { min-height: 38px; border: 0; background: #fff; font-family: var(--font-heading); font-weight: 700; font-size: .8rem; cursor: pointer; position: relative; }
.booking-day:hover:not(:disabled) { background: var(--color-primary-tint); }
.booking-day:disabled { color: #B5B5B5; font-weight: 500; cursor: default; background: var(--color-surface); }
.booking-day.is-today::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.booking-day[aria-pressed="true"] { background: var(--color-primary); color: #000; }
.booking-day:focus-visible, .booking-slot:focus-visible, .booking-nav:focus-visible { outline: 2px solid #000; outline-offset: -2px; z-index: 1; }
.booking-slots-title { font-size: var(--fs-base); margin-bottom: var(--space-3); }
.booking-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: var(--space-2); }
.booking-slot { min-height: 35px; padding: 0 .5rem; border: 1px solid #BDBDBD; border-radius: var(--radius); background: #fff; font-family: var(--font-heading); font-size: .7rem; font-weight: 700; cursor: pointer; }
.booking-slot:hover { border-color: var(--color-primary); background: var(--color-primary-tint); }
.booking-note { font-size: var(--fs-xs); color: var(--color-text-muted); }
.booking-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4);
  border: 1px solid var(--color-primary-line); background: var(--color-primary-tint); border-radius: var(--radius); }
.booking-change { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 600; }
.booking-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.booking-done { display: grid; gap: var(--space-4); justify-items: start; outline: none; }
.booking-done h3 { font-size: var(--fs-lg); }

/* ==========================================================================
   Sivuoptimointi (so-) – /tuotteet/sivuoptimointi.html
   Elävä virtausvisualisointi (sivuoptimointi-flow.js) + elementtilistat.
   Käyttää .flow-art-luokkia; tässä vain sivukohtaiset lisäykset.
   ========================================================================== */
.so-flow { border-top: var(--hairline); background: linear-gradient(#fff, var(--color-surface)); padding: var(--space-6) var(--cell-pad) var(--space-5); }
.so-flow .flow-art { max-width: 1200px; margin: 0 auto; }
.so-flow .flow-art text.so-core-title { font-size: 17px; }
.so-flow .flow-art text.so-event { font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; fill: #111; }
.so-flow .flow-art rect.so-step.flow-is-active { fill: var(--color-primary-tint); }
.so-flow .flow-art__mobile text.so-core-title { font-size: 16px; }
.so-flow .flow-art__mobile text.so-steps { font-family: var(--font-body); font-size: 13px; letter-spacing: 0; fill: #BDBDBD; }
.so-flow .flow-art__mobile text.so-event { font-size: 13px; }
.so-flow .flow-art__mobile text.so-conv { font-size: 14px; }
/* Alle 900 px: pelkistetty pystynäkymä (1200-leveä kaavio ei olisi luettava) */
@media (max-width: 899px) {
  .so-flow .flow-art__desktop { display: none; }
  .so-flow .flow-art__mobile { display: block; }
  .so-flow .flow-art { max-width: 440px; }
}
/* Konversioelementtien listat (6 ryhmäkorttia, 30 elementtiä) */
.so-el-list { gap: var(--space-3); border-top: var(--hairline); padding-top: var(--space-4); }
.so-el-list li { line-height: 1.45; }
.so-el-list strong { color: #000; font-weight: 600; }
.so-data { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .02em; color: var(--color-text-muted); }

/* Vaakavuodon esto kapeilla näytöillä (320 px): grid-/flex-lapset saavat kutistua,
   painikkeiden teksti rivittyy ja pitkät sanat katkeavat. */
.hero__inner > *, .cta-band__inner > *, .cta-band__text > *, .split > *, .process-steps > *,
.contact-list > *, .yht-steps > *, .testimonial-card > *, .testimonial-card__person > *, .btn-group > * { min-width: 0; }
.prose, .prose > *, .hero__inner h1, .cta-band h2, .testimonial-card__role, .contact-list li, .yht-steps li { overflow-wrap: anywhere; }
@media (max-width: 479px) {
  .btn { white-space: normal; text-align: center; }
}

/* Header 900–1199 px: Artikkelit-linkin myötä navissa 8 kohtaa – tiivistetään, ettei CTA valu yli */
@media (min-width: 900px) and (max-width: 1199px) {
  .site-header .nav-list { gap: 0; }
  .site-header .nav-link { padding-inline: var(--space-2); }
}
/* 900–1049 px: Etusivu-linkki piiloon (logo vie etusivulle), muuten CTA ei mahdu */
@media (min-width: 900px) and (max-width: 1049px) {
  .site-header .nav-list > li:first-child { display: none; }
}

/* Chatin vastausten Markdown-muotoilu (main.js renderMarkdown) */
.chat-msg.is-rich { white-space: normal; }
.chat-msg.is-rich > * + * { margin-top: var(--space-2); }
.chat-msg.is-rich p, .chat-msg.is-rich ul, .chat-msg.is-rich ol { margin: 0; }
.chat-msg.is-rich ul, .chat-msg.is-rich ol { padding-left: 1.2em; display: grid; gap: 2px; }
.chat-msg.is-rich a { color: var(--color-primary-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.chat-msg.is-rich code { font-family: var(--font-mono); font-size: .9em; background: var(--color-surface-2); padding: 0 .3em; border-radius: 4px; }
.chat-table-wrap { overflow-x: auto; border: var(--hairline); border-radius: 8px; }
.chat-table-wrap table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.chat-table-wrap th, .chat-table-wrap td { padding: 6px 8px; text-align: left; vertical-align: top; border-bottom: var(--hairline); }
.chat-table-wrap th { background: var(--color-surface-2); font-weight: 700; white-space: nowrap; }
.chat-table-wrap tr:last-child td { border-bottom: 0; }
.chat-img { display: block; max-width: 100%; height: auto; border-radius: 8px; border: var(--hairline); }
.chat-msg.is-rich a.chat-card { display: grid; gap: 2px; text-decoration: none; color: var(--color-text); border: var(--hairline); border-radius: 10px; overflow: hidden; background: #fff; font-weight: 400; }
.chat-msg.is-rich a.chat-card:hover, .chat-msg.is-rich a.chat-card:focus-visible { border-color: var(--color-primary); }
.chat-card img { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-bottom: var(--hairline); }
.chat-card__kicker { padding: 6px 10px 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-text-muted); }
.chat-card__title { padding: 0 10px 8px; font-weight: 700; line-height: 1.3; }