/* ======================================================================
   AI-Tagger — LANDING (ai-tagger.html + en/ai-tagger.html) — v8.
   ----------------------------------------------------------------------
   ISO SUUNNANMUUTOS 9.8.2026 (Nicon palaute): sivu luki artikkelina.
   Nyt se on TUOTEPINTA PAPERIN PÄÄLLE — vaalea pohja säilyy, mutta sen
   päälle nousee oikea tuotekerros: kelluvia paneeleita syvyydellä,
   lasipintoja, kobolttigradientteja aksenttina, tiheämpää typografiaa
   ja kaksi tummaa täsmäiskulohkoa.

   Ladataan dist/bundle-ai-tagger.css:n JÄLKEEN. Bundlesta tulee pohja:
   tokenit (--att-*), .att-reset ja .att-logo. Sovelluksen tyyleihin ei
   kosketa.

   Poikkeuslupa (VAIN tämä tuotesivu): pehmeät varjot, kohotetut
   paneelit, backdrop-filter-lasi, kobolttigradientit ja 1–2 tummaa
   lohkoa. Muualla sivustolla nämä ovat yhä kiellettyjä.

   Kulmat pysyvät TERÄVINÄ koko sivulla. Ainoat pyöristykset ovat
   kuvien SISÄLLÄ — työkalun itsensä piirtämissä merkinnöissä.
   ====================================================================== */

/* ══════════════════════════════════════════════════════════════════════
   0. MITAT, VÄRIT JA VARJOT YHDESTÄ PAIKASTA
   ══════════════════════════════════════════════════════════════════════ */
