*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --color-blue: #4299e1;
      --color-blue-dark: #3182ce;
      --color-blue-light: #dbeafe;
      --color-blue-100: #dbeafe;
      --color-text: #1b1b1f;
      --color-text-secondary: #3c3c43;
      --color-bg: #ffffff;
      --color-bg-soft: #f6f6f7;
      --color-border: #e2e2e3;
      --color-divider: #e2e2e3;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Instrument Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
      color: var(--color-text);
      background: var(--color-bg);
      font-size: 17px;
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
    }

    .font-handwriting {
      font-family: 'Just Another Hand', cursive;
      font-size: 1.35em;
      line-height: 0.8;
    }

    /* Background pattern */
    .bg-pattern {
      position: fixed;
      inset: 0;
      z-index: -10;
      width: 100%;
      height: 100%;
      background-color: white;
      background-image: linear-gradient(to right, #f0f0f0 1px, transparent 1px),
                         linear-gradient(to bottom, #f0f0f0 1px, transparent 1px);
      background-size: 6rem 4rem;
    }

    .bg-pattern::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, white, transparent);
    }

    .bg-pattern::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle 500px at 50% 200px, #DBEFFF, transparent);
    }

    /* Container */
    .container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 24px;
    }
    @media (max-width: 480px) { .container { padding: 0 16px; } }

    /* Header / Nav */
    .nav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--color-border);
    }

    .nav .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64px;
    }

    .nav-logo img {
      height: 32px;
      display: block;
    }

    .nav-links {
      display: flex;
      gap: 24px;
      list-style: none;
    }

    .nav-links a {
      color: var(--color-text-secondary);
      text-decoration: none;
      font-size: 15.5px;
      font-weight: 500;
      transition: color 0.2s;
    }

    .nav-links a:hover {
      color: var(--color-blue);
    }

    .nav-contact {
      color: var(--color-text-secondary);
      text-decoration: none;
      font-size: 15.5px;
    }

    /* Hamburger menu */
    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
    }

    .hamburger span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--color-text);
      border-radius: 2px;
      transition: transform 0.3s, opacity 0.3s;
    }

    .mobile-menu {
      display: none;
      background: white;
      border-bottom: 1px solid var(--color-border);
      padding: 16px 24px;
    }

    .mobile-menu.active {
      display: block;
    }

    .mobile-menu a {
      display: block;
      padding: 8px 0;
      color: var(--color-text-secondary);
      text-decoration: none;
      font-size: 16.5px;
      font-weight: 500;
    }

    /* Hero */
    .hero {
      padding: 80px 0 48px;
    }

    .hero .container {
      display: flex;
      align-items: center;
      gap: 48px;
    }

    .hero-content {
      flex: 1;
    }

    .hero-content h1 {
      font-family: 'Poppins', sans-serif;
      font-size: 2.75rem;
      font-weight: 700;
      line-height: 1.2;
      color: var(--color-text);
      margin-bottom: 20px;
    }

    .hero-content p {
      font-size: 1.25rem;
      font-weight: 500;
      color: var(--color-text-secondary);
      margin-bottom: 32px;
    }

    .btn-brand {
      display: inline-block;
      background: var(--color-blue);
      color: white;
      padding: 12px 28px;
      border-radius: 24px;
      text-decoration: none;
      font-weight: 600;
      font-size: 16.5px;
      transition: background 0.2s;
    }

    .btn-brand:hover {
      background: var(--color-blue-dark);
    }

    .hero-image {
      flex: 1;
      text-align: center;
    }

    .hero-image img {
      max-width: 100%;
      height: auto;
    }

    /* Intro text */
    .intro {
      padding: 64px 0;
      text-align: center;
    }

    .intro .container {
      max-width: 960px;
    }

    .intro p {
      font-size: 1.375rem;
      line-height: 2;
      color: var(--color-text-secondary);
    }

    /* App Store section */
    .app-store {
      background: var(--color-blue-100);
      border-radius: 16px;
      padding: 48px;
      margin-bottom: 40px;
    }

    .app-store .container {
      display: flex;
      align-items: center;
      gap: 48px;
      padding: 0;
      max-width: 100%;
    }

    .app-store-content {
      flex: 1;
    }

    .app-store-content .label {
      color: var(--color-blue);
      font-weight: 600;
      font-size: 1.25rem;
      margin-bottom: 16px;
    }

    .app-store-content h2 {
      font-family: 'Poppins', sans-serif;
      font-size: 1.75rem;
      font-weight: 700;
      margin-bottom: 16px;
      line-height: 1.3;
    }

    .app-store-content p {
      color: var(--color-text-secondary);
      line-height: 1.8;
      margin-bottom: 24px;
    }

    .app-store-content .play-badge img {
      height: 52px;
    }

    .app-store-image {
      flex: 1;
      text-align: center;
    }

    .app-store-image img {
      max-width: 280px;
      height: auto;
    }

    /* Management section */
    .management {
      padding: 80px 0;
      text-align: center;
    }

    .management .container {
      max-width: 960px;
    }

    .management h3 {
      font-family: 'Poppins', sans-serif;
      font-size: 1.75rem;
      font-weight: 700;
      margin-bottom: 24px;
    }

    .management p {
      font-size: 1.15rem;
      color: var(--color-text-secondary);
      line-height: 1.8;
    }

    /* Pricing */
    .pricing {
      padding: 80px 0;
    }

    .pricing .container {
      max-width: 960px;
    }

    .pricing h3 {
      font-family: 'Poppins', sans-serif;
      font-size: 1.75rem;
      font-weight: 700;
      margin-bottom: 12px;
      text-align: center;
    }

    .pricing .subtitle {
      text-align: center;
      color: var(--color-text-secondary);
      font-size: 1.05rem;
      margin-bottom: 48px;
    }

    .pricing-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    .pricing-card {
      background: var(--color-bg-soft);
      border: 1px solid var(--color-border);
      border-radius: 16px;
      padding: 36px 32px;
    }

    .pricing-card.highlight {
      border-color: var(--color-blue);
      box-shadow: 0 2px 16px rgba(66, 153, 225, 0.1);
    }

    .pricing-card .label {
      font-weight: 700;
      font-size: 1.05rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--color-blue);
      margin-bottom: 8px;
    }

    .pricing-card h4 {
      font-family: 'Poppins', sans-serif;
      font-size: 1.15rem;
      font-weight: 700;
      margin-bottom: 16px;
    }

    .pricing-card .price {
      font-family: 'Poppins', sans-serif;
      font-size: 2.25rem;
      font-weight: 800;
      color: var(--color-text);
      line-height: 1;
    }

    .pricing-card .price span {
      font-size: 1rem;
      font-weight: 500;
      color: var(--color-text-secondary);
    }

    .pricing-card .price .vat-tag {
      display: inline-block;
      font-size: 1rem;
      font-weight: 600;
      color: var(--color-text-secondary);
      background: var(--color-bg-soft);
      border: 1px solid var(--color-border);
      border-radius: 999px;
      padding: 3px 9px;
      margin-left: 8px;
      vertical-align: middle;
      white-space: nowrap;
    }

    .pricing-card .price-note {
      font-size: 1.05rem;
      color: var(--color-text-secondary);
      margin-top: 4px;
      margin-bottom: 20px;
    }

    .pricing-card .trial-badge {
      display: inline-block;
      background: var(--color-blue-100);
      color: var(--color-blue-dark);
      font-weight: 700;
      font-size: 1rem;
      padding: 6px 14px;
      border-radius: 20px;
      margin-bottom: 20px;
    }

    .pricing-card ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .pricing-card ul li {
      font-size: 1.02rem;
      color: var(--color-text-secondary);
      padding: 6px 0;
      padding-left: 22px;
      position: relative;
    }

    .pricing-card ul li::before {
      content: '\2713';
      position: absolute;
      left: 0;
      color: var(--color-blue);
      font-weight: 700;
    }

    .fee-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 16px;
    }

    .fee-table th, .fee-table td {
      text-align: left;
      padding: 10px 14px;
      font-size: 1rem;
      border-bottom: 1px solid var(--color-border);
    }

    .fee-table th {
      font-weight: 700;
      font-size: 1.05rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--color-text-secondary);
    }

    .fee-table td {
      color: var(--color-text);
    }

    .fee-table td:last-child {
      font-weight: 700;
      color: var(--color-blue-dark);
    }

    @media (max-width: 640px) {
      .pricing-cards {
        grid-template-columns: 1fr;
      }
    }

    /* Features grid */
    .features {
      padding: 48px 0 80px;
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }

    .feature-card {
      background: var(--color-bg-soft);
      border: 1px solid var(--color-border);
      border-radius: 12px;
      padding: 28px;
    }

    .feature-card h4 {
      font-family: 'Poppins', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 12px;
      color: var(--color-text);
    }

    .feature-card p {
      font-size: 1rem;
      color: var(--color-text-secondary);
      line-height: 1.7;
    }

    /* Footer */
    .footer {
      border-top: 2px solid var(--color-border);
      padding: 48px 0;
    }

    .footer .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .footer-logo img {
      height: 28px;
    }

    .footer-nav {
      display: flex;
      gap: 32px;
    }

    .footer-nav a {
      color: var(--color-text-secondary);
      text-decoration: none;
      font-weight: 600;
      font-size: 15.5px;
      transition: color 0.2s;
    }

    .footer-nav a:hover {
      color: var(--color-blue);
    }

    /* Language switcher */
    .lang-switch {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-left: 24px;
      font-size: 13.5px;
    }

    .lang-switch a {
      color: var(--color-text-secondary);
      text-decoration: none;
      font-weight: 600;
      padding: 2px 5px;
      border-radius: 4px;
      transition: color 0.2s, background 0.2s;
      opacity: 0.6;
    }

    .lang-switch a:hover {
      opacity: 1;
      color: var(--color-blue);
    }

    .lang-switch a.active {
      opacity: 1;
      color: var(--color-blue);
      background: var(--color-blue-100);
    }

    .lang-switch .sep {
      color: var(--color-border);
      font-weight: 400;
      user-select: none;
    }

    .mobile-lang-switch {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 12px 0 4px;
      font-size: 14.5px;
    }

    .mobile-lang-switch a {
      display: inline-block;
      color: var(--color-text-secondary);
      text-decoration: none;
      font-weight: 600;
      padding: 4px 8px;
      border-radius: 4px;
      opacity: 0.6;
    }

    .mobile-lang-switch a:hover {
      opacity: 1;
      color: var(--color-blue);
    }

    .mobile-lang-switch a.active {
      opacity: 1;
      color: var(--color-blue);
      background: var(--color-blue-100);
    }

    .mobile-lang-switch .sep {
      color: var(--color-border);
      user-select: none;
    }

    /* RTL support */
    html[dir="rtl"] body {
      text-align: right;
    }

    html[dir="rtl"] .nav .container {
      flex-direction: row-reverse;
    }

    html[dir="rtl"] .nav-links {
      flex-direction: row-reverse;
    }

    html[dir="rtl"] .lang-switch {
      margin-left: 0;
      margin-right: 24px;
    }

    html[dir="rtl"] .hero .container {
      flex-direction: row-reverse;
    }

    html[dir="rtl"] .pricing-card .price .vat-tag {
      margin-left: 0;
      margin-right: 8px;
    }

    html[dir="rtl"] .pricing-card ul li {
      padding-left: 0;
      padding-right: 22px;
    }

    html[dir="rtl"] .pricing-card ul li::before {
      left: auto;
      right: 0;
    }

    html[dir="rtl"] .fee-table th,
    html[dir="rtl"] .fee-table td {
      text-align: right;
    }

    html[dir="rtl"] .app-store .container {
      flex-direction: row-reverse;
    }

    html[dir="rtl"] .footer .container {
      flex-direction: row-reverse;
    }

    html[dir="rtl"] .footer-nav {
      flex-direction: row-reverse;
    }

    /* Responsive */
    @media (max-width: 960px) {
      .hero .container {
        flex-direction: column;
        text-align: center;
      }

      .hero-content h1 {
        font-size: 2rem;
      }

      .hero-image {
        padding-top: 32px;
      }

      .features-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .app-store .container {
        flex-direction: column;
      }

      .app-store-content {
        text-align: center;
      }

      .app-store-image img {
        max-width: 240px;
      }
    }

    @media (max-width: 640px) {
      .nav-links { display: none; }
      .nav > .container > .lang-switch { display: none; }
      .hamburger { display: flex; }

      .hero {
        padding: 48px 0 32px;
      }

      .hero-content h1 {
        font-size: 1.65rem;
      }

      .hero-content p {
        font-size: 1.05rem;
      }

      .features-grid {
        grid-template-columns: 1fr;
      }

      .app-store {
        padding: 32px 24px;
      }

      .intro p {
        font-size: 1.1rem;
      }

      .footer .container {
        flex-direction: column;
        gap: 24px;
        text-align: center;
      }
    }

