/* The landing page's own look, after the owner's mockup (2026-10-03): navy type and buttons on white,
   pastel bands and cards. It is the site's own palette, not the app's: the site keeps its own tokens.css
   and fonts (no longer copies of the app's, since the app redesign), and tokens.css lends only the font.
   Light and dark, following the visitor's system setting: the site runs no script, so there is no switch of its own.
   Every colour is a token below, redefined for dark in one block; tokens.css's light-dark() values follow the same
   color-scheme. No script and no third-party file (the landing-page spec), so every picture is a file under site/ or
   plain markup. */

@font-face {
  font-family: "Caveat";
  src: url("/assets/caveat-latin.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --ink: #0B1B33;
  --text: #2E3B52;
  --muted: #5C6B82;
  --line: #E4E8EF;
  --page: #FFFFFF;
  --sky: #F4F7FE;
  --warm: #FDF6F0;
  --blue: #2563EB;   --blue-bg: #E9F0FE;
  --green: #15803D;  --green-bg: #E5F6EB;
  --violet: #6D28D9; --violet-bg: #F0E9FE;
  --orange: #C2410C; --orange-bg: #FDEDE1;
  --red: #C81E3A;    --red-bg: #FDE8EC;
  --amber: #B45309;  --amber-bg: #FEF2DC;
  --peach: #C2410C;  --peach-bg: #FFF1E6;
  /* What sits on the page: cards and icon circles, the main button and its text, the secondary button. */
  --surface: #FFFFFF;
  --button: #0B1B33; --button-hover: #1D3256; --on-button: #FFFFFF;
  --button-soft: #EEF1F6; --button-soft-hover: #E2E7EF;
  /* The closing band: navy in both schemes, a step lighter than the dark page so it still stands apart. */
  --band-ink: #0B1B33;
  --radius-card: 20px;
  --wrap: 72rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #E8EEF8;
    --text: #C3CCDA;
    --muted: #8E9BB0;
    --line: #26324A;
    --page: #0B1220;
    --sky: #101A2C;
    --warm: #18161A;
    --blue: #8AB0FA;   --blue-bg: #14213A;
    --green: #6BD69A;  --green-bg: #11261C;
    --violet: #C0A1F7; --violet-bg: #211A36;
    --orange: #F5A06F; --orange-bg: #2A1A12;
    --red: #F48A9B;    --red-bg: #2C151B;
    --amber: #F2B95E;  --amber-bg: #2A2112;
    --peach: #F5A06F;  --peach-bg: #2A1C14;
    --surface: #131D30;
    --button: #E8EEF8; --button-hover: #FFFFFF; --on-button: #0B1220;
    --button-soft: #1A263C; --button-soft-hover: #22304A;
    --band-ink: #16233B;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--voultti-font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); }
a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
/* Rounds the ring of a plain link; :where() keeps it below any class's own radius, so a pill stays a pill when focused. */
:where(a:focus-visible) { border-radius: 8px; }
img { max-width: 100%; height: auto; display: block; }

.icon { width: 1.375rem; height: 1.375rem; flex: none; fill: currentColor; }
.flag { width: 1.75rem; height: auto; border-radius: 2px; box-shadow: 0 0 0 1px var(--line); }

.wrap,
.site-header,
.site-footer {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

h1, h2, h3 { color: var(--ink); letter-spacing: -0.025em; }
h1 { font-size: clamp(2.75rem, 1.6rem + 4vw, 4.25rem); line-height: 1.04; font-weight: 800; margin: 0.5rem 0 1.25rem; }
h2 { font-size: clamp(1.875rem, 1.3rem + 1.8vw, 2.5rem); line-height: 1.12; font-weight: 800; margin: 0.375rem 0 0.75rem; }
h3 { font-size: 1.1875rem; line-height: 1.25; font-weight: 700; margin: 0 0 0.375rem; letter-spacing: -0.015em; }

.eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.lede { font-size: 1.1875rem; line-height: 1.55; max-width: 31rem; color: var(--text); margin: 0 0 2rem; }
.section-lede { font-size: 1.0625rem; max-width: 44rem; margin: 0 0 2.25rem; }
.fine-print { color: var(--muted); font-size: 0.875rem; }

/* Buttons ("pills" from their first, round shape): navy for the way forward, pale grey for the others, squared-off corners. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
}
.pill-dark { background: var(--button); color: var(--on-button); }
.pill-dark:hover { background: var(--button-hover); color: var(--on-button); }
.pill-light { background: var(--button-soft); color: var(--ink); }
.pill-light:hover { background: var(--button-soft-hover); color: var(--ink); }
.pill-big { padding: 0.9375rem 1.875rem; font-size: 1rem; }
.pill .arrow { width: 1.125rem; height: 1.125rem; }

/* Header. The privacy and terms pages keep the old, shorter header (.header-link). */
.site-header {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 4.75rem;
  border-bottom: 1px solid var(--line);
  max-width: none;
}
.brand { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink); text-decoration: none; }
.brand picture { display: contents; }
.brand-word { font-weight: 800; font-size: 1.5rem; letter-spacing: -0.03em; }
.site-nav { display: flex; gap: 2rem; margin-left: 2.5rem; }
.site-nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.9375rem; }
.site-nav a:hover { color: var(--blue); }
.header-actions { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; }
/* Sign in is a plain link beside the one solid button. */
.header-actions .pill-light { background: none; padding: 0; font-weight: 600; }
.header-actions .pill-light:hover { background: none; text-decoration: underline; text-underline-offset: 4px; }
/* The front page's header lies on the hero, so the photo runs from the very top of the page. */
.site-header-over { position: absolute; top: 0; left: 0; right: 0; z-index: 5; border-bottom: 0; }
.header-link { margin-left: auto; font-weight: 600; text-decoration: none; color: var(--ink); }

/* Hero: the words on white, the photo filling the right half from the top of the page and fading into the page under them. */
.hero { position: relative; min-height: 42.75rem; display: flex; align-items: center; overflow: hidden; }
.hero-photo { position: absolute; inset: 0 0 0 40%; }
.hero-photo picture, .hero-photo img { width: 100%; height: 100%; }
.hero-photo img { object-fit: cover; object-position: 60% 60%; }
.hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right, var(--page) 0%, color-mix(in srgb, var(--page) 85%, transparent) 12%, transparent 45%);
}
/* A soft light wash under the header, so its links read on the forest. */
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 9rem;
  z-index: 1;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--page) 85%, transparent), transparent);
}
/* One short handwritten line, always at the photo's bottom right. */
.hero-note {
  position: absolute;
  z-index: 2;
  bottom: 1.25rem;
  right: 1.5rem;
  margin: 0;
  white-space: nowrap;
  transform: rotate(-4deg);
  font-family: "Caveat", cursive;
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.15;
  color: var(--ink);
}
.hero-text { position: relative; z-index: 2; width: 100%; padding-top: 8.25rem; padding-bottom: 3.5rem; }
.trust { display: flex; flex-wrap: wrap; gap: 2.25rem; list-style: none; padding: 0; margin: 2.75rem 0 0; }
.trust li { display: flex; align-items: center; gap: 0.75rem; color: var(--ink); font-size: 0.875rem; line-height: 1.3; font-weight: 500; }
.trust .icon { width: 1.75rem; height: 1.75rem; }
.trust .flag { height: auto; }