.attl {
  --attl-wrap: 1240px;
  --attl-kapea: 1000px;
  --attl-gutter: 28px;
  --attl-nav-h: 66px;
  --attl-osio: 116px;      /* osioväli desktopilla */
  --attl-vali: 40px;       /* otsikkoryhmän ja sisällön väli */

  /* tumma täsmäisku */
  --attl-dark: #0E1116;
  --attl-dark-2: #161B24;
  --attl-dark-line: rgba(255, 255, 255, .14);
  --attl-dark-fg: #EDEAE2;
  --attl-dark-fg2: #A7A69E;

  /* koboltti-gradientit */
  --attl-grad: linear-gradient(135deg, #0A4699 0%, #003580 58%, #00255C 100%);
  --attl-grad-viiva: linear-gradient(90deg, #003580, #1E4DA0 46%, rgba(0, 53, 128, 0));

  /* kohotus — kolme tasoa, kaikki lämpimiä (musta olisi kylmä paperilla) */
  --attl-varjo-1: 0 1px 2px rgba(10, 10, 10, .05), 0 6px 18px -8px rgba(10, 10, 10, .14);
  --attl-varjo-2: 0 1px 3px rgba(10, 10, 10, .06), 0 18px 44px -16px rgba(10, 10, 10, .24);
  --attl-varjo-3:
    0 2px 6px rgba(10, 10, 10, .07),
    0 28px 60px -24px rgba(10, 10, 10, .32),
    0 70px 130px -70px rgba(0, 53, 128, .55);

  overflow-x: clip;         /* ei vaakascrollia — clip EI riko sticky-navia */
  position: relative;
}

/* linkkien perusväri — :where() pitää voiman nollassa */
:where(.attl) a { color: inherit; }
.attl img { max-width: 100%; }
.attl-nb { white-space: nowrap; }
.attl [id] { scroll-margin-top: calc(var(--attl-nav-h) + 18px); }

.attl-wrap {
  max-width: var(--attl-wrap);
  margin: 0 auto;
  padding: 0 var(--attl-gutter);
}
.attl-wrap--kapea { max-width: var(--attl-kapea); }

/* ── mono-apulaiset: tiheä informaatio ─────────────────────────────── */
.attl-kick {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--att-cobalt);
  display: flex;
  align-items: center;
  gap: 9px;
}
.attl-kick::before {
  content: "";
  width: 16px;
  height: 2px;
  flex: none;
  background: var(--attl-grad);
}

/* ══════════════════════════════════════════════════════════════════════
   1. STICKY YLÄPALKKI — lasia, kapenee scrollatessa
   ══════════════════════════════════════════════════════════════════════ */
.attl-nav {
  position: sticky;
  top: 0;
  z-index: 90;
  height: var(--attl-nav-h);
  background: rgba(245, 242, 236, .72);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.attl-nav.on-kiinni {
  background: rgba(245, 242, 236, .88);
  border-bottom-color: var(--att-line);
  box-shadow: 0 10px 30px -22px rgba(10, 10, 10, .55);
}
.attl-nav__inner {
  max-width: var(--attl-wrap);
  margin: 0 auto;
  padding: 0 var(--attl-gutter);
  height: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
}
.attl-nav .att-logo__by { transition: opacity .2s ease; }
.attl-nav.on-kiinni .att-logo__by { opacity: 0; }

.attl-nav__linkit {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 26px;
}
.attl-nav__linkit a {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--att-ink2);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.attl-nav__linkit a:hover { color: var(--att-cobalt); border-bottom-color: var(--att-cobalt); }

/* ══════════════════════════════════════════════════════════════════════
   2. PAINIKKEET
   ══════════════════════════════════════════════════════════════════════ */
.attl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
  padding: 15px 26px;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.attl-btn--pri {
  background: var(--attl-grad);
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 1px 2px rgba(0, 37, 92, .30),
    0 14px 28px -14px rgba(0, 53, 128, .78);
}
.attl-btn--pri:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 2px 4px rgba(0,37,92,.3), 0 20px 34px -14px rgba(0,53,128,.9); }
.attl-btn--ghost {
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-color: var(--att-line2);
  color: var(--att-ink) !important;
  box-shadow: var(--attl-varjo-1);
}
.attl-btn--ghost:hover { border-color: var(--att-cobalt); color: var(--att-cobalt) !important; }
.attl-btn--pieni { font-size: 13px; padding: 10px 17px; }


/* ══════════════════════════════════════════════════════════════════════
   3. HERO — vasemmalla tiivis lupaus, oikealla tuotekehys + demo
   ══════════════════════════════════════════════════════════════════════ */
.attl-hero {
  position: relative;
  isolation: isolate;
  padding: 62px 0 0;
  overflow: hidden;
}
/* kobolttihehku */
.attl-hero::before {
  content: "";
  position: absolute;
  inset: -10% -10% 0 -10%;
  z-index: -2;
  background:
    radial-gradient(760px 420px at 76% 12%, rgba(0, 53, 128, .17), transparent 64%),
    radial-gradient(620px 380px at 4% 72%, rgba(30, 77, 160, .11), transparent 66%);
}
/* hiusviivaruudukko, häivytetty reunoilta */
.attl-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(10, 10, 10, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10, 10, 10, .055) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(72% 66% at 46% 26%, #000 12%, transparent 76%);
  mask-image: radial-gradient(72% 66% at 46% 26%, #000 12%, transparent 76%);
}

.attl-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 432px) minmax(0, 1fr);
  gap: 26px 56px;
  align-items: start;
  padding-bottom: 92px;
}
.attl-hero__vasen { padding-top: 26px; }

/* Otsikko mitoitettu niin, että se taittuu KAHDELLE riville 432 px:n
   palstassa — pidempi rivitys luki artikkelilta. */
