/* AI-palvelusivujen designjärjestelmä.
   Oma kuvakieli, joka erottuu muista palvelusivuista: tumma pohja koko
   sivun mitalla, bento-ruudukko ja lasimaiset kortit. Vaaleat osiot ovat
   poikkeus eivätkä sääntö, jolloin sivu lukee yhtenä kokonaisuutena.

   Etuliite ap- (ai-palvelut), jotta mikään ei törmää teeman muihin
   luokkiin. Kaikki liike on transformia ja opacityä.

   Vajaat rivit keskitetään kaikkialla: laatikot ovat flexissä, eivät
   gridissä, koska gridin fr-sarakkeet jättäisivät ylijäävän laatikon
   vasempaan reunaan. */

.ap {
  --ap-vali: 18px;
  --ap-pyoristys: 14px;
  --ap-lasi: rgba(247, 242, 232, .05);
  --ap-reuna: rgba(247, 242, 232, .12);
  --ap-reuna-kirkas: rgba(184, 155, 110, .45);
  background: var(--green-deep, #002A22);
  color: var(--cream, #F7F2E8);
}

/* ---------- Osiot ---------- */
.ap-osio {
  position: relative;
  padding: 96px 0;
  overflow: hidden;
  isolation: isolate;
}
.ap-osio--tiivis { padding: 64px 0; }
/* Vaalea osio on tehokeino, ei perustila. */
.ap-osio--vaalea {
  background: var(--cream, #F7F2E8);
  color: var(--ink, #1A2420);
}
.ap-osio--vaalea .ap-otsikko h2,
.ap-osio--vaalea .ap-kortti h3 { color: var(--green, #003E33); }

/* Pehmeä valokehä syvyyden vuoksi. Staattinen gradientti, ei suodatin. */
.ap-osio--hehku::before {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 52vw; height: 52vw;
  max-width: 720px; max-height: 720px;
  top: -22%; right: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,155,110,.20) 0%, rgba(184,155,110,0) 68%);
}

/* ---------- Otsikkoalue ---------- */
.ap-otsikko { max-width: 760px; margin-bottom: 46px; }
.ap-otsikko--keski { margin-left: auto; margin-right: auto; text-align: center; }
.ap-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold, #B89B6E);
}
.ap-kicker::before {
  content: '';
  width: 26px; height: 1px;
  background: var(--gold, #B89B6E);
}
.ap-otsikko h2 {
  margin: 0 0 16px;
  font-family: 'Fraunces', serif;
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.025em;
  text-transform: none;
  color: var(--cream, #F7F2E8);
}
.ap-otsikko h2 em { font-style: italic; color: var(--gold-soft, #D4BD93); }
.ap-otsikko p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(247, 242, 232, .72);
}
.ap-osio--vaalea .ap-otsikko p { color: var(--muted, #5C6B66); }

/* ---------- Hero ---------- */
.ap-hero {
  position: relative;
  padding: 92px 0 84px;
  overflow: hidden;
  isolation: isolate;
}
.ap-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 60px;
  align-items: center;
}
.ap-hero h1 {
  margin: 0 0 20px;
  font-family: 'Fraunces', serif;
  font-size: clamp(2.3rem, 5.4vw, 3.7rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--cream, #F7F2E8);
}
.ap-hero h1 em { font-style: italic; color: var(--gold-soft, #D4BD93); }
.ap-hero-lead {
  margin: 0 0 30px;
  max-width: 54ch;
  font-size: 1.1rem;
  line-height: 1.65;
  color: rgba(247, 242, 232, .78);
}
.ap-hero-napit { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.ap-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  padding-top: 22px;
  border-top: 1px solid var(--ap-reuna);
}
.ap-hero-meta span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  color: rgba(247, 242, 232, .66);
}
.ap-hero-meta span::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold, #B89B6E);
}

/* ---------- Bento ---------- */
.ap-bento {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ap-vali);
}
.ap-bento-kortti {
  position: relative;
  padding: 24px 24px 22px;
  border: 1px solid var(--ap-reuna);
  border-radius: var(--ap-pyoristys);
  background: var(--ap-lasi);
  overflow: hidden;
  transition: border-color .4s var(--ease), transform .45s cubic-bezier(.22,1,.36,1);
}
.ap-bento-kortti:hover {
  border-color: var(--ap-reuna-kirkas);
  transform: translateY(-4px);
}
.ap-bento-kortti--leveä { grid-column: span 2; }
.ap-bento-luku {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--gold-soft, #D4BD93);
  margin-bottom: 8px;
}
.ap-bento-kortti h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--cream, #F7F2E8);
}
.ap-bento-kortti p {
  margin: 0;
  font-size: .89rem;
  line-height: 1.55;
  color: rgba(247, 242, 232, .64);
}

/* ---------- Korttiruudukko ---------- */
.ap-kortit {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ap-vali);
}
.ap-kortti {
  flex: 0 1 calc((100% - 2 * var(--ap-vali)) / 3);
  min-width: 270px;
  position: relative;
  padding: 30px 28px 26px;
  border: 1px solid var(--ap-reuna);
  border-radius: var(--ap-pyoristys);
  background: var(--ap-lasi);
  transition: border-color .4s var(--ease), transform .45s cubic-bezier(.22,1,.36,1),
              box-shadow .45s var(--ease);
}
.ap-kortit--kaksi .ap-kortti { flex-basis: calc((100% - var(--ap-vali)) / 2); }
.ap-kortti:hover {
  border-color: var(--ap-reuna-kirkas);
  transform: translateY(-5px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .28);
}
.ap-osio--vaalea .ap-kortti {
  background: #fff;
  border-color: rgba(0, 62, 51, .12);
}
.ap-osio--vaalea .ap-kortti:hover { box-shadow: 0 20px 44px rgba(0, 40, 33, .10); }
.ap-kortti-ikoni {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  margin-bottom: 16px;
  border-radius: 11px;
  background: rgba(184, 155, 110, .14);
  color: var(--gold-soft, #D4BD93);
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
}
.ap-osio--vaalea .ap-kortti-ikoni { color: var(--gold-deep, #8A7040); }
.ap-kortti h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  text-transform: none;
  letter-spacing: -.005em;
  color: var(--cream, #F7F2E8);
}
.ap-kortti p {
  margin: 0;
  font-size: .93rem;
  line-height: 1.6;
  color: rgba(247, 242, 232, .68);
}
.ap-osio--vaalea .ap-kortti p { color: var(--muted, #5C6B66); }

/* ---------- Välilehdet ---------- */
.ap-valilehdet { margin-top: 34px; }
.ap-valilehti-napit {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}
.ap-valilehti-nappi {
  padding: 11px 20px;
  border: 1px solid var(--ap-reuna);
  border-radius: 100px;
  background: transparent;
  color: rgba(247, 242, 232, .78);
  font-family: inherit;
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .25s, border-color .25s, color .25s;
  -webkit-tap-highlight-color: transparent;
}
.ap-valilehti-nappi:hover { border-color: var(--ap-reuna-kirkas); color: var(--cream); }
.ap-valilehti-nappi[aria-selected="true"] {
  background: var(--gold, #B89B6E);
  border-color: var(--gold, #B89B6E);
  color: var(--green-deep, #002A22);
  font-weight: 600;
}
.ap-valilehti-nappi:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }
.ap-valilehti-sisalto { display: none; }
.ap-valilehti-sisalto.on { display: block; animation: apEsiin .45s var(--ease); }
@keyframes apEsiin {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Vaiheet ---------- */
.ap-vaiheet {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ap-vali);
  justify-content: center;
}
.ap-vaihe {
  flex: 0 1 calc((100% - 3 * var(--ap-vali)) / 4);
  min-width: 230px;
  position: relative;
  padding: 28px 24px 24px;
  border: 1px solid var(--ap-reuna);
  border-radius: var(--ap-pyoristys);
  background: var(--ap-lasi);
}
.ap-vaihe-num {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 11px;
  border-radius: 100px;
  background: rgba(184, 155, 110, .16);
  color: var(--gold-soft, #D4BD93);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
}
.ap-vaihe h3 {
  margin: 0 0 8px;
  font-size: 1.02rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--cream, #F7F2E8);
}
.ap-vaihe p { margin: 0; font-size: .9rem; line-height: 1.55; color: rgba(247, 242, 232, .64); }
.ap-vaihe-aika {
  display: block;
  margin-top: 12px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(184, 155, 110, .8);
}

/* ---------- Hinnoittelu ---------- */
.ap-hinnat {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ap-vali);
  margin-top: 40px;
}
.ap-hinta {
  flex: 0 1 calc((100% - 2 * var(--ap-vali)) / 3);
  min-width: 280px;
  display: flex;
  flex-direction: column;
  padding: 34px 30px 30px;
  border: 1px solid var(--ap-reuna);
  border-radius: var(--ap-pyoristys);
  background: var(--ap-lasi);
  transition: border-color .4s var(--ease), transform .45s cubic-bezier(.22,1,.36,1);
}
.ap-hinta:hover { transform: translateY(-5px); border-color: var(--ap-reuna-kirkas); }
.ap-hinta--kärki {
  border-color: var(--gold, #B89B6E);
  background: rgba(184, 155, 110, .09);
}
.ap-hinta-merkki {
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 5px 12px;
  border-radius: 100px;
  background: var(--gold, #B89B6E);
  color: var(--green-deep, #002A22);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ap-hinta h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(247, 242, 232, .8);
}
.ap-hinta-summa {
  font-family: 'Fraunces', serif;
  font-size: 2rem;
  line-height: 1.15;
  color: var(--cream, #F7F2E8);
  margin-bottom: 4px;
}
.ap-hinta-lisa {
  font-size: .86rem;
  color: var(--gold-soft, #D4BD93);
  margin-bottom: 20px;
}
.ap-hinta ul {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ap-hinta li {
  position: relative;
  padding-left: 24px;
  font-size: .91rem;
  line-height: 1.5;
  color: rgba(247, 242, 232, .7);
}
.ap-hinta li::before {
  content: '';
  position: absolute;
  left: 0; top: .45em;
  width: 12px; height: 6px;
  border-left: 1.5px solid var(--gold, #B89B6E);
  border-bottom: 1.5px solid var(--gold, #B89B6E);
  transform: rotate(-45deg);
}
.ap-hinta .btn { margin-top: auto; }

/* ---------- Vertailu ---------- */
.ap-vertailu {
  width: 100%;
  border-collapse: collapse;
  margin-top: 34px;
  font-size: .93rem;
}
.ap-vertailu th,
.ap-vertailu td {
  padding: 16px 18px;
  text-align: left;
  border-bottom: 1px solid var(--ap-reuna);
}
.ap-vertailu th {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold, #B89B6E);
}
.ap-vertailu td { color: rgba(247, 242, 232, .74); }
.ap-vertailu tr td:first-child { color: var(--cream); font-weight: 500; }

/* Vaaleassa osiossa taulukon tekstit olivat kermanvalkoisia kermalla:
   käytännössä näkymättömiä. Värit käännetään osion mukaan. */
.ap-osio--vaalea .ap-vertailu td { color: var(--muted, #5C6B66); }
.ap-osio--vaalea .ap-vertailu tr td:first-child { color: var(--green, #003E33); }
/* Teeman --gold-deep jää kermalla 4,21:1, mikä alittaa AA-rajan tässä
   pienessä lihavoidussa koossa. Oma tummempi sävy: 5,92:1. */
.ap-osio--vaalea .ap-vertailu th { color: #6F5A2E; }
.ap-osio--vaalea .ap-vertailu th,
.ap-osio--vaalea .ap-vertailu td { border-bottom-color: rgba(0, 62, 51, .14); }
/* Joka toinen rivi pohjustetaan, jotta pitkää riviä on helpompi seurata. */
.ap-osio--vaalea .ap-vertailu tbody tr:nth-child(even) { background: rgba(0, 62, 51, .035); }
.ap-vertailu tbody tr:nth-child(even) { background: rgba(247, 242, 232, .035); }

/* Vaakavieritys, kun taulukko ei mahdu. Reunaan häivytys kertoo että
   sisältöä on lisää oikealla. */
.ap-vertailu-kaari {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 34px;
}
.ap-vertailu-kaari .ap-vertailu { margin-top: 0; min-width: 620px; }
.ap-vertailu-vihje {
  display: none;
  margin: 10px 0 0;
  font-size: .8rem;
  color: rgba(247, 242, 232, .55);
}
.ap-osio--vaalea .ap-vertailu-vihje { color: var(--muted, #5C6B66); }

/* ---------- Lainaus ---------- */
.ap-lainaus {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.ap-lainaus p {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.3rem, 2.8vw, 1.85rem);
  line-height: 1.35;
  letter-spacing: -.015em;
  color: var(--cream, #F7F2E8);
  margin: 0 0 18px;
}
.ap-lainaus span {
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(184, 155, 110, .85);
}

/* ---------- UKK ---------- */
.ap-ukk { max-width: 820px; margin: 0 auto; }
.ap-ukk .faq-item {
  border-top: 1px solid var(--ap-reuna);
  border-bottom: 0;
}
.ap-ukk .faq-item:last-child { border-bottom: 1px solid var(--ap-reuna); }
.ap-ukk .faq-item summary { color: var(--cream, #F7F2E8); }
.ap-ukk .faq-item p { color: rgba(247, 242, 232, .7); }

/* ---------- Loppukehotus ---------- */
.ap-cta {
  position: relative;
  padding: 76px 0;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(150deg, var(--green, #003E33), #001A15);
}
.ap-cta h2 {
  margin: 0 0 14px;
  font-family: 'Fraunces', serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 400;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--cream, #F7F2E8);
}
.ap-cta p {
  max-width: 60ch;
  margin: 0 auto 28px;
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(247, 242, 232, .74);
}
.ap-cta .ap-hero-napit { justify-content: center; }

/* ---------- Responsiivisuus ---------- */
@media (max-width: 980px) {
  .ap-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .ap-osio { padding: 72px 0; }
}
@media (max-width: 760px) {
  /* Taulukko vaihtuu korteiksi. Vaakavieritys toimii, mutta puhelimella
     kuuden sarakkeen taulukkoa ei kukaan lue vierittämällä. Solun otsikko
     tulee data-otsikko-attribuutista. */
  .ap-vertailu-kaari { overflow: visible; }
  .ap-vertailu-vihje { display: block; }
  .ap-vertailu,
  .ap-vertailu thead,
  .ap-vertailu tbody,
  .ap-vertailu tr,
  .ap-vertailu td { display: block; width: 100%; }
  /* Sama tarkkuus kuin työpöydän säännöllä, muuten min-width jää voimaan
     ja taulukko leikkautuu osion overflow:hidden -rajaukseen. */
  .ap-vertailu-kaari .ap-vertailu { min-width: 0; }
  .ap-vertailu thead { display: none; }
  .ap-vertailu tbody tr {
    margin-bottom: 14px;
    padding: 6px 16px 10px;
    border: 1px solid var(--ap-reuna);
    border-radius: var(--ap-pyoristys);
    background: var(--ap-lasi);
  }
  .ap-osio--vaalea .ap-vertailu tbody tr {
    border-color: rgba(0, 62, 51, .14);
    background: #fff;
  }
  .ap-vertailu tbody tr:nth-child(even) { background: var(--ap-lasi); }
  .ap-osio--vaalea .ap-vertailu tbody tr:nth-child(even) { background: #fff; }
  .ap-vertailu td {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ap-reuna);
    text-align: right;
  }
  .ap-osio--vaalea .ap-vertailu td { border-bottom-color: rgba(0, 62, 51, .1); }
  .ap-vertailu td:last-child { border-bottom: 0; }
  .ap-osio--vaalea .ap-vertailu td::before { color: #6F5A2E; }
  .ap-vertailu td::before {
    content: attr(data-otsikko);
    flex: 0 0 auto;
    max-width: 52%;
    text-align: left;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold, #B89B6E);
  }
  /* Ensimmäinen solu on rivin nimi: se saa oman otsikkorivinsä. */
  .ap-vertailu td:first-child {
    display: block;
    text-align: left;
    padding-top: 12px;
    font-family: 'Fraunces', serif;
    font-size: 1.06rem;
  }
  .ap-vertailu td:first-child::before { display: none; }
}

@media (max-width: 640px) {
  .ap-osio { padding: 48px 0; }
  .ap-osio--tiivis { padding: 36px 0; }
  .ap-hero { padding: 52px 0 48px; }
  .ap-hero-grid { gap: 32px; }
  .ap-otsikko { margin-bottom: 32px; }
  .ap-kortti, .ap-hinta { padding: 24px 20px 20px; }
  .ap-kortti, .ap-hinta, .ap-vaihe { min-width: 0; flex-basis: 100%; }
  .ap-bento { grid-template-columns: 1fr; }
  .ap-bento-kortti--leveä { grid-column: span 1; }
  .ap-bento-kortti { padding: 20px 20px 18px; }
  .ap-bento-luku { font-size: 2.1rem; }
  .ap-hero-napit { gap: 10px; }
  .ap-hero-napit .btn { width: 100%; }
  .ap-cta .ap-hero-napit .btn { width: 100%; }
  .ap-hero-meta { gap: 8px 18px; }
  .ap-hinta-summa { font-size: 1.75rem; }
  .ap-lainaus p { font-size: 1.2rem; }
  /* Välilehtinapit vierivät vaakasuunnassa sen sijaan että rivittyisivät
     kolmelle riville ja veisivät puoli ruutua. */
  .ap-valilehti-napit {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .ap-valilehti-napit::-webkit-scrollbar { display: none; }
  .ap-valilehti-nappi { flex: 0 0 auto; }
  .ap-ukk .faq-item summary { padding-right: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .ap-kortti, .ap-hinta, .ap-bento-kortti { transition: none; }
  .ap-kortti:hover, .ap-hinta:hover, .ap-bento-kortti:hover { transform: none; }
  .ap-valilehti-sisalto.on { animation: none; }
}

/* Ilman JS:ää välilehtien sisällöt näkyvät allekkain. Piilotus astuu
   voimaan vasta kun skripti on merkinnyt ryhmän käyttöön otetuksi. */
.ap-valilehdet:not(.ap-valilehdet--kaytossa) .ap-valilehti-sisalto { display: block; }
.ap-valilehdet:not(.ap-valilehdet--kaytossa) .ap-valilehti-napit { display: none; }