/* Tootelehe stiil. Toetub saidi enda /style.css-ile: sealt tulevad --bg, --card,
   --line, --text, --muted, --blue, --radius, --shell ja fondid (Fraunces + Inter).
   Sama disainikeel kui ltc-tablet.html: eyebrow-pealkirjad, kaardid, gradient-nupp. */

/* Iga var() kannab varuväärtust: kui saidi /style.css ei laadu või liigub,
   näeb leht ikka välja nagu peab. sfhdigital.com-il võidavad saidi enda väärtused. */
*{box-sizing:border-box}
body{background:var(--bg, #0e141f);color:var(--text, #eef2f8);font-family:var(--font-body, "Inter",-apple-system,"Segoe UI",sans-serif);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;margin:0}
a{color:var(--blue, #5aa7ff)}

.leht{width:min(880px,calc(100% - 48px));margin:0 auto;padding:64px 0 90px}

.kangelane{display:flex;gap:32px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.kangelane img{width:132px;height:132px;border-radius:26px;flex:0 0 auto;
  border:1px solid var(--line, rgba(154,178,214,.16))}
h1{font-family:var(--font-display, "Fraunces",Georgia,serif);font-weight:550;font-size:clamp(38px,5.4vw,60px);
  line-height:1.06;letter-spacing:-.015em;margin:0 0 14px}
.alapealkiri{color:var(--muted, #a3aec1);font-size:18px;margin:0;max-width:46ch}

h2{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue, #5aa7ff);margin:56px 0 16px}

.ost{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin:36px 0 0;
  background:var(--card, #171f2e);border:1px solid var(--line, rgba(154,178,214,.16));border-radius:var(--radius, 18px);
  padding:26px 28px}
.hind{font-family:var(--font-display, "Fraunces",Georgia,serif);font-weight:600;font-size:34px;letter-spacing:-.02em}
.hind s{color:var(--faint, #76839a);font-size:19px;font-weight:400;margin-left:12px;
  font-family:var(--font-body, "Inter",-apple-system,"Segoe UI",sans-serif)}
.nupp{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-weight:600;font-size:15px;padding:13px 22px;border-radius:12px;
  background:linear-gradient(135deg,var(--blue, #5aa7ff),var(--blue-deep, #2f7fe8));color:#071120;
  transition:transform .15s ease,background .18s ease}
.nupp:hover{transform:translateY(-1px)}
.peen{color:var(--muted, #a3aec1);font-size:14px}

.ruudustik{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.kast{background:var(--card, #171f2e);border:1px solid var(--line, rgba(154,178,214,.16));border-radius:var(--radius, 18px);
  padding:26px 26px;transition:border-color .2s ease,transform .2s ease}
.kast:hover{border-color:var(--line-strong, rgba(154,178,214,.28));transform:translateY(-2px)}
.kast h3{margin:0 0 10px;font-size:17px;font-weight:600}
.kast p{margin:0;color:var(--muted, #a3aec1);font-size:15px}

table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:14px 14px;border-bottom:1px solid var(--line, rgba(154,178,214,.16));vertical-align:top}
th{color:var(--faint, #76839a);font-weight:600;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.09em;width:32%}

.silt{display:inline-flex;align-items:center;font-size:11.5px;font-weight:650;
  letter-spacing:.09em;text-transform:uppercase;border-radius:999px;padding:5px 12px;
  border:1px solid rgba(90,209,154,.45);color:#5ad19a}
.silt.valmis{color:#5ad19a;border-color:rgba(90,209,154,.45)}
.silt.ootel{border-color:var(--line-strong, rgba(154,178,214,.28));color:var(--muted, #a3aec1)}

.teade{background:var(--card, #171f2e);border:1px solid var(--line, rgba(154,178,214,.16));border-left:3px solid var(--blue, #5aa7ff);
  border-radius:var(--radius, 18px);padding:20px 24px;color:var(--muted, #a3aec1);font-size:15px}
.hele{color:var(--text, #eef2f8)}

footer{margin-top:72px;padding-top:26px;border-top:1px solid var(--line, rgba(154,178,214,.16));
  color:var(--muted, #a3aec1);font-size:14px;display:flex;gap:20px;flex-wrap:wrap}

@media (max-width:560px){
  .leht{width:calc(100% - 32px);padding:40px 0 64px}
  .kangelane{gap:20px}
  .kangelane img{width:96px;height:96px;border-radius:20px}
  th,td{display:block;width:auto}
  th{border-bottom:none;padding-bottom:4px}
}

/* NB: tooteleht EI laadi stiil.css-i, seega kõik dialoogi jaoks vajalik peab olema SIIN.
   Esimene katse jättis .peidus, .margi ja nupustiilid puudu — dialoog oli lehe avamisest
   saati ekraanil ja laiali valgunud. */
.peidus{display:none !important}
button{font:inherit;border:none;border-radius:12px;cursor:pointer;font-weight:600;font-size:15px;
  padding:12px 20px;background:linear-gradient(135deg,var(--blue, #5aa7ff),var(--blue-deep, #2f7fe8));
  color:#071120;transition:transform .15s ease,opacity .15s ease}
button:hover:not(:disabled){transform:translateY(-1px)}
button:disabled{opacity:.45;cursor:default;transform:none}
button.teine{background:none;border:1px solid var(--line-strong, rgba(154,178,214,.28));
  color:var(--text, #eef2f8)}
.margi{display:flex;align-items:flex-start;gap:10px;color:var(--muted, #a3aec1);font-size:14.5px;
  line-height:1.5;cursor:pointer}
.margi input[type=checkbox]{width:auto;margin:3px 0 0;flex:0 0 auto;accent-color:var(--blue, #5aa7ff)}
/* Sildi tekst PEAB olema ühes span-is: muidu saab iga <strong> ja <a> omaette
   flex-elemendiks ja lause laguneb tulpadeks. */
.margi>span{flex:1 1 auto}

/* Allalaadimise nõusolekuaken. Ükski stiil ei ole inline-ina HTML-is, muidu
   vajaks CSP style-src 'unsafe-inline'. */
.varjund{position:fixed;inset:0;background:rgba(5,8,14,.78);display:flex;
  align-items:center;justify-content:center;padding:20px;z-index:50}
.dialoog{background:var(--card, #171f2e);border:1px solid var(--line-strong, rgba(154,178,214,.28));
  border-radius:var(--radius, 18px);padding:28px 30px;max-width:520px;width:100%}
.dialoog h2{margin:0 0 18px;color:var(--tekst, #eef2f8);font-size:15px;letter-spacing:.06em}
.dialoog .margi{align-items:flex-start;line-height:1.5;margin-top:14px}
.dialoog .margi input{margin-top:4px;flex:0 0 auto}
.dialoogiNupud{margin-top:24px;justify-content:flex-end}
.dialoog .peen{margin:18px 0 0}

/* 07.10.2026: joonised ilma inline-stiilita (domeeni CSP style-src 'self' blokeerib style-atribuudid) */
.joonis{margin:16px 0 8px;text-align:center}
.joonis-demo{margin-top:28px}
.joonis img{width:100%;max-width:760px;height:auto;border-radius:12px;border:1px solid rgba(255,255,255,.12)}
.joonis figcaption{margin-top:8px;font-size:.9em;opacity:.75}

/* 07.10.2026: võrdluspilt klõpsuga suureks (lightbox); CSP: ilma inline-stiilita */
.joonis a.suurenda{display:inline-block;cursor:zoom-in}
.valgustus{position:fixed;inset:0;background:rgba(8,12,20,.94);display:flex;align-items:center;justify-content:center;z-index:1000;cursor:zoom-out;padding:24px}
.valgustus img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:12px;border:1px solid rgba(255,255,255,.15)}