/* ==========================================================================
   Digijurist 2026 redesign — AVALEHE (landing.html) LAYOUT
   ==========================================================================
   Ainult landing-spetsiifilised sektsioonipaigutused, demo-aknad,
   allikavõrgustiku SVG, sticky dokumenditeekond, hinnaveerud, turvadiagramm
   ja nende responsive-reeglid. Nupud/kaardid/nav/jalus tulevad site.css-ist
   — see fail ei defineeri neid uuesti.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Aktsent tekstis (hero H1 "ise kontrollida") — mitte gradient, ainult värv,
   nagu spec nõuab.
   -------------------------------------------------------------------------- */
.lp-accent { color: var(--dj-accent); }

/* ==========================================================================
   1. HERO
   ========================================================================== */
.lp-hero {
  position: relative;
  overflow: hidden; /* particles-canvas ei tohi lehte laiendada */
  padding-block: clamp(96px, 12vh, 150px) 110px;
}
.lp-hero > .dj-particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lp-hero__wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 64px;
  align-items: center;
}
.lp-hero__title { font-size: clamp(42px, 6vw, 72px); margin-top: 22px; }
/* Sõnahaaval reveal (motion.js data-split-words) paneb iga sõna omaette
   span'i — display:inline-block peab olema baastasemel juba enne JS-i, et
   layout ei nihkuks, kui skript käivitub. */
.lp-hero__title .dj-word { display: inline-block; }
.lp-hero__lead { margin-top: 20px; }
.lp-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.lp-hero__note { margin: 14px 0 0; color: var(--dj-ink-3); font-size: 13px; }
.lp-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  color: var(--dj-ink-3);
}
.lp-hero__facts li {
  padding: 0 16px;
  border-left: 1px solid var(--dj-hairline-2);
}
.lp-hero__facts li:first-child { padding-left: 0; border-left: 0; }

/* ---- Tootedemo aken ----
   Hero "jutuchat" on APP-liidese demo (mitte dokument), seega TUME app-aken,
   mitte valge paber: valge karjus tumedal hero-taustal (omaniku märkus). Dark
   surface = sama keel mis päris rakenduse tume teema. Dokumendi-mockupid
   allpool (lp-mock--doc/--write, lp-journey__doc) jäävad valgeks paberiks —
   need on dokumendid, mitte liides. */
.lp-hero__col--visual { position: relative; }
.lp-demo {
  background: var(--dj-bg-sunken);
  min-height: 420px; /* CLS-vaba: kõrgus ei tohi muutuda animatsiooni jooksul */
  display: flex;
  flex-direction: column;
}
.lp-demo__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  flex: 0 0 auto;
  padding: 0 16px;
  border-bottom: 1px solid var(--dj-hairline);
}
/* macOS akna "fooritulede" värvid (punane/kollane/roheline) — annab demo-
   aknale äratuntava töölaua-akna tunde. */
