/* =========================================================================
   AI Hankejälgija
   Toimetuslik, asümmeetriline laotus. Vältida tuleb ühesuguste kastide rida,
   sellepärast on siin juuksekarva jooned, nihkes veerud ja suur selge kiri
   kaardigriidide asemel.
   ========================================================================= */

:root {
  --paper:      #F3F3F4;
  --paper-2:    #EAEAEC;
  --paper-3:    #DEDEE1;
  --ink:        #14161A;
  --ink-70:     rgba(20,22,26,.70);
  --ink-55:     rgba(20,22,26,.55);
  --ink-40:     rgba(20,22,26,.40);
  --ink-15:     rgba(20,22,26,.15);
  --ink-08:     rgba(20,22,26,.08);
  --forest:     #0E2B22;
  --forest-2:   #143829;
  --accent:     #E2521B;
  --accent-2:   #FF7A45;
  --green:      #1E7A4D;
  --green-2:    #19683F;
  --accent-soft:#FBE3D6;
  --line:       rgba(20,22,26,.13);
  --line-dark:  rgba(245,242,234,.16);
  --radius:     18px;
  --radius-lg:  30px;
  --shell:      1180px;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Kogu sait on ühes fondis. Muutuja jäi alles, et vanad reeglid
     ei vajaks igaüks eraldi muutmist. */
  --serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  /* overflow-x: hidden teeb iOS Safaris kehast kerimiskonteineri ja kleepuv
     päis hakkab kleepuma selle külge, mitte akna külge. Nii tekkis päise
     kohale triip, kust paistis lehe sisu läbi. "clip" lõikab sama moodi ära,
     aga kerimiskonteinerit ei tee. Vanem brauser saab endise käitumise. */
  overflow-x: hidden;
}
@supports (overflow: clip) {
  body { overflow-x: clip; }
}

/* Peen tera, et pind ei näeks välja nagu tühi vaikimisi mall. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.12;
  margin: 0;
  font-optical-sizing: auto;
}

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 28px; }
.shell-wide { max-width: 1400px; margin: 0 auto; padding: 0 28px; }

.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: none; }
.on-dark .eyebrow { color: var(--accent-2); }
.on-dark .eyebrow::before { background: var(--accent-2); }

.lead { font-size: 19px; color: var(--ink-70); }
.on-dark .lead { color: rgba(245,242,234,.72); }

/* ---------------- Nupud ---------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 15px; font-weight: 500;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), background .18s, color .18s, border-color .18s;
  will-change: transform;
}
.btn .ic { transition: transform .18s cubic-bezier(.2,.7,.3,1); }
.btn:hover .ic { transform: translateX(3px); }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-2); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: #c8451300; background-color: #C84513; }
.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.on-dark .btn-ghost { border-color: var(--line-dark); color: var(--paper); }
.on-dark .btn-ghost:hover { border-color: var(--paper); }
.btn-light { background: var(--paper); color: var(--ink); }
.btn-light:hover { background: #fff; }
.btn-sm { padding: 11px 20px; font-size: 14px; }
.btn[disabled] { opacity: .5; pointer-events: none; }

.link-u {
  border-bottom: 1px solid var(--ink-15);
  padding-bottom: 2px;
  transition: border-color .2s, color .2s;
}
.link-u:hover { border-color: var(--accent); color: var(--accent); }

/* ---------------- Navigatsioon ---------------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  /* Safari ja iOS vajavad eesliidet. Ilma selleta hägustamist ei toimu ja
     poolläbipaistev riba laseb lehe sisu endast läbi paista, mis nägi telefonis
     välja nagu katkine päis. Läbipaistvus jääb alles seal, kus see töötab. */
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  background: rgb(243, 243, 244);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nav { background: rgba(243, 243, 244, .88); }
}
.nav.is-stuck { border-bottom-color: var(--line); }
.nav-in {
  display: flex; align-items: center; gap: 32px;
  height: 78px;
  max-width: var(--shell); margin: 0 auto; padding: 0 28px;
}
.brand { display: flex; align-items: center; gap: 11px; font-weight: 600; letter-spacing: -.02em; font-size: 17px; }
.brand svg { flex: none; }
.nav-links { display: flex; align-items: center; gap: 28px; margin-left: auto; font-size: 15px; }
.nav-links a { color: var(--ink-70); transition: color .18s; }
.nav-links a:hover { color: var(--ink); }
.nav-side { display: flex; align-items: center; gap: 14px; }
.lang-switch {
  font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-55); border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px;
  transition: border-color .2s, color .2s;
}
.lang-switch:hover { color: var(--ink); border-color: var(--ink); }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; color: var(--ink); }
.nav-extra { display: none; }
.cta-short { display: none; }
.brand span { white-space: nowrap; }
.nav-side .btn { white-space: nowrap; }

/* ---------------- Hero ---------------- */
.hero { position: relative; padding: 62px 0 0; overflow: hidden; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .86fr);
  gap: 54px;
  align-items: center;
}
.hero h1 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.06;
  font-size: clamp(35px, 4.1vw, 58px);
  margin: 22px 0 0;
  max-width: 21ch;
}
.hero h1 .soft { color: var(--ink-40); display: block; }
.hero-sub { margin-top: 26px; font-size: 18px; color: var(--ink-70); max-width: 52ch; }
.hero-actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
/* Hero peamine kutse on natuke suurem kui kõrval olev teisejärguline nupp. */
.hero-actions .btn-primary { padding: 17px 32px; font-size: 16px; }
/* Usaldus- ja hinnarida käivad terve veeru laiuselt, mitte kitsamalt kui tekst. */
.hero-trust { margin-top: 18px; font-size: 14px; color: var(--ink-55); max-width: none; }

