/* KaaKau site styles — the ONLY stylesheet (Webflow CSS fully removed 2026-06-08).
   Semantic kaakau-* classes + design tokens, no !important. */

/* Base reset — Webflow's CSS used to provide these; restored here after dropping it. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--kaakau-font, Geist, system-ui, sans-serif); color: var(--kaakau-text, #1a1925); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { max-width: 100%; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }

/* hide donkey announcement banners */
.banner,
.banner-hide { display: none; }

/* footer logo: white on the dark footer */
.footer2_logo { filter: brightness(0) invert(1); }


/* ── Design tokens (captured from donkey.bike as the visual reference, NOT imported from it) ──── */
:root {
  /* Orange = the CTA accent only (Lataa sovellus / Vuokraa pyörä). */
  --kaakau-orange: #ff6400;
  --kaakau-orange-dark: #e65a00;
  --kaakau-orange-tint: #fff4ee;
  /* Blue = the KaaKau brand/identity colour (kaakau.fi's real header/footer navy #2d3545).
     Drives the header, footer, section surfaces and product cards. */
  --kaakau-blue: #2d3545;
  --kaakau-blue-deep: #232a37;   /* hover / depth */
  --kaakau-blue-tint: #dbe3ee;   /* light blue chips & icon backers (replaces the orange tint) */
  --kaakau-navy: #1a1925;
  --kaakau-grey: #989797;       /* donkey's secondary-button grey (--grey-title) */
  --kaakau-grey-dark: #7d7c7c;
  --kaakau-radius: 0.675rem;    /* donkey's --_ui-styles---radius--large */
  --kaakau-radius-sm: 0.625rem;
  --kaakau-radius-card: 1.25rem; /* donkey hero/card corner radius */
  --kaakau-surface: #eaeef4;     /* pale blue (was warm grey #f6f4f1) — cooler, less clinical */
  --kaakau-text: #1a1925;
  --kaakau-font: Geist, system-ui, sans-serif;
}

/* ── Layout primitives (migrated from donkey's container-large / padding-global / section padding).
   Own classes, so sections built on these no longer touch the Webflow CSS. ───────────────────── */
.kaakau-container { width: 100%; max-width: 80rem; margin-inline: auto; }
.kaakau-section { padding-block: 4rem; }
.kaakau-section-pad { padding-inline: 5%; }

/* ── KaaKau buttons ──────────────────────────────────────────────────────────────────────────
   Our own classes, modelled on donkey's button look but defined from scratch so nothing is
   overridden and no !important is needed. Apply these instead of donkey's .button/.w-button. */