.lp-demo__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--dj-hairline-2); }
.lp-demo__dot:nth-of-type(1) { background: #FF5F57; }
.lp-demo__dot:nth-of-type(2) { background: #FEBC2E; }
.lp-demo__dot:nth-of-type(3) { background: #28C840; }
.lp-demo__cap { margin-left: 8px; color: var(--dj-ink-3); }
.lp-demo__body {
  position: relative;
  flex: 1 1 auto;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 13.6px;
  overflow: hidden;
}
.lp-demo__inputrow {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid var(--dj-hairline);
  border-radius: var(--dj-radius-m);
  color: var(--dj-ink);
  min-height: 20px;
}
.lp-demo__cursor {
  display: inline-block;
  width: 1px;
  height: 15px;
  background: var(--dj-accent);
  animation: lp-blink 1s step-end infinite;
}
@keyframes lp-blink { 50% { opacity: 0; } }
.lp-demo__bubble {
  align-self: flex-end;
  max-width: 84%;
  padding: 10px 14px;
  border-radius: var(--dj-radius-m) var(--dj-radius-m) 2px var(--dj-radius-m);
  background: var(--dj-accent-wash);
  color: var(--dj-ink);
}
.lp-demo__analyzing { display: flex; align-items: center; gap: 10px; color: var(--dj-ink-2); }
.lp-demo__analyzing-dots { display: inline-flex; gap: 4px; }
.lp-demo__analyzing-dots span {
  width: 5px; height: 5px; border-radius: 50%; background: var(--dj-ink-3);
  animation: lp-pulse-dot 1.2s ease-in-out infinite;
}
.lp-demo__analyzing-dots span:nth-child(2) { animation-delay: .15s; }
.lp-demo__analyzing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes lp-pulse-dot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.lp-demo__sources { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-demo__answer p { margin: 0; color: var(--dj-ink-2); line-height: 1.6; }
.lp-demo__answer .dj-src { margin-left: 6px; }
.lp-demo__cta { align-self: flex-start; height: 38px; padding: 0 18px; font-size: 13.5px; }
.lp-demo__cta.is-pressed { transform: scale(.97); }
/* Tumedal app-aknal on CTA sinine accent (mitte lehe valge primaar, mis
   siin uuesti "karjuks") — rahulik, kuid selgelt nupp. */
.lp-demo .dj-btn-primary {
  background: var(--dj-accent);
  color: #fff;
}
.lp-demo .dj-btn-primary:hover { background: var(--dj-accent-deep); }
/* Väike dokumendi-inset chat'i sees jääb heledaks paberiks (valmiv dokument),
   aga pehmem kui puhas valge, et tumedal aknal mitte karjuda. */
.lp-demo__docpanel {
  border: 1px solid var(--dj-hairline);
  border-radius: var(--dj-radius-m);
  background: rgba(255, 255, 255, .04);
  padding: 14px 16px;
}
.lp-demo__dochead { color: var(--dj-ink-3); margin-bottom: 10px; }
.lp-demo__docline {
  height: 8px;
  border-radius: 4px;
  background: var(--dj-hairline-2);
  margin: 8px 0;
  width: 100%;
}
.lp-demo__docline--80 { width: 80%; }
.lp-demo__docline--60 { width: 60%; }
.lp-demo__docexports { display: flex; gap: 6px; margin-top: 10px; }
.lp-demo__signature { margin: 14px 0 0; color: var(--dj-ink-3); text-align: center; }

/* Fade-tsükli üleminek (demos.js lisab/eemaldab seda klassi) */
.lp-demo__body.is-fading > * { opacity: 0; transition: opacity var(--dj-dur) var(--dj-ease); }

@media (max-width: 1120px) {
  .lp-hero__wrap { grid-template-columns: 1fr .92fr; gap: 44px; }
}
@media (max-width: 860px) {
  .lp-hero { padding-block: 64px; }
  .lp-hero__wrap { grid-template-columns: 1fr; }
  .lp-hero__col--visual { order: 2; margin-top: 12px; }
  .lp-demo { min-height: 380px; }
  .lp-hero__cta .dj-btn-primary,
  .lp-hero__cta .dj-btn-secondary { flex: 1 1 auto; }
}

/* ==========================================================================
   2. PROOF-RIBA
   ========================================================================== */
.lp-proof__row {
  display: flex;
  align-items: flex-start;
}
.lp-proof__item {
  flex: 1 1 0;
  padding: 0 32px;
  border-left: 1px solid var(--dj-hairline);
}
.lp-proof__item:first-child { border-left: 0; padding-left: 0; }
.lp-proof__num {
  display: block;
  font-size: 44px;
  min-width: 7ch; /* CLS-vaba enne loenduri käivitumist */
}
.lp-proof__num--glyph { color: var(--dj-accent); min-width: 0; }
/* Tekstiline statistika ("Kümned tuhanded") — väiksem kui numbrid, et kaks
   sõna ei murduks kohmakalt; min-width maha, ch-laius ei kehti tekstile. */
.lp-proof__num--text { font-size: 30px; line-height: 1.25; min-width: 0; padding-top: 8px; }
.lp-proof__label { display: block; margin-top: 8px; color: var(--dj-ink-3); }

@media (max-width: 860px) {
  .lp-proof__row { flex-direction: column; gap: 24px; }
  .lp-proof__item { border-left: 0; padding-left: 0; text-align: left; }
}

/* ==========================================================================
   3. TÖÖVOOG
   ========================================================================== */
.lp-workflow__head { max-width: 560px; }
.lp-workflow__title { font-size: clamp(30px, 4vw, 46px); margin-top: 10px; }
.lp-workflow__sub { margin: 12px 0 0; color: var(--dj-ink-2); font-size: 17px; }

.lp-workflow__rows { list-style: none; margin: 88px 0 0; padding: 0; }
.lp-workflow__row {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 64px;
  align-items: center;
}
/* min-width:0: ilma selleta pärib grid-track sees oleva flex-tabbari
   (.lp-mock__tabbar) murdumatu min-content laiuse ja lükkab sisu 320px
   ekraanil raami taha (overflow-x:clip peidab selle vaikselt ära). */
.lp-workflow__text, .lp-workflow__visual { min-width: 0; }
.lp-workflow__row + .lp-workflow__row { margin-top: 96px; }
/* Iga teine rida peegeldub (visuaal vasakule) — editorial rütm, mitte
   ühtlane kaardi-grid. */
.lp-workflow__row:nth-child(even) { direction: rtl; }
.lp-workflow__row:nth-child(even) > * { direction: ltr; }

.lp-workflow__num {
  display: block;
  font-size: 64px;
  color: rgba(255, 255, 255, .10);
  line-height: 1;
}
.lp-workflow__text h3 { margin: 8px 0 0; font-family: var(--dj-font-ui); font-weight: 650; font-size: 24px; letter-spacing: -.01em; }
.lp-workflow__text > p { margin: 12px 0 0; max-width: 26em; color: var(--dj-ink-2); }
.lp-workflow__checks { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lp-workflow__checks li { display: flex; gap: 9px; font-size: 14px; color: var(--dj-ink-2); }
.lp-workflow__checks li::before { content: "✓"; flex: 0 0 auto; color: var(--dj-accent); font-weight: 700; }

@media (max-width: 1120px) {
  .lp-workflow__row { grid-template-columns: 1fr; gap: 28px; }
  .lp-workflow__row:nth-child(even) { direction: ltr; }
  .lp-workflow__row:nth-child(even) .lp-workflow__visual { order: -1; }
}

/* ---- UI-mock'id (jagatud kõigi 4 töövoo-visuaali vahel) ---- */
/* Paberikontekst: dj-card annaks muidu tumeda bg-raised pinna — need neli
   mock-varianti (+ .lp-demo/.lp-journey__doc allpool) jäävad valgeks
   paberiks. Semantika-tokenid (risk/ok/warn/accent-deep) on lehe põhiosas
   häälestatud tumedale taustale ja ei läbiks WCAG AA valgel paberil —
   siin skoobis kirjutame nad üle samade toonidega, mis kehtisid vana
   heleda teema ajal (need olid juba paberi jaoks kontrastituna mõõdetud). */
.lp-mock--chat,
.lp-mock--doc,
.lp-mock--write,
.lp-mock--workspace {
  background: var(--dj-paper);
  --dj-risk: #A8422E;
  --dj-ok: #1E6B4F;
  --dj-warn: #8A6116;
  --dj-accent-deep: #0E4D80;
}
.lp-mock { padding: 20px; font-size: 13.5px; }

/* Allika-chip (.dj-src, site.css) paberikontekstis: baasvariant on häälestatud
   tumedale lehele (accent-wash/accent-deep), paberil vaja tumedamat teksti,
   et chip jääks WCAG AA kontrastseks valgel taustal. */
/* NB: .lp-demo (hero jutuchat) EI ole enam siin — see on nüüd tume app-aken
   ja kasutab .dj-src tumedat vaikestiili. Loend katab ainult valged
   paber-mockupid (sh töövoo .lp-mock--chat, mis jääb paberiks). */
.lp-mock--chat .dj-src,
.lp-mock--doc .dj-src,
.lp-mock--write .dj-src,
.lp-mock--workspace .dj-src,
.lp-journey__doc .dj-src {
  background: rgba(23, 105, 170, .10);
  color: #15588C;
  border-color: rgba(23, 105, 170, .25);
}
.lp-mock__skel {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--dj-paper-line);
  margin: 8px 0;
}
.lp-mock__skel--full { width: 100%; }
.lp-mock__skel--90 { width: 90%; }
.lp-mock__skel--80 { width: 80%; }
.lp-mock__skel--70 { width: 70%; }
.lp-mock__skel--60 { width: 60%; }

.lp-mock--chat .lp-mock__inputbar {
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: var(--dj-radius-m);
  padding: 10px 14px;
  color: var(--dj-paper-ink-2);
  margin-bottom: 14px;
}
.lp-mock__bubble--user {
  align-self: flex-end;
  max-width: 88%;
  margin-left: auto;
  padding: 9px 13px;
  border-radius: var(--dj-radius-m) var(--dj-radius-m) 2px var(--dj-radius-m);
  background: var(--dj-accent-wash);
  color: var(--dj-paper-ink);
  margin-bottom: 14px;
}
.lp-mock--chat .lp-mock__answer { display: flex; flex-direction: column; gap: 6px; }
.lp-mock--chat .lp-mock__answer .dj-src { align-self: flex-start; margin-top: 4px; }

.lp-mock__dochead { color: var(--dj-paper-ink-2); margin-bottom: 14px; }
.lp-mock__docrow { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.lp-mock__docrow .lp-mock__skel { flex: 1 1 auto; margin: 0; }
.lp-annot {
  flex: 0 0 auto;
  font-family: var(--dj-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
}
.lp-annot--risk { background: var(--dj-risk-wash); color: var(--dj-risk); }
.lp-annot--warn { background: var(--dj-warn-wash); color: var(--dj-warn); }
.lp-annot--ok { background: var(--dj-ok-wash); color: var(--dj-ok); }
.lp-annot--accent { background: var(--dj-accent-wash); color: var(--dj-accent-deep); }
/* Anteid vaikimisi nähtaval (no-JS baasjuhtum); JS-iga peidab demos.js need
   ise ja toob nähtavale järjestikku, kui kaart kerimisel vaatevälja jõuab —
   sama muster mis site.css .js [data-reveal]. */
.js [data-annot] { opacity: 0; transition: opacity var(--dj-dur) var(--dj-ease); }
.js [data-annot].is-shown { opacity: 1; }

.lp-mock--write .lp-mock__docrow { margin: 12px 0; }
.js [data-write-line] { opacity: 0; transition: opacity var(--dj-dur) var(--dj-ease); }
.js [data-write-line].is-shown { opacity: 1; }
.lp-mock--write .lp-mock__docexports { display: flex; gap: 6px; margin-top: 6px; }

.lp-mock__workspace { display: grid; grid-template-columns: .8fr 1.2fr; gap: 18px; }
.lp-mock__files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; color: var(--dj-paper-ink-2); font-size: 12px; }
.lp-mock__tabbar { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 12px; color: var(--dj-paper-ink-2); font-size: 11px; }
.lp-mock__tab--active { color: var(--dj-accent-deep); border-bottom: 2px solid var(--dj-accent); padding-bottom: 4px; }
.lp-mock__tabs .lp-mock__skel { margin: 8px 0; }

@media (max-width: 860px) {
  .lp-mock__workspace { grid-template-columns: 1fr; }
}

/* ==========================================================================
   3B. RAKENDUS (liidese-mockup, "Koosta dokument" valik, dokumendinäidis)
   ========================================================================== */
.lp-app__head { max-width: 620px; }

/* ---- App-aken: tume liides, sama pinnatoon mis hero .lp-demo (--dj-bg-sunken).
   TEADLIKULT ilma .dj-frame'ita — spec reserveerib selle animeeritud raami
   ainult hero-demole ja turvadiagrammile, siin piisab tavalisest kaardi-
   raamist, et "üks detailideni viimistletud tunnusdetail" ei kaotaks
   erilisust. ---- */
.lp-app__window {
  background: var(--dj-bg-sunken);
  border: 1px solid var(--dj-hairline);
  border-radius: var(--dj-radius-l);
  overflow: hidden;
  box-shadow: var(--dj-shadow-l);
  margin-top: 64px;
}
.lp-app__body {
  display: grid;
  grid-template-columns: 196px 1fr;
  min-height: 540px;
}

/* ---- Külgriba: nav + "Uus vestlus" ---- */
.lp-app__nav {
  border-right: 1px solid var(--dj-hairline);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.lp-app__newchat {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: var(--dj-radius-m);
  background: var(--dj-accent);
  color: #fff;
  font-weight: 600;
  font-size: 12px;
}
.lp-app__navlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.lp-app__navitem {
  padding: 9px 10px;
  border-radius: var(--dj-radius-s);
  color: var(--dj-ink-3);
  font-size: 12.5px;
}
/* Aktiivne nav-kirje = sinine accent, sama muster mis .lp-mock__tab--active
   paberikontekstis, ainult siin ilma paberi ülekirjutuseta (tume pind). */
.lp-app__navitem.is-active {
  background: var(--dj-accent-wash);
  color: var(--dj-accent-deep);
  font-weight: 600;
}

/* ---- Peaala: "Koosta dokument" valik + dokumendi-eelvaade kõrvuti ---- */
.lp-app__main {
  padding: 26px 28px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  align-items: start;
}
.lp-app__pickertitle { margin: 0; font-family: var(--dj-font-ui); font-weight: 650; font-size: 18px; color: var(--dj-ink); }
.lp-app__pickersub { margin: 4px 0 16px; color: var(--dj-ink-3); }

.lp-app__doctypes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lp-app__doctype {
  display: flex;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid var(--dj-hairline);
  border-radius: var(--dj-radius-s);
  background: rgba(255, 255, 255, .03);
  color: var(--dj-ink-2);
  font-family: var(--dj-font-mono);
  font-size: 11.5px;
  line-height: 1.35;
}
/* Üks valik "aktiivne" — accent-raam, näitab, et see on juba valitud
   dokumenditüüp (paremal paber vastab talle). */
.lp-app__doctype.is-active {
  border-color: var(--dj-accent);
  background: var(--dj-accent-wash);
  color: var(--dj-ink);
}
.lp-app__more { margin: 10px 0 0; color: var(--dj-ink-3); }

/* ---- Dokumendinäidis: VALGE paber tumedal aknal — sama premium-kontrast
   mis teistel dokumendi-mockupitel (.lp-demo__docpanel, .lp-journey__doc).
   Siin on see AINUS koht, kus näidatakse kogu vormistus (adressaat, pealkiri,
   sisu, allkirjaplokk), seega päris tekst, mitte skeleton-jooned. ---- */
.lp-app__preview { display: flex; flex-direction: column; gap: 10px; }
/* Dokumendi-näidis TUMEDAL pinnal (omaniku märkus: valge paber liiga ere).
   Sama keel mis app-aken — dokument on bg-raised paneel app-akna (bg-sunken)
   sees, hele tekst, peenjoontega. */
.lp-app__paper {
  background: var(--dj-bg-raised);
  border: 1px solid var(--dj-hairline);
  border-radius: var(--dj-radius-m);
  box-shadow: var(--dj-shadow-m);
  padding: 24px 22px;
  font-size: 12px;
}
.lp-app__paperto, .lp-app__paperfrom {
  margin: 0;
  color: var(--dj-ink-2);
  line-height: 1.5;
}
.lp-app__paperfrom { margin-top: 10px; }
.lp-app__papertitle {
  margin: 20px 0 6px;
  font-family: var(--dj-font-ui);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.35;
  color: var(--dj-ink);
}
.lp-app__paperdate { margin: 0 0 16px; text-align: center; color: var(--dj-ink-3); }
.lp-app__paperbody p { margin: 0 0 10px; color: var(--dj-ink-2); line-height: 1.55; }
.lp-app__paperbody .dj-src { margin-left: 4px; }
.lp-app__papersign { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--dj-hairline); }
.lp-app__signline { display: block; width: 150px; height: 1px; background: var(--dj-hairline-2); margin-bottom: 8px; }
.lp-app__papersign p { margin: 0; color: var(--dj-ink-3); line-height: 1.5; }
.lp-app__exports { display: flex; gap: 6px; }

.lp-app__signature { margin: 16px 0 0; color: var(--dj-ink-3); text-align: center; }

@media (max-width: 1120px) {
  .lp-app__main { grid-template-columns: 1fr; }
}

/* Mobiil: külgriba peitub (nav peaks jääma app-mulje andma, mitte võtma
   ruumi kitsal ekraanil), aken lihtsustub üheks veeruks, ilma horisontaalse
   ülevooluta. */
@media (max-width: 860px) {
  .lp-app__body { grid-template-columns: 1fr; min-height: 0; }
  .lp-app__nav { display: none; }
  .lp-app__main { padding: 20px; grid-template-columns: 1fr; gap: 20px; }
  .lp-app__doctypes { grid-template-columns: 1fr; }
}

/* ==========================================================================
   4. ALLIKAD JA USALDUS
   ========================================================================== */
.lp-sources__diagram { padding: 40px 0 56px; }
.lp-sources__branch {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}

/* ---- Allikavõrgustik (SVG, valgustuv trajektoor) ---- */
.lp-net { display: block; width: 100%; max-width: 1100px; margin: 0 auto; height: auto; overflow: visible; }

/* Sõlme täidis: läbipaistmatu, et ühendusjoon ei paistaks kasti alt läbi ja
   tekst oleks loetav. Äärejoon dim (baasstruktuur alati nähtav). */
.lp-net__box { fill: var(--dj-bg-raised); stroke: var(--dj-hairline-2); stroke-width: 1.5; }
.lp-net__wire { stroke: var(--dj-hairline-2); stroke-width: 1.5; fill: none; }

/* Valgustuvad kihid: sinine accent + õrn kuma. Baasolek (no-JS) = süttinud
   (dashoffset 0), et sektsioon oleks mõtestatud ka ilma skriptita. */
.lp-net__box-lit, .lp-net__wire-lit {
  fill: none; stroke: var(--dj-accent); stroke-width: 2.5; stroke-linecap: round;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--dj-accent) 60%, transparent));
}
.lp-net__head {
  fill: #fff;
  filter: drop-shadow(0 0 6px var(--dj-accent)) drop-shadow(0 0 12px var(--dj-accent));
  opacity: 0; /* nähtav ainult tracing'u ajal */
  transform-box: view-box;
}

/* Tekst KESKEL (nii ühe- kui kaherealised sõlmed) — text-anchor + baseline. */
.lp-net__label {
  fill: var(--dj-ink); font-family: var(--dj-font-ui); font-weight: 600;
  font-size: 16px; text-anchor: middle; dominant-baseline: middle;
}
.lp-net__sub {
  fill: var(--dj-ink-3); font-family: var(--dj-font-mono); font-size: 10.5px;
  letter-spacing: .5px; text-anchor: middle; dominant-baseline: middle;
}

/* JS olemas -> peida valgustuvad kihid (dashoffset = pikkus), et neid saaks
   trajektoorina sisse joonistada. Ilma .js klassita jäävad nad süttinuks. */
.js .lp-net__box-lit, .js .lp-net__wire-lit {
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
}
/* Reduced-motion: demos.js lisab .is-lit -> kõik kohe süttinud, animatsioonita. */
.lp-net.is-lit .lp-net__box-lit, .lp-net.is-lit .lp-net__wire-lit { stroke-dashoffset: 0; }

/* Tracing: iga kiht joonistub (dashoffset -> 0, forwards = JÄÄB süttinuks),
   staggeritud viivitustega. Sõlme kaks poolt joonistuvad KORRAGA (mõlemalt
   poolt) ja kohtuvad paremal. Aeglane, väärikas (1,4 s / kiht). */
@keyframes lp-net-draw { to { stroke-dashoffset: 0; } }
.lp-net.is-tracing .lp-net__box-lit,
.lp-net.is-tracing .lp-net__wire-lit {
  animation: lp-net-draw 1.4s var(--dj-ease) forwards;
}
.lp-net.is-tracing .lp-net__box-lit[data-node="0"] { animation-delay: 0s; }
.lp-net.is-tracing .lp-net__wire-lit[data-seg="0"]  { animation-delay: 1.4s; animation-duration: 1.1s; }
.lp-net.is-tracing .lp-net__box-lit[data-node="1"] { animation-delay: 2.5s; }
.lp-net.is-tracing .lp-net__wire-lit[data-seg="1"]  { animation-delay: 3.9s; animation-duration: 1.1s; }
.lp-net.is-tracing .lp-net__box-lit[data-node="2"] { animation-delay: 5.0s; }
.lp-net.is-tracing .lp-net__wire-lit[data-seg="2"]  { animation-delay: 6.4s; animation-duration: 1.1s; }
.lp-net.is-tracing .lp-net__box-lit[data-node="3"] { animation-delay: 7.5s; }
.lp-net.is-tracing .lp-net__wire-lit[data-seg="3"]  { animation-delay: 8.9s; animation-duration: 1.1s; }
.lp-net.is-tracing .lp-net__box-lit[data-node="4"] { animation-delay: 10.0s; }

/* Peapunkt: süttib sõlmes 0, liigub AEGLASELT mööda joont sõlmelt sõlmele
   (translateX viewBox-ühikutes: sõlmed x=90/320/550/780/1010 -> delta
   0/230/460/690/920). Peatub sõlme kohal, kuni selle äär süttib. */
.lp-net.is-tracing .lp-net__head { animation: lp-net-head 11.4s var(--dj-ease) forwards; }
/* Pall nähtav AINULT ühendusjoontel (kaartide vahel) — sõlme kohal opacity 0,
   sest siis "süttib" kasti äär ja pall ei tohi seda katta. Liigub siiski
   pidevalt (transform), ainult nähtavus vaheldub: joonel 1, kasti kohal 0. */
@keyframes lp-net-head {
  0%    { transform: translateX(0);     opacity: 0; } /* sõlm 0 — peidus */
  12.3% { transform: translateX(0);     opacity: 0; }
  14%   { transform: translateX(30px);  opacity: 1; } /* joon 0 — nähtav */
  20%   { transform: translateX(200px); opacity: 1; }
  21.9% { transform: translateX(230px); opacity: 0; } /* sõlm 1 — peidus */
  34.2% { transform: translateX(230px); opacity: 0; }
  36%   { transform: translateX(260px); opacity: 1; } /* joon 1 */
  42%   { transform: translateX(430px); opacity: 1; }
  43.9% { transform: translateX(460px); opacity: 0; } /* sõlm 2 */
  56.1% { transform: translateX(460px); opacity: 0; }
  58%   { transform: translateX(490px); opacity: 1; } /* joon 2 */
  64%   { transform: translateX(660px); opacity: 1; }
  65.8% { transform: translateX(690px); opacity: 0; } /* sõlm 3 */
  78.1% { transform: translateX(690px); opacity: 0; }
  80%   { transform: translateX(720px); opacity: 1; } /* joon 3 */
  86%   { transform: translateX(890px); opacity: 1; }
  87.7% { transform: translateX(920px); opacity: 0; } /* sõlm 4 — peidus */
  100%  { transform: translateX(920px); opacity: 0; }
}

@media (max-width: 860px) {
  .lp-sources__diagram { padding: 24px 0 40px; }
  .lp-sources__branch { flex-wrap: wrap; }
}

.lp-statement {
  /* 20em murdis tsitaadi viiele lühikesele reale — 27em annab kolm
     rahulikku rida ja loomulikuma serva. */
  max-width: 27em;
  margin: 88px auto 0;
  padding: 0;
  text-align: center;
}
.lp-statement p {
  font-family: var(--dj-font-display);
  font-weight: 450;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--dj-ink);
  margin: 0;
}
.lp-statement cite {
  display: block;
  margin-top: 18px;
  color: var(--dj-ink-3);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ---- Õigusbaasi läbipaistvustabel ---- */
.lp-corpus {
  margin-top: 88px;
  padding-top: 40px;
  border-top: 1px solid var(--dj-hairline);
}
.lp-corpus__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 28px;
}
.lp-corpus__head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dj-ink-2);
}
.lp-corpus__updated { color: var(--dj-ink-3); font-size: 12px; }
.lp-corpus__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--dj-hairline);
  border: 1px solid var(--dj-hairline);
  border-radius: var(--dj-radius-l);
  overflow: hidden;
}
.lp-corpus__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 26px;
  background: var(--dj-bg-raised);
}
.lp-corpus__num {
  margin: 0;
  font-size: 30px;
  line-height: 1;
  color: var(--dj-ink);
  font-variant-numeric: tabular-nums;
}
.lp-corpus__label {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--dj-ink-2);
  font-size: 14px;
}
.lp-corpus__note { color: var(--dj-ink-3); font-size: 11.5px; }