.hero-art { position: relative; margin-bottom: -10px; }
.hero-art svg { display: block; width: 100%; height: auto; }

.hero-stats {
  margin-top: 48px;
  display: flex; flex-wrap: wrap; gap: 14px;
}
.hero-stat {
  flex: 1 1 0; min-width: 168px;
  background: rgba(255,255,255,.6);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px 22px;
  transition: transform .2s cubic-bezier(.2,.7,.3,1), border-color .2s;
}
.hero-stat:hover { transform: translateY(-2px); border-color: var(--ink-40); }
.hero-stat b { display: block; font-family: var(--sans); font-size: 30px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.hero-stat span { display: block; margin-top: 4px; font-size: 14px; color: var(--ink-55); }

/* ---------------- Sektsioonid ---------------- */
section { position: relative; }
.sec { padding: 108px 0; }
.sec-tight { padding: 76px 0; }
.sec-dark { background: var(--forest); color: var(--paper); }
.sec-dark h2, .sec-dark h3 { color: var(--paper); }

.sec-head { max-width: none; }
.sec-head h2 {
  font-size: clamp(28px, 3.3vw, 42px);
  margin-top: 18px;
}

/* Toimetuslik kaheveeruline plokk, kus tekst ei istu kastis. */
.split {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 62px; align-items: start;
}
.split-sticky { position: sticky; top: 120px; }
.prose p { font-size: 18px; color: var(--ink-70); margin: 0 0 22px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 600; }

/* ---------------- Kuidas töötab ---------------- */
.steps { margin-top: 66px; position: relative; }
.step {
  display: grid; grid-template-columns: 128px minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px; align-items: start;
  padding: 42px 0;
  border-top: 1px solid var(--line);
  transition: background .3s;
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step-num {
  font-family: var(--sans); font-size: clamp(64px, 6vw, 88px); font-weight: 600; line-height: .95; letter-spacing: -.03em;
  color: var(--ink-15);
  transition: color .3s;
}
.step:hover .step-num { color: var(--accent); }
.step h3 { font-size: 27px; }
.step p { margin: 0; color: var(--ink-70); font-size: 16.5px; }

/* ---------------- Näidiskiri ---------------- */
.mail-wrap { position: relative; }
.mail {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(20,22,26,.06), 0 22px 60px -28px rgba(20,22,26,.36);
  overflow: hidden;
  transform: rotate(-.7deg);
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
  max-width: 560px;
}
.mail:hover { transform: rotate(0deg) translateY(-4px); }
.mail-bar { display: flex; gap: 7px; padding: 15px 20px; border-bottom: 1px solid var(--ink-08); align-items: center; }
.mail-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--paper-3); }
.mail-head { padding: 22px 26px 16px; border-bottom: 1px solid var(--ink-08); }
.mail-subject { font-family: var(--sans); font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.mail-meta { font-size: 13px; color: var(--ink-40); margin-top: 6px; }
.mail-body { padding: 8px 26px 26px; }
/* Näidiskiri järgib päris kirja liigendust: pealkiri kastis, taustad vahelduvad. */
.mail-hello { margin: 14px 0 4px; font-size: 15.5px; font-weight: 600; }
.mail-quote { margin: 0 0 6px; font-size: 14px; font-style: italic; color: var(--ink-55); }
.mail-sec {
  background: #EDF3EE; border-left: 4px solid var(--green); border-radius: 10px;
  padding: 10px 14px; margin: 20px 0 4px;
  font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; color: var(--ink);
}
.mail-sec-alt { background: #F1F3F1; }
.mail-urgent { font-size: 13.5px; color: var(--ink-55); padding: 10px 0 2px; }
.mail-stats { margin-top: 18px; font-size: 11.5px; color: var(--ink-40); text-align: right; }
.mail-item { padding: 14px 0; border-top: 1px solid var(--ink-08); }
.mail-item h4 { font-family: var(--sans); font-size: 15.5px; font-weight: 600; letter-spacing: 0; line-height: 1.4; }
.mail-item .m { font-size: 13.5px; color: var(--ink-55); margin-top: 5px; }
/* Sisulise kontrolli põhjendus, sama roheline kui päris kirjas. */
.mail-why { font-size: 13px; line-height: 1.55; color: #2C5F44; background: rgba(30, 122, 77, .07); border-radius: 8px; padding: 7px 11px; margin-top: 7px; }
.mail-item .n { font-size: 13px; color: var(--accent); margin-top: 8px; display: flex; gap: 7px; align-items: flex-start; }
.mail-item .n .ic { flex: none; margin-top: 2px; }
.mail-foot { padding: 16px 26px; background: var(--paper); font-size: 12.5px; color: var(--ink-40); }

/* ---------------- Erisused ---------------- */
.diffs { margin-top: 60px; display: grid; gap: 0; }
.diff {
  display: grid; grid-template-columns: 116px minmax(0, 1fr);
  gap: 34px;
  padding: 40px 0;
  border-top: 1px solid var(--line-dark);
  align-items: start;
}
.diff:last-child { border-bottom: 1px solid var(--line-dark); }
/* Number on sektsiooni ankur, seega sama kaalu, mis "Kuidas töötab" all. */
.diff-mark { font-family: var(--sans); font-size: clamp(48px, 4.4vw, 64px); font-weight: 600; line-height: .95; letter-spacing: -.03em; color: var(--accent-2); padding-top: 0; }
.diff h3 { font-size: 26px; margin-bottom: 12px; }
.diff p { margin: 0; color: rgba(245,242,234,.68); font-size: 16.5px; }

/* ---------------- Allikad ---------------- */
.sources { margin-top: 54px; }
.source {
  display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr) 40px;
  gap: 28px; align-items: center;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  transition: padding-left .3s cubic-bezier(.2,.7,.3,1);
}
.source:last-child { border-bottom: 1px solid var(--line); }
.source:hover { padding-left: 14px; }
.source b { font-family: var(--sans); font-size: 20px; font-weight: 600; letter-spacing: normal; }
.source span { color: var(--ink-55); font-size: 15.5px; }
.source .ic { display: none; }
.source:hover .ic { color: var(--accent); transform: translateX(4px); }

/* ---------------- Aus võrdlus ---------------- */
.cmp { margin-top: 52px; }
.cmp-head, .cmp-row { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.1fr) minmax(0, 1.1fr); gap: 28px; }
.cmp-head { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.cmp-head span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-40); font-weight: 600; }
.cmp-head .us { color: var(--accent); }
.cmp-row { padding: 22px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.cmp-row > b { font-family: var(--sans); font-size: 19px; font-weight: 500; }
.cmp-row .them { color: var(--ink-40); font-size: 15.5px; }
.cmp-row .us { color: var(--ink); font-size: 15.5px; display: flex; gap: 10px; align-items: flex-start; }
.cmp-row .us .ic { flex: none; color: var(--accent); margin-top: 3px; }
.cmp-foot { margin-top: 28px; font-size: 15.5px; color: var(--ink-55); }

/* ---------------- Väljajätmise lehter ---------------- */
.funnel { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 60px; align-items: center; }
.funnel-rows { display: grid; gap: 4px; }
.funnel-row { display: flex; align-items: center; gap: 20px; }
.funnel-bar {
  height: 54px; border-radius: 10px; display: flex; align-items: center; padding: 0 20px;
  font-family: var(--sans); font-size: 26px; font-weight: 500; color: var(--paper);
  min-width: 76px;
  transition: width 1.1s cubic-bezier(.2,.7,.3,1);
}
.funnel-row:nth-child(1) .funnel-bar { background: rgba(245,242,234,.14); }
.funnel-row:nth-child(2) .funnel-bar { background: rgba(245,242,234,.22); }
.funnel-row:nth-child(3) .funnel-bar { background: rgba(226,82,27,.55); }
.funnel-row:nth-child(4) .funnel-bar { background: var(--accent); }
.funnel-row span { font-size: 15px; color: rgba(245,242,234,.62); }
.funnel-note { margin-top: 30px; font-size: 14.5px; color: rgba(245,242,234,.5); }

/* ---------------- Hind ---------------- */
.plans { margin-top: 58px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.plan {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px 38px 34px;
  background: rgba(255,255,255,.5);
  position: relative;
}
.plan-featured {
  background: var(--forest); color: var(--paper); border-color: transparent;
  margin-top: -26px; padding-bottom: 40px;
}
.plan-badge {
  position: absolute; top: 26px; right: 30px;
  font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  background: var(--accent); color: #fff; padding: 6px 13px; border-radius: 999px;
}
.plan h3 { font-size: 22px; font-family: var(--sans); font-weight: 600; letter-spacing: -.01em; }
.plan-price { display: flex; align-items: baseline; gap: 10px; margin: 20px 0 4px; }
.plan-price b { font-family: var(--sans); font-size: 66px; font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.plan-price span { font-size: 15px; color: var(--ink-55); }
.plan-featured .plan-price span { color: rgba(245,242,234,.6); }
.plan-note { font-size: 15px; color: var(--ink-55); margin: 12px 0 26px; }
.plan-featured .plan-note { color: rgba(245,242,234,.7); }
.plan-save { display: inline-block; font-size: 13px; color: var(--accent-2); margin-bottom: 12px; }
.plan-cta { width: 100%; justify-content: center; }
.plan-feats { list-style: none; margin: 30px 0 0; padding: 26px 0 0; border-top: 1px solid var(--line); }
.plan-featured .plan-feats { border-color: var(--line-dark); }
.plan-feats li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; margin-bottom: 13px; color: var(--ink-70); }
.plan-featured .plan-feats li { color: rgba(245,242,234,.78); }
.plan-feats .ic { flex: none; color: var(--accent); margin-top: 3px; }
.plan-featured .plan-feats .ic { color: var(--accent-2); }
.price-note { margin-top: 34px; font-size: 15px; color: var(--ink-55); }

/* ---------------- KKK ---------------- */
.faq { margin-top: 50px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; background: none; border: 0; text-align: left;
  padding: 26px 44px 26px 0; position: relative;
  font-family: var(--sans); font-size: 22px; font-weight: 500; letter-spacing: -.015em; color: var(--ink);
}
.faq-q .ic { position: absolute; right: 4px; top: 28px; color: var(--ink-40); transition: transform .3s, color .3s; }
.faq-item.open .faq-q .ic { transform: rotate(180deg); color: var(--accent); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .45s cubic-bezier(.2,.7,.3,1); }
.faq-a-in { padding: 0 60px 28px 0; color: var(--ink-70); font-size: 16.5px; }

/* ---------------- Lõpu CTA ---------------- */
.endcta { padding: 118px 0; text-align: center; position: relative; overflow: hidden; }
.endcta h2 { font-size: clamp(34px, 5vw, 64px); max-width: 18ch; margin: 0 auto; }
.endcta p { margin: 24px auto 34px; max-width: 52ch; color: rgba(245,242,234,.72); font-size: 18px; }
.endcta-art { position: absolute; inset: 0; pointer-events: none; opacity: .5; }

/* ---------------- Jalus ---------------- */
.footer { background: var(--paper-2); padding: 72px 0 40px; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.footer h4 { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-40); margin-bottom: 16px; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 10px; }
.footer a { color: var(--ink-70); font-size: 15px; }
.footer a:hover { color: var(--accent); }
.footer-about { font-size: 15px; color: var(--ink-55); max-width: 38ch; margin: 16px 0 0; }
.footer-bottom { margin-top: 54px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; font-size: 13.5px; color: var(--ink-40); flex-wrap: wrap; }

/* ---------------- Vormid ---------------- */
.field { margin-bottom: 22px; }
.field label, .flabel { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; }
.field .help { font-size: 13.5px; color: var(--ink-55); margin-top: 7px; }
.field .err { font-size: 13.5px; color: #B3341A; margin-top: 7px; display: none; }
.field.has-err .err { display: block; }
.field.has-err input, .field.has-err textarea { border-color: #B3341A; }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], textarea, select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.72);
  font: inherit; font-size: 16px; color: var(--ink);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
input:focus, textarea:focus, select:focus {
  outline: 0; border-color: var(--ink); background: #fff;
  box-shadow: 0 0 0 4px rgba(226,82,27,.1);
}
textarea { min-height: 132px; resize: vertical; line-height: 1.55; }
::placeholder { color: var(--ink-40); }

.checkline { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink-70); }
.checkline input { margin-top: 4px; width: 17px; height: 17px; accent-color: var(--accent); flex: none; }

/* Infomull */
.tip { position: relative; display: inline-flex; vertical-align: middle; margin-left: 7px; }
.tip-btn { background: none; border: 0; padding: 0; color: var(--ink-40); display: inline-flex; transition: color .2s; }
.tip-btn:hover, .tip.open .tip-btn { color: var(--accent); }
.tip-bubble {
  position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%) translateY(6px);
  width: min(360px, 78vw);
  background: var(--forest); color: rgba(245,242,234,.88);
  padding: 18px 20px; border-radius: 16px;
  font-size: 14px; line-height: 1.55; font-weight: 400;
  box-shadow: 0 20px 50px -22px rgba(14,43,34,.7);
  opacity: 0; visibility: hidden; transition: opacity .22s, transform .22s, visibility .22s;
  z-index: 40;
}
.tip-bubble b { display: block; color: #fff; margin-bottom: 7px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.tip-bubble::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: var(--forest);
}
.tip.open .tip-bubble { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* ---------------- Registreerimine ---------------- */
.signup { padding: 54px 0 110px; }
.signup-head { margin-bottom: 44px; }
.signup-head h1 { font-size: clamp(34px, 4.4vw, 54px); }
.signup-head .lead { margin-top: 16px; }

.stepper { display: flex; gap: 0; margin-bottom: 46px; border-top: 1px solid var(--line); }
.stepper-item {
  flex: 1; padding: 18px 16px 0; border-top: 2px solid transparent; margin-top: -1px;
  font-size: 14px; color: var(--ink-40); transition: color .3s, border-color .3s;
}
.stepper-item b { display: block; font-family: var(--sans); font-size: 13px; letter-spacing: .1em; margin-bottom: 4px; }
.stepper-item.done { color: var(--ink-55); border-top-color: var(--ink-15); }
.stepper-item.active { color: var(--ink); border-top-color: var(--accent); }

.signup-panel { display: none; }
.signup-panel.active { display: block; animation: fade .4s cubic-bezier(.2,.7,.3,1); }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.signup-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 56px; align-items: start; }
.aside {
  background: rgba(255,255,255,.6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 30px 26px;
  position: sticky; top: 106px;
}
.aside h4 { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-40); margin-bottom: 18px; }
.aside-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.aside-row:last-child { border-bottom: 0; }
.aside-row span { color: var(--ink-55); }
.aside-row b { font-weight: 600; text-align: right; }

/* Ettevõtte otsing */
.ac { position: relative; }
.ac-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 24px 60px -30px rgba(20,22,26,.5);
  max-height: 320px; overflow-y: auto; z-index: 30; display: none;
}
.ac-list.open { display: block; }
.ac-item { padding: 13px 18px; cursor: pointer; border-bottom: 1px solid var(--ink-08); }
.ac-item:last-child { border-bottom: 0; }
.ac-item:hover, .ac-item.sel { background: var(--paper); }
.ac-item b { display: block; font-size: 15.5px; font-weight: 500; }
.ac-item span { font-size: 13px; color: var(--ink-55); }
.ac-state { padding: 15px 18px; font-size: 14px; color: var(--ink-55); }

.company-card {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px 28px; background: rgba(255,255,255,.6); margin-top: 26px;
  display: none;
}
.company-card.show { display: block; animation: fade .35s; }
.company-note { font-size: 14px; color: var(--accent); display: flex; gap: 8px; align-items: center; margin-bottom: 20px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }

/* CPV sildid */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
/* display: flex võidab [hidden] vaikereegli, seega peidame need käsitsi. */
.chips[hidden] { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 15px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255,255,255,.6);
  font-size: 14.5px; color: var(--ink-70);
  transition: all .18s cubic-bezier(.2,.7,.3,1);
}
.chip:hover { border-color: var(--ink-40); }
.chip.on { background: var(--forest); border-color: var(--forest); color: var(--paper); }
.chip.on .ic { color: var(--accent-2); }
.chip .ic { color: var(--ink-40); }
.chip small { opacity: .6; font-size: 12px; }
.chip-suggested { position: relative; }
.chip-suggested::after {
  content: ""; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--accent);
}
.chip.on.chip-suggested::after { display: none; }