.attl-hero h1 {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: clamp(33px, 3.05vw, 44px);
  line-height: 1.04;
  letter-spacing: -.028em;
  color: var(--att-ink);
  font-weight: 600;
  margin: 0 0 18px;
  text-wrap: balance;
}
.attl-hero h1 em {
  font-style: normal;
  color: var(--att-cobalt);
}
.attl-hero__lupaus {
  font-size: 16.5px;
  line-height: 1.6;
  max-width: 44ch;
  color: var(--att-ink2);
}
.attl-hero__toimi { margin-top: 28px; }
.attl-ctat { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* luottamusrivi — mono, koboltti-erottimet */
.attl-luotto {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 20px;
  color: var(--att-ink2);
  line-height: 1.9;
}
.attl-luotto i { font-style: normal; color: var(--att-cobalt); padding: 0 8px; }

/* ── tuotekehys: kelluva sovellusikkuna ───────────────────────────── */
.attl-tuotekehys {
  position: relative;
  background: #fff;
  border: 1px solid var(--att-line2);
  box-shadow: var(--attl-varjo-3);
}
.attl-tuotekehys::before {   /* gradienttihehku kehyksen alla */
  content: "";
  position: absolute;
  inset: 12% 4% -7% 4%;
  z-index: -1;
  background: var(--attl-grad);
  filter: blur(48px);
  opacity: .30;
}
.attl-kehyspalkki {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid var(--att-line);
  background: linear-gradient(180deg, #FFF, #FAF8F3);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--att-ink2);
}
.attl-kehyspalkki__pisteet { display: flex; gap: 6px; flex: none; }
.attl-kehyspalkki__pisteet span {
  width: 8px; height: 8px; display: block;
  background: var(--att-line2);
}
.attl-kehyspalkki__pisteet span:first-child { background: var(--att-cobalt); }
.attl-kehyspalkki__tila {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--att-cobalt);
  white-space: nowrap;
}
.attl-kehyspalkki__tila::before {
  content: "";
  width: 6px; height: 6px; flex: none;
  background: var(--att-cobalt);
  box-shadow: 0 0 0 3px rgba(0, 53, 128, .16);
}
.attl-tuotekehys__sisus { background: var(--att-stage); min-height: 240px; }
.attl-tuotekehys__sisus img { display: block; width: 100%; height: auto; }

/* demon paikka — rajapintasopimus: <div id="att-demo"> */
#att-demo { display: block; min-height: 240px; }
#att-demo > img { display: block; width: 100%; height: auto; }

/* Demo tuo OMAN kehyksensä, otsikkopalkkinsa ja varjonsa (.attd). Kun se
   on mountattu, landingin kehys väistyy — muuten ruudulla olisi kaksi
   sisäkkäistä otsikkopalkkia. Kobolttihehku (::before) jää paikalleen.
   Ennen mounttia kehys näkyy normaalisti kuvan ympärillä. */
.attl-tuotekehys:has(#att-demo .attd) {
  background: none;
  border: 0;
  box-shadow: none;
}
.attl-tuotekehys:has(#att-demo .attd) > .attl-kehyspalkki { display: none; }
.attl-tuotekehys:has(#att-demo .attd) .attl-tuotekehys__sisus {
  background: none;
  min-height: 0;
}


/* ══════════════════════════════════════════════════════════════════════
   4. SPEC-NAUHA — lasipaneeli, joka nousee heron päälle
   ══════════════════════════════════════════════════════════════════════ */
.attl-specnauha { position: relative; z-index: 10; margin-top: -46px; }
.attl-spec {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  background: rgba(255, 255, 255, .74);
  -webkit-backdrop-filter: saturate(170%) blur(18px);
  backdrop-filter: saturate(170%) blur(18px);
  border: 1px solid var(--att-line2);
  box-shadow: var(--attl-varjo-2);
}
.attl-spec__i {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 17px 14px;
  border-left: 1px solid var(--att-line);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--att-ink);
  line-height: 1.25;
}
.attl-spec__i:first-child { border-left: none; }
.attl-spec__i svg { flex: none; width: 15px; height: 15px; stroke: var(--att-cobalt); }
.attl-spec__i--korostus { background: rgba(0, 53, 128, .05); color: var(--att-cobalt); }

/* ══════════════════════════════════════════════════════════════════════
   5. OSIORYTMI
   ══════════════════════════════════════════════════════════════════════ */
.attl-below { background: var(--att-paper); position: relative; }
.attl-osio { padding: var(--attl-osio) 0; }
.attl-osio--tiivis { padding: calc(var(--attl-osio) * .62) 0; }

.attl-otsikkoryhma { max-width: 720px; }
/* Sama otsikkokoko sekä vaaleissa (.attl-osio) että tummissa
   (.attl-tumma) lohkoissa — tumma osio EI ole .attl-osio. */
.attl-osio h2,
.attl-tumma h2 {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: clamp(28px, 3.1vw, 41px);
  line-height: 1.1;
  letter-spacing: -.024em;
  color: var(--att-ink);
  font-weight: 600;
  margin: 16px 0 0;
  text-wrap: balance;
}
.attl-lead {
  font-size: 16px;
  line-height: 1.6;
  max-width: 58ch;
  margin-top: 15px;
  color: var(--att-ink2);
}

/* ══════════════════════════════════════════════════════════════════════
   6. OMINAISUUSRIVIT — kohotettu UI-kuva + tiivis väite
   ══════════════════════════════════════════════════════════════════════ */
.attl-rivit { margin-top: 68px; display: grid; gap: 96px; }
.attl-rivi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.16fr);
  gap: 56px;
  align-items: center;
}
.attl-rivi--kaanteinen .attl-rivi__teksti { order: 2; }
.attl-rivi--kaanteinen .attl-rivi__kuva { order: 1; }