@media (max-width: 860px) {
  .lp-corpus { margin-top: 56px; }
  .lp-corpus__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   5. DOKUMENDI TEEKOND
   ========================================================================== */
.lp-journey__head { max-width: 560px; }
.lp-journey__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; margin-top: 72px; }

.lp-journey__steps { position: relative; padding-left: 32px; }
.lp-journey__rail {
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--dj-hairline);
}
.lp-journey__rail-fill {
  display: block;
  width: 100%;
  height: 20%; /* JS uuendab kerimisel; ilma JS-ita jääb see vaikeväärtus */
  background: var(--dj-accent);
  transition: height var(--dj-dur) var(--dj-ease);
}
.lp-journey__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 56px; }
.lp-journey__step {
  display: flex;
  gap: 16px;
  opacity: .4;
  transition: opacity var(--dj-dur) var(--dj-ease);
}
.lp-journey__step.is-active { opacity: 1; }
.lp-journey__num { flex: 0 0 auto; color: var(--dj-ink-3); padding-top: 3px; }
.lp-journey__step h3 { margin: 0 0 6px; font-family: var(--dj-font-ui); font-weight: 650; font-size: 19px; }
.lp-journey__step p { margin: 0; color: var(--dj-ink-2); font-size: 14.5px; }
.lp-journey__quote { font-style: normal; }