.band { padding: 4.5rem 0; }
.band-sky { background: var(--sky); }
.band-warm { background: var(--warm); }

.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 3rem; margin-bottom: 2rem; }
.section-head h2 { margin-bottom: 0; }
.section-aside { margin: 0; color: var(--text); font-size: 1rem; }

/* Three paths. */
.paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 0; }
.path {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr auto;
  column-gap: 1.25rem;
  padding: 1.75rem;
  border-radius: var(--radius-card);
  background: var(--tone-bg);
}
.path-icon {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background: var(--surface);
  color: var(--tone);
  box-shadow: 0 1px 2px rgb(11 27 51 / 0.06);
}
.path-icon .icon { width: 2rem; height: 2rem; }
.path h3 { font-size: 1.3125rem; }
.path p { margin: 0 0 1.5rem; font-size: 0.9375rem; color: var(--text); }
.path-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
.path-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 6px;
  background: var(--surface);
  color: var(--tone);
}
.path-blue { --tone: var(--blue); --tone-bg: var(--blue-bg); }
.path-green { --tone: var(--green); --tone-bg: var(--green-bg); }
.path-violet { --tone: var(--violet); --tone-bg: var(--violet-bg); }
.path-amber { --tone: var(--amber); --tone-bg: var(--amber-bg); }
.path-orange { --tone: var(--orange); --tone-bg: var(--orange-bg); }
.path-red { --tone: var(--red); --tone-bg: var(--red-bg); }
.path-peach { --tone: var(--peach); --tone-bg: var(--peach-bg); }

