/* Kolap site stylesheet: design tokens and the components every page shares.
   Page-family components (hero, demos, sections) are in /assets/kolap.css. */

:root{
  /* light theme: reading sections */
  --ink:#0a0d14;
  --body:#343b4a;
  --muted:#545c6e;
  --bg:#ffffff;
  --surface:#ffffff;
  --tint:#f7f9fc;
  --line:#e6e9ef;
  --line-strong:#8791a5;
  --soft:#f5f3ff;
  --soft-line:#ddd6fe;
  /* accent: the violet the Kolap dashboard uses for its primary actions (violet-600) */
  --accent:#7c3aed;
  --accent-dk:#6d28d9;
  --accent-lt:#8b5cf6;
  --accent-on-dark:#c4b5fd;
  --live:#12b76a;
  --wa-btn:#25d366;
  /* dark theme: first screen, demo bands, closing band */
  --d0:#0a0d14;
  --d1:#10151f;
  --d2:#171d2b;
  --dline:rgba(255,255,255,.1);
  --dtext:#ffffff;
  --dtext2:rgba(255,255,255,.72);
  /* status colours */
  --warn-ink:#6b4400;
  --warn-bg:#fff7e0;
  --warn-line:#f0d68a;
  /* shape and rhythm */
  --radius:10px;
  --maxw:1200px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --display:"Plus Jakarta Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:96px; background:var(--d0);}
body{margin:0; color:var(--ink); background:var(--bg); font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-weight:400; font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;}
h1,h2,h3,p,ul,ol,dl,dd{margin:0; padding:0;}
h1,h2,h3{font-family:var(--display); font-weight:700; color:inherit;}
ul,ol{list-style:none;}
a{color:inherit; text-decoration:none;}
img,svg{display:block;}
::selection{background:var(--accent); color:#fff;}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:4px;}
.dark :focus-visible,.nav :focus-visible,.ft :focus-visible,.hero :focus-visible,.phd :focus-visible{outline-color:#fff;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
@media(min-width:900px){ .wrap{padding:0 40px;} }
.skip{position:absolute; left:-9999px; top:0; z-index:100; background:var(--ink); color:#fff; padding:12px 16px;}
.skip:focus{left:0;}

/* icons drawn once as masks so every check and cross shares one stroke weight */
.ico{display:inline-block; flex:none; width:20px; height:20px; background:currentColor; -webkit-mask:var(--i) center/contain no-repeat; mask:var(--i) center/contain no-repeat;}
.i-check{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");}
.i-x{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");}

/* links: animated hairline underline */
.ul{background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat; transition:background-size .2s var(--ease); padding-bottom:2px;}
.ul:hover,.ul:focus-visible{background-size:100% 2px;}

/* buttons: pills, 48px tall, distinct default / hover / active / focus */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; font:inherit; font-weight:600; font-size:16px; line-height:1; min-height:48px; padding:0 24px; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease; white-space:nowrap; touch-action:manipulation; -webkit-tap-highlight-color:transparent;}
.btn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none;}
.btn svg.arr{transition:transform .18s var(--ease);}
.btn:hover svg.arr{transform:translateX(3px);}
.btn-wa{background:var(--wa-btn); color:#04170f; border-color:#1aa953; box-shadow:inset 0 -2px 0 rgba(4,23,15,.22);}
.btn-wa:hover{background:#2fe173; border-color:#128a40;}
.btn-wa:active{background:#1fbd5b; box-shadow:inset 0 2px 0 rgba(4,23,15,.22);}
.btn-wa svg.wa{fill:currentColor; stroke:none; width:19px; height:19px;}
.btn-line{background:transparent; color:var(--ink); border-color:var(--line-strong);}
.btn-line:hover{background:var(--ink); color:#fff; border-color:var(--ink);}
.btn-line:active{background:#262d3d; border-color:#262d3d; color:#fff;}
.dark .btn-line,.hero .btn-line,.phd .btn-line{color:#fff; border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.04);}
.dark .btn-line:hover,.hero .btn-line:hover,.phd .btn-line:hover{background:#fff; color:var(--ink); border-color:#fff;}
.btn-block{display:flex; width:100%;}

/* nav: a floating rounded bar inset from the edges, wordmark only */
.nav{position:sticky; top:12px; z-index:40; height:0;}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:16px; height:64px; width:calc(100% - 24px); max-width:1120px; margin:0 auto; padding:0 10px 0 22px; border-radius:999px; background:rgba(14,18,28,.82); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4); border:1px solid rgba(255,255,255,.12); box-shadow:0 10px 40px -12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); color:#fff;}
.brand{display:flex; align-items:center; min-height:44px; color:#fff; font-family:var(--display); font-weight:800; font-size:24px; letter-spacing:-.04em; line-height:1;}
.nav-links{display:flex; align-items:center; gap:28px; font-size:15px; font-weight:500;}
.nav-links a.ul{display:flex; align-items:center; min-height:44px; padding-bottom:0; background-position:0 calc(100% - 9px); color:rgba(255,255,255,.82);}
.nav-links a.ul:hover{color:#fff;}
.nav-links .btn{min-height:44px; padding:0 20px; font-size:15px;}
@media(max-width:860px){ .nav-links .hide-sm,.nav-links a.ul.hide-sm{display:none;} }
.nav-burger{display:none; width:44px; height:44px; margin:0 0 0 2px; align-items:center; justify-content:center; cursor:pointer; border-radius:999px; -webkit-tap-highlight-color:transparent;}
.nav-burger:hover{background:rgba(255,255,255,.08);}
.nav-burger .x{display:none;}
.nav-drawer{display:none; position:absolute; top:72px; left:50%; transform:translateX(-50%); width:calc(100% - 24px); max-width:1120px; flex-direction:column; padding:8px 20px 20px; border-radius:24px; background:#0e121c; border:1px solid rgba(255,255,255,.12); box-shadow:0 24px 60px -12px rgba(0,0,0,.7); color:#fff;}
.nav-drawer a{display:flex; align-items:center; min-height:48px; font-size:16px; font-weight:500; border-top:1px solid var(--dline);}
.nav-drawer a:first-child{border-top:0;}
.nav-drawer .btn{margin-top:16px; border-top:1px solid rgba(255,255,255,.18);}
.nav-toggle{position:absolute; top:10px; right:22px; width:44px; height:44px; margin:0; opacity:0; z-index:3; cursor:pointer; display:none;}
@media(max-width:860px){
  .nav-burger{display:inline-flex;}
  .nav-links > .btn{display:none;}
  .nav-toggle{display:block;}
  .nav-toggle:checked ~ .nav-in .nav-burger .bars{display:none;}
  .nav-toggle:checked ~ .nav-in .nav-burger .x{display:inline;}
  .nav-toggle:checked ~ .nav-drawer{display:flex;}
  .nav-toggle:focus-visible ~ .nav-in .nav-burger{outline:3px solid #fff; outline-offset:-3px;}
}

/* sections: light, tinted and dark bands */
.sec{padding:72px 0;}
@media(min-width:900px){ .sec{padding:112px 0;} }
.sec.alt{background:var(--tint); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.sec.white{background:var(--surface);}
.dark{background:var(--d0); color:var(--dtext); border-top:0; position:relative; overflow:hidden;}
.dark .sub{color:var(--dtext2);}
/* small section labels: mono, uppercase, wide tracking */
.label{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; line-height:1; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-dk); background:var(--soft); border:1px solid var(--soft-line); border-radius:999px; padding:8px 14px; margin-bottom:20px;}
.label::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent);}
.dark .label{color:var(--accent-on-dark); background:rgba(139,92,246,.14); border-color:rgba(196,181,253,.3);}
.dark .label::before{background:var(--live); box-shadow:0 0 0 3px rgba(18,183,106,.2);}
h2.title{font-size:clamp(30px,4vw,42px); line-height:1.1; letter-spacing:-.03em; font-weight:800; max-width:20ch; text-wrap:balance;}
.sub{margin-top:16px; max-width:56ch; font-size:17px; line-height:1.55; color:var(--muted);}
@media(min-width:900px){ .sub{font-size:18px;} }
.head{margin-bottom:48px;}
@media(min-width:900px){ .head{margin-bottom:64px;} .head.split{display:grid; grid-template-columns:1.15fr .85fr; column-gap:64px; align-items:end;} .head.split .label{grid-column:1; justify-self:start;} .head.split .title{grid-column:1;} .head.split .sub{grid-column:2; grid-row:1 / span 2; margin:0;} }

/* status pills */
.pills{margin-top:28px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px;}
.pill{display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 14px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); font-size:13px; font-weight:500; color:rgba(255,255,255,.84);}
.pill svg{width:15px; height:15px; fill:none; stroke:var(--accent-on-dark); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.pill .dot{width:7px; height:7px; border-radius:50%; background:var(--live); box-shadow:0 0 0 3px rgba(18,183,106,.22);}

/* footer, dark like the closing band */
.ft{padding:56px 0 32px; border-top:1px solid var(--dline); background:#070a10; font-size:14px; color:rgba(255,255,255,.78);}
.ft-in{display:grid; gap:32px;}
@media(min-width:760px){ .ft-in{grid-template-columns:1fr auto; gap:64px;} }
.ft .brand{font-size:22px;}
.ft small{display:block; margin-top:12px; max-width:46ch; font-size:14px; color:rgba(255,255,255,.7); line-height:1.5;}
.ft .right{display:grid; gap:0; justify-items:start;}
@media(min-width:760px){ .ft .right{justify-items:end;} }
.ft .right > a{display:flex; align-items:center; min-height:44px;}
.ft-legal{display:flex; flex-wrap:wrap; gap:0 20px;}
@media(min-width:760px){ .ft-legal{justify-content:flex-end;} }
.ft-legal a{display:flex; align-items:center; min-height:44px;}
.ft .operator-line{margin:24px auto 0; padding:16px 24px 0; max-width:var(--maxw); border-top:1px solid var(--dline); font-size:13px; line-height:1.4; color:rgba(255,255,255,.7); text-align:center;}

/* ==========================================================================
   Inner pages: compact dark page header, light reading body, tables, legal.
   ========================================================================== */
.pg{background:var(--bg);}
.pg main{display:block;}
.phd{position:relative; isolation:isolate; overflow:hidden; background:var(--d0); color:#fff; padding:104px 0 44px;}
@media(min-width:900px){ .phd{padding:132px 0 60px;} }
.phd::before{content:""; position:absolute; inset:0; z-index:-2; background:radial-gradient(60% 90% at 50% -20%,rgba(124,58,237,.55),rgba(124,58,237,.14) 55%,transparent 78%);}
.phd::after{content:""; position:absolute; inset:0; z-index:-1; background:repeating-linear-gradient(90deg,rgba(124,58,237,0) 0,rgba(124,58,237,0) 14px,rgba(139,92,246,.3) 44px,rgba(196,181,253,.16) 49px,rgba(124,58,237,.06) 78px,rgba(124,58,237,0) 96px); -webkit-mask:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 45%,transparent 90%); mask:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 45%,transparent 90%); pointer-events:none;}
.crumb{display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 10px; min-height:32px; padding:6px 14px; margin-bottom:20px; border-radius:999px; border:1px solid rgba(196,181,253,.3); background:rgba(139,92,246,.14); font-family:var(--mono); font-size:12px; line-height:1.2; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-on-dark);}
.crumb a{position:relative; color:inherit;}
.crumb a::after{content:""; position:absolute; inset:-12px -6px;}
.crumb a:hover{text-decoration:underline; text-underline-offset:3px;}
.crumb .sep{opacity:.6;}
.crumb [aria-current]{color:#fff;}
.phd h1{font-size:clamp(32px,6vw,48px); line-height:1.08; letter-spacing:-.03em; font-weight:800; color:#fff; max-width:24ch; text-wrap:balance;}
.phd-lead{margin-top:16px; max-width:62ch; font-size:17px; line-height:1.6; color:var(--dtext2);}
@media(min-width:900px){ .phd-lead{font-size:18px;} }
.phd .actions{margin-top:28px; display:flex; gap:12px; flex-wrap:wrap;}
@media(max-width:520px){ .phd .actions .btn{width:100%;} }

.pg .body{padding:48px 0 80px;}
@media(min-width:900px){ .pg .body{padding:72px 0 112px;} }
.wrap.narrow{max-width:860px;}
.rd{max-width:760px; color:var(--body); font-size:16px; line-height:1.7;}
.rd h2{font-family:var(--display); font-size:clamp(22px,2.6vw,28px); line-height:1.2; letter-spacing:-.025em; font-weight:800; color:var(--ink); margin:48px 0 14px; padding-top:28px; border-top:1px solid var(--line);}
.rd h2:first-child{margin-top:0; padding-top:0; border-top:0;}
.rd h3{font-family:var(--display); font-size:18px; line-height:1.3; letter-spacing:-.015em; font-weight:700; color:var(--ink); margin:28px 0 8px;}
.rd p{margin:0 0 14px;}
.rd ul,.rd ol{margin:0 0 16px; padding-left:22px; list-style:revert;}
.rd li{margin:6px 0; padding-left:2px;}
.rd li::marker{color:var(--accent);}
.rd strong{color:var(--ink); font-weight:650;}
.rd a:not(.btn){color:var(--accent-dk); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;}
.rd a:not(.btn):hover{text-decoration-thickness:2px;}
.rd code{font-family:var(--mono); font-size:.9em; background:var(--tint); border:1px solid var(--line); border-radius:6px; padding:1px 6px;}
.rd .meta{color:var(--muted); font-size:14px;}
.rd .meta.sig{margin-top:30px;}
.draft{background:var(--warn-bg); border:1px solid var(--warn-line); color:var(--warn-ink); border-radius:14px; padding:14px 18px; font-size:14px; margin:0 0 28px;}
.draft strong{color:var(--warn-ink);}
.callout{background:var(--soft); border:1px solid var(--soft-line); border-left:4px solid var(--accent); border-radius:14px; padding:16px 20px; margin:0 0 20px;}
.callout p:last-child{margin-bottom:0;}
.tw{overflow-x:auto; margin:0 0 20px; border:1px solid var(--line); border-radius:16px; background:var(--surface);}
.tw:focus-visible{outline:3px solid var(--accent); outline-offset:2px;}
.rd table{border-collapse:collapse; width:100%; min-width:520px; font-size:14.5px; line-height:1.5;}
.rd th,.rd td{text-align:left; padding:12px 16px; border-bottom:1px solid var(--line); vertical-align:top;}
.rd th{background:var(--tint); color:var(--ink); font-family:var(--display); font-weight:700; font-size:13.5px;}
.rd tr:last-child td{border-bottom:0;}
.phd.nf{min-height:min(70vh,640px); display:flex; align-items:center; padding-bottom:72px;}
.phd.nf .wrap{width:100%;}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}