.lp-journey__sticky { position: sticky; top: 120px; align-self: start; }
/* Paberikontekst, sama loogika mis .lp-mock--* ülal: dj-card annaks muidu
   tumeda bg-raised pinna, semantika-tokenid vajavad paberi-kontrastset
   ülekirjutust. */
.lp-journey__doc {
  padding: 28px;
  min-height: 360px;
  background: var(--dj-paper);
  --dj-risk: #A8422E;
  --dj-ok: #1E6B4F;
  --dj-warn: #8A6116;
  --dj-accent-deep: #0E4D80;
}
.lp-journey__doc-head { color: var(--dj-paper-ink-2); margin-bottom: 16px; }
.lp-journey__doc-quote { margin: 0 0 14px; color: var(--dj-paper-ink); font-size: 15px; }
.lp-journey__doc-chips { display: flex; gap: 6px; margin: 0 0 14px; }
.lp-journey__doc-deadline { margin: 0 0 14px; font-size: 14px; color: var(--dj-paper-ink-2); }
.lp-journey__doc-deadline .dj-src { margin-right: 8px; }
.lp-journey__doc-case { margin: 0 0 14px; font-size: 13.5px; color: var(--dj-paper-ink-2); }
.lp-journey__doc-body .lp-mock__skel { margin: 10px 0; }
.lp-journey__doc-exports { display: flex; gap: 6px; margin: 14px 0 10px; }
.lp-journey__doc-done {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--dj-ok-wash);
  color: var(--dj-ok);
  font-family: var(--dj-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.lp-journey__footnote { margin: 56px 0 0; color: var(--dj-ink-3); font-size: 13px; }

@media (max-width: 860px) {
  .lp-journey__grid { grid-template-columns: 1fr; gap: 0; }
  .lp-journey__sticky { display: none; }
  .lp-journey__steps { padding-left: 0; }
  .lp-journey__rail { display: none; }
  .lp-journey__step { opacity: 1; }
}

/* ==========================================================================
   6. HINNAD
   ========================================================================== */
.lp-pricing__head { max-width: 560px; }
.lp-pricing__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin: 40px 0 10px;
}
.lp-pricing__note { color: var(--dj-ink-3); margin: 0 0 28px; }