.attl-rivi__nro {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--att-cobalt);
  display: block;
  margin-bottom: 14px;
}
.attl-rivi__teksti h3 {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: clamp(22px, 2.2vw, 29px);
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--att-ink);
  font-weight: 600;
  margin-bottom: 12px;
  max-width: 18ch;
  text-wrap: balance;
}
.attl-rivi__teksti p { font-size: 15.5px; line-height: 1.62; max-width: 46ch; color: var(--att-ink2); }

/* mono-tagit väitteen alle */
.attl-tagit { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.attl-tagi {
  font-family: var(--font-mono, monospace);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--att-ink2);
  border: 1px solid var(--att-line);
  background: rgba(255, 255, 255, .7);
  padding: 5px 9px;
}

/* kohotettu kuvapaneeli */
.attl-kuvapaneeli {
  position: relative;
  background: #fff;
  border: 1px solid var(--att-line2);
  box-shadow: var(--attl-varjo-2);
}
.attl-kuvapaneeli::after {   /* ohut kobolttiviiva yläreunaan */
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 2px;
  background: var(--attl-grad-viiva);
  opacity: .85;
}
/* UI-kuvat näytetään OMASSA kuvasuhteessaan: kuvaputken rajaukset ovat
   valmiiksi tarkoituksenmukaisia (filminauha 5:1, vientipaneeli 2:1,
   pystykuva 0,58:1), eikä niitä saa pakottaa yhteen laatikkoon. */
.attl-kuvapaneeli__kuva {
  display: block;
  width: 100%;
  height: auto;
  background: var(--att-stage);
}
/* Ainoa rajaus: sivupaneelin yksityiskohta koko työtilan kuvasta. */
.attl-kuvapaneeli__kuva--sivupaneeli {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 100% center;
}
/* Pystykuvat eivät saa kasvaa palstan levyisiksi — 1 300 × 2 246 px
   olisi yli 1 000 px korkea. Kehys kapenee puhelimen mittoihin. */
.attl-kuvapaneeli--kapea { max-width: 380px; }
.attl-rivi__kuva--kapea .attl-kuvapaneeli { max-width: 380px; margin: 0 auto; }

/* paikanpitäjämerkintä: näkyy vain jos oikea tiedosto puuttuu */
.attl-kehyspalkki__tila em { font-style: normal; }
.attl-kuvapaneeli:has(img.on-paikanpitaja) .attl-kehyspalkki__tila em::after {
  content: " · paikanpitäjä";
}