/* ==========================================================================
   Mega-menu header
   ========================================================================== */
.nav .container { gap: 24px; }
.nav-main { display: flex; align-items: center; justify-content: center; gap: 4px; list-style: none; flex: 1; }
.nav-main > li { position: relative; }
.nav-main > li > a,
.nav-main > li > button {
  display: flex; align-items: center; gap: 5px;
  padding: 10px 12px; border: none; background: none; cursor: pointer;
  color: var(--color-text-secondary); text-decoration: none;
  font-family: inherit; font-size: 15.5px; font-weight: 600;
  border-radius: 8px; transition: color .18s, background .18s; white-space: nowrap;
}
.nav-main > li > a:hover,
.nav-main > li > button:hover,
.nav-main > li[data-open="1"] > button { color: var(--color-blue); background: var(--color-bg-soft); }
.nav-main .caret { width: 9px; height: 9px; flex: none; transition: transform .18s; }
.nav-main > li[data-open="1"] .caret { transform: rotate(180deg); }

.mega {
  position: absolute; inset-inline-start: 0; top: calc(100% + 10px);
  display: none; z-index: 200;
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: 14px; box-shadow: 0 18px 44px rgba(16,24,40,.13);
  padding: 22px; min-width: 560px;
}
.mega[data-wide="1"] { min-width: 760px; }
.nav-main > li[data-open="1"] .mega { display: block; }
.mega-grid { display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr)); gap: 22px 30px; }
.mega-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
.mega-col h4 {
  font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--color-text-secondary); opacity: .65; margin-bottom: 10px;
}
.mega-col a {
  display: block; padding: 8px 10px; margin-inline-start: -10px;
  border-radius: 8px; text-decoration: none; transition: background .16s;
}
.mega-col a:hover { background: var(--color-bg-soft); }
.mega-col a b { display: block; font-size: 15.5px; font-weight: 600; color: var(--color-text); }
.mega-col a span { display: block; font-size: 14px; line-height: 1.45; color: var(--color-text-secondary); opacity: .8; margin-top: 1px; }
.mega-promo {
  grid-column: -2 / -1; background: var(--color-blue-light);
  border-radius: 12px; padding: 18px; align-self: start;
}
.mega-promo b { display: block; font-size: 15.5px; color: var(--color-text); margin-bottom: 6px; }
.mega-promo p { font-size: 14px; line-height: 1.5; color: var(--color-text-secondary); margin-bottom: 12px; }
.mega-promo a { font-size: 14.5px; font-weight: 700; color: var(--color-blue-dark); text-decoration: none; }
.mega-promo a:hover { text-decoration: underline; }