/* Ühine "Kõigis pakettides" rida — kaartide kohal üks kord (funktsioonid on
   kõigil astmetel samad; kaardid räägivad ainult mahust). */
.lp-plans-shared {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin: 0 0 24px;
  padding: 16px 20px;
  border: 1px solid var(--dj-hairline);
  border-radius: var(--dj-radius-l);
  background: var(--dj-bg-raised);
}
.lp-plans-shared__label {
  color: var(--dj-ink-3);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.lp-plans-shared__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-plans-shared__list li {
  position: relative;
  padding-left: 20px;
  color: var(--dj-ink-2);
  font-size: 13.5px;
}
/* Linnuke accent-värvis — kinnitab "sisaldub" tähenduse. */
.lp-plans-shared__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--dj-accent);
  font-weight: 700;
}

.lp-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  padding: 0;
  overflow: hidden;
}
/* `display: grid` (autori reegel) võidab UA `[hidden] { display: none }`
   reegli — ilma selleta olid Eraisik JA Advokaat plaanigrupid mõlemad
   korraga nähtaval, kuigi markupis oli `hidden` atribuut küljes. */
.lp-plans[hidden] { display: none; }
.lp-plans__col {
  position: relative;
  padding: 32px 28px;
  border-left: 1px solid var(--dj-hairline);
  display: flex;
  flex-direction: column;
}
.lp-plans__col:first-child { border-left: 0; }
.lp-plans__col--popular { background: var(--dj-accent-wash); }
.lp-plans__col--popular::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--dj-accent);
}
.lp-plans__flag {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--dj-accent-deep);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.lp-plans__name { margin: 0; font-family: var(--dj-font-ui); font-weight: 650; font-size: 17px; }
.lp-plans__price { font-size: 40px; margin: 14px 0 0; min-height: 48px; }
.lp-plans__vat { margin: 4px 0 0; color: var(--dj-ink-3); font-size: 12px; }
.lp-plans__percredit { margin: 8px 0 0; color: var(--dj-accent-deep); }
.lp-plans__bullets { list-style: none; margin: 18px 0 24px; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.lp-plans__bullets li { display: flex; gap: 8px; font-size: 13.6px; color: var(--dj-ink-2); }
.lp-plans__bullets li::before { content: "✓"; flex: 0 0 auto; color: var(--dj-accent); font-weight: 700; }
.lp-plans__col > a { margin-top: auto; align-self: flex-start; }

@media (max-width: 860px) {
  .lp-plans { grid-template-columns: 1fr; }
  .lp-plans__col { border-left: 0; border-top: 1px solid var(--dj-hairline); }
  .lp-plans__col:first-child { border-top: 0; }
}

.lp-packs { margin-top: 64px; }
.lp-packs__title { margin: 0 0 20px; font-family: var(--dj-font-ui); font-weight: 650; font-size: 20px; }
.lp-packs__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  padding: 0;
}
.lp-packs__cell {
  position: relative;
  padding: 22px 24px;
  border-left: 1px solid var(--dj-hairline);
  text-align: center;
}
.lp-packs__cell:first-child { border-left: 0; }
.lp-packs__cell--popular { background: var(--dj-accent-wash); }
.lp-packs__label { display: block; color: var(--dj-ink-3); margin-bottom: 8px; }
.lp-packs__price { display: block; font-size: 26px; min-height: 32px; }
.lp-packs__percredit { display: block; margin-top: 6px; color: var(--dj-accent-deep); }
.lp-packs > .dj-btn-quiet { display: inline-flex; margin-top: 28px; }