/* Everyday situations: one moment from life each, and how Voultti helps. */
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 2rem 0 0; }
.case { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: start; padding: 1.5rem; border-radius: var(--radius-card); background: var(--tone-bg); }
.case-icon { grid-row: span 2; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--surface); color: var(--tone); }
.case-icon .icon { width: 1.5rem; height: 1.5rem; }
.case h3 { margin: 0.125rem 0 0.375rem; font-size: 1.0625rem; line-height: 1.3; }
.case p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--text); }

/* Life's journey: five photos with arrows between them, each stage with the documents that belong to it. */
.stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2.25rem; list-style: none; padding: 0; margin: 0; }
.stage { position: relative; text-align: center; }
.stage img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; margin-bottom: 1rem; box-shadow: 0 8px 20px rgb(11 27 51 / 0.12); }
.stage h3 { font-size: 1rem; }
.stage p { margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--muted); line-height: 1.45; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem; list-style: none; padding: 0; margin: 0.625rem 0 0; }
.chip { max-width: 100%; overflow-wrap: anywhere; padding: 0.25rem 0.625rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 0.75rem; font-weight: 600; color: var(--ink); line-height: 1.4; }
.chip small { font-weight: 500; color: var(--muted); }
.chip-ready { background: var(--violet-bg); border-color: transparent; color: var(--violet); }
.stage + .stage::before {
  content: "→";
  position: absolute;
  left: -1.6rem;
  top: 18%;
  color: var(--ink);
  font-size: 1.25rem;
}

/* Overview: the list beside a drawing of the app. */
.overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3.5rem; align-items: center; }
.feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; list-style: none; padding: 0; margin: 0 0 2rem; }
.feature-list li { display: flex; align-items: center; gap: 0.875rem; color: var(--ink); font-size: 0.9375rem; font-weight: 500; }
.feature-list .icon { color: var(--ink); }