.cpv-group { margin-bottom: 30px; }
.cpv-group > b { font-size: 13px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-40); font-weight: 600; }

/* Valdkondade akordionid liitumise 2. sammus */
.kvcat-section { display: block; font-size: 13px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-40); font-weight: 600; margin: 26px 0 10px; }
.kvcat-section:first-child { margin-top: 0; }
.kvcat { border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.55); margin-bottom: 10px; overflow: hidden; }
.kvcat-head {
  width: 100%; display: flex; align-items: center; gap: 12px;
  background: none; border: 0; text-align: left;
  padding: 15px 18px; font-size: 15.5px; font-weight: 500; color: var(--ink);
}
.kvcat-head:hover { background: rgba(255,255,255,.8); }
.kvcat-name { flex: 1; }
.kvcat-count { font-size: 12.5px; color: var(--green); font-weight: 600; white-space: nowrap; }
.kvcat-chev { width: 9px; height: 9px; border-right: 1.8px solid var(--ink-40); border-bottom: 1.8px solid var(--ink-40); transform: rotate(45deg); transition: transform .25s; flex: none; margin-top: -3px; }
.kvcat.open .kvcat-chev { transform: rotate(225deg); margin-top: 3px; }
.kvcat-body { padding: 4px 18px 16px; border-top: 1px solid var(--ink-08); }
.kvcat-body .chips { margin-top: 14px; }
.kvcat-body .chip { padding: 8px 13px; font-size: 13.5px; }
.kvcat-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.kvcat-mini {
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; font-size: 13px; color: var(--ink-70);
  transition: border-color .2s, color .2s;
}
.kvcat-mini:hover { border-color: var(--ink); color: var(--ink); }
.kvcat-more { color: var(--green); border-color: rgba(30,122,77,.35); }
.kvcat-more:hover { border-color: var(--green); color: var(--green-2); }
.kvcat-own { margin-top: 12px; padding: 10px 13px !important; font-size: 13.5px !important; }