@media (max-width: 860px) {
  .lp-packs__row { grid-template-columns: 1fr; }
  .lp-packs__cell { border-left: 0; border-top: 1px solid var(--dj-hairline); }
  .lp-packs__cell:first-child { border-top: 0; }
}

/* ==========================================================================
   7. TURVALISUS (tume)
   ========================================================================== */
.lp-security__head { max-width: 620px; }
.lp-security__kicker { color: color-mix(in srgb, var(--dj-accent) 55%, white); }
.lp-security__title { margin-top: 10px; font-size: clamp(30px, 4vw, 46px); color: var(--dj-dark-ink); }
.lp-security__sub { margin: 12px 0 0; color: var(--dj-dark-ink-2); font-size: 17px; }

.lp-security__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 72px; margin-top: 64px; }

.lp-security__pipeline { position: relative; padding-left: 32px; }
.lp-security__line { position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px; height: calc(100% - 12px); }
.lp-security__line-track { stroke: var(--dj-dark-hairline); stroke-width: 2; fill: none; vector-effect: non-scaling-stroke; }
.lp-security__line-draw { stroke: color-mix(in srgb, var(--dj-accent) 60%, white); stroke-width: 2; fill: none; vector-effect: non-scaling-stroke; }
.lp-security__layers { display: flex; flex-direction: column; gap: 40px; }
.lp-security__layer { display: flex; gap: 16px; }
.lp-security__num { color: var(--dj-dark-ink-2); padding-top: 2px; }
.lp-security__label { display: block; font-family: var(--dj-font-ui); font-weight: 650; font-size: 15.5px; color: var(--dj-dark-ink); }
.lp-security__layer p { margin: 6px 0 0; color: var(--dj-dark-ink-2); font-size: 14px; max-width: 40em; }

