@font-face{font-family:"IBM Plex Mono";src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
:root{
  /* Kognita AI brand kit */
  --coral:#FF6044; --red:#D83A1F; --blue:#58AFDB; --sky:#C5E8FF; --mint:#F1FAEE;
  --ink:#000000; --ink-soft:#333333; --muted:#666666;
  --paper:#FFFFFF; --tint:var(--mint); --line:#E2E7E0;
  --brand:var(--red); --brand-ink:#FFFFFF; --brand-soft:#FFE6E0;
  --gold:var(--red); --gold-soft:#FFE6E0;
  --serif:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#F1FAEE; --ink-soft:#CFD6CC; --muted:#9AA39A;
    --paper:#000000; --tint:#0F1210; --line:#262A26;
    --brand:var(--coral); --brand-ink:#000000; --brand-soft:#3A1810;
    --gold:var(--coral); --gold-soft:#3A1810;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--brand)}
img,svg{max-width:100%}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:4px}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;color:var(--ink)}
h1{font-size:clamp(2rem,4.1vw,3.15rem);line-height:1.1;letter-spacing:-.02em;margin:0 0 22px}
h2{font-size:clamp(1.55rem,2.6vw,2.05rem);line-height:1.18;letter-spacing:-.015em;margin:0 0 14px}
h3{font-size:1.3rem;line-height:1.25;margin:0 0 8px}
h4{font-size:1.08rem;margin:0 0 6px}
p{margin:0 0 14px;max-width:70ch}
.lede{font-size:1.16rem;color:var(--ink-soft)}
.muted{color:var(--muted)}
.ph{background:var(--gold-soft);color:var(--gold);padding:0 4px;border-radius:4px}

.btn{display:inline-block;font:600 1rem/1 var(--sans);padding:15px 22px;border-radius:10px;text-decoration:none;border:2px solid transparent;cursor:pointer;text-align:center}
.btn-primary{background:var(--brand);color:var(--brand-ink)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink-soft)}
.btn-sm{padding:10px 16px;font-size:.93rem}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0}

/* header */
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 93%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:26px;height:66px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:600 1.25rem/1 var(--serif);letter-spacing:-.02em}
.mainnav{display:flex;gap:22px;margin-left:auto;align-items:center}
.mainnav a{color:var(--ink-soft);text-decoration:none;font-size:.95rem}
.mainnav a:hover,.mainnav a[aria-current="page"]{color:var(--ink)}
.mainnav a[aria-current="page"]{font-weight:600}
.top-cta{display:flex;gap:10px}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:8px;padding:8px 12px;color:var(--ink);font:500 .95rem var(--sans)}
@media (max-width:980px){
  .mainnav{display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--line)}
  .mainnav.open{display:flex}
  .mainnav a{padding:14px 24px;border-top:1px solid var(--line)}
  .menu-btn{display:block}
  .top-cta{display:none}
}

/* page head */
.pagehead{padding:70px 0 40px;background:var(--tint);border-bottom:1px solid var(--line)}
.pagehead p{margin-bottom:0}