.app {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 30px 70px rgb(11 27 51 / 0.12), 0 2px 6px rgb(11 27 51 / 0.05);
  overflow: hidden;
  font-size: 0.8125rem;
}
.app-side { display: flex; flex-direction: column; gap: 0.125rem; padding: 1.125rem 0.75rem; border-right: 1px solid var(--line); }
.app-brand { display: flex; align-items: center; gap: 0.375rem; font-weight: 800; font-size: 1.125rem; color: var(--ink); padding: 0 0.5rem 0.875rem; letter-spacing: -0.03em; }
.app-nav { display: flex; align-items: center; gap: 0.625rem; padding: 0.4375rem 0.625rem; border-radius: 8px; color: var(--text); }
.app-nav .icon { width: 1.0625rem; height: 1.0625rem; color: var(--muted); }
.app-nav.on { background: var(--blue-bg); color: var(--ink); font-weight: 600; }
.app-nav.on .icon { color: var(--blue); }
.app-main { padding: 1.125rem 1.25rem 1.25rem; display: flex; flex-direction: column; }
.app-search { display: flex; align-items: center; gap: 0.5rem; padding: 0.4375rem 0.875rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); max-width: 17rem; }
.app-search .icon { width: 1rem; height: 1rem; }
.app-hello { margin: 1.125rem 0 0; color: var(--ink); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.app-sub { margin: 0 0 0.875rem; color: var(--muted); }
.app-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; margin-bottom: 0.875rem; }
.app-card { display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; align-items: center; padding: 0.75rem; border: 1px solid var(--line); border-radius: 12px; }
.app-card .icon { grid-row: span 2; width: 2.25rem; height: 2.25rem; padding: 0.45rem; border-radius: 10px; background: var(--tone-bg); color: var(--tone); }
.app-card b { color: var(--ink); }
.app-card small { color: var(--muted); font-size: 0.75rem; }
.tone-red { --tone: var(--red); --tone-bg: var(--red-bg); }
.tone-violet { --tone: var(--violet); --tone-bg: var(--violet-bg); }
.tone-green { --tone: var(--green); --tone-bg: var(--green-bg); }
.tone-blue { --tone: var(--blue); --tone-bg: var(--blue-bg); }
.tone-amber { --tone: var(--amber); --tone-bg: var(--amber-bg); }
.tone-orange { --tone: var(--orange); --tone-bg: var(--orange-bg); }
.app-recent { border: 1px solid var(--line); border-radius: 12px; padding: 0.75rem; }
.app-label { margin: 0 0 0.375rem; color: var(--ink); font-weight: 700; }
.app-row { display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; align-items: center; padding: 0.3125rem 0; }
.app-row .icon { grid-row: span 2; width: 1.875rem; height: 1.875rem; padding: 0.375rem; border-radius: 50%; background: var(--orange-bg); color: var(--orange); }
.app-row b { color: var(--ink); }
.app-row small { color: var(--muted); font-size: 0.75rem; }

/* Security. */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; list-style: none; padding: 0; margin: 0 0 1.75rem; }
.facts li { display: flex; gap: 0.875rem; align-items: flex-start; font-size: 0.9375rem; color: var(--muted); line-height: 1.5; }
.facts .icon { width: 1.75rem; height: 1.75rem; color: var(--blue); margin-top: 0.125rem; }
.facts .flag { height: auto; margin-top: 0.4rem; }
.facts b { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 0.125rem; }
.caution { margin: 0; max-width: 46rem; padding: 1rem 1.25rem; border-left: 4px solid var(--ink); border-radius: 8px; background: var(--sky); color: var(--ink); }

/* Pricing: what is included beside the price. */
.pricing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 3.5rem; align-items: start; }
.included { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem 1.5rem; }
.included li { display: flex; gap: 0.625rem; align-items: center; color: var(--ink); font-weight: 500; font-size: 0.9375rem; }
.included .icon { width: 1.25rem; height: 1.25rem; color: var(--green); }
.beta-note { max-width: 28rem; margin: 1rem 0 0; padding: 0.875rem 1.125rem; background: var(--sky); border-radius: var(--radius-card); color: var(--text); }
.beta-note strong { color: var(--ink); }
.plan { max-width: 28rem; padding: 2rem; border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: 0 12px 40px rgb(11 27 51 / 0.08); }
.plan h3 { margin: 0; }
.price { margin: 0.5rem 0 0; color: var(--text); }
.price .amount { font-size: 2.5rem; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; }
.price-alt { margin: 0 0 1rem; color: var(--muted); }

/* Closing band: the three starts once more. */
.band-ink { background: var(--band-ink); }
.final h2 { color: #fff; }
.final .section-lede { color: #C9D3E3; }
.final-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; }
.final .pill-light { background: #FFFFFF; color: #0B1B33; }

/* The privacy and terms pages. */
.document { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--page-pad) 3rem; }
.document h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3rem); margin-top: 3rem; }
/* The privacy notice's sections: reading width, headings a step down from the landing page's. */
.document > p, .document > ul { max-width: 42rem; line-height: 1.6; }
.document h2 { font-size: 1.375rem; font-weight: 700; margin: 2.5rem 0 0.5rem; letter-spacing: -0.015em; }
.document li { margin-bottom: 0.625rem; }
.document .updated { color: var(--muted); font-size: 0.875rem; }
/* Their language switch: the same page in the other languages, the current one unlinked. */
.lang-switch { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 1.5rem; font-size: 0.875rem; }
.lang-switch a { color: var(--ink); }
.lang-switch [aria-current] { color: var(--muted); font-weight: 600; text-decoration: none; }

