/* Olingo Sken — pages for Czech private practices.
   Reader: a doctor in their 50s, on a phone, from a Facebook ad.

   Design system v2 — "z papíru do počítače":
   Two worlds on one page. The paper world (manila, typewriter, a round blue
   razítko) becomes the app world (clean white, stamp-blue UI). The signature
   element is the living zpráva in the hero — a believable Czech medical
   document that visibly turns into text. Serif display = the world of
   letterheads; stamp blue = the doctor's own ink, not SaaS green. */

:root {
  color-scheme: light;
  --bg: #fafaf7;
  --surface: #ffffff;
  --ink: #16181d;
  --ink-2: #545b64;
  --line: #e5e4dc;

  --blue: #1e4fae;        /* razítko / CTA */
  --blue-dark: #173e8a;
  --blue-wash: #eef2fb;

  --manila: #f3eee2;      /* paper world */
  --paper: #fffef9;
  --type-ink: #33363b;

  --radius: 12px;
  --shadow: 0 1px 2px rgba(23, 32, 51, 0.05), 0 12px 32px rgba(23, 32, 51, 0.07);

  --serif: Georgia, "Times New Roman", "Noto Serif", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Courier New", Courier, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 60rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 1.5rem); }

img { max-width: 100%; display: block; }

/* ---------- header ---------- */

.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.brand {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.brand em { font-style: normal; color: var(--blue); }
.toptel {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.toptel span { color: var(--ink-2); font-weight: 400; }
@media (max-width: 480px) { .toptel span { display: none; } }

/* ---------- shared section grammar ---------- */

section { padding: clamp(2.6rem, 7vw, 4.2rem) 0 0; }

.eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 0.7rem;
}

h1, h2 {
  font-family: var(--serif);
  letter-spacing: -0.015em;
  line-height: 1.08;
  margin: 0 0 0.9rem;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 6.5vw, 3.4rem); font-weight: 700; max-width: 21ch; }
h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 700; max-width: 26ch; }

.lead {
  font-size: clamp(1.02rem, 2.6vw, 1.2rem);
  color: var(--ink-2);
  max-width: 36rem;
  margin: 0 0 1.2rem;
  text-wrap: pretty;
}
.lead strong { color: var(--ink); }

/* fact chips — price + compatibility live here, nowhere else */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.6rem; }
.chips span {
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.38rem 0.8rem;
  background: var(--blue-wash);
  color: var(--blue-dark);
  border-radius: 999px;
  white-space: nowrap;
}

/* small text-link CTA under the chips — gets the phone reader to the form
   before the scanner demo */
.jump { margin: -0.9rem 0 1.6rem; font-size: 0.95rem; }
.jump a { color: var(--blue); font-weight: 700; text-underline-offset: 3px; }

/* ---------- the signature: paper → app ---------- */

.scanner {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(0.9rem, 3vw, 1.4rem);
}

.samples { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.6rem; }
.samples button {
  flex: 0 0 auto;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
}
.samples button[aria-pressed="true"] {
  color: var(--blue-dark);
  border-color: var(--blue);
  background: var(--blue-wash);
}

.stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(0.6rem, 2vw, 1.1rem);
  align-items: stretch;
}
@media (max-width: 720px) {
  .stage { grid-template-columns: 1fr; }
  .stage .arrow { transform: rotate(90deg); justify-self: center; padding: 0.1rem 0; }
}

.arrow {
  align-self: center;
  color: var(--blue);
  font-size: 1.5rem;
  user-select: none;
}

/* the paper document */
.doc {
  position: relative;
  background:
    linear-gradient(160deg, rgba(0,0,0,0.035), transparent 30%, rgba(0,0,0,0.05)),
    var(--paper);
  border: 1px solid #e2dccb;
  border-radius: 4px;
  transform: rotate(-1deg);
  box-shadow: 3px 6px 18px rgba(60, 48, 20, 0.16);
  padding: 1rem 1.1rem 2.9rem;
  overflow: hidden;
  min-height: 17rem;
}
.doc .head {
  border-bottom: 2px solid var(--type-ink);
  padding-bottom: 0.45rem;
  margin-bottom: 0.6rem;
}
.doc .head .clinic {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--type-ink);
}
.doc .head .addr {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--type-ink);
  opacity: 0.75;
  margin-top: 0.15rem;
}
.doc .body {
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.55;
  color: var(--type-ink);
  white-space: pre-wrap;
}

/* razítko + podpis — what makes it read as a real Czech document.
   SVGs use currentColor so the ink lightens with the dark palette. */