.nav-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.nav-phone {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15.5px; font-weight: 700; color: var(--color-text); text-decoration: none; white-space: nowrap;
}
.nav-phone:hover { color: var(--color-blue); }
.nav-phone small { display: block; font-size: 12px; font-weight: 500; color: var(--color-text-secondary); opacity: .75; }
.nav-login { font-size: 15px; font-weight: 600; color: var(--color-text-secondary); text-decoration: none; white-space: nowrap; }
.nav-login:hover { color: var(--color-blue); }
.btn-brand.btn-sm { padding: 9px 18px; font-size: 15.5px; }

/* Secondary header button - black, sits next to the blue primary CTA */
.btn-dark {
  display: inline-block; background: var(--color-text, #10131a); color: #fff;
  padding: 12px 28px; border-radius: 24px; text-decoration: none;
  font-weight: 600; font-size: 16.5px; transition: background .2s, opacity .2s;
}
.btn-dark:hover { background: #000; }
.btn-dark.btn-sm { padding: 9px 18px; font-size: 15.5px; }
.mobile-actions .btn-dark { text-align: center; }
.mobile-menu .mobile-top { display: block; font-weight: 700; padding: 12px 0; text-decoration: none; color: inherit; }

/* Front page: what is included - six boxes */
.incl-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  max-width: 1080px; margin: 0 auto;
}
.incl-box {
  display: flex; align-items: center; gap: 13px;
  background: #fff; border: 1px solid var(--color-border); border-radius: 13px;
  padding: 18px 20px; font-size: 16.5px; font-weight: 600; line-height: 1.4;
}
.incl-tick {
  width: 24px; height: 24px; flex: none; fill: none;
  stroke: var(--color-blue); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 980px) { .incl-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .incl-grid { grid-template-columns: 1fr; } }

.lang-menu { position: relative; }
.lang-menu > button {
  display: flex; align-items: center; gap: 5px; padding: 7px 10px;
  background: none; border: 1px solid var(--color-border); border-radius: 8px; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700; color: var(--color-text-secondary);
}
.lang-menu > button:hover { color: var(--color-blue); border-color: var(--color-blue); }
.lang-menu ul {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); display: none;
  list-style: none; background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: 10px; box-shadow: 0 14px 34px rgba(16,24,40,.13); padding: 6px; min-width: 150px; z-index: 200;
}
.lang-menu[data-open="1"] ul { display: block; }
.lang-menu ul a {
  display: block; padding: 8px 12px; border-radius: 6px;
  font-size: 15px; color: var(--color-text); text-decoration: none;
}
.lang-menu ul a:hover { background: var(--color-bg-soft); }
.lang-menu ul a[aria-current="true"] { color: var(--color-blue); font-weight: 700; }