/* The downloads page (voultti.com/downloads/, written by scripts/deploy/make-downloads-set): the landing
   page's cards, each with its download buttons and its install steps folded away. */
.downloads h1 { margin-top: 0; }
.downloads code { overflow-wrap: anywhere; font-size: 0.875em; }
.test-notice { max-width: 40rem; margin: 0; padding: 1rem 1.25rem; border-radius: 14px; background: var(--amber-bg); color: var(--text); }
.test-notice strong { color: var(--amber); }
.downloads .path { grid-template-rows: auto 1fr auto auto; }
.downloads .path-foot { flex-wrap: wrap; justify-content: flex-start; gap: 0.5rem; }
.pill-size { font-weight: 400; opacity: 0.75; }
.downloads details { grid-column: 1 / -1; margin-top: 1.25rem; font-size: 0.9375rem; color: var(--text); }
.downloads summary { cursor: pointer; color: var(--ink); font-weight: 600; }
.downloads details ol { margin: 0.75rem 0 0.75rem; padding-left: 1.25rem; }
.downloads details li + li { margin-top: 0.375rem; }
.build-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.5rem; margin: 0 0 1.5rem; }
.build-facts dt { color: var(--muted); }
.build-facts dd { margin: 0; color: var(--ink); }
.checksums ul { list-style: none; padding: 0; }
.checksums li { padding: 0.625rem 0; border-top: 1px solid var(--line); }

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.75rem;
  padding-bottom: 2.25rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.875rem;
}
.site-footer nav { display: flex; gap: 1.25rem; }
.site-footer a { color: var(--ink); }

@media (max-width: 64rem) {
  .site-nav { display: none; }
  .stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stage + .stage::before { display: none; }
}

@media (max-width: 56rem) {
  /* The heading starts on the photo's faded lower part, so the photo carries the opening line. */
  .hero { flex-direction: column; align-items: stretch; min-height: 0; }
  .hero-photo { position: relative; inset: auto; height: 30rem; }
  .hero-photo img { object-position: 62% 30%; }
  .hero-photo::before { background: linear-gradient(to top, var(--page) 0%, color-mix(in srgb, var(--page) 92%, transparent) 40%, transparent 62%); }
  .hero-photo::after { height: 6rem; }
  .hero-note { bottom: 10.25rem; right: 1rem; font-size: 1.5rem; }
  .hero-text { margin-top: -10rem; padding-top: 0.5rem; }
  .paths, .cases, .facts, .pricing, .included { grid-template-columns: 1fr; }
  .pricing { gap: 2rem; }
  .build-facts { grid-template-columns: 1fr; row-gap: 0; }
  .build-facts dd + dt { margin-top: 0.75rem; }
  .overview { grid-template-columns: 1fr; }
  .app { grid-template-columns: 1fr; }
  .app-side { display: none; }
}

@media (max-width: 40rem) {
  .wrap, .site-header, .site-footer {
    padding-left: var(--page-pad-mobile);
    padding-right: var(--page-pad-mobile);
  }
  .header-actions .pill-dark { display: none; }
  .band { padding: 3.25rem 0; }
  .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .feature-list { grid-template-columns: 1fr; }
  .trust { gap: 1.25rem 1.75rem; }
}

/* A page per start (docs/superpowers/specs/2026-10-12-site-path-pages-design.md): the top band in the start's tone,
   steps, the documents' cards, the perukirja's comparison table and its questions. */
