/* Styles that exist only on www.kigo.cloud. landing.css is imported from the application, do not edit it here. */
html { scroll-behavior:smooth; }
body { margin:0; background:#fff; font-family:'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
.kcs [id] { scroll-margin-top:84px; }

/* header logo: never squeezed by the navigation; on a phone only the cloud mark fits */
.kcs .top .wrap > a { flex:0 0 auto; display:block; }
.kcs .top .wrap > a img { max-width:none; }
@media (max-width:560px) {
  .kcs .top .wrap > a img { display:none; }
  .kcs .top .wrap > a:before { content:""; display:block; width:40px; height:32px; background:url(/assets/img/kigocloud_logo.svg) left center / contain no-repeat; }
}

/* feature strip under the hero */
.kcs .strip { background:#191c22; border-top:1px solid #2a2e37; padding:18px 0; }
.kcs .strip .wrap { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }
.kcs .strip b { color:#fff; font-size:14px; font-weight:700; margin-right:8px; }
.kcs .strip a { color:#d5d9e0; font-size:14px; font-weight:600; text-decoration:none; padding:6px 13px; border:1px solid #3a3f4a; border-radius:999px; transition:border-color .15s, color .15s; }
.kcs .strip a:hover { color:#fff; border-color:var(--o); }

/* full feature catalog */
.kcs .cat-count { font-size:18px; font-weight:700; color:var(--od); margin:-18px 0 22px; }
.kcs .cat-sec { font-size:22px; font-weight:800; margin:36px 0 14px; padding-top:16px; border-top:2px solid var(--ink); }
.kcs .cat-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; }
.kcs .cat-tab { font:inherit; font-size:14.5px; font-weight:700; color:#3b414b; background:#fff; border:1px solid #cfd3da; border-radius:999px; padding:9px 16px; cursor:pointer; }
.kcs .cat-tab span { font-weight:600; color:#8b93a1; margin-left:4px; }
.kcs .cat-tab:hover { border-color:var(--ink); }
.kcs .cat-tab.on { background:var(--ink); border-color:var(--ink); color:#fff; }
.kcs .cat-tab.on span { color:#c5cad3; }
.kcs .cat-x.js .cat-pane { display:none; }
.kcs .cat-x.js .cat-pane.on { display:block; }
.kcs .cat-x.js .cat-tabs + .cat-pane .cat-sec, .kcs .cat-x.js .cat-tabs ~ .cat-pane .cat-sec { display:none; }
.kcs .cards { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; align-items:start; }
.kcs .card { background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:16px 16px 12px; }
.kcs .card h4 { font-size:16px; font-weight:800; color:var(--ink); margin:0 0 4px; letter-spacing:-.02em; }
.kcs .card p { font-size:13px; line-height:1.45; color:var(--mut); margin:0 0 10px; }
.kcs .card li { position:relative; font-size:13.5px; line-height:1.4; color:#333944; padding:2.5px 0 2.5px 15px; }
.kcs .card li:before { content:""; position:absolute; left:1px; top:9px; width:5px; height:5px; border-radius:50%; background:var(--o); }
.kcs .card h4 a { color:inherit; text-decoration:none; }
.kcs .card h4 a:hover { color:var(--od); }

/* pages built on this site */
.kcs .phead { background:var(--ink); color:#fff; padding:56px 0 60px; }
.kcs .phead .crumbs { font-size:14px; color:#8b93a1; margin:0 0 22px; }
.kcs .phead .crumbs a { color:#c5cad3; text-decoration:none; }
.kcs .phead .crumbs a:hover { color:#fff; }
.kcs .phead h1 { color:#fff; font-size:46px; line-height:1.08; font-weight:800; margin:0 0 16px; max-width:860px; }
.kcs .phead .lead { color:#c5cad3; font-size:19px; max-width:760px; }
.kcs h2.sub { font-size:28px; line-height:1.15; font-weight:800; margin:0 0 24px; }
.kcs .ticks.two { columns:2; column-gap:44px; max-width:980px; }
.kcs .ticks.two li { break-inside:avoid; }
.kcs .cta-row { display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin-top:34px; }
.kcs .cta-row .plain { font-weight:700; color:var(--ink); }
.kcs .news article { max-width:820px; padding:18px 0; border-top:1px solid var(--line); }
.kcs .news article h3 { font-size:19px; font-weight:800; margin:0 0 6px; }
.kcs .news article p { color:#4a505b; }
.kcs .news h2.sub { margin:44px 0 10px; font-size:22px; color:var(--od); }
.kcs .news h2.sub:first-child { margin-top:0; }

.kcs .alt .card { background:#fff; }
.kcs .cards + .more { margin-top:26px; }

/* price list */
.kcs .price-note { text-align:center; color:var(--mut); font-size:15px; margin:26px auto 0; max-width:760px; }
.kcs .cta-row.center { justify-content:center; margin-top:22px; }
.kcs .ptable-wrap { overflow-x:auto; }
.kcs .ptable { width:100%; border-collapse:collapse; font-size:14.5px; }
.kcs .ptable th { text-align:center; font-size:16px; font-weight:800; color:var(--ink); padding:14px 10px; border-bottom:2px solid var(--ink); }
.kcs .ptable td { padding:9px 10px; border-bottom:1px solid var(--line); text-align:center; vertical-align:top; color:#333944; }
.kcs .ptable td:first-child { text-align:left; width:38%; }
.kcs .ptable tr.group td { background:var(--paper); font-weight:800; color:var(--ink); padding-top:13px; padding-bottom:13px; }
.kcs .ptable tr.text td:first-child { font-weight:800; color:var(--ink); }
.kcs .ptable tr.item td:first-child { padding-left:24px; }
.kcs .ptable td .desc { display:block; margin-top:3px; font-size:13px; font-weight:400; line-height:1.45; color:var(--muted, #6b7280); }
.kcs .ptable .yes { color:var(--od); font-weight:800; }
.kcs .ptable .no { color:#b9bec8; }
.kcs .ptable .part { color:var(--od); }

/* imported articles */
.kcs .prose { max-width:860px; }
.kcs .prose p { margin:0 0 16px; color:#333944; }
.kcs .prose .cms-kicker { font-size:13px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--o); }
.kcs .prose h2 { font-size:26px; font-weight:800; margin:36px 0 14px; }
.kcs .prose ul, .kcs .prose ol { margin:0 0 18px; padding-left:22px; list-style:disc; }
.kcs .prose ol { list-style:decimal; }
.kcs .prose li { margin:0 0 8px; color:#333944; }
.kcs .prose a { color:var(--od); }
.kcs .prose table { width:100%; border-collapse:collapse; font-size:14.5px; margin:0 0 20px; }
.kcs .prose th { font-weight:800; color:var(--ink); padding:10px 8px; border-bottom:2px solid var(--ink); text-align:center; }
.kcs .prose td { padding:9px 8px; border-bottom:1px solid var(--line); text-align:center; }
.kcs .prose td:first-child, .kcs .prose th:first-child { text-align:left; }

.kcs .prose ul.rel { list-style:none; padding:0; margin-top:22px; }
.kcs .prose ul.rel li { margin:0 0 6px; font-weight:600; }
.kcs .prose td:nth-child(2) { white-space:nowrap; font-weight:700; }

/* questions and answers */
.kcs .faq { max-width:860px; }
.kcs .faq .head { margin:0 auto 28px; text-align:center; }
.kcs .faq h2 { font-size:40px; line-height:1.1; font-weight:800; }
.kcs .faq details { border-top:1px solid var(--line); }
.kcs .faq details:last-child { border-bottom:1px solid var(--line); }
.kcs .faq summary { cursor:pointer; list-style:none; padding:20px 36px 20px 0; position:relative; font-size:18px; font-weight:700; color:var(--ink); }
.kcs .faq summary::-webkit-details-marker { display:none; }
.kcs .faq summary:after { content:""; position:absolute; right:6px; top:26px; width:9px; height:9px; border-right:2px solid var(--mut); border-bottom:2px solid var(--mut); transform:rotate(45deg); transition:transform .15s; }
.kcs .faq details[open] summary:after { transform:rotate(-135deg); top:30px; }
.kcs .faq details p { padding:0 36px 22px 0; color:#4a505b; }

/* footer */
.kcs .site-foot { background:var(--ink); color:#aab0bb; margin-top:22px; padding:56px 0 28px; font-size:15px; }
.kcs .site-foot .wrap { display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; }
.kcs .site-foot h4 { color:#fff; font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin:0 0 14px; }
.kcs .site-foot a { display:block; color:#d5d9e0; text-decoration:none; padding:4px 0; }
.kcs .site-foot a:hover { color:#fff; }
.kcs .site-foot p { grid-column:1 / -1; border-top:1px solid #2a2e37; padding-top:22px; font-size:14px; }
.kcs .site-foot p a { display:inline; padding:0; }

@media (max-width:1100px) { .kcs .cards { grid-template-columns:repeat(3, 1fr); } }
@media (max-width:900px) { .kcs .cards { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:760px) {
  .kcs .ptable { font-size:13px; }
  .kcs .ptable th { font-size:13px; padding:10px 4px; }
  .kcs .ptable td { padding:8px 4px; }
  .kcs .ptable td:first-child { width:34%; }
  .kcs .ptable tr.item td:first-child { padding-left:10px; }
  .kcs .phead h1 { font-size:32px; }
  .kcs .ticks.two { columns:1; }
  .kcs .cards { grid-template-columns:1fr; }
  .kcs .cat-sec { font-size:20px; }
  .kcs .cat-tabs { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; }
  .kcs .cat-tab { white-space:nowrap; }
  .kcs .faq h2 { font-size:30px; }
  .kcs .faq summary { font-size:16px; }
  .kcs .site-foot .wrap { grid-template-columns:1fr; }
  .kcs .strip .wrap { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
  .kcs .strip a, .kcs .strip b { white-space:nowrap; }
}

/* consent bar for analytics cookies */
.kc-consent { position:fixed; left:16px; right:16px; bottom:16px; z-index:50; max-width:760px; margin:0 auto; background:#fff; color:#2a2e37; border:1px solid #e3e5ea; border-radius:14px; padding:14px 18px; display:flex; gap:14px; align-items:center; box-shadow:0 22px 48px -18px rgba(0,0,0,.45); font-family:Montserrat,Arial,sans-serif; font-size:14px; line-height:1.45; }
.kc-consent[hidden] { display:none; }
.kc-consent p { margin:0; flex:1; }
.kc-consent a { color:#e05d00; }
.kc-consent div { display:flex; gap:8px; flex:0 0 auto; }
.kc-consent button { font:inherit; font-weight:700; font-size:13.5px; padding:9px 16px; border-radius:10px; cursor:pointer; background:#ff6900; color:#fff; border:1px solid #ff6900; }
.kc-consent button.ghost { background:#fff; color:#2a2e37; border-color:#cfd3db; }
@media (max-width:620px) { .kc-consent { flex-direction:column; align-items:stretch; } .kc-consent div { justify-content:flex-end; } }

/* illustrated subject pages (src/rich) */
.kcs .phead .cta-row { margin-top:28px; }
.kcs .phead .cta-row .plain { color:#fff; border-bottom:2px solid rgba(255,105,0,.6); text-decoration:none; }
.kcs .howto { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-top:8px; }
.kcs .howto.c3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.kcs .howto.c5 { grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.kcs .howto.c5 .howto-step { padding:20px 16px; }
.kcs .howto-step { background:#fff; border:1px solid var(--line); border-radius:16px; padding:24px 22px; position:relative; }
.kcs section.alt .howto-step { background:#fff; }
.kcs .howto-step .n { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:var(--o); color:#fff; font-weight:800; font-size:16px; margin:0 0 16px; }
.kcs .howto-step h3 { font-size:17px; font-weight:800; margin:0 0 8px; line-height:1.3; }
.kcs .howto-step p { font-size:15px; color:var(--mut); margin:0; line-height:1.5; }
.kcs .win-note, .kcs .duo .win-note { margin:12px 0 0; font-size:12.5px; color:var(--mut); line-height:1.5; }
.kcs .win .kv { margin-bottom:12px; }
.kcs .band.proof { padding:64px 0; }
.kcs .band.proof h2 { font-size:34px; max-width:860px; }
.kcs .band.proof .lead { margin-bottom:24px; }
.kcs ul.rel { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 28px; margin:0; padding:0; list-style:none; }
.kcs ul.rel li a { color:var(--od); font-weight:700; text-decoration:none; border-bottom:2px solid rgba(255,105,0,.3); }
@media (max-width:900px) { .kcs .howto, .kcs .howto.c3, .kcs .howto.c5 { grid-template-columns:1fr 1fr; } .kcs .band.proof h2 { font-size:28px; } }
@media (max-width:560px) { .kcs .howto, .kcs .howto.c3, .kcs .howto.c5, .kcs ul.rel { grid-template-columns:1fr; } }
.kcs .band.proof .stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin:6px 0 30px; }
.kcs .band.proof .stats div { border-left:3px solid var(--o); padding:4px 0 4px 16px; }
.kcs .band.proof .stats b { display:block; color:#fff; font-size:34px; line-height:1.1; font-weight:800; letter-spacing:-.02em; }
.kcs .band.proof .stats span { display:block; color:#aab0bb; font-size:14.5px; margin-top:6px; line-height:1.4; }
@media (max-width:900px) { .kcs .band.proof .stats { grid-template-columns:1fr 1fr; } .kcs .band.proof .stats b { font-size:28px; } }

/* real screens of the application: hero laptop and phone, "Ovako izgleda u radu" tabs */
.kcs .hero-media.devices { padding:10px 0 40px; }
.kcs .devices .laptop .lid { background:#0c0d10; border-radius:14px 14px 0 0; padding:10px 10px 0; box-shadow:0 40px 80px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08); }
.kcs .devices .laptop img { display:block; width:100%; height:auto; border-radius:4px 4px 0 0; }
.kcs .devices .laptop .base { position:relative; height:12px; margin:0 -3%; background:linear-gradient(#3a3e46,#1b1d22); border-radius:0 0 12px 12px; box-shadow:0 1px 0 rgba(255,255,255,.08) inset; }
.kcs .devices .laptop .base:before { content:""; position:absolute; left:42%; right:42%; top:0; height:5px; background:#111318; border-radius:0 0 6px 6px; }
.kcs .devices .phone { position:absolute; right:-64px; bottom:-18px; width:22%; background:#0c0d10; border-radius:26px; padding:8px; box-shadow:0 30px 60px -18px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.1); }
.kcs .devices .phone img { display:block; width:100%; height:auto; border-radius:19px; }
.kcs .devices .pop { position:absolute; background:#fff; color:#23272f; border-radius:12px; padding:10px 14px 10px 40px; font-size:12.5px; line-height:1.35; box-shadow:0 18px 40px rgba(0,0,0,.35); white-space:nowrap; }
.kcs .devices .pop b { display:block; font-size:13.5px; }
.kcs .devices .pop span { color:#6b7280; }
.kcs .devices .pop:before { content:"\2713"; position:absolute; left:12px; top:50%; transform:translateY(-50%); width:20px; height:20px; border-radius:50%; background:#1baf7a; color:#fff; font-size:12px; font-weight:800; line-height:20px; text-align:center; }
.kcs .devices .pop.p1 { left:-28px; top:46%; }
.kcs .devices .pop.p2 { left:16%; bottom:-6px; }
.kcs .devices .pop.p3 { right:24%; top:-14px; }
.kcs .devices .pop.p3 span { color:#1baf7a; font-weight:800; font-size:15px; }
.kcs section.screens { background:var(--paper); }
.kcs .screens input[type=radio] { position:absolute; opacity:0; pointer-events:none; }
.kcs .shot-tabs { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 0 30px; }
.kcs .shot-tabs label { cursor:pointer; padding:10px 20px; border-radius:999px; border:1px solid var(--line); background:#fff; font-weight:700; font-size:15px; }
.kcs .shot-panel { display:none; grid-template-columns:minmax(0,7fr) minmax(0,3fr); gap:40px; align-items:center; }
.kcs #shot-overview:checked ~ .shot-tabs label[for=shot-overview], .kcs #shot-invoices:checked ~ .shot-tabs label[for=shot-invoices], .kcs #shot-einvoices:checked ~ .shot-tabs label[for=shot-einvoices] { background:var(--ink); color:#fff; border-color:var(--ink); }
.kcs #shot-overview:checked ~ .shot-panel[data-shot=overview], .kcs #shot-invoices:checked ~ .shot-panel[data-shot=invoices], .kcs #shot-einvoices:checked ~ .shot-panel[data-shot=einvoices] { display:grid; }
.kcs .shot-frame { background:#fff; border-radius:14px; overflow:hidden; border:1px solid var(--line); box-shadow:0 30px 60px -28px rgba(17,19,24,.45); }
.kcs .shot-frame img { display:block; width:100%; height:auto; }
.kcs .shot-text h3 { font-size:26px; line-height:1.2; font-weight:800; margin:0 0 14px; }
.kcs .shot-text p { color:var(--mut); font-size:17px; margin:0 0 18px; }
@media (max-width: 960px) {
  .kcs .shot-panel { grid-template-columns:1fr; gap:24px; }
  .kcs .devices .pop.p1 { left:0; }
  .kcs .devices .phone { right:0; }
}
@media (max-width: 620px) {
  .kcs .devices .pop.p2, .kcs .devices .pop.p3 { display:none; }
  .kcs .devices .pop { font-size:11.5px; }
}
/* the header button says "try it free", which must stay on one line on a phone */
.kcs .top nav .kbtn { white-space:nowrap; }
.kcs .top nav .kb-short { display:none; }
@media (max-width: 620px) {
  .kcs .top nav { gap:10px; font-size:14px; }
  .kcs .top nav .kbtn { font-size:13px; padding:8px 12px; }
  .kcs .top nav .kb-long { display:none; } .kcs .top nav .kb-short { display:inline; }
  .kcs .top .lang { font-size:12px; } .kcs .top .lang a { padding:3px 7px; }
}
@media (max-width: 400px) {
  .kcs .top nav { gap:7px; font-size:13px; } .kcs .top nav .kbtn { padding:7px 9px; } .kcs .top .lang a { padding:3px 5px; }
}
/* devices and printing on the home page */
.kcs .devices-sec { padding:64px 0; }
.kcs .devices-sec .head h2 { font-size:30px; }
.kcs .dev-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; max-width:1040px; margin:0 auto; }
.kcs .dev-tile { display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
.kcs .dev-tile h3 { font-size:16px; font-weight:800; margin:2px 0 4px; }
.kcs .dev-tile p { color:var(--mut); font-size:14px; line-height:1.45; margin:0; }
.kcs .dev-tile p a { color:#ff6900; white-space:nowrap; }
.kcs a.play-btn { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:10px; background:#111318; color:#fff; font-weight:700; font-size:13px; text-decoration:none; white-space:nowrap; border:1px solid #3a3f4a; }
.kcs .dev-tile p a.play-btn { margin-top:10px; color:#fff; }
.kcs .hero .hero-play { margin:8px 0 0; } .kcs .hero-play svg { width:14px; height:14px; vertical-align:-2px; margin-right:6px; } .kcs .hero-play a { color:inherit; }
.kcs .dev-ico { flex:none; display:inline-flex; width:40px; height:40px; border-radius:11px; background:#fff3ea; align-items:center; justify-content:center; }
@media (max-width: 960px) { .kcs .dev-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 620px) { .kcs .dev-grid { grid-template-columns:1fr; } .kcs .devices-sec .head h2 { font-size:24px; } }
/* brand mark in a diagram node (WooCommerce, Shopify) */
.kcs .node .brand { display:block; height:26px; width:auto; margin:0 0 6px; }
/* real invoice in the sales section */
.kcs .invoice-sample { margin:0; }
.kcs .invoice-sample img { display:block; width:100%; height:auto; border-radius:10px; border:1px solid var(--line); box-shadow:0 30px 60px -28px rgba(17,19,24,.45); }
.kcs .invoice-sample figcaption { margin-top:12px; font-size:13.5px; color:var(--mut); text-align:center; }
/* nodes with a brand mark are taller: keep them apart */
.kcs .sync .node.w { top:2%; } .kcs .sync .node.s { bottom:2%; }
/* anchor price bar above the hero of the Croatian home page */
.kcs .anchor-bar { background:#ff6900; color:#fff; font-size:15px; }
.kcs .anchor-bar .wrap { padding-top:11px; padding-bottom:11px; text-align:center; }
.kcs .anchor-bar a { color:#fff; font-weight:700; text-decoration:underline; white-space:nowrap; margin-left:6px; }
@media (max-width: 620px) { .kcs .anchor-bar { font-size:14px; } .kcs .anchor-bar span { display:none; } }

/* Joined site preview (.kcs.v2): tighter rhythm, the choice of business in the hero, switcher and troubles on segment pages */
.kcs.v2 section { padding:48px 0; }
.kcs.v2 .head { margin-bottom:22px; }
.kcs.v2 .head h2 { margin-bottom:8px; }
.kcs.v2 .head h2, .kcs.v2 .duo h2, .kcs.v2 .band h2 { font-size:34px; }
.kcs.v2 .hero .wrap { padding-top:48px; padding-bottom:48px; gap:48px; }
.kcs.v2 .hero h1 { font-size:46px; }
.kcs.v2 .phead .wrap { padding-top:40px; padding-bottom:36px; }
.kcs.v2 .seg-sec { padding:28px 0 32px; }
.kcs.v2 .seg-sec .head { margin-bottom:16px; }
.kcs.v2 .seg-sec .head h2 { font-size:30px; }
.kcs .seg-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.kcs .seg-tile { display:flex; flex-direction:column; gap:10px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 16px 16px; text-decoration:none; color:inherit; transition:border-color .15s, box-shadow .15s; }
.kcs .seg-tile:hover { border-color:#ff6900; box-shadow:0 10px 24px -14px rgba(255,105,0,.45); }
.kcs .seg-tile i { width:40px; height:40px; border-radius:11px; background:#fff4ec; color:#ff6900; display:flex; align-items:center; justify-content:center; }
.kcs .seg-tile span { display:flex; flex-direction:column; gap:3px; flex:1; }
.kcs .seg-tile b { font-size:16px; }
.kcs .seg-tile small { color:#5b6170; font-size:13.5px; line-height:1.4; }
.kcs .seg-tile em { font-style:normal; font-weight:700; font-size:14px; color:#ff6900; }
.kcs .seg-switch { border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:5; }
.kcs .seg-switch .wrap { display:flex; gap:6px; overflow-x:auto; padding-top:10px; padding-bottom:10px; scrollbar-width:none; }
.kcs .seg-switch a { white-space:nowrap; padding:7px 14px; border-radius:999px; text-decoration:none; color:#111318; font-size:14px; font-weight:600; border:1px solid var(--line); }
.kcs .seg-switch a.on, .kcs .seg-switch a:hover { background:#ff6900; border-color:#ff6900; color:#fff; }
.kcs .pains { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.kcs .pain { background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px 20px; }
.kcs .pain h3 { margin:0 0 8px; font-size:17px; }
.kcs .pain p { margin:0; color:#5b6170; }
@media (max-width:760px) {
  .kcs.v2 section { padding:40px 0; }
  .kcs.v2 .head h2, .kcs.v2 .duo h2, .kcs.v2 .band h2 { font-size:26px; }
  .kcs.v2 .hero .wrap { padding-top:32px; padding-bottom:36px; gap:24px; }
  .kcs.v2 .hero h1 { font-size:31px; }
  .kcs .pains { grid-template-columns:1fr; gap:10px; }
  .kcs.v2 .seg-sec { padding:32px 0 36px; }
  .kcs.v2 .seg-sec .head h2 { font-size:24px; }
  .kcs .seg-grid { grid-template-columns:1fr; gap:8px; }
  .kcs .seg-tile { flex-direction:row; align-items:center; gap:12px; padding:12px 14px; }
  .kcs .seg-tile i { width:36px; height:36px; flex:none; }
  .kcs .seg-tile small { display:none; }
  .kcs .seg-tile em { white-space:nowrap; }
  .kcs.v2 .hero .nocard { display:none; }
  .kcs.v2 .hero .lead { font-size:17px; margin-bottom:22px; }
  .kcs.v2 .hero .cta { gap:14px; }
}
.kcs .info-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.kcs .info-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:26px 26px 24px; display:flex; flex-direction:column; }
.kcs .info-card h3 { font-size:22px; line-height:1.2; margin:6px 0 8px; }
.kcs .info-card .price { font-size:28px; font-weight:800; color:#111318; margin:0 0 10px; }
.kcs .info-card p { color:#5b6170; margin:0 0 16px; }
.kcs .info-card .cta-row { margin-top:auto; display:flex; flex-wrap:wrap; gap:18px; align-items:center; }
@media (max-width:760px) { .kcs .info-cards { grid-template-columns:1fr; gap:12px; } .kcs .info-card { padding:20px; } .kcs .info-card .price { font-size:24px; } }
@media (min-width:761px) and (max-width:1100px) { .kcs .seg-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px) {
  /* the flow graphic (program, web shop, Shopify) as a column on phones, the boxes never overlap */
  .kcs .sync { height:auto; display:flex; flex-direction:column; align-items:stretch; gap:10px; }
  .kcs .sync .node, .kcs .sync .node.main, .kcs .sync .node.w, .kcs .sync .node.s { position:static; transform:none; margin:0; width:auto; text-align:left; }
  .kcs .sync .node.w, .kcs .sync .node.s { margin-left:22px; position:relative; }
  .kcs .sync .node.w:before, .kcs .sync .node.s:before { content:""; position:absolute; left:-14px; top:50%; width:10px; border-top:2px dashed #ff6900; }
}
@media (min-width:1100px) {
  /* joined site preview: the real screens of the hero get the larger half of the width */
  .kcs.v2 .hero .wrap { grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:40px; max-width:1320px; }
  .kcs.v2 .hero h1 { font-size:48px; }
  .kcs.v2 .devices .phone { right:-28px; width:23%; }
  .kcs.v2 .devices .pop { font-size:13.5px; padding:12px 16px 12px 44px; }
  .kcs.v2 .devices .pop b { font-size:15px; }
}
/* joined site preview: the guides on the home page as a compact list of titles, the questions link as its last row */
.kcs.v2 #vodici .cards { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.kcs.v2 #vodici .card { background:#fff; padding:12px 16px; border-radius:12px; }
.kcs.v2 #vodici .card p { display:none; }
.kcs.v2 #vodici .card h4 { margin:0; font-size:15px; font-weight:700; }
.kcs.v2 #vodici .card h4 a:after { content:" ›"; color:var(--o); }
.kcs.v2 #vodici .cards + .more { margin:14px 0 0; text-align:center; }
.kcs.v2 #vodici .more a { display:inline-block; padding:10px 18px; border:1px solid var(--line); border-radius:999px; background:#fff; font-weight:700; text-decoration:none; color:var(--ink); }
@media (max-width:760px) { .kcs.v2 #vodici .cards { grid-template-columns:1fr; } }
/* joined site preview: one line on the home page that leads to the full feature catalog */
.kcs.v2 section.cat-link { padding:28px 0; }
.kcs .cat-link a { display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:20px 24px; border:1px solid var(--line); border-radius:16px; background:#fff; text-decoration:none; color:var(--ink); }
.kcs .cat-link a:hover { border-color:var(--o); }
.kcs .cat-link b { font-size:20px; font-weight:800; }
.kcs .cat-link span { color:var(--od); font-weight:700; flex:1; }
.kcs .cat-link em { font-style:normal; font-weight:700; color:#fff; background:var(--o); padding:10px 18px; border-radius:10px; }
/* joined site preview: plans as steps, from invoices to an ERP */
.kcs .stairs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; align-items:end; }
.kcs .stair { background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px 18px; }
.kcs .stair.s1 { min-height:330px; } .kcs .stair.s2 { min-height:360px; } .kcs .stair.s3 { min-height:390px; } .kcs .stair.s4 { min-height:420px; }
.kcs .stair.s2 { border-color:var(--o); box-shadow:0 18px 40px -24px rgba(255,105,0,.55); }
.kcs .stair h3 { font-size:22px; margin:4px 0 6px; }
.kcs .stair .price { font-size:30px; font-weight:800; margin:0 0 12px; line-height:1.1; }
.kcs .stair .price small { display:block; font-size:12.5px; font-weight:500; color:var(--mut); margin-top:4px; }
.kcs .stair .ticks li { font-size:14px; }
.kcs .stairs + .more { text-align:center; margin-top:18px; }
.kcs .duo .invoice-sample img { max-width:440px; margin:0 auto; }
@media (max-width:980px) { .kcs .stairs { grid-template-columns:repeat(2,minmax(0,1fr)); } .kcs .stair { min-height:0 !important; } }
@media (max-width:560px) { .kcs .stairs { grid-template-columns:1fr; } }
/* joined site preview: a logo that reads at a glance */
.kcs.v2 .top img { height:42px; }
@media (max-width:760px) { .kcs.v2 .top img { height:32px; } }
/* joined site preview: plan cards of the home page, equal height, yearly / monthly switch (Starter is yearly only) */
.kcs .bill > input { position:absolute; opacity:0; pointer-events:none; }
.kcs .bill > label { display:inline-block; padding:9px 18px; border:1px solid var(--line); background:#fff; font-weight:700; font-size:14px; cursor:pointer; margin:0 0 18px; }
.kcs .bill > label[for="bill-y"] { border-radius:999px 0 0 999px; margin-left:calc(50% - 130px); }
.kcs .bill > label[for="bill-m"] { border-radius:0 999px 999px 0; border-left:0; }
.kcs .bill > label b { color:#1baf7a; font-weight:800; margin-left:4px; }
.kcs #bill-y:checked + label, .kcs #bill-m:checked + label { background:var(--ink); color:#fff; border-color:var(--ink); }
.kcs .pcards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; align-items:stretch; }
.kcs .pcard { position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px 20px 20px; }
.kcs .pcard.hot { border:2px solid var(--o); box-shadow:0 20px 44px -26px rgba(255,105,0,.6); }
.kcs .pcard .badge { position:absolute; top:-12px; left:20px; background:var(--o); color:#fff; font-size:12px; font-weight:800; padding:4px 10px; border-radius:999px; }
.kcs .pcard h3 { font-size:22px; margin:0; }
.kcs .pcard .who { color:var(--mut); font-size:13.5px; margin:4px 0 14px; min-height:38px; }
.kcs .pcard .price { font-size:34px; font-weight:800; line-height:1; margin:0; }
.kcs .pcard .per { font-size:12.5px; color:var(--mut); margin:6px 0 14px; min-height:32px; }
.kcs .pcard .killer { background:#fff4ec; color:#7a3200; border-radius:12px; padding:10px 12px; font-size:13.5px; font-weight:600; line-height:1.4; margin:0 0 14px; }
.kcs .pcard .ticks { flex:1; margin:0 0 18px; }
.kcs .pcard .ticks li { font-size:14px; }
.kcs .pcard .pcta .kbtn { display:block; text-align:center; }
.kcs .pcard .pm { display:none; }
.kcs #bill-m:checked ~ .pcards .py { display:none; }
.kcs #bill-m:checked ~ .pcards .pm { display:inline; }
.kcs .pcards + .more, .kcs .bill + .more { text-align:center; margin-top:18px; }
@media (max-width:1100px) { .kcs .pcards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px) { .kcs .pcards { grid-template-columns:1fr; } .kcs .pcard .who, .kcs .pcard .per { min-height:0; } }
.kcs .pcard .was { margin:0 0 2px; font-size:15px; color:var(--mut); min-height:20px; }
.kcs .pcard .was s { text-decoration-color:#d03b3b; text-decoration-thickness:2px; }
.kcs #bill-m:checked ~ .pcards .was s { display:none; }
/* joined site preview: hospitality page taken over from kigokasa.hr */
.kcs .info-cards.c3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.kcs .info-card .ticks li { font-size:14.5px; }
.kcs .clients { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.kcs .clients span { background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 14px; font-size:14px; color:var(--mut); }
.kcs .clients b { color:var(--ink); font-weight:700; margin-right:4px; }
.kcs .crosses { list-style:none; margin:0; padding:0; }
.kcs .crosses li { position:relative; padding:5px 0 5px 26px; color:var(--mut); }
.kcs .crosses li:before { content:"×"; position:absolute; left:4px; top:2px; color:#d03b3b; font-weight:800; font-size:18px; }
.kcs .pain .more { margin:10px 0 0; }
@media (max-width:980px) { .kcs .info-cards.c3 { grid-template-columns:1fr; } }
/* joined site preview: modules on the home page */
.kcs .mods { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.kcs .mod { display:flex; flex-direction:column; gap:6px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 18px 16px; text-decoration:none; color:inherit; transition:border-color .15s, box-shadow .15s; }
.kcs .mod:hover { border-color:var(--o); box-shadow:0 10px 24px -14px rgba(255,105,0,.45); }
.kcs .mod b { font-size:17px; }
.kcs .mod small { color:var(--mut); font-size:13.5px; line-height:1.45; flex:1; }
.kcs .mod em { font-style:normal; font-size:13px; font-weight:700; color:var(--od); }
.kcs .mod-plan { align-self:flex-start; background:#fff4ec; color:#7a3200; font-size:12px; font-weight:800; padding:3px 9px; border-radius:999px; }
.kcs .mods + .more { text-align:center; margin-top:18px; }
@media (max-width:1100px) { .kcs .mods { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .kcs .mods { grid-template-columns:1fr; } }
.kcs .mod i { width:42px; height:42px; border-radius:12px; background:#fff4ec; color:var(--o); display:flex; align-items:center; justify-content:center; margin-bottom:4px; }
@media (max-width:760px) {
  /* joined site preview on phones: every column of the small tables stays, modules as a compact two-column grid */
  .kcs.v2 .chains th:nth-child(2), .kcs.v2 .chains td:nth-child(2) { display:table-cell; }
  .kcs.v2 .chains th, .kcs.v2 .chains td { font-size:12px; padding-left:6px; padding-right:6px; }
  .kcs.v2 .mods { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .kcs.v2 .mod { padding:12px; gap:4px; }
  .kcs.v2 .mod i { width:34px; height:34px; }
  .kcs.v2 .mod b { font-size:14.5px; line-height:1.25; }
  .kcs.v2 .mod small { display:none; }
  .kcs.v2 .mod em { font-size:12px; }
  .kcs.v2 .duo .invoice-sample img { max-width:100%; }
}
@media (max-width:760px) {
  /* joined site preview on phones: the hero screens without overlapping badges, the phone small in the corner */
  .kcs.v2 .devices .pop { display:none; }
  .kcs.v2 .devices .phone { width:24%; right:-6px; bottom:-10px; border-radius:16px; padding:5px; }
  .kcs.v2 .devices .phone img { border-radius:12px; }
  .kcs.v2 .hero-media.devices { padding:0 10px 18px 0; }
}

/* joined site: screens of the program on the vehicle service page (build.py v2_service_shots) */
.kcs.v2 .app-shot{margin:0;border-radius:12px;overflow:hidden;border:1px solid #e6e3dd;box-shadow:0 18px 40px -18px rgba(20,20,30,.28);background:#fff}
.kcs.v2 .app-shot img{display:block;width:100%;height:auto}
.kcs.v2 .app-shot.narrow{max-width:420px;margin:0 auto}

/* joined site: motion as on the start screen of the application (assets/js/motion.js sets .mo), shown to everyone,
   also when the system asks for less motion (Dejan, 28.09.2026) */
.kcs.v2 .seg-tile,.kcs.v2 .pcard{transition:transform .2s ease,border-color .2s,box-shadow .2s}
.kcs.v2 .seg-tile:hover{transform:translateY(-4px)}
.kcs.v2 .pcard:hover{transform:translateY(-3px);box-shadow:0 18px 36px -22px rgba(20,20,30,.35)}
/* the example invoice: once on the screen the fiscal QR code and the payment barcode are scanned */
.kcs.v2 .inv-print{position:relative;display:block;width:fit-content;max-width:100%;margin:0 auto}
.kcs.v2 .inv-print .scan{position:absolute;display:block;pointer-events:none;border-radius:4px;opacity:0}
.mo .kcs.v2 .inv-print.in .scan{animation:kc-scan 1.1s ease-in-out forwards;outline:2px solid rgba(255,105,0,.85);outline-offset:3px;
  background:linear-gradient(180deg,transparent 0,transparent 44%,rgba(255,105,0,.9) 50%,transparent 56%,transparent 100%) 0 -60%/100% 220% no-repeat}
.mo .kcs.v2 .inv-print.in .scan.qr{animation-delay:.4s}
.mo .kcs.v2 .inv-print.in .scan.hub{animation-delay:1.3s}
@keyframes kc-scan{0%{opacity:0;background-position:0 -60%}15%{opacity:1}80%{opacity:1;background-position:0 160%}100%{opacity:0;background-position:0 160%}}
/* tiles and plan cards: light that follows the mouse, a soft glow inside and a brighter edge (desktop), as the shortcuts of the application */
@media (min-width:701px){
  .kcs.v2 .seg-tile{overflow:hidden}
  .kcs.v2 .seg-tile,.kcs.v2 .pcard{position:relative;isolation:isolate}
  .kcs.v2 .seg-tile::before,.kcs.v2 .seg-tile::after,.kcs.v2 .pcard::before,.kcs.v2 .pcard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s ease}
  .kcs.v2 .seg-tile::before,.kcs.v2 .pcard::before{z-index:-1;background:radial-gradient(260px circle at var(--kc-x,50%) var(--kc-y,50%),rgba(255,130,0,.10),transparent 65%)}
  .kcs.v2 .seg-tile::after,.kcs.v2 .pcard::after{padding:1.5px;background:radial-gradient(180px circle at var(--kc-x,50%) var(--kc-y,50%),rgba(255,130,0,.9),transparent 70%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
  .kcs.v2 .seg-tile:hover::before,.kcs.v2 .seg-tile:hover::after,.kcs.v2 .pcard:hover::before,.kcs.v2 .pcard:hover::after{opacity:1}
  .kcs.v2 .seg-tile:active,.kcs.v2 .pcard:active{transform:scale(.975)!important;transition-duration:.06s}
}
.kcs.v2 .pcard .badge{z-index:2}
/* the icon of a tile comes alive on hover, and once as a wave when the tiles come up */
@keyframes kc-ic-pop{0%{transform:scale(1)}40%{transform:scale(1.22)}70%{transform:scale(.94)}100%{transform:scale(1)}}
@media (hover:hover) and (pointer:fine){.kcs.v2 .seg-tile:hover i svg{animation:kc-ic-pop .6s ease}}
.mo .kcs.v2 .seg-tile.in i svg{animation:kc-ic-pop .6s ease both;animation-delay:calc(var(--kc-i,0) * 90ms + 500ms)}
.kcs.v2 .kc-ripple{position:absolute;z-index:-1;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:rgba(255,130,0,.22);pointer-events:none;animation:kc-ripple .6s ease-out forwards}
@keyframes kc-ripple{from{transform:scale(0);opacity:1}to{transform:scale(40);opacity:0}}
/* phones: a tap moves nothing (a tap also counts as hover there) */
@media (max-width:700px){.kcs.v2 .seg-tile:hover,.kcs.v2 .pcard:hover{transform:none}}
/* the numbers count up in place: digits of equal width, so nothing next to them moves */
.kcs.v2 .band.proof .stats b{font-variant-numeric:tabular-nums}
.kcs .devices .laptop .lid { position:relative; }
.kcs .devices .laptop video { position:absolute; left:10px; top:10px; width:calc(100% - 20px); height:auto; border-radius:4px 4px 0 0; }
/* plan table of the feature pages: all four plans stay visible on a phone */
@media (max-width: 900px) {
  .kcs .chains.tiers th:nth-child(2), .kcs .chains.tiers td:nth-child(2) { display:table-cell; }
  .kcs .chains.tiers th, .kcs .chains.tiers td { padding-left:3px; padding-right:3px; }
  .kcs .chains.tiers th { font-size:9px; letter-spacing:0; }
  .kcs .chains.tiers td { font-size:11.5px; }
}
/* sections with a text and an example screen follow each other closely */
.kcs:not(.v2) section { padding:48px 0; }
.kcs:not(.v2) section:has(> .wrap.duo) { padding:36px 0; }
.kcs section:has(> .wrap.duo) .ticks { margin-bottom:0; }
@media (max-width: 900px) { .kcs:not(.v2) section, .kcs:not(.v2) section:has(> .wrap.duo) { padding:32px 0; } }
.kcs section:not(.alt) + section:not(.alt):has(> .wrap.duo), .kcs section.alt + section.alt:has(> .wrap.duo) { padding-top:0; }
/* real pictures from the program on the feature pages */
.kcs .real-shot { margin:0; }
.kcs .real-shot img { width:100%; height:auto; border-radius:12px; border:1px solid var(--line); box-shadow:0 30px 60px -28px rgba(17,19,24,.45); background:#fff; }
.kcs .real-shot figcaption { font-size:13.5px; color:var(--mut); text-align:center; margin-top:10px; }
.kcs .real-shot.phone img { max-width:340px; display:block; margin:0 auto; }
.kcs .layouts { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:28px; margin-top:8px; }
.kcs .layouts figure { margin:0; }
.kcs .layouts img { width:100%; height:auto; border-radius:12px; border:1px solid var(--line); box-shadow:0 14px 28px -20px rgba(17,19,24,.5); background:#fff; transition:transform .2s; }
.kcs .layouts img:hover { transform:translateY(-3px); }
.kcs .layouts-more { text-align:center; color:var(--mut); margin:26px 0 0; font-size:16px; }
.kcs .layouts figcaption { font-size:15px; font-weight:700; color:var(--ink); text-align:center; margin-top:8px; }
@media (max-width: 700px) { .kcs .layouts { grid-template-columns:1fr; gap:18px; } }
/* the label above a home page section leads to its feature page */
.kcs a.kicker { text-decoration:none; }
.kcs a.kicker:hover { text-decoration:underline; text-underline-offset:4px; }
/* a whole screen of the program: text above, the screen below at full width */
.kcs .wrap.duo:has(> .media .real-shot.wide) { grid-template-columns:1fr; gap:28px; }
.kcs .wrap.duo:has(> .media .real-shot.wide) > div:first-child { max-width:820px; }
.kcs .wrap.duo:has(> .media .real-shot.wide) .ticks { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0 24px; }
@media (max-width: 900px) { .kcs .wrap.duo:has(> .media .real-shot.wide) .ticks { grid-template-columns:1fr; } }

/* Home page: hospitality (KigoKasa) block, a calm card with the real till in the light and the dark look */
.kcs.v2 .hos-sec { padding:8px 0 48px; }
.kcs .hos-card { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:20px 44px; align-items:center; background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:32px 36px; }
.kcs.v2 .hos-card h2 { font-size:28px; line-height:1.15; font-weight:800; margin:0 0 12px; }
.kcs .hos-text > p { color:var(--mut); font-size:16.5px; margin:0 0 14px; }
.kcs .hos-card .ticks li { font-size:15.5px; }
.kcs .hos-card a.kicker:after { content:" \2192"; }
.kcs .hos-cta { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 0; }
.kcs .hos-cta .kbtn { font-size:15px; padding:12px 20px; }
.kcs .hos-cta .kbtn.ghost { background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line); }
.kcs .hos-cta .kbtn.ghost:hover { color:var(--od); box-shadow:inset 0 0 0 1px var(--o); }
.kcs .hos-media { position:relative; }
.kcs .hos-toggle { display:inline-flex; background:#fff; border:1px solid var(--line); border-radius:999px; padding:3px; margin:0 0 10px; }
.kcs .hos-toggle button { border:0; background:transparent; color:var(--mut); font:inherit; font-size:13px; font-weight:700; padding:5px 14px; border-radius:999px; cursor:pointer; transition:background .25s, color .25s; }
.kcs .hos-toggle button[aria-pressed="true"] { background:var(--ink); color:#fff; }
.kcs .hos-win { border-radius:12px; overflow:hidden; border:1px solid var(--line); box-shadow:0 16px 36px -22px rgba(17,19,24,.45); }
.kcs .hos-imgs { position:relative; }
.kcs .hos-imgs video { display:block; width:100%; height:auto; aspect-ratio:1120 / 694; background:#fff; }
.kcs .hos-imgs video.hos-dark { background:#14181d; }
.kcs .hos-imgs .hos-dark { position:absolute; inset:0; opacity:0; transition:opacity .6s; }
.kcs .hos-win.dark .hos-dark { opacity:1; }
.kcs .hos-links { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; border-top:1px solid var(--line); padding-top:16px; font-size:14.5px; }
.kcs .hos-links span { font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--mut); }
.kcs .hos-links a { color:var(--od); font-weight:600; text-decoration:none; }
.kcs .hos-links a:hover { text-decoration:underline; text-underline-offset:3px; }
.kcs .hos-card .hos-lang { grid-column:1 / -1; font-size:13px; color:var(--mut); margin:-10px 0 0; }
html[lang="hr"] .kcs .hos-card .hos-lang { display:none; }
@media (max-width:900px) {
  .kcs .hos-card { grid-template-columns:1fr; padding:22px 18px; gap:18px; }
  .kcs.v2 .hos-card h2 { font-size:23px; }
}
/* phones: a wide example window (the package table, statistics) scrolls inside its frame and never widens the page */
@media (max-width: 960px) {
  .kcs .duo { grid-template-columns:minmax(0,1fr); }
  .kcs .duo .win-body { overflow-x:auto; }
}
@media (max-width: 760px) {
  .kcs .seg-grid { grid-template-columns:minmax(0,1fr); }
  .kcs .seg-tile span { min-width:0; overflow-wrap:break-word; }
}
/* phones: long German compounds in the headings break with a hyphen instead of widening the page */
@media (max-width: 420px) {
  html[lang="de"] .kcs h1, html[lang="de"] .kcs h2, html[lang="de"] .kcs h3 { hyphens:auto; overflow-wrap:break-word; }
}
/* motion is shown to everyone (Dejan, 30.10.2026): landing.css of the application stops the flow lines when the system asks for less motion */
@media (prefers-reduced-motion: reduce) {
  .kcs .flow { animation:kcs-flow 1.6s linear infinite; }
}
/* /kigo-hos/: the till section shows the same recordings as the home page block */
.kkx .kk-shot__imgs video { display:block; width:100%; height:auto; aspect-ratio:1120 / 694; background:#fff; }
.kkx .kk-shot__imgs video.kk-shot__dark { background:#14181d; }
/* Customer logos at the end of the band with the usage numbers (white on the dark band) */
.kcs .band.proof .clients { display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; border-top:1px solid rgba(255,255,255,.12); padding-top:24px; margin-top:4px; }
.kcs .band.proof .clients > span { background:none; border:0; box-shadow:none; padding:0; border-radius:0; font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#aab0bb; }
.kcs .band.proof .clients > div { display:flex; flex-wrap:wrap; align-items:center; gap:18px 34px; }
.kcs .band.proof .clients img { height:32px; width:auto; filter:brightness(0) invert(1); opacity:.78; transition:opacity .2s; }
.kcs .band.proof .clients img:hover { opacity:1; }
.kcs .band.proof .clients img[src*="hocu-knjigu"] { height:44px; }
@media (max-width:700px) { .kcs .band.proof .clients > div { gap:16px 24px; } .kcs .band.proof .clients img { height:26px; } .kcs .band.proof .clients img[src*="hocu-knjigu"] { height:36px; } }