@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Source+Serif+4:wght@400;500;600&display=swap');

/* Komptio public pages — same visual direction as the application. */
:root {
  --bg:#f3f2ef; --ink:#252c38; --ink-2:#3e4858; --mute:#626875;
  --muted:#626875; --mute-2:#707988; --mute-3:#788191;
  --line:#dedfdf; --line-2:#e7e8eb; --accent:#355780;
  --accent-bg:#e9edf2; --accent-soft:#dce5f0; --radius:12px; --radius-lg:16px;
  --brand-paper:#fffefa; --brand-deep:#233552; --brand-on:#fafaff; --brand-muted:#cbd6e7;
}
body {background:var(--bg);color:var(--ink);font-family:Geist,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
nav {background:rgba(243,242,239,.95);border-bottom-color:var(--line)}
.logo {font-weight:650;letter-spacing:-.05em;font-size:24px}
.hero {background:var(--brand-deep);color:var(--brand-on);border-radius:18px;max-width:1184px;margin:28px auto 38px;padding:55px 0;text-align:left}
.hero .wrap {text-align:left}
.hero:not(:has(.wrap)) {padding:40px 32px}
.hero .updated {color:var(--brand-muted)}
.hero h1,.hero h1 span,.hero h1 em {color:var(--brand-on);font-style:normal;font-weight:500;letter-spacing:-.045em;line-height:1.08}
.hero h1 {font-size:clamp(34px,5vw,64px);max-width:950px;margin-bottom:22px}
.hero :is(p,.lead,.subtitle,.sub,.hero-meta,.eyebrow) {color:var(--brand-muted)}
.hero p.lead {max-width:720px;font-size:17px;line-height:1.7;color:var(--brand-muted)}
.hero :is(.tag,.badge) {background:#3b4e6b;color:var(--brand-on);border-color:#64748e}
.hero .eyebrow {text-transform:none;letter-spacing:0;font-size:13px}
.hero .eyebrow::before {background:var(--brand-muted)}
.hero .btn-primary {background:var(--brand-on);color:var(--brand-deep)}
.hero .btn-ghost {color:var(--brand-on);border-color:#7588a6;background:transparent}
.hero .btn-ghost:hover {background:#3b4e6b;color:var(--brand-on)}
.btn,.cta-btn,.nav-cta {border-radius:8px}
.nav-cta {box-shadow:0 4px 12px -3px rgba(35,53,82,.25)}
.nav-cta:hover {background:var(--brand-deep);box-shadow:0 8px 20px -4px rgba(35,53,82,.3)}
.btn-primary {background:var(--brand-deep);color:var(--brand-on)}
.btn-primary:hover {transform:none;box-shadow:none;opacity:.9}
:is(.card,.feature,.feature-card,.price-card,.pricing-card,.faq-item,.preview,.integration-card,.post-card,.plan) {background:var(--brand-paper);border-color:var(--line);border-radius:12px;box-shadow:none}
:is(.section-title,h2) {letter-spacing:-.035em;font-weight:500}
:is(.section-label,.eyebrow) {letter-spacing:0;text-transform:none}
article.post {background:var(--brand-paper);padding:36px;border-radius:12px;margin-top:30px}
article.post h1,.post-body h2,.content h2 {font-family:'Source Serif 4',Georgia,serif;font-weight:500;line-height:1.2}
.hero-cta,.cta-section,.cta-box {background:var(--brand-deep);color:var(--brand-on);border-radius:16px}
.hero-cta p,.cta-box p {color:var(--brand-muted)}
.doc-title {background:var(--brand-deep);color:var(--brand-on);border-radius:12px;padding:28px;font-size:40px;letter-spacing:-.035em;font-weight:500}
.doc-layout {grid-template-columns:240px minmax(0,1fr);padding-inline:32px}
.doc-layout>* {min-width:0}
.doc-main pre {max-width:100%;overflow-x:auto}
.doc-main table {display:block;max-width:100%;overflow-x:auto}
@media(max-width:900px){.doc-layout{grid-template-columns:minmax(0,1fr);padding-inline:20px;gap:28px}}
@media(max-width:640px){.hero p.lead{font-size:15px}}
@media(max-width:640px){.hero:not(:has(.wrap)){padding:28px 22px}.hero:not(:has(.wrap)) h1{font-size:32px}}
body>main>h1,body>.wrap>h1,body>article>h1 {background:var(--brand-deep);color:var(--brand-on);padding:32px;border-radius:14px;letter-spacing:-.035em;font-weight:500}
.preview {border-top:4px solid var(--accent)}
.prev-header-row {background:var(--brand-deep);color:var(--brand-on);border-radius:12px;padding:24px;margin-bottom:22px}
.prev-title {color:var(--brand-on);font-size:34px}
.prev-siren {color:var(--brand-muted)}
.prev-metric {background:var(--brand-paper);border-color:var(--line);box-shadow:none}
.prev-main {background:var(--bg)}
.prev-summary,.prev-ai-summary {background:var(--brand-paper);border-top:3px solid var(--accent);border-radius:3px 3px 12px 12px}
footer {border-color:var(--line)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible {outline:2px solid var(--accent);outline-offset:4px}
.hero :is(a,button):focus-visible {outline-color:var(--brand-on)}
@media(max-width:1248px){.hero{margin-left:24px;margin-right:24px}}
@media(max-width:640px){.hero{margin:18px 12px 26px;padding:32px 0;border-radius:13px}.hero .wrap{padding-left:23px;padding-right:23px}.hero h1{font-size:37px;overflow-wrap:break-word}.hero .lead{font-size:15px}.hero-ctas{align-items:stretch}.hero-ctas a{justify-content:center;white-space:normal}.hero-meta{gap:12px;flex-wrap:wrap}article.post{padding:23px}.prev-header-row{padding:18px}.prev-title{font-size:27px}.doc-title{font-size:30px;padding:22px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}