.sub-hero { background: var(--tone-bg); padding: 3rem 0 4rem; }
.sub-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 3rem; align-items: center; }
.sub-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); box-shadow: 0 10px 30px rgb(11 27 51 / 0.12); }
.back { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 600; text-decoration: none; color: var(--ink); margin-bottom: 1.5rem; font-size: 0.9375rem; }
.back .icon { width: 1.125rem; height: 1.125rem; }
.sub-title { display: flex; align-items: center; gap: 1rem; font-size: clamp(2.25rem, 1.5rem + 2.5vw, 3.25rem); }
.sub-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--surface); color: var(--tone); }
.sub-icon .icon { width: 2rem; height: 2rem; }
.feature-list-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1.5rem; }
.cases-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 1.5rem 0 2rem; }
.steps li { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-card); }
.steps p { margin: 0; color: var(--text); font-size: 0.9375rem; }
.step-n { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--green-bg); color: var(--green); font-weight: 800; margin-bottom: 0.75rem; }
.docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 0; }
.doc { display: flex; flex-direction: column; padding: 1.5rem; border-radius: var(--radius-card); background: var(--violet-bg); }
.doc h3 { margin-top: 1rem; }
.doc p { margin: 0 0 1.25rem; color: var(--text); font-size: 0.9375rem; flex: 1; }
.doc-icon { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--surface); color: var(--violet); }
.doc-soon { background: var(--surface); border: 1px solid var(--line); }
.doc-soon .doc-icon { background: var(--sky); color: var(--muted); }
.soon { display: inline-block; padding: 0.375rem 0.875rem; border-radius: 999px; background: var(--sky); color: var(--muted); font-weight: 600; font-size: 0.875rem; }
.steps-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps-violet .step-n { background: var(--violet-bg); color: var(--violet); }
.doc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 0.875rem; }
.compare-wrap { overflow-x: auto; }
.compare { width: 100%; min-width: 36rem; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; font-size: 0.9375rem; }
.compare th, .compare td { text-align: left; padding: 0.875rem 1.125rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare thead th { color: var(--ink); font-size: 0.875rem; }
.compare thead th:last-child, .compare td:last-child { background: var(--violet-bg); color: var(--ink); font-weight: 600; }
.compare tbody th { color: var(--ink); font-weight: 600; width: 28%; }
.compare td { color: var(--muted); }
.faq details { max-width: 46rem; border-bottom: 1px solid var(--line); padding: 1rem 0; }
.faq summary { cursor: pointer; color: var(--ink); font-weight: 650; font-size: 1.0625rem; }
.faq details p { margin: 0.625rem 0 0; color: var(--text); line-height: 1.6; }
@media (max-width: 56rem) {
  .sub-hero-grid, .docs, .steps, .steps-four, .cases-two, .feature-list-wide { grid-template-columns: minmax(0, 1fr); }
}

/* The tietopankki (the spec's section 5): topic and article pages, made by client/scripts/build-knowledge-base.mjs at deploy time. */
.crumbs { font-size: 0.875rem; color: var(--muted); margin-bottom: 1rem; }
.crumbs a { color: var(--ink); font-weight: 600; text-decoration: none; }
.kb-more { margin: 1.75rem 0 0; color: var(--text); }
.kb-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; list-style: none; padding: 0; margin: 0; }
.kb-topic { padding: 1.75rem; border-radius: var(--radius-card); background: var(--tone-bg); }
.kb-topic h3 { margin-top: 1rem; font-size: 1.375rem; }
.kb-topic > p { color: var(--text); margin: 0 0 1rem; }
.kb-topic ul { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.kb-topic li { padding: 0.5rem 0; border-top: 1px solid var(--line); }
.kb-topic li a { color: var(--ink); text-decoration: none; font-weight: 500; }
.kb-topic li a:hover { text-decoration: underline; }
.kb-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1.5rem; }
.kb-list a { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.125rem; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--text); height: 100%; box-sizing: border-box; }
.kb-list a:hover { border-color: var(--ink); }
.kb-list b { color: var(--ink); font-size: 1rem; }
.kb-list small { color: var(--muted); font-size: 0.875rem; line-height: 1.45; margin-top: 0.25rem; }
.kb-article-wrap { padding: 2.5rem 0 4rem; }
.kb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 3.5rem; align-items: start; }
.kb-article { max-width: 44rem; }
.kb-article h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 2.875rem); margin: 0.25rem 0 0.5rem; }
.kb-meta { color: var(--muted); font-size: 0.875rem; margin: 0 0 1.75rem; }
.kb-article h2 { font-size: 1.375rem; margin: 2.25rem 0 0.5rem; }
.kb-article p, .kb-article li { line-height: 1.65; color: var(--text); font-size: 1.0625rem; }
.kb-short { padding: 1.25rem 1.5rem; border-radius: 14px; background: var(--sky); border-left: 4px solid var(--blue); }
.kb-short p { margin: 0; color: var(--ink); font-size: 1.125rem; }
.kb-short .kb-short-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.375rem; }
.kb-cta { margin: 2.5rem 0 1rem; padding: 1.5rem 1.75rem; border-radius: var(--radius-card); background: var(--tone-bg); }
.kb-cta p { margin: 0 0 0.75rem; }
.kb-cta-action { color: var(--ink); font-weight: 650; font-size: 1.125rem; }
.kb-reads { padding-left: 1.25rem; }
.kb-sources { margin-top: 2rem; padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kb-sources summary { cursor: pointer; font-weight: 650; color: var(--ink); }
.kb-sources p, .kb-sources li { font-size: 0.9375rem; }
.kb-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.kb-pager a { display: block; padding: 1rem 1.125rem; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); font-weight: 600; }
.kb-pager a.next { text-align: right; }
.kb-pager small { display: block; color: var(--muted); font-weight: 500; font-size: 0.8125rem; margin-bottom: 0.25rem; }
.kb-side { position: sticky; top: 1.5rem; display: grid; gap: 1.25rem; }
.kb-side-card { padding: 1.5rem; border-radius: var(--radius-card); background: var(--tone-bg); }
.kb-side-card h3 { margin-top: 0.875rem; }
.kb-side-card p { color: var(--text); font-size: 0.9375rem; margin: 0 0 1.25rem; }
.kb-side-card .sub-icon { width: 3rem; height: 3rem; }
.kb-side-list { padding: 1.25rem 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-card); }
.kb-side-list h3 { font-size: 1rem; }
.kb-side-list ul { list-style: none; padding: 0; margin: 0 0 0.875rem; }
.kb-side-list li { padding: 0.4375rem 0; border-top: 1px solid var(--line); font-size: 0.9375rem; }
.kb-side-list li a { color: var(--ink); text-decoration: none; }
.kb-side-list > a { font-weight: 600; font-size: 0.9375rem; }
.kb-situations { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 1.5rem 0 0; }
.kb-situations > li { padding: 1.25rem 1.375rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.kb-situations h3 { font-size: 1.0625rem; margin: 0 0 0.625rem; }
.kb-situations ul { list-style: none; padding: 0; margin: 0; }
.kb-situations li li { padding: 0.3125rem 0; font-size: 0.9375rem; line-height: 1.4; }
.kb-situations li li a { color: var(--blue); text-decoration: none; }
.kb-situations li li a:hover { text-decoration: underline; }
.kb-toc { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 2rem; }
.kb-toc a { padding: 0.4375rem 0.875rem; border-radius: 999px; background: var(--sky); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.875rem; }
.kb-toc a:hover { background: var(--button-soft-hover); }
.kb-group { padding-top: 1.5rem; scroll-margin-top: 1rem; }
.kb-group + .kb-group { margin-top: 1.5rem; border-top: 1px solid var(--line); }
.kb-group h3 { font-size: 1.375rem; margin: 0 0 0.25rem; }
.kb-group h3 small { font-size: 0.875rem; color: var(--muted); font-weight: 600; margin-left: 0.375rem; }
.kb-group-lede { margin: 0 0 1rem; color: var(--muted); }
.kb-doc-link { display: none; margin: -1rem 0 1.5rem; }
.kb-doc-link a { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 650; text-decoration: none; }
.kb-doc-link .icon { width: 1.125rem; height: 1.125rem; }
@media (max-width: 56rem) {
  .kb-layout, .kb-topics, .kb-list, .kb-pager { grid-template-columns: minmax(0, 1fr); }
  .kb-side { position: static; }
  .kb-doc-link { display: block; }
}