.doc .sig, .doc .stamp { color: var(--blue); }
.doc .stamp {
  position: absolute;
  right: 0.9rem;
  bottom: 0.6rem;
  width: 5.2rem;
  height: 5.2rem;
  transform: rotate(-9deg);
  opacity: 0.85;
  pointer-events: none;
}
.doc .sig {
  position: absolute;
  right: 5.6rem;
  bottom: 1.4rem;
  width: 5rem;
  opacity: 0.9;
  pointer-events: none;
}

/* scan line during processing */
.doc .scanline {
  position: absolute;
  left: 0; right: 0; top: -14%;
  height: 12%;
  background: linear-gradient(to bottom,
    transparent, color-mix(in srgb, var(--blue) 22%, transparent) 45%,
    var(--blue) 50%,
    color-mix(in srgb, var(--blue) 22%, transparent) 55%, transparent);
  opacity: 0;
  pointer-events: none;
}
.doc.scanning .scanline { opacity: 1; animation: scan 1.1s ease-in-out 1 forwards; }
@keyframes scan { from { top: -14%; } to { top: 102%; } }

/* the app window — the "screenshot" */
.appwin {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  min-height: 17rem;
  overflow: hidden;
}
.appwin .bar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 60%, var(--bg));
}
.appwin .dots { display: flex; gap: 0.28rem; }
.appwin .dots i {
  width: 0.6rem; height: 0.6rem; border-radius: 50%;
  background: var(--line); display: block;
}
.appwin .bar .t {
  font-size: 0.78rem; font-weight: 700; color: var(--ink);
}
.appwin .bar .del {
  margin-left: auto;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--blue-dark);
  background: var(--blue-wash);
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  white-space: nowrap;
}
.appwin .file {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.72rem;
  color: var(--ink-2);
  padding: 0.5rem 0.85rem;
  border-bottom: 1px dashed var(--line);
}
.appwin .file b { color: var(--ink); font-weight: 600; }
.appwin .out {
  flex: 1;
  padding: 0.8rem 0.9rem;
  font-size: 0.8rem;
  line-height: 1.55;
  white-space: pre-wrap;
  color: var(--ink);
}
.appwin .out .caret {
  display: inline-block; width: 2px; height: 1em;
  background: var(--blue); vertical-align: -0.15em;
  animation: blink 0.7s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.appwin .actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.65rem 0.85rem;
  border-top: 1px solid var(--line);
}
.appwin .status { font-size: 0.74rem; font-weight: 600; color: var(--ink-2); }
.appwin .status.ok { color: var(--blue-dark); }
.copybtn {
  margin-left: auto;
  font: inherit; font-size: 0.82rem; font-weight: 700;
  color: #fff;
  background: var(--blue);
  border: 0; border-radius: 8px;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
}
.copybtn:hover { background: var(--blue-dark); }

.scanner .note { font-size: 0.76rem; color: var(--ink-2); margin: 0.8rem 0 0; }

/* ---------- pain strip with photo ---------- */

.strip {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(1.2rem, 4vw, 2.4rem);
  align-items: center;
}
@media (max-width: 720px) { .strip { grid-template-columns: 1fr; } }
.strip figure {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.strip img { width: 100%; height: 100%; max-height: 310px; object-fit: cover; }
.strip img.portrait { max-height: 390px; }
.strip ul { list-style: none; padding: 0; margin: 0; }
.strip li {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.98rem;
  color: var(--ink-2);
}
.strip li:last-child { border-bottom: 0; }
.strip li b { color: var(--ink); font-weight: 600; }

/* ---------- call form ---------- */

.call {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.3rem, 4vw, 2rem);
  max-width: 34rem;
}
.call p { margin: 0 0 1.1rem; color: var(--ink-2); font-size: 0.97rem; }
.call form { display: grid; gap: 0.6rem; }
.call input {
  font: inherit;
  font-size: 1.02rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  width: 100%;
}
.call input:focus { outline: 2px solid var(--blue); outline-offset: -1px; }
.call button[type="submit"] {
  font: inherit; font-size: 1.08rem; font-weight: 700;
  padding: 0.95rem;
  border: 0; border-radius: 8px;
  background: var(--blue); color: #fff;
  cursor: pointer;
}
.call button[type="submit"]:hover { background: var(--blue-dark); }
.call button:disabled { opacity: 0.55; cursor: progress; }
.fine { font-size: 0.76rem; color: var(--ink-2); margin: 0.5rem 0 0; }
.fine a { color: var(--ink-2); }
.ok, .err {
  border-left: 3px solid var(--blue);
  background: var(--blue-wash);
  color: var(--ink);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  margin-top: 0.6rem;
}
.err { border-left-color: #b3541e; background: color-mix(in srgb, #b3541e 8%, var(--surface)); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }

/* radio rows (doporucit) */
.kinds { display: grid; gap: 0.45rem; }
.kinds label {
  display: flex; gap: 0.6rem; align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  font-size: 0.95rem;
  cursor: pointer;
  background: var(--bg);
}
.kinds input { width: auto; accent-color: var(--blue); }

/* code box (doporucit) */
.codebox {
  border: 2px dashed var(--blue);
  border-radius: var(--radius);
  padding: 1.2rem;
  text-align: center;
  margin-top: 0.8rem;
  background: var(--surface);
}
.codebox .code {
  font-family: var(--mono);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--blue-dark);
}
.codebox p { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--ink-2); }
.codebox .lnk { word-break: break-all; font-size: 0.86rem; }
.codebox button {
  font: inherit; font-size: 0.88rem; font-weight: 700; margin-top: 0.7rem;
  color: var(--blue-dark); background: var(--blue-wash);
  border: 0; border-radius: 8px; padding: 0.55rem 0.95rem; cursor: pointer;
}