/* Mobile accordion */
.mobile-menu details { border-bottom: 1px solid var(--color-border); }
.mobile-menu details:last-of-type { border-bottom: none; }
.mobile-menu summary {
  list-style: none; cursor: pointer; padding: 12px 0;
  font-size: 16.5px; font-weight: 700; color: var(--color-text);
  display: flex; justify-content: space-between; align-items: center;
}
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary::after { content: '+'; font-size: 20.5px; font-weight: 400; color: var(--color-text-secondary); }
.mobile-menu details[open] summary::after { content: '\2212'; }
.mobile-menu details a { padding: 7px 0 7px 12px; font-size: 15.5px; }
.mobile-actions { display: flex; flex-direction: column; gap: 10px; padding: 16px 0 4px; }
.mobile-actions .btn-brand { text-align: center; }

@media (max-width: 1080px) {
  .nav-main, .nav > .container > .nav-actions .nav-login { display: none; }
  .hamburger { display: flex; }
}
@media (max-width: 720px) {
  .nav-phone span { display: none; }          /* icon only, tel: link kept */
  .nav .container { gap: 12px; }
}
/* Below ~560 px the header cannot hold logo + language + phone + CTA + burger.
   The language switcher and the CTA both already exist inside the mobile
   menu, so the language one is dropped here; the phone and the CTA are the
   funnel and stay. */
@media (max-width: 560px) {
  .nav > .container > .nav-actions .lang-menu { display: none; }
  .nav .container { gap: 10px; padding-inline: 16px; }
  .nav-logo img { height: 23px; }
  .nav-actions .btn-brand.btn-sm { padding: 8px 14px; font-size: 14.5px; }
}
@media (max-width: 400px) {
  .nav .container { gap: 8px; padding-inline: 12px; }
  .nav-logo img { height: 21px; }
  .nav-actions .btn-brand.btn-sm { padding: 8px 12px; font-size: 14px; }
}

/* ==========================================================================
   Page templates
   ========================================================================== */
.page-hero { padding: 56px 0 12px; }
.page-hero .container { max-width: 860px; }
.breadcrumbs { font-size: 14px; color: var(--color-text-secondary); opacity: .8; margin-bottom: 14px; }
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-blue); }
.breadcrumbs span { opacity: .5; margin: 0 6px; }
.page-hero h1 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.14; letter-spacing: -0.02em; margin-bottom: 16px; }
.page-hero .lead { font-size: 19.5px; line-height: 1.62; color: var(--color-text-secondary); }
.page-hero .eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--color-blue); margin-bottom: 12px;
}

/* Arkistosivujen otsikko (/blogi, /oppaat, kategoriat). Oletushero on 860px
   leveä ja keskitetty, joten se alkoi 210px sisempää kuin alla oleva
   1280px:n korttiruudukko. Leveys yhtenäistetään ja luettava rivipituus
   pidetään otsikon ja ingressin omalla max-widthilla. */
.page-hero-wide .container { max-width: 1280px; }
.page-hero-wide h1,
.page-hero-wide .lead { max-width: 720px; }

.prose { max-width: 860px; margin: 0 auto; padding: 32px 24px 8px; }
.prose h2 { font-size: 27px; line-height: 1.25; letter-spacing: -0.01em; margin: 36px 0 12px; }
.prose h3 { font-size: 19.5px; margin: 26px 0 8px; }
.prose p { color: var(--color-text-secondary); margin-bottom: 14px; }
.prose ul { margin: 0 0 16px; padding-inline-start: 22px; }
.prose li { color: var(--color-text-secondary); margin-bottom: 7px; }
.prose a { color: var(--color-blue); }

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.card {
  display: block; padding: 24px; border: 1px solid var(--color-border);
  border-radius: 14px; text-decoration: none; background: var(--color-bg);
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.card:hover { border-color: var(--color-blue); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(16,24,40,.07); }
.card h3 { font-size: 18.5px; color: var(--color-text); margin-bottom: 7px; }
.card p { font-size: 15.5px; line-height: 1.6; color: var(--color-text-secondary); margin: 0; }
.card .more { display: inline-block; margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--color-blue); }