/* ══════════════════════════════════════════════════════════════════════
   7. TUMMAT TÄSMÄISKUT — yhteinen pohja
   ══════════════════════════════════════════════════════════════════════ */
.attl-tumma {
  position: relative;
  isolation: isolate;
  background: var(--attl-dark);
  color: var(--attl-dark-fg2);
  padding: 112px 0;
  overflow: hidden;
}
.attl-tumma::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(760px 420px at 84% 6%, rgba(30, 77, 160, .40), transparent 62%),
    radial-gradient(620px 420px at 6% 96%, rgba(0, 53, 128, .34), transparent 66%);
}
.attl-tumma::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(78% 70% at 50% 40%, #000 8%, transparent 78%);
  mask-image: radial-gradient(78% 70% at 50% 40%, #000 8%, transparent 78%);
}
.attl-tumma h2 { color: #fff; }
.attl-tumma .attl-kick { color: #8FB4F0; }
.attl-tumma .attl-kick::before { background: linear-gradient(90deg, #8FB4F0, rgba(143, 180, 240, 0)); }
.attl-tumma .attl-lead { color: var(--attl-dark-fg2); }
.attl-tumma .attl-tagi {
  color: var(--attl-dark-fg2);
  border-color: var(--attl-dark-line);
  background: rgba(255, 255, 255, .05);
}

/* ── LASITYYLIT — sivun visuaalinen huipennus ─────────────────────── */
.attl-lasi__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  margin-top: 58px;
}
.attl-lasinayte {
  position: relative;
  border: 1px solid var(--attl-dark-line);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .04);
  overflow: hidden;
}
.attl-lasinayte > img {
  display: block;
  width: 100%;
  height: auto;
  background: #1A1F28;
}
/* tyylivalitsimen paneeli — kelluu valokuvan päälle oikeassa reunassa */
.attl-lasipaneeli {
  position: relative;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--attl-dark-line);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .95);
}
.attl-lasipaneeli__palkki {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--attl-dark-line);
  font-family: var(--font-mono, monospace);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--attl-dark-fg2);
}
.attl-lasipaneeli img { display: block; width: 100%; height: auto; background: #131820; }
.attl-lasilista { padding: 6px 0; }
.attl-lasilista div {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 11px 16px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  font-size: 13.5px;
  color: var(--attl-dark-fg);
}
.attl-lasilista div:first-child { border-top: none; }
.attl-lasilista b { font-weight: 600; min-width: 96px; flex: none; }
.attl-lasilista span {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--attl-dark-fg2);
  margin-left: auto;
  text-align: right;
}

/* ── ENNEN / JÄLKEEN -liukusäädin ─────────────────────────────────── */
.attl-vertailu {
  position: relative;
  max-width: 520px;          /* pystykuva 9:16 — ei täysleveänä */
  margin-left: auto;
  margin-right: auto;
  margin-top: 52px;
  border: 1px solid var(--attl-dark-line);
  box-shadow: 0 46px 100px -46px rgba(0, 0, 0, .95);
  overflow: hidden;
  --attl-v: 50%;
}
.attl-vertailu__kuvat { position: relative; display: block; }
.attl-vertailu__kuvat > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #1A1F28;
}
.attl-vertailu__jalkeen {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 var(--attl-v));
}
.attl-vertailu__jalkeen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.attl-vertailu__kahva {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--attl-v);
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .28), 0 0 24px rgba(255, 255, 255, .35);
  pointer-events: none;
}
.attl-vertailu__kahva::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, .92);
  background: rgba(10, 10, 10, .34);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.attl-vertailu__saadin {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.attl-vertailu__saadin:focus-visible { opacity: 1; outline: 2px solid #8FB4F0; outline-offset: -2px; }
.attl-vertailu__lipp {
  position: absolute;
  top: 16px;
  font-family: var(--font-mono, monospace);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 7px 11px;
  color: #fff;
  background: rgba(10, 10, 10, .5);
  border: 1px solid rgba(255, 255, 255, .24);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.attl-vertailu__lipp--v { left: 16px; }
.attl-vertailu__lipp--o { right: 16px; background: rgba(0, 53, 128, .62); border-color: rgba(143, 180, 240, .5); }

.attl-vertailu-ohje {
  margin-top: 16px;
  text-align: center;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--attl-dark-fg2);
}

/* ══════════════════════════════════════════════════════════════════════
   8. OMA MERKINTÄ — editorikuva + tiivis spec-lista monolla
   ══════════════════════════════════════════════════════════════════════ */
.attl-editori {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 52px;
  align-items: start;
  margin-top: 58px;
}
.attl-speclista { border-top: 1px solid var(--att-line2); }
.attl-speclista__r {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--att-line);
  align-items: baseline;
}
.attl-speclista__k {
  font-family: var(--font-mono, monospace);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--att-cobalt);
}
.attl-speclista__a { font-size: 14.5px; line-height: 1.5; color: var(--att-ink); }
.attl-speclista__a em { font-style: normal; color: var(--att-ink2); }