/* AI märksõnasoovitaja nupp */
/* Märksõnu koguneb kümneid. Kast kasvab sisu järgi, et kliendile jääks
   kogu nimekiri korraga silma alla ja ta ei peaks kastis kerima. */
.kw-box { min-height: 92px; line-height: 1.6; resize: vertical; overflow: hidden; }

.kw-suggest-btn { margin-top: 12px; }
.kw-suggest-btn .ic { color: var(--green); }

/* Eesti/Euroopa piirkonnavalik */
.scope-row { display: flex; gap: 12px; }
.scope-btn {
  flex: 0 0 auto; min-width: 130px;
  border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.55);
  padding: 14px 24px; font-size: 15.5px; font-weight: 500; color: var(--ink-70);
  transition: all .2s;
}
.scope-btn:hover { border-color: var(--ink-40); }
.scope-btn.on { background: var(--forest); border-color: var(--forest); color: #fff; }
.chip-all { border-style: dashed; font-weight: 600; }
.chip-all.on { border-style: solid; }

/* Kokkuvõte */
.summary { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 32px; background: rgba(255,255,255,.6); margin: 30px 0; }
.summary h4 { font-family: var(--sans); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-40); margin-bottom: 18px; }
.summary-row { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.summary-row:last-child { border-bottom: 0; }
.summary-row span { color: var(--ink-55); }
.summary-row b { font-weight: 600; text-align: right; }
.summary-total { font-family: var(--sans); font-size: 19px; }
/* Sooduskoodi rida on rohelisel taustal, sest see on ainus rida, mis muudab
   seda, mida klient tegelikult maksma hakkab. */
.summary-code { background: rgba(29,110,66,.07); border-radius: 12px; margin: -4px 0 6px; padding: 12px 14px; border-bottom: 0; }
.summary-code span, .summary-code b { color: var(--green); }
.summary-code b { font-weight: 700; }
/* Sama roheline keel kliendialal ja arvel: teenitud tasuta aeg. */
/* Kliendiala leiuplokid järgivad hommikuse kirja liigendust. */
.find-section { background: #EDF3EE; border-left: 4px solid var(--green); border-radius: 10px; padding: 12px 16px; margin: 30px 0 12px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.find-section:first-child { margin-top: 0; }
.find-urgent { font-size: 14px; line-height: 1.7; color: var(--ink-55); padding: 6px 0; }
/* Küpsiste nõusolek. Ei kata sisu kinni ega hüppa ette, istub all servas. */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 600; background: var(--paper-1, #fff); border-top: 1px solid var(--line); box-shadow: 0 -8px 30px rgba(20,22,26,.08); padding: 16px 20px; }
.consent[hidden] { display: none; }
/* Kuni küpsiste valik on tegemata, ei tohi chati nupp seda kinni katta.
   Telefonis on riba lehe laiune ja nupp jääks täpselt nuppude ette. */
body.consent-open .chat-fab { opacity: 0; pointer-events: none; }
.consent-in { max-width: 1120px; margin: 0 auto; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.consent-text { flex: 1; min-width: 260px; margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-55); }
.consent-actions { display: flex; gap: 10px; flex: none; }
@media (max-width: 640px) { .consent-actions { width: 100%; } .consent-actions .btn { flex: 1; justify-content: center; } }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--green); color: #fff; padding: 12px 20px; border-radius: 0 0 12px 0; font-weight: 600; }
.skip-link:focus { left: 0; }
.copy-row { display: flex; gap: 10px; align-items: stretch; }
.copy-row input { flex: 1; min-width: 0; }
.copy-row .btn { flex: none; white-space: nowrap; }
.bonus-line { margin-top: 12px; padding: 11px 14px; border-radius: 12px; background: rgba(29,110,66,.07); color: var(--green); font-size: 14.5px; font-weight: 600; }

.plan-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
.plan-opt {
  border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px;
  cursor: pointer; background: rgba(255,255,255,.5);
  transition: border-color .2s, background .2s, transform .2s;
  position: relative;
}
.plan-opt:hover { border-color: var(--ink-40); }
.plan-opt.on { border-color: var(--ink); background: #fff; }
.plan-opt.on::before {
  content: ""; position: absolute; top: 18px; right: 18px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
}
.plan-opt b { display: block; font-family: var(--sans); font-size: 24px; font-weight: 500; }
.plan-opt span { font-size: 13.5px; color: var(--ink-55); }
.plan-opt em { display: block; font-style: normal; font-size: 13px; color: var(--accent); margin-top: 6px; }

/* Nupud vormi all keskel, sest vasakus servas jäid need pika välja kõrval märkamata. */
.signup-nav { display: flex; gap: 14px; align-items: center; justify-content: center; margin-top: 34px; }

/* Lõpetatud */
.done { text-align: center; max-width: 620px; margin: 40px auto; }
.done h2 { font-size: 40px; margin-bottom: 18px; }
.done p { color: var(--ink-70); font-size: 17px; }
.done-actions { display: flex; gap: 14px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.done-art { margin: 0 auto 30px; width: 120px; }

/* ---------------- Kliendiala ---------------- */
.acc { padding: 48px 0 100px; }
.acc-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.acc-head h1 { font-size: clamp(30px, 3.6vw, 44px); }
.acc-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 38px; }
.acc-tab {
  background: none; border: 0; padding: 14px 20px; font-size: 15px; color: var(--ink-55);
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s, border-color .2s;
}
.acc-tab:hover { color: var(--ink); }
.acc-tab.on { color: var(--ink); border-bottom-color: var(--accent); }
.acc-pane { display: none; }
.acc-pane.on { display: block; animation: fade .35s; }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.stat { padding: 24px 26px; border-right: 1px solid var(--line); }
/* Esimene lahter algab veeru servast, ülejäänud saavad eraldusjoonest ruumi. */
.stat:first-child { padding-left: 0; }
.stat:last-child { border-right: 0; }
.stat span { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-40); }
.stat b { display: block; font-family: var(--sans); font-size: 30px; font-weight: 500; margin-top: 6px; letter-spacing: -.02em; }

/* Soovitusriba istub numbrite all ja on nähtav igal vahelehel. */
.ref-bar { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: 18px 22px; margin-bottom: 34px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .5); }
.ref-bar-text { flex: 1 1 300px; min-width: 0; }
.ref-bar-text b { display: block; font-size: 15px; font-weight: 600; }
.ref-bar-text span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--ink-60); }
.ref-bar-copy { flex: 0 1 420px; }
.ref-bar-copy input { font-size: 14px; }