.faq-list { max-width: 860px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 18px 0;
  font-size: 18px; font-weight: 600; color: var(--color-text);
  display: flex; justify-content: space-between; gap: 16px; align-items: flex-start;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 22.5px; font-weight: 400; color: var(--color-text-secondary); flex: none; line-height: 1; }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item p { color: var(--color-text-secondary); padding-bottom: 18px; margin: 0; }

/* Repeated conversion block */
.cta-band { background: var(--color-bg-soft); border-top: 1px solid var(--color-border); margin-top: 56px; padding: 52px 0; }
.cta-band .container { max-width: 720px; text-align: center; }
.cta-band h2 { font-size: 29px; letter-spacing: -0.01em; margin-bottom: 10px; }
.cta-band p { color: var(--color-text-secondary); margin-bottom: 24px; }
.cta-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; text-align: start; }
.cta-form input {
  width: 100%; padding: 13px 14px; font-size: 15.5px; font-family: inherit;
  border: 1px solid var(--color-border); border-radius: 10px;
  background: var(--color-bg); color: var(--color-text);
}
.cta-form input:focus { outline: 2px solid var(--color-blue); outline-offset: -1px; border-color: transparent; }
.cta-form button { border: none; cursor: pointer; white-space: nowrap; }
.cta-alt { margin-top: 18px; font-size: 15.5px; color: var(--color-text-secondary); }
.cta-alt a { color: var(--color-blue); font-weight: 600; text-decoration: none; }
.cta-msg { margin-top: 14px; font-size: 15.5px; font-weight: 600; display: none; }
@media (max-width: 640px) { .cta-form { grid-template-columns: 1fr; } }

/* ==========================================================================
   Sitemap footer
   ========================================================================== */
.footer { padding: 56px 0 32px; }
.footer .container { display: block; }
.footer-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 32px 24px; margin-bottom: 40px;
}
.footer-col h4 {
  font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--color-text); margin-bottom: 12px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { font-size: 15px; color: var(--color-text-secondary); text-decoration: none; }
.footer-col a:hover { color: var(--color-blue); }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 26px; border-top: 1px solid var(--color-border);
}
.footer-bottom .meta { font-size: 14px; color: var(--color-text-secondary); }
.footer-langs { display: flex; gap: 6px; flex-wrap: wrap; }
.footer-langs a {
  font-size: 14px; font-weight: 600; color: var(--color-text-secondary);
  text-decoration: none; padding: 4px 9px; border: 1px solid var(--color-border); border-radius: 6px;
}
.footer-langs a:hover { color: var(--color-blue); border-color: var(--color-blue); }
.footer-langs a[aria-current="true"] { color: var(--color-blue); border-color: var(--color-blue); background: var(--color-blue-light); }

/* RTL additions for the new components */
html[dir="rtl"] .mega { inset-inline-start: auto; inset-inline-end: 0; }
html[dir="rtl"] .breadcrumbs, html[dir="rtl"] .cta-form { text-align: right; }

/* Compact industry index on the front page */
.ind-columns {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 26px 32px; max-width: 940px; margin: 0 auto;
}
.ind-col h4 {
  font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--color-text-secondary); opacity: .7;
  padding-bottom: 9px; margin-bottom: 4px; border-bottom: 1px solid var(--color-border);
}
.ind-col ul { list-style: none; }
.ind-col li { margin: 0; }
.ind-col a {
  display: block; padding: 8px 10px; margin-inline-start: -10px; border-radius: 8px;
  font-size: 16.5px; font-weight: 500; color: var(--color-text); text-decoration: none;
  transition: background .16s, color .16s;
}
.ind-col a:hover { background: var(--color-bg-soft); color: var(--color-blue); }
.ind-col a::after { content: ' \2192'; opacity: 0; transition: opacity .16s; }
.ind-col a:hover::after { opacity: .6; }

/* Play Store badge in the hero */
.play-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  padding: 8px 14px; border: 1px solid var(--color-border); border-radius: 999px;
  font-size: 15px; font-weight: 600; color: var(--color-text-secondary);
  text-decoration: none; transition: border-color .18s, color .18s, background .18s;
}
.play-badge:hover { border-color: var(--color-blue); color: var(--color-blue); background: var(--color-bg-soft); }
.play-badge svg { flex: none; }

/* Play Store mention inside the hero lead - plain text, not a button */
.lead-link { color: inherit; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; text-decoration-color: var(--color-border); }
.lead-link:hover { color: var(--color-blue); text-decoration-color: currentColor; }

/* --------------------------------------------------- value propositions --- */
/* Three columns under the hero, one line illustration each. The SVGs are
   black line art on a transparent ground, so they need a light backdrop. */
.vprops { padding: 64px 0 56px; }
.vprop-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
}
.vprop { text-align: center; }
/* The three illustrations have different aspect ratios, so give each one the
   same box and let it sit on a common baseline instead of centring the box. */
.vprop-img {
  height: 190px; display: flex; align-items: flex-end; justify-content: center;
  margin-bottom: 20px;
}
.vprop-img img { max-height: 100%; max-width: 100%; width: auto; height: auto; display: block; }
.vprop h3 {
  font-family: 'Poppins', sans-serif; font-size: 20px; font-weight: 700;
  margin: 0 0 10px; line-height: 1.3;
}
.vprop p {
  font-size: 16.5px; line-height: 1.65; color: var(--color-text-secondary);
  margin: 0; max-width: 34ch; margin-inline: auto;
}
@media (max-width: 900px) {
  .vprops { padding: 48px 0 40px; }
  .vprop-grid { grid-template-columns: 1fr; gap: 36px; }
  .vprop-img { height: 155px; }
}