/* sections */
.block{padding:84px 0}
.block + .block{border-top:1px solid var(--line)}
.tinted{background:var(--tint)}
.intro{max-width:740px;margin-bottom:42px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
@media (max-width:900px){.grid2,.grid3{grid-template-columns:1fr;gap:34px}}
.ticks{list-style:none;padding:0;margin:14px 0 0}
.ticks li{padding:7px 0 7px 26px;position:relative;color:var(--ink-soft)}
.ticks li::before{content:"";position:absolute;left:3px;top:14px;width:10px;height:5px;border-left:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(-45deg)}

/* hero */
.hero{padding:78px 0 64px}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
@media (max-width:980px){.hero .wrap{grid-template-columns:1fr;gap:36px}}
.graph{width:100%;height:auto}
.graph .edge{stroke:var(--line);stroke-width:2}
.graph .edge.lit{stroke:var(--brand);stroke-width:2.4}
.graph .node rect{fill:var(--paper);stroke:var(--line);stroke-width:1.5}
.graph .node.key rect{stroke:var(--brand);stroke-width:2.2}
.graph text{font:600 13px var(--sans);fill:var(--ink)}
.graph text.sub{font:400 11.5px var(--sans);fill:var(--muted)}
.graph .dot{fill:var(--brand)}
.graph .dot.gold{fill:var(--coral)}
.graph .dot{fill:var(--blue)}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
.graph .edge.lit{animation:pulse 3.2s ease-in-out infinite}

.stats{display:flex;flex-wrap:wrap;gap:10px 32px;margin:8px 0 0;padding:0;list-style:none;color:var(--muted);font-size:.95rem}
.stats strong{color:var(--ink);font-weight:650}

/* demo */
.demo{background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 60px -32px rgba(16,26,51,.35);overflow:hidden}
.demo-head{padding:18px 20px 14px;border-bottom:1px solid var(--line)}
.demo-label{font-size:.85rem;color:var(--muted);margin-bottom:8px}
.idea{background:var(--tint);border-radius:10px;padding:12px 14px;font-family:var(--serif);font-size:1.05rem;min-height:54px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{font:500 .85rem/1 var(--sans);padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink-soft);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.demo-body{padding:4px 20px 16px}
.demo-sec{padding:14px 0;border-bottom:1px solid var(--line)}
.demo-sec:last-child{border-bottom:0}
.demo-sec h4{font:600 .88rem/1.2 var(--sans);color:var(--muted);margin:0 0 10px}
.call{display:grid;grid-template-columns:1fr auto;gap:4px 14px;padding:7px 0}
.call b{font-weight:600;line-height:1.35}
.call .meta{font-size:.85rem;color:var(--muted)}
.call .fit{grid-row:1/3;grid-column:2;align-self:center;text-align:right;font-size:.85rem;color:var(--muted)}
.bar{display:block;width:70px;height:6px;border-radius:3px;background:var(--tint);margin:4px 0 0 auto;overflow:hidden}
.bar i{display:block;height:100%;background:var(--coral)}
.due{color:var(--gold);font-weight:600}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{font-size:.85rem;padding:6px 10px;border-radius:8px;background:var(--tint);color:var(--ink-soft)}
.demo-foot{padding:10px 20px;background:var(--tint);font-size:.8rem;color:var(--muted)}

/* feature rows */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:64px 0;border-top:1px solid var(--line)}
.feature:first-of-type{border-top:0}
.feature.flip .copy{order:2}
@media (max-width:900px){.feature{grid-template-columns:1fr;gap:28px}.feature.flip .copy{order:0}}
.mock{background:var(--tint);border:1px solid var(--line);border-radius:16px;padding:20px}
.mock .row{display:flex;justify-content:space-between;gap:12px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px;font-size:.92rem}
.mock .row:last-child{margin-bottom:0}
.mock .row span{color:var(--muted)}
.tag{display:inline-block;font-size:.78rem;font-weight:600;padding:4px 9px;border-radius:999px;background:var(--brand-soft);color:var(--brand)}
.tag.gold{background:var(--gold-soft);color:var(--gold)}

/* audience */
.aud{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden}
@media (max-width:980px){.aud{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.aud{grid-template-columns:1fr}}
.aud a{display:block;padding:26px 22px;text-decoration:none;color:var(--ink);border-left:1px solid var(--line);background:var(--paper)}
.aud a:first-child{border-left:0}
.aud a:hover{background:var(--tint)}
.aud p{color:var(--ink-soft);font-size:.95rem;margin:0}

/* steps */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:0;list-style:none;border:1px solid var(--line);border-radius:16px;overflow:hidden}
@media (max-width:900px){.steps{grid-template-columns:1fr}}
.steps li{padding:28px 24px;border-left:1px solid var(--line);background:var(--paper)}
.steps li:first-child{border-left:0}
@media (max-width:900px){.steps li{border-left:0;border-top:1px solid var(--line)}.steps li:first-child{border-top:0}}
.steps li::before{counter-increment:s;content:counter(s);display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;border:2px solid var(--brand);color:var(--brand);font:700 1rem/1 var(--serif);margin-bottom:14px}
.steps p{color:var(--ink-soft);font-size:.96rem;margin:0}

/* pricing */
.billing{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:4px;margin-bottom:28px}
.billing button{font:600 .9rem/1 var(--sans);border:0;background:transparent;color:var(--ink-soft);padding:10px 18px;border-radius:999px;cursor:pointer}
.billing button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.plans{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px}
@media (max-width:980px){.plans{grid-template-columns:1fr}}
.plan{border:1px solid var(--line);border-radius:16px;padding:30px 26px;display:flex;flex-direction:column;background:var(--paper)}
.plan.pro{border:2px solid var(--brand);position:relative}
.plan.pro > .tag{position:absolute;top:-13px;left:24px;background:var(--brand);color:var(--brand-ink)}
.plan .price{font:600 2.2rem/1.1 var(--serif);margin:8px 0 2px}
.plan .price small{font:500 .95rem var(--sans);color:var(--muted)}
.plan ul{flex:1;margin-bottom:24px}
.compare{width:100%;border-collapse:collapse;font-size:.95rem}
.compare th,.compare td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}
.compare th{font-weight:600}
.compare td:not(:first-child),.compare th:not(:first-child){text-align:center}
.compare thead th{font-family:var(--serif);font-size:1.05rem}
.table-scroll{overflow-x:auto}