.kaakau-btn {
  display: inline-block; background: var(--kaakau-orange); color: #fff;
  border: 1px solid transparent; border-radius: var(--kaakau-radius);
  padding: 0.5rem 1rem; font: 500 0.9375rem/1.333 var(--kaakau-font);
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
}
.kaakau-btn:hover { background: var(--kaakau-orange-dark); color: #fff; transform: translateY(-1px); }
.kaakau-btn--secondary { background: var(--kaakau-grey); color: #fff; }
.kaakau-btn--secondary:hover { background: var(--kaakau-grey-dark); color: #fff; }
.kaakau-btn--outline { background: transparent; color: var(--kaakau-orange); border-color: var(--kaakau-orange); }
.kaakau-btn--outline:hover { background: var(--kaakau-orange-tint); color: var(--kaakau-orange); transform: none; }
.kaakau-btn--ghost { background: transparent; color: var(--kaakau-orange); border-color: var(--kaakau-orange); }
.kaakau-btn--ghost:hover { background: var(--kaakau-orange-tint); color: var(--kaakau-orange); transform: none; }
.kaakau-btn--sm { padding: 0.4rem 0.85rem; font-size: 0.875rem; }
/* responsive show/hide (donkey used is-mobile / is-desktop for the dual app-store links) */
.kaakau-btn--mobile { display: none; }
@media (max-width: 767px) {
  .kaakau-btn--desktop { display: none; }
  .kaakau-btn--mobile { display: inline-block; }
}

/* Language toggle (the "FI" selector) — sized to sit level with the header buttons (donkey made it
   a tiny aspect-ratio:1 square, which is why it looked off). Own class; w-dropdown JS unchanged. */
.kaakau-langtoggle {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--kaakau-orange); color: #fff; border: 1px solid var(--kaakau-orange);
  border-radius: var(--kaakau-radius); padding: 0.4rem 0.85rem; min-width: 2.5rem;
  font: 500 0.875rem/1.333 var(--kaakau-font); cursor: pointer;
}

/* ── Hero (migrated from donkey section_header1 / header1_content). Own classes. ─────────────── */
.kaakau-hero { padding: 6.5rem 5% 2.5rem; }
.kaakau-hero__card {
  background: var(--kaakau-surface); border-radius: var(--kaakau-radius-card);
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  min-height: 36.25rem;
  /* NO overflow:clip here — the phone is taller than the card (38rem vs 36.25rem) and is
     bottom-anchored, so its top intentionally spills ~1.75rem above the box, mirroring
     donkey.bike's .header1_content / .header1_image. Re-clipped at mobile below. */
}
.kaakau-hero__content { display: flex; flex-direction: column; align-items: flex-start; padding: 3rem; }
.kaakau-hero__media { position: relative; align-self: stretch; min-height: 36.25rem; }
/* Sized by max-height (not height:100%) so it can exceed the card and break out, like donkey's
   .header1_image: object-fit:contain, max-height:38rem, anchored bottom-right. */
.kaakau-hero__phone { position: absolute; inset: auto 0 0 auto; max-width: none; max-height: 38rem; object-fit: contain; border-bottom-right-radius: var(--kaakau-radius-card); }
.kaakau-h1 { margin: 0 0 2rem; font: 500 3.9375rem/1.063 var(--kaakau-font); letter-spacing: -0.04em; color: var(--kaakau-text); }
.kaakau-lead { margin: 0 0 2rem; max-width: 38ch; font: 300 1.0625rem/1.45 var(--kaakau-font); color: var(--kaakau-text); }
.kaakau-btn-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
@media (max-width: 991px) {
  /* NOTE: the mobile .kaakau-main padding-top lives in the later @media block below, so it wins
     over the 14rem desktop base rule (which is declared after this block). */
  .kaakau-hero { padding-top: 0.5rem; }
  .kaakau-hero__card { grid-template-columns: 1fr; min-height: 0; overflow: clip; }
  .kaakau-hero__content { padding: 2rem 1.5rem; order: 1; }
  .kaakau-hero__media { min-height: 22rem; order: 2; }
  .kaakau-hero__phone { max-height: 22rem; }   /* contained in the stacked layout, no spill */
  .kaakau-h1 { font-size: 2.6rem; }
}

/* ── Ratings strip (migrated from donkey section_logo1 / logo1_list). ───────────────────────── */
.kaakau-ratings { padding: 1rem 5% 1.5rem; }
.kaakau-ratings__inner {
  background: var(--kaakau-surface); border-radius: var(--kaakau-radius);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 2rem; padding: 1.2rem 4rem;
}
.kaakau-rating { display: flex; align-items: center; gap: 1rem; filter: saturate(0); font-size: 0.9375rem; color: var(--kaakau-text); }
.kaakau-rating img { height: 1.5625rem; width: auto; display: block; }
@media (max-width: 767px) { .kaakau-ratings__inner { justify-content: center; padding: 1.2rem 1.5rem; } }

/* ── How-it-works (migrated from donkey section_layout495 / grid-image-center-icons-sides). ──── */
.kaakau-howto { padding: 4rem 5%; }
.kaakau-howto__title { text-align: center; margin: 0 0 2.5rem; font: 500 2.6875rem/0.95 var(--kaakau-font); color: var(--kaakau-blue); }
.kaakau-howto__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px 75px; align-items: center; }
.kaakau-howto__col { display: grid; gap: 3.75rem; }
.kaakau-howto__step { background: var(--kaakau-surface); border-radius: 10px; padding: 1.25rem 1.5rem; }
.kaakau-howto__step h3 { margin: 0 0 0.75rem; font: 500 1.25rem/1.1 var(--kaakau-font); color: var(--kaakau-text); }
.kaakau-howto__step p { margin: 0; font: 400 1.0625rem/1.5 var(--kaakau-font); color: #303544; }
/* How-it-works phone: fading carousel of KaaKau's Finnish app screenshots (replaces the Donkey
   lottie animation; cycled by an inline script, respects prefers-reduced-motion). */
.kaakau-hiw-slider { position: relative; height: 30rem; display: flex; align-items: center; justify-content: center; }
.kaakau-hiw-slide { position: absolute; max-height: 100%; max-width: 100%; width: auto; opacity: 0; transition: opacity .6s ease; }
.kaakau-hiw-slide.is-active { opacity: 1; }
@media (max-width: 991px) {
  .kaakau-howto__grid { grid-template-columns: 1fr; gap: 2.5rem; justify-items: center; text-align: center; }
  #kaakau-hiw { order: -1; }
}

/* ── Map section + value-prop features (migrated from donkey section_map / map_card). ───────── */
.kaakau-mapsec { padding: 4rem 5%; }
.kaakau-mapsec__card { background: var(--kaakau-surface); border-radius: var(--kaakau-radius); display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; overflow: hidden; }
.kaakau-mapsec__map { display: flex; }
.kaakau-mapsec__map #kaakau-map { height: 100%; min-height: 26rem; width: 100%; border-radius: 0; }
.kaakau-mapsec__content { display: flex; flex-direction: column; justify-content: center; padding: 3rem; }
/* overflow-wrap + hyphens so the long compound word "Kaupunkipyöräverkosto" wraps/hyphenates
   instead of overflowing narrow screens (html lang="fi" enables Finnish hyphenation). */
.kaakau-mapsec__content h2 { margin: 0 0 1.5rem; font: 500 2.6875rem/0.95 var(--kaakau-font); color: var(--kaakau-blue); overflow-wrap: break-word; hyphens: auto; }
.kaakau-mapsec__content p { margin: 0 0 2rem; font: 300 1.0625rem/1.45 var(--kaakau-font); color: var(--kaakau-text); }
.kaakau-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.0625rem; margin-top: 2rem; }
.kaakau-feature { display: flex; align-items: center; gap: 1.25rem; background: var(--kaakau-surface); border-radius: var(--kaakau-radius); padding: 0.5625rem 1.5625rem 0.5625rem 0.5625rem; font: 300 1rem/1.35 var(--kaakau-font); color: var(--kaakau-text); }
/* Icon accent: orange to match the Lataa sovellus / Vuokraa pyörä buttons (change-list item 6). */
.kaakau-feature__icon { flex: none; width: 3.875rem; height: 3.875rem; display: flex; align-items: center; justify-content: center; border-radius: var(--kaakau-radius-sm); background: var(--kaakau-orange-tint); color: var(--kaakau-orange); }
.kaakau-feature__icon svg { width: 1.5rem; height: 1.75rem; }
@media (max-width: 991px) {
  .kaakau-mapsec__card { grid-template-columns: 1fr; }
  .kaakau-mapsec__map #kaakau-map { min-height: 22rem; }
  .kaakau-features { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px) {
  .kaakau-features { grid-template-columns: 1fr; }
  .kaakau-mapsec__content { padding: 2rem 1.5rem; }   /* tighter padding gives the title more room */
  .kaakau-mapsec__content h2 { font-size: 2rem; }     /* smaller so the long title fits the phone */
}

/* ── Image marquee (migrated from donkey section_banner16; donkey scrolled it via the Webflow
   runtime we removed, so this is now a pure-CSS scroll — each row's images are duplicated once so
   translateX(-50%) loops seamlessly). ──────────────────────────────────────────────────────── */
.kaakau-marquee { padding: 4rem 0; overflow: hidden; display: flex; flex-direction: column; gap: 1rem; }
.kaakau-marquee__row { display: flex; width: max-content; }
.kaakau-marquee__row--a { animation: kaakau-marquee-l 60s linear infinite; }
.kaakau-marquee__row--b { animation: kaakau-marquee-r 60s linear infinite; }
/* each image owns its trailing gap (margin, not flex gap) so one duplicated set == exactly 50%
   of the track width -> translateX(-50%) loops with no jump. */
.kaakau-marquee__img { flex: none; width: 16.625rem; height: 13.6875rem; margin-right: 1rem; border-radius: var(--kaakau-radius-sm); object-fit: cover; }
@keyframes kaakau-marquee-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes kaakau-marquee-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .kaakau-marquee__row { animation: none; } }

/* ── Tabs: advertise / company membership (migrated from donkey section_feature / w-tabs). ───── */
.kaakau-tabs { padding: 4rem 5%; background: var(--kaakau-surface); }
.kaakau-tabs__nav { max-width: 30rem; margin: 0 auto 3rem; display: grid; grid-template-columns: 1fr 1fr; background: #fff; border: 1px solid #edeef1; border-radius: 100px; padding: 6px; }
.kaakau-tabs__tab { background: none; border: 0; cursor: pointer; padding: 0.6rem 1rem; border-radius: 100px; font: 500 0.95rem/1.2 var(--kaakau-font); color: var(--kaakau-text); transition: background-color 0.2s, color 0.2s; }
.kaakau-tabs__tab.is-active { background: var(--kaakau-blue-tint); color: var(--kaakau-blue); }
.kaakau-tabs__pane { display: none; }
.kaakau-tabs__pane.is-active { display: block; }
.kaakau-tabs__card { display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: transparent; border-radius: var(--kaakau-radius); overflow: hidden; }
.kaakau-tabs__body { padding: 3rem; }
.kaakau-tabs__body h2 { margin: 0 0 1rem; font: 500 2.2rem/1.05 var(--kaakau-font); color: var(--kaakau-blue); }
.kaakau-tabs__body p { margin: 0 0 2rem; font: 300 1.0625rem/1.5 var(--kaakau-font); color: var(--kaakau-text); }
.kaakau-tabs__img { width: 100%; height: 100%; min-height: 22rem; object-fit: cover; display: block; }
@media (max-width: 991px) {
  .kaakau-tabs__card { grid-template-columns: 1fr; }
  .kaakau-tabs__img { min-height: 16rem; order: -1; }
}

/* ── Footer (migrated from donkey footer_wrapper / footer2_*). ──────────────────────────────── */
.kaakau-footer { background: var(--kaakau-blue); color: #fff; padding: 4rem 5% 2rem; }
.kaakau-footer__inner { max-width: 80rem; margin-inline: auto; }
.kaakau-footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 2.5rem; }
.kaakau-footer__brand img { height: 2.25rem; width: auto; display: block; filter: brightness(0) invert(1); margin-bottom: 1.5rem; }
.kaakau-footer__news p { margin: 0 0 1rem; font-size: 0.95rem; line-height: 1.5; }
.kaakau-footer__news .kaakau-news-title { color: var(--kaakau-orange); font-weight: 600; }
.kaakau-footer__col h4 { color: var(--kaakau-orange); font: 600 0.95rem/1.3 var(--kaakau-font); margin: 0 0 1rem; }
.kaakau-footer__col a { display: block; color: #fff; text-decoration: none; padding: 0.3rem 0; font-size: 0.95rem; }
.kaakau-footer__col a:hover { color: var(--kaakau-orange); }
.kaakau-footer__divider { border: 0; border-top: 1px solid rgba(255,255,255,0.12); margin: 2.5rem 0 1.5rem; }
.kaakau-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.85rem; color: #fff; }
.kaakau-footer__social { display: flex; gap: 1rem; }
.kaakau-footer__social img { width: 1.5rem; height: 1.5rem; display: block; }
@media (max-width: 991px) { .kaakau-footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .kaakau-footer__top { grid-template-columns: 1fr; } }

/* ── Pre-footer contact band (content imported from kaakau.fi), shown on every page. ────────── */
.kaakau-prefooter { background: var(--kaakau-surface); padding: 3rem 5%; }
.kaakau-prefooter__grid { max-width: 80rem; margin-inline: auto; display: grid; grid-template-columns: 1.7fr 1fr; gap: 2.5rem; align-items: center; }
.kaakau-prefooter h3 { margin: 0 0 0.75rem; font: 500 1.6rem/1.15 var(--kaakau-font); color: var(--kaakau-text); }
.kaakau-prefooter p { margin: 0; max-width: 56ch; font: 300 1.0625rem/1.5 var(--kaakau-font); color: var(--kaakau-text); }
.kaakau-prefooter__contact { display: flex; flex-direction: column; gap: 0.35rem; }
.kaakau-prefooter__label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: #6d767e; }
.kaakau-prefooter__phone { font: 600 1.9rem/1 var(--kaakau-font); color: var(--kaakau-orange); text-decoration: none; }
.kaakau-prefooter__phone:hover { color: var(--kaakau-orange-dark); }
.kaakau-prefooter__contact a:not(.kaakau-prefooter__phone) { color: var(--kaakau-text); text-decoration: none; }
.kaakau-prefooter__contact a:not(.kaakau-prefooter__phone):hover { color: var(--kaakau-orange); }
@media (max-width: 767px) { .kaakau-prefooter__grid { grid-template-columns: 1fr; gap: 1.25rem; } }

/* Header: 1rem breathing space above the navbar (requested). The donkey navbar is position:fixed,
   so this offsets it from the top edge. */
.navbar13_component { top: 1rem; }

/* station map */
#kaakau-map { height: 520px; width: 100%; border-radius: 16px; overflow: hidden; background: #edeef1; }
.sm-marker { width: 16px; height: 16px; border-radius: 50%; background: #ff6400; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); cursor: pointer; }
.sm-marker--empty { background: #9197a7; }
.maplibregl-popup-content { border-radius: 10px; font-family: Geist, system-ui, sans-serif; }

/* ── Header / navbar — fully migrated to KaaKau classes (no Webflow navbar). A centered bar with a
   2rem gap above it on desktop (1rem on mobile, below); cities + language dropdowns and the mobile
   menu are toggled by nav.js. ──── */
.kaakau-nav { position: fixed; top: 2rem; left: 0; right: 0; z-index: 100; padding-inline: 5%; }
.kaakau-nav__bar { position: relative; max-width: 80rem; margin-inline: auto; background: var(--kaakau-blue); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--kaakau-radius); box-shadow: 0 8px 28px rgba(45,53,69,0.22); display: flex; align-items: center; gap: 1.5rem; padding: 0.6rem 1.25rem; min-height: 64px; }
.kaakau-nav__logo img { height: 34px; width: auto; display: block; }
.kaakau-nav__menu { display: flex; align-items: center; justify-content: center; gap: 1.75rem; flex: 1; }
/* white on the blue bar (desktop); re-darkened inside the white mobile menu panel below */
.kaakau-nav__link { color: #fff; text-decoration: none; font: 500 0.95rem/1 var(--kaakau-font); background: none; border: 0; cursor: pointer; padding: 0.5rem 0; display: inline-flex; align-items: center; gap: 0.35rem; }
.kaakau-nav__link:hover { color: var(--kaakau-orange); }
/* "Tuki" ghost button reads as a quiet light outline on the blue bar (orange reserved for the CTA) */
.kaakau-nav .kaakau-btn--ghost { color: #fff; border-color: rgba(255,255,255,0.45); }
.kaakau-nav .kaakau-btn--ghost:hover { background: rgba(255,255,255,0.12); color: #fff; }
.kaakau-nav__right { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
.kaakau-nav__menu-cta { display: none; }

.kaakau-dropdown { position: relative; }
.kaakau-dropdown__panel { display: none; }
.kaakau-dropdown__chev { font-size: 0.7em; transition: transform 0.2s; }
.kaakau-dropdown.is-open .kaakau-dropdown__chev { transform: rotate(180deg); }

/* Cities mega-panel spans the full bar width */
.kaakau-citydrop { position: static; }
.kaakau-citydrop > .kaakau-dropdown__panel { position: absolute; left: 0; right: 0; top: 100%; margin-top: 0.75rem; background: #fff; border: 1px solid #edeef1; border-radius: 16px; box-shadow: 0 12px 32px rgba(0,0,0,0.1); grid-template-columns: 3fr 1fr; gap: 1.5rem; padding: 1.5rem; }
.kaakau-citydrop.is-open > .kaakau-dropdown__panel { display: grid; }
.kaakau-cities-menu { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px 22px; align-content: start; }
.kaakau-cities-title { grid-column: 1 / -1; font-weight: 700; color: var(--kaakau-text); margin-bottom: 6px; font-family: var(--kaakau-font); }
.kaakau-city { color: var(--kaakau-text); text-decoration: none; padding: 5px 0; font-size: 15px; font-family: var(--kaakau-font); }
.kaakau-city:hover { color: var(--kaakau-orange); }
.kaakau-citycard { display: flex; flex-direction: column; gap: 0.5rem; background: var(--kaakau-surface); border-radius: 12px; padding: 1rem; text-decoration: none; }
.kaakau-citycard img { width: 100%; height: auto; border-radius: 8px; }
.kaakau-citycard__body { display: flex; flex-direction: column; }
.kaakau-citycard__body strong { color: var(--kaakau-text); }
.kaakau-citycard__body span { color: #6d767e; font-size: 0.9rem; }

/* Language dropdown */
.kaakau-langselect > .kaakau-dropdown__panel { position: absolute; right: 0; top: 100%; margin-top: 0.5rem; min-width: 5rem; background: #fff; border: 1px solid #edeef1; border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,0.1); padding: 0.4rem; }
.kaakau-langselect.is-open > .kaakau-dropdown__panel { display: block; }
.kaakau-langselect__panel a { display: block; padding: 0.4rem 0.75rem; color: var(--kaakau-text); text-decoration: none; border-radius: 6px; }
.kaakau-langselect__panel a:hover { background: var(--kaakau-surface); color: var(--kaakau-orange); }
.kaakau-langtoggle { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; }

/* Hamburger */
.kaakau-nav__burger { display: none; flex-direction: column; gap: 5px; width: 42px; height: 42px; align-items: center; justify-content: center; background: none; border: 1px solid rgba(255,255,255,0.3); border-radius: 10px; cursor: pointer; }
.kaakau-nav__burger span { display: block; width: 20px; height: 2px; background: #fff; transition: transform 0.2s, opacity 0.2s; }
.kaakau-nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kaakau-nav__burger.is-open span:nth-child(2) { opacity: 0; }
.kaakau-nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Homepage still uses donkey's page-wrapper/main-wrapper; neutralise their fixed-navbar clearance
   now that the header is an in-flow KaaKau component. */
/* Page + main shells (migrated from donkey page-wrapper / main-wrapper). main is a white card with
   a rounded bottom over the dark footer; top padding clears the fixed header (~5.5rem). */
.kaakau-page { overflow-x: clip; }
/* Airy top space below the fixed header (desktop): ~6.5rem to clear the header (which sits 2rem
   from the top) + ~7.5rem of Donkey-style breathing room. The generous gap is the "airy look" and
   also gives the hero phone plenty of room to break out above its card. Mobile resets this. */
.kaakau-main { position: relative; background: #fff; padding-top: 14rem; border-bottom-left-radius: var(--kaakau-radius); border-bottom-right-radius: var(--kaakau-radius); }
.kaakau-hero { padding-top: 0.5rem; }

/* City page: hero + station map */
.kaakau-cityhero { padding: 3rem 5% 1rem; }
.kaakau-cityhero .kaakau-h1 { font-size: 3rem; }
.kaakau-citymap { padding: 1rem 5% 4rem; }
.kaakau-citymap h2 { margin: 0 0 1rem; font: 500 2rem/1 var(--kaakau-font); color: var(--kaakau-blue); }
.kaakau-citymap p { margin: 0 0 1.5rem; font: 300 1.0625rem/1.5 var(--kaakau-font); color: var(--kaakau-text); }

/* General H2 (e.g. /ohjeet/ landing) */
.kaakau-h2 { margin: 0 0 1rem; font: 500 2rem/1.1 var(--kaakau-font); color: var(--kaakau-blue); }

@media (max-width: 991px) {
  .kaakau-nav { top: 1rem; }   /* the 2rem above-header margin is desktop-only */
  .kaakau-main { padding-top: 9rem; }   /* desktop's airy 14rem is too big on phones; ~half the gap. After the base rule, so this wins. */
  .kaakau-nav__menu { display: none; position: absolute; left: 0; right: 0; top: 100%; margin-top: 0.5rem; flex-direction: column; align-items: stretch; gap: 0.25rem; background: #fff; border: 1px solid #edeef1; border-radius: 16px; box-shadow: 0 12px 32px rgba(0,0,0,0.1); padding: 1rem; max-height: calc(100dvh - 6rem); overflow-y: auto; }
  .kaakau-nav__menu.is-open { display: flex; }
  .kaakau-nav__menu .kaakau-nav__link { color: var(--kaakau-text); }   /* dark on the white mobile panel */
  .kaakau-nav__burger { display: inline-flex; }
  .kaakau-nav__desktop { display: none; }
  .kaakau-nav__menu-cta { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
  .kaakau-citydrop > .kaakau-dropdown__panel { position: static; box-shadow: none; border: 0; padding: 0; margin-top: 0.5rem; grid-template-columns: 1fr; }
  .kaakau-cities-menu { grid-template-columns: repeat(2, 1fr); }
  .kaakau-citycard { display: none; }
}

/* ── Pricing section (real kaakau.fi plans: paivapassi / kausipassi / kuukausijasenyys) ───────── */
.kaakau-pricing { padding: 4rem 5%; }
.kaakau-pricing__head { text-align: center; max-width: 42rem; margin: 0 auto 3rem; }
.kaakau-pricing__title { margin: 0 0 1rem; font: 500 2.6875rem/0.95 var(--kaakau-font); color: var(--kaakau-blue); }
.kaakau-pricing__lead { margin: 0; font: 300 1.0625rem/1.5 var(--kaakau-font); color: #303544; }
.kaakau-pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; }

.kaakau-plan { position: relative; display: flex; flex-direction: column; background: var(--kaakau-surface); border: 1px solid transparent; border-radius: var(--kaakau-radius-card); padding: 2rem; }
.kaakau-plan--featured { background: #fff; border-color: var(--kaakau-blue); box-shadow: 0 18px 44px rgba(45, 53, 69, 0.18); }
.kaakau-plan__badge { position: absolute; top: -0.85rem; left: 2rem; background: var(--kaakau-blue); color: #fff; font: 500 0.8125rem/1 var(--kaakau-font); padding: 0.45rem 0.85rem; border-radius: 999px; }
.kaakau-plan__name { margin: 0 0 0.75rem; font: 500 1.5rem/1.05 var(--kaakau-font); color: var(--kaakau-text); }
.kaakau-plan__price { margin: 0 0 0.75rem; display: flex; align-items: baseline; gap: 0.4rem; }
.kaakau-plan__amount { font: 600 2.25rem/1 var(--kaakau-font); color: var(--kaakau-blue); }
.kaakau-plan__period { font: 400 1rem/1 var(--kaakau-font); color: var(--kaakau-grey-dark); }
.kaakau-plan__tagline { margin: 0 0 1.25rem; font: 300 1rem/1.45 var(--kaakau-font); color: #303544; }
.kaakau-plan__features { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 0.7rem; }
.kaakau-plan__features li { position: relative; padding-left: 1.6rem; font: 400 0.9875rem/1.4 var(--kaakau-font); color: var(--kaakau-text); }
.kaakau-plan__features li::before { content: ""; position: absolute; left: 0; top: 0.15rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--kaakau-blue-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%232d3545' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.3 5 8.6l4.5-5'/%3E%3C/svg%3E") center/0.72rem no-repeat; }
.kaakau-plan__features strong { font-weight: 600; }
.kaakau-plan__cta { margin-top: auto; align-self: flex-start; }

.kaakau-payg { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.75rem; }
.kaakau-payg__label { margin: 0; font: 500 1rem/1 var(--kaakau-font); color: var(--kaakau-text); }
.kaakau-payg__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.kaakau-payg__list li { display: flex; align-items: baseline; gap: 0.4rem; background: var(--kaakau-surface); border-radius: 999px; padding: 0.45rem 0.95rem; font: 400 0.9rem/1 var(--kaakau-font); color: #303544; }
.kaakau-payg__list strong { font-weight: 600; color: var(--kaakau-text); }

@media (max-width: 991px) { .kaakau-pricing__grid { grid-template-columns: 1fr; max-width: 28rem; margin-inline: auto; } }

/* ── Tuki (help center: /tuki) — Donkey-style: centered search band + sections in columns ──────── */
/* Search band: its own section, contents centered (mirrors Donkey Republic's help-center search hero). */
.kaakau-tuki__searchband { background: var(--kaakau-surface); border-radius: var(--kaakau-radius-card); padding: 3.5rem 2rem; text-align: center; margin-bottom: 3rem; }
.kaakau-tuki__searchband h1 { margin: 0 0 0.75rem; }
.kaakau-tuki__intro { max-width: 40rem; margin: 0 auto 1.75rem; color: #303544; line-height: 1.6; }
.kaakau-tuki__search { max-width: 34rem; margin: 0 auto; }
.kaakau-tuki__search input {
  width: 100%; box-sizing: border-box; font: 400 1.05rem/1.4 var(--kaakau-font);
  color: var(--kaakau-text); padding: 0.95rem 1.15rem; border: 1px solid #d7dbe2;
  border-radius: var(--kaakau-radius); background: #fff; transition: border-color .15s, box-shadow .15s;
}
.kaakau-tuki__search input::placeholder { color: #9197a7; }
.kaakau-tuki__search input:focus { outline: none; border-color: var(--kaakau-orange); box-shadow: 0 0 0 3px var(--kaakau-orange-tint); }

/* Sections in columns (left-aligned, not centered) — like DR's category grid; cards kept intact. */
.kaakau-tuki__cols { columns: 3; column-gap: 3rem; }
.kaakau-tuki__card { break-inside: avoid; margin: 0 0 2.5rem; display: block; }
@media (max-width: 991px) { .kaakau-tuki__cols { columns: 2; } }
@media (max-width: 600px) { .kaakau-tuki__cols { columns: 1; } }
.kaakau-tuki__section-title { font: 600 1.25rem/1.3 var(--kaakau-font); color: var(--kaakau-text); margin: 0 0 0.25rem; }
/* Self-contained list styling (InstructionLayout's scoped .oh-list does not reach slotted content). */
.kaakau-tuki__list { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.15rem; }
.kaakau-tuki__list li { margin: 0; }
.kaakau-tuki__list a {
  display: block; padding: 0.7rem 0.9rem; border-radius: 10px; text-decoration: none;
  color: var(--kaakau-text); font-weight: 500; line-height: 1.4;
  transition: background-color .15s, color .15s;
}
.kaakau-tuki__list a:hover { background: var(--kaakau-orange-tint); color: var(--kaakau-orange-dark); }

.kaakau-tuki__results { display: grid; gap: 0.75rem; }
.kaakau-tuki__result {
  display: grid; gap: 0.2rem; padding: 1rem 1.25rem; border: 1px solid #edeef1;
  border-radius: 12px; text-decoration: none; color: var(--kaakau-text); transition: border-color .2s;
}
.kaakau-tuki__result:hover { border-color: var(--kaakau-orange); }
.kaakau-tuki__result-title { font-weight: 600; }
.kaakau-tuki__result-sec { font-size: 0.78rem; color: var(--kaakau-orange); text-transform: uppercase; letter-spacing: 0.03em; }
.kaakau-tuki__result-snip { font-size: 0.9rem; color: #6d767e; line-height: 1.5; }
.kaakau-tuki__empty { color: #6d767e; }

/* Article body typography (set:html content from the translated FAQ) */
.kaakau-tuki__title { margin-top: 3rem; }
.kaakau-tuki__article { max-width: 720px; }
.kaakau-tuki__article h2 { font: 600 1.2rem/1.35 var(--kaakau-font); color: var(--kaakau-text); margin: 1.75rem 0 0.5rem; }
.kaakau-tuki__article p { color: #303544; line-height: 1.65; margin: 0.75rem 0; }
.kaakau-tuki__article ul, .kaakau-tuki__article ol { color: #303544; line-height: 1.65; padding-left: 1.25rem; }
.kaakau-tuki__article li { margin: 0.35rem 0; }
.kaakau-tuki__article a { color: var(--kaakau-orange); text-decoration: underline; }
.kaakau-tuki__article img { display: block; max-width: 100%; height: auto; border-radius: 8px; border: 1px solid #e5e7eb; margin: 1.25rem 0; }
/* markdown elements introduced by the content-collection conversion (h3/h4, tables, code, hr). */
.kaakau-tuki__article h3 { font: 600 1.05rem/1.35 var(--kaakau-font); color: var(--kaakau-text); margin: 1.5rem 0 0.4rem; }
.kaakau-tuki__article h4 { font: 600 1rem/1.35 var(--kaakau-font); color: var(--kaakau-text); margin: 1.25rem 0 0.35rem; }
.kaakau-tuki__article strong { color: var(--kaakau-text); }
.kaakau-tuki__article code { background: var(--kaakau-surface); padding: 0.1em 0.35em; border-radius: 5px; font-size: 0.9em; }
.kaakau-tuki__article hr { border: none; border-top: 1px solid #edeef1; margin: 1.75rem 0; }
.kaakau-tuki__article table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: 0.95rem; }
.kaakau-tuki__article th, .kaakau-tuki__article td { border: 1px solid #e3e7ee; padding: 0.55rem 0.75rem; text-align: left; vertical-align: top; }
.kaakau-tuki__article th { background: var(--kaakau-surface); }
.kaakau-tuki__article tbody tr:nth-child(even) td { background: #fafbfc; }
.kaakau-tuki__more { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #edeef1; }
.kaakau-tuki__back { margin-top: 2rem; }
.kaakau-tuki__back a { color: var(--kaakau-orange); text-decoration: none; font-weight: 500; }