/* -------------------------------------------------- industry image cards --- */
.ind-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
  max-width: 1080px; margin: 0 auto;
}
.ind-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 2px 14px rgba(16, 24, 40, .05);
  transition: box-shadow .18s, transform .18s;
}
.ind-card:hover { box-shadow: 0 12px 30px rgba(16, 24, 40, .11); transform: translateY(-2px); }
.ind-card > img {
  width: 100%; height: 190px; object-fit: cover; display: block;
}
.ind-card-body { padding: 18px 20px 16px; display: flex; flex-direction: column; flex: 1; }
.ind-card h4 {
  font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 700;
  margin: 0 0 12px; line-height: 1.3;
}
.ind-card ul { list-style: none; margin: 0; padding: 0; }
.ind-card li { margin: 0; }
.ind-card a {
  display: block; padding: 7px 10px; margin-inline-start: -10px; border-radius: 8px;
  font-size: 16px; font-weight: 600; color: var(--color-blue); text-decoration: none;
  transition: background .14s;
}
.ind-card a:hover { background: var(--color-bg-soft); }
@media (max-width: 980px) {
  .ind-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 660px) {
  .ind-cards { grid-template-columns: 1fr; gap: 20px; }
  .ind-card > img { height: 165px; }
}

/* ------------------------------------------------------ testimonials --- */
/* Rendered only when content/home.php actually has quotes. */
.testi { padding: 64px 0; background: var(--color-bg-soft); }
.testi h3 {
  font-family: 'Poppins', sans-serif; font-size: 1.75rem; font-weight: 700;
  text-align: center; margin: 0 0 10px;
}
.testi-lead { text-align: center; color: var(--color-text-secondary); margin: 0 0 36px; }
.testi-grid {
  /* min() estää kiinteää 360px-raidetta työntymästä yli pienillä
     puhelimilla (360px näytöllä sisältöleveys on vain 328px). */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 56px 48px; max-width: 1200px; margin: 0 auto;
  align-items: stretch;
}
/* Two or three per row on desktop. Two quotes, or four as a 2 x 2 block,
   get a narrower container so the cards do not stretch too wide; three fill
   the full 1200px row. */
@media (min-width: 760px) {
  .testi-grid:has(> :nth-child(2):last-child),
  .testi-grid:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, 1fr); max-width: 980px;
  }
}
.testi-item { margin: 0; display: flex; flex-direction: column; }
.testi-card {
  position: relative; background: #fff; border-radius: 18px;
  padding: 54px 42px 70px; flex: 1;
  box-shadow: 0 4px 22px rgba(16, 24, 40, .08);
  display: flex; align-items: center; justify-content: center;
}
/* Quotation mark sits on the card's top edge, like the reference design. */
.testi-mark {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  width: 46px; height: 34px; fill: var(--color-blue);
}
.testi-card blockquote {
  margin: 0; text-align: center; font-size: 17px; line-height: 1.7;
  color: var(--color-text-secondary);
}
/* Avatar straddles the bottom edge. */
.testi-avatar {
  position: absolute; bottom: -48px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 96px; border-radius: 50%; overflow: hidden;
  border: 4px solid var(--color-blue); background: var(--color-bg-soft);
  display: flex; align-items: center; justify-content: center;
}
.testi-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.testi-avatar svg {
  width: 52px; height: 52px; fill: none; stroke: #b9c0cc;
  stroke-width: 1.6; stroke-linecap: round;
}
.testi-who { text-align: center; margin-top: 68px; }
.testi-who b {
  display: block; font-family: 'Poppins', sans-serif; font-size: 21px;
  font-weight: 700; color: var(--color-blue); line-height: 1.25;
}
.testi-who span {
  display: block; margin-top: 4px; font-size: 16px; font-weight: 700;
  color: var(--color-text-secondary);
}
.testi-more { text-align: center; margin: 32px 0 0; }
.testi-more a { font-weight: 700; color: var(--color-blue); text-decoration: none; }
.testi-more a:hover { text-decoration: underline; }
@media (max-width: 660px) { .testi { padding: 48px 0; } }

/* Optional product image at the top of a pricing card. Rendered only when
   content/hinnoittelu.php gives the plan an 'img'. */
.pricing-img {
  margin: -6px -6px 18px; border-radius: 12px; overflow: hidden;
  background: var(--color-bg-soft); aspect-ratio: 16 / 10;
}
.pricing-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 660px) { .pricing-img { aspect-ratio: 16 / 9; } }

/* ------------------------------------------------- section rhythm ---------- */
/* One place to control how much air sits between the front-page sections.
   Everything above sets its own padding; these overrides come last and win,
   so the spacing stays consistent as sections are added or reordered. */
:root { --sec-y: 104px; --sec-y-sm: 64px; }

.vprops,
.features,
.pricing,
.management,
.testi { padding-block: var(--sec-y); }

/* The hero keeps a tighter bottom so it reads as one unit with the header. */
.hero { padding-block: 80px 64px; }

/* Headline blocks inside a section get a little more room before the grid. */
.vprops .vprop-grid,
.testi .testi-grid { margin-top: 8px; }

.cta-band { margin-top: 72px; padding-block: 88px; }

@media (max-width: 900px) {
  :root { --sec-y: var(--sec-y-sm); }
  .hero { padding-block: 48px 40px; }
  .cta-band { margin-top: 48px; padding-block: 60px; }
}