/* programmes */
.prog{display:grid;grid-template-columns:240px 1fr;gap:32px;padding:34px 0;border-top:1px solid var(--line)}
@media (max-width:760px){.prog{grid-template-columns:1fr;gap:8px}}
.prog h3{margin-top:2px}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.toc a{font-size:.9rem;padding:8px 12px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink-soft);background:var(--paper)}

/* sources */
.sources{list-style:none;padding:0;margin:0}
.sources li{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:13px 0;border-top:1px solid var(--line);font-size:.96rem}
@media (max-width:560px){.sources li{grid-template-columns:1fr;gap:2px}}
.sources span{color:var(--ink-soft)}

/* faq */
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:17px 36px 17px 0;font:600 1.08rem/1.35 var(--serif);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:12px;font:400 1.5rem var(--sans);color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--ink-soft);padding-bottom:10px}

/* forms */
.form{display:grid;gap:14px}
.form label{display:grid;gap:6px;font-size:.92rem;font-weight:600}
.form input,.form select,.form textarea{font:1rem var(--sans);padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink)}
.form textarea{min-height:130px;resize:vertical}
.form .consent{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.88rem;line-height:1.45}
.form .consent input{margin-top:3px;flex:none}
.form .btn{justify-self:start}

/* cta band */
.band{background:var(--ink);color:var(--paper);border-radius:22px;padding:54px 48px;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.band h2{color:var(--paper);margin:0 0 6px}
.band p{color:color-mix(in srgb,var(--paper) 75%,var(--ink));margin:0}
.band .btn-ghost{color:var(--paper);border-color:color-mix(in srgb,var(--paper) 40%,transparent)}
@media (prefers-color-scheme:dark){.band{background:var(--tint);border:1px solid var(--line)}.band h2{color:var(--ink)}.band p{color:var(--ink-soft)}.band .btn-ghost{color:var(--ink);border-color:var(--line)}}

/* team */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media (max-width:860px){.team{grid-template-columns:1fr}}
.person{border-top:2px solid var(--brand);padding-top:16px}
.person p{color:var(--ink-soft);font-size:.95rem}

/* legal */
.legal h2{font-size:1.4rem;margin-top:34px}

/* footer */
footer{border-top:1px solid var(--line);padding:56px 0 40px;font-size:.92rem;color:var(--muted);margin-top:0}
.fcols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:28px}
@media (max-width:900px){.fcols{grid-template-columns:1fr 1fr}}
.fcols h4{font:600 .95rem var(--sans);color:var(--ink);margin:0 0 10px}
.fcols ul{list-style:none;padding:0;margin:0}
.fcols li{margin:6px 0}
.fcols a{color:var(--ink-soft);text-decoration:none}
.fcols a:hover{color:var(--ink)}
.fbottom{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

.plan .trial{min-height:1.4em;margin:2px 0 6px;font:600 .9rem/1.4 var(--sans);color:var(--brand)}