.pill { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; padding: 5px 12px; border-radius: 999px; background: var(--accent-soft); color: #A33F12; font-weight: 500; }
.pill-ok { background: #DCEEDF; color: #1D5B2C; }
.pill-warn { background: #FBEBCF; color: #8A5B08; }
.pill-off { background: var(--paper-3); color: var(--ink-55); }
.pill-due { background: #FBE0DC; color: #8E2A1B; }

.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
/* Kitsal ekraanil ei tohi tabel lehte laiaks venitada, vaid kerib ise. */
.tbl-wrap { width: 100%; overflow-x: auto; }
.tbl-wrap .tbl { min-width: 640px; }
.tbl th { text-align: left; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-40); font-weight: 600; padding: 0 16px 12px 0; border-bottom: 1px solid var(--line); }
.tbl td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:hover td { background: rgba(255,255,255,.4); }
.empty { padding: 40px 0; color: var(--ink-55); font-size: 16px; }

.find { padding: 20px 0; border-bottom: 1px solid var(--line); }
.find h4 { font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: 0; }
.find .m { font-size: 13.5px; color: var(--ink-55); margin-top: 5px; }
/* Tõlge ja põhjendus, samad mis hommikuses kirjas. */
.find-et { font-size: 13px; color: var(--ink-40); margin-top: 3px; }
.find-why { font-size: 13px; line-height: 1.55; color: #2C5F44; background: rgba(30, 122, 77, .07); border-radius: 8px; padding: 7px 11px; margin-top: 8px; }

.login-box { max-width: 420px; margin: 60px auto 100px; }
.login-box h1 { font-size: 38px; margin-bottom: 12px; }
.notice { padding: 14px 18px; border-radius: 13px; font-size: 14.5px; margin-bottom: 20px; }
.notice-err { background: #FBE2DC; color: #8C2A12; }
.notice-ok { background: #DCEEDF; color: #1D5B2C; }
.notice-warn { background: #FDF3E7; color: #7A5520; }
/* Mitu hanget välistus välja jättis. Peab olema näha, muidu sööb liiga
   lai sõna märkamatult ära ka selle, mida klient tahtis. */
.excl-count { margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: var(--ink-55); background: rgba(20,22,26,.04); border-radius: 10px; padding: 9px 13px; }

/* ---------------- Chat ---------------- */
.chat-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 500;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ink); color: #fff;
  padding: 14px 22px; border-radius: 999px; border: 0;
  box-shadow: 0 18px 40px -18px rgba(20,22,26,.8);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), background .22s;
  font-size: 15px;
}
.chat-fab:hover { transform: translateY(-3px); background: #23262c; }
.chat-panel {
  position: fixed; right: 24px; bottom: 24px; z-index: 501;
  width: min(400px, calc(100vw - 32px)); height: min(620px, calc(100vh - 48px));
  background: var(--paper); border-radius: 24px; overflow: hidden;
  display: none; flex-direction: column;
  box-shadow: 0 30px 80px -30px rgba(20,22,26,.55), 0 0 0 1px var(--line);
}
.chat-panel.open { display: flex; animation: fade .3s; }
.chat-head { background: var(--ink); color: #fff; padding: 20px 22px 18px; }
.chat-head b { font-family: var(--sans); font-size: 19px; font-weight: 500; display: block; }
.chat-head p { margin: 6px 0 0; font-size: 13px; color: rgba(245,242,234,.65); line-height: 1.5; }
.chat-close { position: absolute; top: 18px; right: 18px; background: none; border: 0; color: rgba(245,242,234,.7); padding: 4px; }
.chat-close:hover { color: #fff; }
.chat-log { flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.msg { max-width: 84%; padding: 13px 16px; border-radius: 16px; font-size: 14.5px; line-height: 1.55; }
.msg-bot { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 5px; align-self: flex-start; }
.msg-user { background: var(--ink); color: #fff; border-bottom-right-radius: 5px; align-self: flex-end; }
.msg-sys { align-self: center; font-size: 12.5px; color: var(--ink-40); text-align: center; }
.chat-form { border-top: 1px solid var(--line); padding: 14px; display: flex; gap: 10px; background: rgba(255,255,255,.5); }
.chat-form input { border-radius: 999px; padding: 12px 18px; font-size: 15px; }
.chat-send { background: var(--accent); color: #fff; border: 0; border-radius: 50%; width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; transition: background .2s; }
.chat-send:hover { background: #C84513; }
.chat-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-view[hidden] { display: none; }
.chat-support-btn {
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--green); color: #fff; border: 0;
  padding: 9px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 500;
  transition: background .2s;
}
.chat-support-btn:hover { background: var(--green-2); }
.chat-support { overflow-y: auto; padding: 18px 20px; }
.chat-support .field { margin-bottom: 14px; }
.chat-support .field label { font-size: 13px; }
.chat-support input, .chat-support textarea { padding: 11px 13px; font-size: 14.5px; background: #fff; }
.chat-support textarea { min-height: 88px; }
.chat-support-lead { margin: 0 0 16px; font-size: 13.5px; color: var(--ink-55); line-height: 1.55; }
.chat-support-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.chat-quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 22px 16px; }
.chat-quick button { font-size: 13px; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.6); color: var(--ink-70); transition: all .18s; }
.chat-quick button:hover { border-color: var(--ink); color: var(--ink); }
.dots span { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-40); margin-right: 4px; animation: bl 1.2s infinite; }
.dots span:nth-child(2) { animation-delay: .18s; }
.dots span:nth-child(3) { animation-delay: .36s; }
@keyframes bl { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* ---------------- Õiguslikud lehed ---------------- */
.legal { padding: 54px 0 110px; }
.legal-grid { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 60px; align-items: start; }
.legal-toc { position: sticky; top: 106px; font-size: 14.5px; }
.legal-toc a { display: block; padding: 7px 0; color: var(--ink-55); border-left: 2px solid transparent; padding-left: 14px; margin-left: -16px; transition: all .2s; }
.legal-toc a:hover, .legal-toc a.on { color: var(--ink); border-left-color: var(--accent); }
.legal-body h1 { font-size: clamp(32px, 4vw, 46px); margin-bottom: 10px; }
.legal-body .updated { font-size: 14px; color: var(--ink-40); margin-bottom: 42px; }
.legal-body h2 { font-size: 26px; margin: 46px 0 16px; scroll-margin-top: 110px; }
.legal-body h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; margin: 26px 0 10px; letter-spacing: 0; }
.legal-body p, .legal-body li { color: var(--ink-70); font-size: 16.5px; }
.legal-body p { margin: 0 0 16px; }
.legal-body ul, .legal-body ol { padding-left: 22px; margin: 0 0 18px; }
.legal-body li { margin-bottom: 9px; }
.legal-body table { width: 100%; border-collapse: collapse; margin: 20px 0 26px; font-size: 15.5px; }
.legal-body th { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-40); }
.legal-body td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-70); }

/* ---------------- Ilmumine kerimisel ---------------- */
.rise { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.rise.in { opacity: 1; transform: none; }

/* ---------------- Kohandused väiksemale ekraanile ---------------- */
@media (max-width: 1080px) {
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split-sticky { position: static; }
  .signup-grid { grid-template-columns: 1fr; gap: 34px; }
  .aside { position: static; }
  .legal-grid { grid-template-columns: 1fr; gap: 30px; }
  .legal-toc { position: static; display: none; }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav.menu-open .nav-links {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    position: absolute; top: 78px; left: 0; right: 0;
    background: var(--paper); border-bottom: 1px solid var(--line); padding: 18px 28px 26px;
  }
  .nav.menu-open .nav-links a { padding: 10px 0; font-size: 17px; }
  .nav.menu-open .nav-extra { display: block; }
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero-art { order: -1; max-width: 460px; }
  .hero-stats { margin-top: 32px; }
  .hero-stat { min-width: 140px; padding: 16px 18px; }
  .step { grid-template-columns: 78px 1fr; gap: 20px; }
  .step-num { font-size: 56px; }
  .step p { grid-column: 2; }
  .plans { grid-template-columns: 1fr; }
  .plan-featured { margin-top: 0; }
  .diff { grid-template-columns: 1fr; gap: 12px; }
  .source { grid-template-columns: 1fr; gap: 8px; }
  .source .ic { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .ref-bar { flex-direction: column; align-items: stretch; gap: 14px; }
  .ref-bar-copy { flex: none; }
  .stat { border-bottom: 1px solid var(--line); }
  .grid-2 { grid-template-columns: 1fr; }
  .plan-picker { grid-template-columns: 1fr; }
  .cmp-head { display: none; }
  .cmp-row { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .cmp-row .them::before { content: "✕ "; color: var(--ink-40); }
  .funnel { grid-template-columns: 1fr; gap: 34px; }
  .sec { padding: 74px 0; }
  .stepper-item { font-size: 0; padding: 14px 8px 0; }
  .stepper-item b { font-size: 12px; }
  .chat-panel { right: 8px; bottom: 8px; height: calc(100vh - 16px); border-radius: 20px; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  /* Kitsal ekraanil ei mahu logo, keelevahetus, sisselogimine ja kutsungnupp
     ühele reale. Ribale jäävad logo, kutsungnupp ja menüünupp, ülejäänu leiab
     kasutaja menüü alt. */
  .nav-in { gap: 12px; padding: 0 20px; height: 66px; }
  /* Telefonis kerib sisu ribale nii lähedale, et vähimgi läbipaistvus
     hakkab segama. Seal on riba alati kindel taust. */
  .nav, .nav.is-stuck { background: rgb(243, 243, 244); }
  .nav-side { gap: 6px; }
  .nav-side .lang-switch, .nav-side .btn-ghost { display: none; }
  .btn-sm { padding: 10px 15px; font-size: 13.5px; }
  .brand span { font-size: 16px; }
  .nav.menu-open .nav-links { top: 66px; padding: 14px 20px 22px; }
  .cta-long { display: none; }
  .cta-short { display: inline; }
  .shell { padding: 0 20px; }
  .footer-grid { grid-template-columns: 1fr; }
  .mail { transform: none; }
  .tbl { font-size: 14px; }
  .tbl th:nth-child(3), .tbl td:nth-child(3) { display: none; }
}

@media (max-width: 900px) {
  .rise { opacity: 1; transform: none; transition: none; }
}

/* Kõige kitsamal ekraanil jääb logo juurde ainult märk, nimi kordub niikuinii
   lehe jaluses. Tavalisel telefonil on nimi alles. */
@media (max-width: 344px) {
  .brand span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .rise { opacity: 1; transform: none; }
}

/* ---------------- Kliendiarvustused ---------------- */
/* Kuvatakse ainult siis, kui klient on tsitaadi kinnitanud. Tühja plokki me ei
   joonista ja väljamõeldud tsitaate siin ei ole. */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.review { margin: 0; padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.6); }
.review blockquote { margin: 0 0 16px; font-size: 16.5px; line-height: 1.6; color: var(--ink); }
.review figcaption strong { display: block; font-size: 14.5px; }
.review figcaption span { font-size: 13.5px; color: var(--ink-55); }
@media (max-width: 900px) { .reviews { grid-template-columns: 1fr; } }

/* Leiud päevade kaupa: iga hommiku kiri on oma plokk. */
.find-day { margin-bottom: 26px; }
.find-day-head { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-40);
  padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }

/* Sooduskoodi lahter hinnavaliku all. Pehme roheline taust ütleb, et siit saab
   midagi võita, ilma et see hüüaks üle hinnakastide. */
.promo-box { margin-top: 18px; padding: 18px 20px; border: 1px dashed var(--green);
  border-radius: 16px; background: #EAF4EE; }
.promo-box label { display: block; font-size: 14.5px; font-weight: 600; color: #17603C; margin-bottom: 8px; }
.promo-box input { width: 100%; background: #fff; border: 1px solid rgba(30,122,77,.35);
  border-radius: 12px; padding: 13px 16px; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; }
.promo-box input:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px rgba(30,122,77,.15); }
.promo-note { margin-top: 8px; font-size: 13.5px; color: #2E6B4C; }
.promo-row { display: flex; gap: 10px; align-items: stretch; }
.promo-row input { flex: 1; }
.promo-row .btn { white-space: nowrap; }
.promo-result { margin-top: 10px; font-size: 13.5px; min-height: 18px; }
.promo-result.ok { color: #17603C; }
.promo-result.bad { color: #A33F12; }

/* Muud valdkonnad avaneb ühe klõpsuga, vaikimisi on nimekiri koos. */
.kvcat-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: 0; padding: 6px 0; cursor: pointer; text-align: left; }
.kvcat-toggle .kvcat-chev { width: 10px; height: 10px; border-right: 2px solid var(--ink-40);
  border-bottom: 2px solid var(--ink-40); transform: rotate(45deg); transition: transform .2s; }
.kvcat-toggle.open .kvcat-chev { transform: rotate(-135deg); }

/* ---------------- Kontaktileht ---------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; margin-top: 40px; align-items: start; }
.contact-form .field { margin-bottom: 18px; }
.contact-info { background: rgba(255,255,255,.55); border: 1px solid var(--line); border-radius: 18px; padding: 28px; }
.contact-info p { font-size: 15.5px; }
.contact-info h2 { font-size: 20px; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; gap: 28px; } }