/* ------------------------------------------------ text left, image right --- */
.mgmt-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 72px;
  align-items: center; max-width: 1240px; margin: 0 auto;
}
.mgmt-text h3 { text-align: start; margin-bottom: 18px; font-size: 2rem; }
.mgmt-text p { text-align: start; max-width: 62ch; font-size: 17.5px; }
.mgmt-more { margin-top: 22px; }
.mgmt-more a { font-weight: 700; color: var(--color-blue); text-decoration: none; }
.mgmt-more a:hover { text-decoration: underline; }
.mgmt-img { justify-self: end; }
.mgmt-img img {
  width: 100%; max-width: 440px; height: auto; display: block;
}
@media (max-width: 860px) {
  .mgmt-grid { grid-template-columns: 1fr; gap: 34px; }
  .mgmt-img { justify-self: center; }
  .mgmt-img img { max-width: 300px; }
}

/* --------------------------------------------------- named contact person --- */
.person { padding-block: 8px 0; }
.person-card {
  display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: center;
  max-width: 860px; margin: 0 auto; padding: 32px 36px;
  background: var(--color-bg-soft); border: 1px solid var(--color-border); border-radius: 20px;
}
.person-card > img { width: 100%; height: auto; border-radius: 16px; display: block; }
.person-eyebrow {
  font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--color-text-secondary); margin: 0 0 6px;
}
.person-body h2 { font-family: 'Poppins', sans-serif; font-size: 26px; margin: 0 0 4px; }
.person-role { font-weight: 700; color: var(--color-blue); margin: 0 0 14px; }
.person-text { color: var(--color-text-secondary); margin: 0 0 20px; }
.person-links { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.person-mail { font-weight: 700; color: var(--color-blue); text-decoration: none; }
.person-mail:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .person-card { grid-template-columns: 1fr; gap: 22px; padding: 26px 22px; text-align: center; }
  .person-card > img { max-width: 200px; margin: 0 auto; }
  .person-links { justify-content: center; }
}

/* ------------------------------------------------- comparison table -------- */
/* Rendered by cm8_table() in inc/render.php. Semantic <table> with row and
   column headers so screen readers and search engines both parse it. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cmp-wrap { overflow-x: auto; margin: 26px 0 0; -webkit-overflow-scrolling: touch; }
.cmp-table {
  width: 100%; min-width: 780px; border-collapse: collapse;
  font-size: 16px; background: #fff;
}
.cmp-table th, .cmp-table td {
  padding: 14px 16px; text-align: start; border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.cmp-table thead th {
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-text-secondary); border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
}
.cmp-table tbody th {
  font-weight: 600; color: var(--color-text);
  position: sticky; inset-inline-start: 0; background: #fff; z-index: 1;
  min-width: 240px;
}
/* Six columns: long cells must wrap or the table grows absurdly wide.
   Symbol cells stay on one line via .cmp-sym. */