/* numbered steps — order carries real information here */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.8rem; }
.steps-col { grid-template-columns: 1fr; }
.steps div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.steps .n {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--blue);
  display: block;
  margin-bottom: 0.3rem;
}
.steps h3 { font-size: 0.98rem; margin: 0 0 0.3rem; }
.steps p { margin: 0; font-size: 0.9rem; color: var(--ink-2); }

/* ---------- trust ---------- */

.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.6rem; }
.trust h3 { font-size: 1rem; margin: 0 0 0.35rem; font-weight: 700; }
.trust p { margin: 0; font-size: 0.93rem; color: var(--ink-2); }

/* ---------- ecosystem ---------- */

.eco {
  border-top: 1px solid var(--line);
  margin-top: clamp(2.6rem, 7vw, 4.2rem);
  padding-top: clamp(1.8rem, 5vw, 2.6rem);
}
.eco .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.8rem; margin-top: 1rem; }
.eco .row a {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  text-decoration: none;
  color: inherit;
}
.eco .row b { display: block; color: var(--ink); font-size: 0.95rem; margin-bottom: 0.2rem; }
.eco .row span { font-size: 0.88rem; color: var(--ink-2); }
.eco > p { margin: 0; color: var(--ink-2); font-size: 0.92rem; max-width: 36rem; }

/* ---------- footer ---------- */

footer {
  margin-top: clamp(2.6rem, 7vw, 4rem);
  border-top: 1px solid var(--line);
  padding: 1.4rem 0 2.6rem;
  font-size: 0.8rem;
  color: var(--ink-2);
}
footer a { color: var(--ink-2); }
footer p { margin: 0.3rem 0; }

/* dark-mode contrast: small blue text on blue-wash needs the lighter blue,
   and white text fails on the light dark-mode button blue */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .appwin .out .caret { display: none; }
}

/* hospital logo strip — permission confirmed by Krystof 2026-07-27 */
.logos {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
}
.logos > span { font-size: 0.82rem; color: var(--ink-2); margin-right: 0.2rem; }
.logos img {
  height: 2.4rem;
  width: auto;
  background: #fff;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* logo strip v2 — uniform tiles; a round seal and a wide wordmark get equal weight */
.logos > span { display: block; margin-bottom: 0.6rem; }
.logos .lrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.2rem, 1fr)); gap: 0.6rem; width: 100%; }
.logos .lrow div {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  height: 4.4rem;
  display: flex; align-items: center; justify-content: center;
  padding: 0.5rem 0.9rem;
}
.logos .lrow img {
  max-height: 3.2rem; max-width: 100%;
  width: auto; height: auto;
  background: none; border: 0; padding: 0;
  filter: grayscale(1); opacity: 0.78;
}

/* sticky mobile CTA — the thumb never has to hunt for the button */
.ctabar { display: none; }
@media (max-width: 720px) {
  .ctabar {
    display: flex; gap: 0.5rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 0.55rem 0.9rem calc(0.55rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
  }
  .ctabar .main {
    flex: 1; text-align: center; text-decoration: none;
    font-weight: 700; font-size: 1.02rem; color: #fff;
    background: var(--blue); border-radius: 10px; padding: 0.85rem;
  }
  .ctabar .telb {
    width: 3.3rem; display: flex; align-items: center; justify-content: center;
    text-decoration: none; font-size: 1.25rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  }
  body { padding-bottom: 4.8rem; }
  .ctabar.hid { display: none; }
}

/* on mobile the sticky bar IS the jump — don't show the CTA twice on one screen */
@media (max-width: 720px) { .jump { display: none; } }