.lp-security__principles { display: flex; flex-direction: column; }
.lp-security__principle { padding: 22px 0; border-bottom: 1px solid var(--dj-dark-hairline); }
.lp-security__principles > .lp-security__principle:first-child { padding-top: 0; }
.lp-security__principle h3 { margin: 0; font-family: var(--dj-font-ui); font-weight: 650; font-size: 16px; color: var(--dj-dark-ink); }
.lp-security__principle p { margin: 8px 0 0; color: var(--dj-dark-ink-2); font-size: 14px; }
.lp-security__link { margin-top: 24px; }

@media (max-width: 1120px) {
  .lp-security__grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ==========================================================================
   8. KKK
   ========================================================================== */
/* .dj-wrap-text annab juba külgpaddingu (vt site.css) — see div elab teise
   .dj-wrap sees, seega omaenda lisapadding tekitaks topelt-nihke. */
.lp-faq__inner { padding: 0; }
.lp-faq__title {
  font-family: var(--dj-font-display);
  font-weight: 500;
  letter-spacing: -.015em;
  font-size: clamp(30px, 4vw, 40px);
  margin: 0 0 28px;
  color: var(--dj-ink);
}

/* ==========================================================================
   9. LÕPU-CTA
   ========================================================================== */
.lp-final-cta { position: relative; overflow: hidden; text-align: center; padding-block: 140px; }
.lp-final-cta > .dj-particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lp-final-cta__wrap { position: relative; z-index: 1; }
.lp-final-cta__title { font-size: clamp(32px, 4.4vw, 48px); }
.lp-final-cta__lead { max-width: 34em; margin: 16px auto 0; color: var(--dj-ink-2); font-size: 17px; }
.lp-final-cta__cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.lp-final-cta__note { margin: 18px 0 0; color: var(--dj-ink-3); font-size: 13px; }

@media (max-width: 860px) {
  .lp-final-cta { padding-block: 80px; }
  .lp-final-cta__cta .dj-btn-primary,
  .lp-final-cta__cta .dj-btn-secondary { flex: 1 1 auto; }
}