.attl-vaade {
  margin-top: 30px;
  padding: 22px 24px;
  border: 1px solid var(--att-cobalt);
  background: linear-gradient(135deg, rgba(0, 53, 128, .07), rgba(0, 53, 128, .02));
}
.attl-vaade b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--att-ink);
  margin-bottom: 8px;
  line-height: 1.35;
}
.attl-vaade p { font-size: 13.5px; line-height: 1.58; color: var(--att-ink2); }

/* ══════════════════════════════════════════════════════════════════════
   9. VIDEO
   ══════════════════════════════════════════════════════════════════════ */
.attl-video {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 52px;
  align-items: center;
  margin-top: 54px;
}
.attl-videokehys { position: relative; }
.attl-videoruutu {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  background: rgba(10, 10, 10, .58);
  border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-family: var(--font-mono, monospace);
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.attl-videoruutu::before {
  content: "";
  width: 0; height: 0; flex: none;
  border-left: 8px solid #fff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* ══════════════════════════════════════════════════════════════════════
   10. HINTA + TILI — YKSI rivi (ei numerolohkoja, ei kahta paneelia)
   ══════════════════════════════════════════════════════════════════════ */
.attl-tili {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  margin-top: 34px;
  padding: 30px 34px;
  background: #fff;
  border: 1px solid var(--att-line2);
  box-shadow: var(--attl-varjo-2);
  overflow: hidden;
}
.attl-tili::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--attl-grad);
}
.attl-tili__v p {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--att-ink);
  max-width: 62ch;
}
.attl-tili__spec {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 14px;
}
.attl-tili__spec span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--att-ink2);
  border: 1px solid var(--att-line);
  background: var(--att-stage);
  padding: 6px 10px;
}
.attl-tili__spec span::before {
  content: "";
  width: 6px; height: 6px; flex: none;
  background: var(--att-cobalt);
}

/* ══════════════════════════════════════════════════════════════════════
   11. UKK
   ══════════════════════════════════════════════════════════════════════ */
.attl-ukk {
  margin-top: 44px;
  background: #fff;
  border: 1px solid var(--att-line2);
  box-shadow: var(--attl-varjo-1);
}
.attl-ukk details { border-top: 1px solid var(--att-line); }
.attl-ukk details:first-child { border-top: none; }
.attl-ukk summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 20px 26px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.008em;
  color: var(--att-ink);
}
.attl-ukk summary::-webkit-details-marker { display: none; }
.attl-ukk summary::after {
  content: "+";
  margin-left: auto;
  flex: none;
  font-family: var(--font-mono, monospace);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--att-cobalt);
}
.attl-ukk details[open] summary::after { content: "–"; }
.attl-ukk details[open] summary { color: var(--att-cobalt); }
.attl-ukk summary:hover { color: var(--att-cobalt); }
.attl-ukk summary:focus-visible { outline: 2px solid var(--att-cobalt); outline-offset: -2px; }
.attl-ukk__vastaus {
  padding: 0 62px 22px 26px;
  font-size: 14.5px;
  line-height: 1.66;
  color: var(--att-ink2);
  max-width: 82ch;
}