.cmp-table td { color: var(--color-text-secondary); }
.cmp-table .cmp-sym { white-space: nowrap; }
.cmp-table .cmp-sym { text-align: center; font-size: 19px; font-weight: 700; }
.cmp-table .is-yes { color: #16a34a; }
.cmp-table .is-no { color: #94a3b8; }
.cmp-table .is-unknown { color: #94a3b8; font-size: 16px; }
/* The Cashm8 column is highlighted, but not so hard that the table stops
   reading as information. */
.cmp-table thead th.is-us { color: var(--color-blue); }
.cmp-table .is-us { background: rgba(59, 130, 246, .05); color: var(--color-text); font-weight: 700; }
/* The symbol colour must survive the highlighted column. */
.cmp-table .cmp-sym.is-yes { color: #16a34a; }
.cmp-table .cmp-sym.is-no, .cmp-table .cmp-sym.is-unknown { color: #94a3b8; }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-note {
  font-size: 14px; line-height: 1.6; color: var(--color-text-secondary);
  margin-top: 16px; max-width: 78ch;
}
@media (max-width: 700px) {
  .cmp-table { font-size: 15px; }
  .cmp-table th, .cmp-table td { padding: 12px 13px; }
  .cmp-table tbody th { min-width: 190px; }
}

/* ============================================================ articles ==== */
.art-head { max-width: 860px; padding-top: 48px; }
.art-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 14px;
  color: var(--color-text-secondary); margin: 14px 0 12px; }
.art-cat {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: rgba(59,130,246,.1); color: var(--color-blue);
  font-size: 13px; font-weight: 700; text-decoration: none;
}
a.art-cat:hover { background: rgba(59,130,246,.18); }
.art-cat.is-muted { background: var(--color-bg-soft); color: var(--color-text-secondary); }
.art-cat b { font-weight: 700; opacity: .6; margin-inline-start: 3px; }
.art-upd { opacity: .8; }
.art-head h1 { font-size: clamp(30px, 4.2vw, 44px); line-height: 1.15; letter-spacing: -.02em; margin-bottom: 14px; }
.art-head .lead { font-size: 19.5px; line-height: 1.6; color: var(--color-text-secondary); }

.art-sources { padding-top: 8px; }
.art-sources h2 { font-size: 20px; margin-top: 28px; }
.art-sources ul { font-size: 15.5px; }
.art-sources a { word-break: break-word; }
.art-disclaimer {
  font-size: 14px; line-height: 1.6; color: var(--color-text-secondary);
  border-inline-start: 3px solid var(--color-border); padding-inline-start: 14px; margin-top: 18px;
}

.art-rel { max-width: 1080px; padding-top: 16px; }
.art-rel h2 { font-family: 'Poppins', sans-serif; font-size: 24px; margin-bottom: 20px; }
.art-list { padding-block: 8px 56px; }
.art-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.art-cats-all {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 700; background: var(--color-text); color: #fff;
}
.art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.art-card {
  display: flex; flex-direction: column; gap: 9px; padding: 24px;
  border: 1px solid var(--color-border); border-radius: 14px;
  background: var(--color-bg); text-decoration: none; color: inherit;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.art-card:hover { border-color: var(--color-blue); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(16,24,40,.08); }
.art-card-cat { font-size: 12.5px; font-weight: 700; color: var(--color-blue); }
.art-card h3 { font-family: 'Poppins', sans-serif; font-size: 19px; line-height: 1.3; margin: 0; }
.art-card p { font-size: 15.5px; line-height: 1.55; color: var(--color-text-secondary); margin: 0; }
.art-card time { font-size: 13.5px; color: var(--color-text-secondary); opacity: .8; margin-top: auto; padding-top: 6px; }
.art-empty { color: var(--color-text-secondary); padding: 32px 0; }
.art-back { margin-top: 32px; }
.art-back a { font-weight: 700; color: var(--color-blue); text-decoration: none; }
@media (max-width: 660px) {
  .art-head { padding-top: 32px; }
  .art-grid { grid-template-columns: 1fr; }
}

/* "Tulossa" -merkintä ominaisuudelle, jota ei ole vielä julkaistu.
   Renderöidään cm8_blocks()-funktiossa lohkon 'soon' => true -lipusta. */
.badge-soon {
  display: inline-block; vertical-align: middle;
  margin-inline-start: 10px; padding: 4px 11px; border-radius: 999px;
  background: #fff6e0; border: 1px solid #f0d79a; color: #7a5a12;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap; position: relative; top: -2px;
}
@media (max-width: 560px) { .badge-soon { font-size: 12px; padding: 3px 9px; } }

/* ------------------------------------------- front-page contact form ------ */
/* Sits before the industry list. The CTA band at the end of the page keeps
   its own styling; this one is a real form, not a one-line nudge. */
.homeform { padding-block: var(--sec-y); background: var(--color-bg-soft); }
.homeform-grid {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px;
  align-items: start; max-width: 1080px; margin: 0 auto;
}
/* Pitkät suomalaiset yhdyssanat ("yhteydenottopyyntö") pakottivat
   min-contentin 336px:ään ja työnsivät 320px:n näytöllä yli. */
.homeform-text { min-width: 0; }
.homeform-text h2, .homeform-person-name { overflow-wrap: break-word; }
.homeform-text h2 {
  font-family: 'Poppins', sans-serif; font-size: 2rem; line-height: 1.2;
  letter-spacing: -.01em; margin: 0 0 14px;
}
.homeform-text > p { color: var(--color-text-secondary); font-size: 17px; line-height: 1.65; margin: 0 0 24px; }
/* Yhteydenottolomakkeen kasvot: pyöreä kuva siitä ihmisestä joka vastaa. */
.homeform-person { display: flex; align-items: center; gap: 18px; margin: 0 0 24px; }
.homeform-person img {
  width: 92px; height: 92px; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--color-bg-soft); box-shadow: 0 0 0 3px #fff, 0 2px 10px rgba(16,24,40,.12);
}
.homeform-person b { display: block; font-size: 17px; line-height: 1.3; }
.homeform-person span { display: block; font-size: 14.5px; color: var(--color-text-secondary); }
.homeform-person-mail {
  display: inline-block; margin-top: 6px;
  font-size: 14.5px; font-weight: 700; color: var(--color-blue); text-decoration: none;
}
.homeform-person-mail:hover { text-decoration: underline; }

.homeform-call { margin: 0 0 10px; }
.homeform-call span {
  display: block; font-size: 13px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 4px;
}
.homeform-call a { font-size: 24px; font-weight: 800; color: var(--color-blue); text-decoration: none; }
.homeform-call small { display: block; font-size: 13px; color: var(--color-text-secondary); margin-top: 2px; }
.homeform-mail { margin: 0; }
.homeform-mail a { font-weight: 700; color: var(--color-blue); text-decoration: none; }
.homeform-mail a:hover, .homeform-call a:hover { text-decoration: underline; }

.homeform-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: 18px;
  padding: 28px; box-shadow: 0 6px 26px rgba(16, 24, 40, .06);
}
.homeform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.homeform-card label { display: block; margin-bottom: 14px; }
.homeform-row label { margin-bottom: 0; }
.homeform-card label span {
  display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 6px;
}
.homeform-card input, .homeform-card textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 15.5px;
  padding: 11px 13px; border: 1px solid var(--color-border); border-radius: 10px;
  background: #fff; color: var(--color-text);
}
.homeform-card textarea { resize: vertical; min-height: 84px; }
.homeform-card input:focus, .homeform-card textarea:focus {
  outline: none; border-color: var(--color-blue); box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.homeform-row + label { margin-top: 14px; }
.homeform-card button[type="submit"] {
  width: 100%; border: none; cursor: pointer; font-size: 16px; padding: 13px;
}
.homeform-card .cta-msg { margin: 12px 0 0; text-align: start; }
@media (max-width: 900px) {
  .homeform-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .homeform-row { grid-template-columns: 1fr; gap: 0; }
  .homeform-row label { margin-bottom: 14px; }
  .homeform-card { padding: 22px 18px; }
}

/* Honeypot: piilossa ihmiseltä ja ruudunlukijalta, näkyy vain botille.
   Kääre eikä pelkkä luokka itse kentässä: lomakkeiden omat säännöt
   (.homeform-card input { width: 100% }) ovat spesifisempiä kuin yksi
   luokka, joten kenttä venyi näytön levyiseksi ja rikkoi sivun
   vaakasuunnassa. Nollakokoinen, irti asemoitu kääre ei voi vuotaa yli
   riippumatta siitä mitä sen sisällä olevalle inputille on määritelty. */
.hp-wrap { position: absolute; left: 0; top: 0; width: 0; height: 0;
  overflow: hidden; pointer-events: none; }