/* opasnosto */
.attl-opas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  border: 1px solid var(--att-line2);
  background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--attl-varjo-1);
  padding: 26px 30px;
  margin-top: 34px;
}
.attl-opas b {
  display: block;
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: 19px;
  line-height: 1.24;
  letter-spacing: -.014em;
  color: var(--att-ink);
  font-weight: 600;
  margin-bottom: 6px;
}
.attl-opas p { font-size: 14px; line-height: 1.55; max-width: 56ch; color: var(--att-ink2); }

/* ══════════════════════════════════════════════════════════════════════
   12. FOOTER — tumma, jotta sivu päättyy tuotteeseen eikä paperiin
   ══════════════════════════════════════════════════════════════════════ */
.attl-footer { background: var(--attl-dark); color: var(--attl-dark-fg2); }
.attl-footer__inner {
  max-width: var(--attl-wrap);
  margin: 0 auto;
  padding: 44px var(--attl-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.attl-footer__c {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.attl-footer__oikea { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.attl-footer__links { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.attl-footer__links a {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--attl-dark-fg);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.attl-footer__links a:hover { color: #fff; border-bottom-color: #8FB4F0; }
.attl-footer__kieli {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--attl-dark-fg);
  text-decoration: none;
  border: 1px solid var(--attl-dark-line);
  padding: 8px 13px;
}
.attl-footer__kieli:hover { color: #fff; border-color: #8FB4F0; }

/* ══════════════════════════════════════════════════════════════════════
   13. LIIKE — scroll-reveal
   Oletus: KAIKKI NÄKYVISSÄ (ei koskaan tyhjää sivua — tuo virhe on tehty
   tällä sivustolla kerran jo). Liike kytkeytyy päälle vain, jos <head>:n
   synkroninen portti lisää <html>-elementtiin luokan .attl-liike.
   ?motion=force ohittaa prefers-reduced-motionin (katselmuskonventio).
   ══════════════════════════════════════════════════════════════════════ */
.attl-liike .att-r {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--r, 0ms);
  will-change: opacity, transform;
}
.attl-liike .att-r.on-nakyy { opacity: 1; transform: none; }
.attl-liike .attl-tuotekehys { animation: attlNousu 1.1s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes attlNousu {
  from { opacity: 0; transform: translateY(28px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   14. MOBIILI
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .attl { --attl-osio: 92px; --attl-wrap: 1000px; }
  .attl-hero__grid { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 22px 40px; }
  .attl-rivit { gap: 76px; }
  .attl-rivi { gap: 40px; }
  .attl-spec { grid-template-columns: repeat(4, 1fr); }
  .attl-spec__i:nth-child(4n+1) { border-left: none; }
  .attl-spec__i:nth-child(n+5) { border-top: 1px solid var(--att-line); }
}

@media (max-width: 959px) {
  .attl { --attl-osio: 76px; --attl-gutter: 22px; }
  .attl-nav__linkit { display: none; }

  /* HERO: demo ensin — otsikko, sitten tuote, sitten CTA:t */
  .attl-hero { padding-top: 40px; }
  .attl-hero__grid { display: flex; flex-direction: column; gap: 0; padding-bottom: 74px; }
  .attl-hero__vasen { padding-top: 0; display: contents; }
  .attl-hero__ots { order: 1; }
  .attl-hero__oikea { order: 2; margin-top: 30px; }
  .attl-hero__toimi { order: 3; margin-top: 30px; }
  .attl-hero__lupaus { max-width: none; }

  .attl-specnauha { margin-top: -30px; }

  .attl-rivi { grid-template-columns: 1fr; gap: 26px; }
  .attl-rivi--kaanteinen .attl-rivi__teksti,
  .attl-rivi--kaanteinen .attl-rivi__kuva { order: 0; }
  .attl-rivi__teksti h3 { max-width: none; }
  .attl-rivi__teksti p { max-width: none; }
  .attl-rivit { gap: 60px; margin-top: 48px; }

  .attl-lasi__grid { grid-template-columns: 1fr; gap: 28px; }
  .attl-editori { grid-template-columns: 1fr; gap: 30px; }
  .attl-video { grid-template-columns: 1fr; gap: 28px; }
  /* pystykuvakehykset keskitetään, kun palsta on yksi */
  .attl-kuvapaneeli--kapea { margin: 0 auto; }
  .attl-tili { grid-template-columns: 1fr; gap: 22px; padding: 26px 24px; }
  .attl-tumma { padding: 84px 0; }
}

@media (max-width: 640px) {
  .attl { --attl-gutter: 18px; --attl-osio: 64px; --attl-nav-h: 58px; }
  .attl-nav.on-kiinni { --attl-nav-h: 50px; }
  .attl-nav .att-logo__by { display: none; }

  .attl-hero h1 { font-size: clamp(30px, 8.4vw, 40px); line-height: 1.06; }
  .attl-hero__lupaus { font-size: 15.5px; }
  .attl-ctat { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .attl-btn { width: 100%; padding: 15px 18px; white-space: normal; text-align: center; }
  /* yläpalkin CTA pysyy pienenä — leveä nappi söi koko palkin */
  .attl-nav .attl-btn { width: auto; padding: 9px 14px; font-size: 12.5px; white-space: nowrap; }
  /* sanamerkki näkyviin: sovelluksen bundle piilottaa sen kapealla, mutta
     landingin palkissa on tilaa ja pelkkä AI-neliö jäi irralliseksi */
  .attl-nav .att-logo__name { display: block; font-size: 12px; }
  .attl-luotto { font-size: 9.5px; letter-spacing: .08em; }
  .attl-luotto i { padding: 0 5px; }

  .attl-spec { grid-template-columns: repeat(2, 1fr); }
  .attl-spec__i { padding: 13px 12px; font-size: 11px; letter-spacing: .06em; }
  .attl-spec__i:nth-child(2n+1) { border-left: none; }
  .attl-spec__i:nth-child(4n+1) { border-left: none; }
  .attl-spec__i:nth-child(n+3) { border-top: 1px solid var(--att-line); }

  .attl-kehyspalkki { min-height: 38px; height: auto; font-size: 11px; letter-spacing: .08em; gap: 8px; }
  .attl-kehyspalkki__tila { font-size: 11px; }

  .attl-tili__v p { font-size: 15px; }
  .attl-speclista__r { grid-template-columns: 1fr; gap: 5px; padding: 13px 0; }
  .attl-ukk summary { padding: 17px 18px; font-size: 14.5px; gap: 14px; }
  .attl-ukk__vastaus { padding: 0 18px 18px; font-size: 14px; }
  .attl-opas { padding: 22px 18px; gap: 18px; }
  .attl-opas a { width: 100%; }
  .attl-vertailu__lipp { font-size: 8.5px; padding: 6px 8px; top: 10px; }
  .attl-vertailu__lipp--v { left: 10px; }
  .attl-vertailu__lipp--o { right: 10px; }
  .attl-vertailu__kahva::after { width: 34px; height: 34px; }
  .attl-lasilista b { min-width: 78px; }
  .attl-lasilista div { font-size: 12.5px; padding: 10px 13px; }

  .attl-footer__inner { flex-direction: column-reverse; align-items: flex-start; gap: 20px; padding: 32px var(--attl-gutter); }
  .attl-footer__oikea { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ══════════════════════════════════════════════════════════════════════
   15. TULOSTUS / EI-JS
   ══════════════════════════════════════════════════════════════════════ */
@media print {
  .attl-nav { position: static; }
  .attl-tumma { background: #fff; color: #000; }
}