/* Kliento website styles ("Ink"). Values come from brand/tokens.css; rules: brand/DESIGN.md. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%}
body{font-family:var(--k-font);font-size:var(--k-fs-md);line-height:var(--k-lh-body);color:var(--k-ink);background:var(--k-paper)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--k-ink);outline-offset:3px}
.i{width:1.15em;height:1.15em;flex:none}
.wrap{max-width:var(--k-max);margin:0 auto;padding:0 var(--k-gutter)}
.skip{position:absolute;left:-9999px;top:8px;z-index:50;background:var(--k-ink);color:var(--k-on-ink);padding:10px 16px;border-radius:var(--k-r-pill)}
.skip:focus{left:8px}
h1,h2,h3{font-weight:var(--k-fw-strong);letter-spacing:var(--k-track-head);line-height:var(--k-lh-tight);color:var(--k-ink);text-wrap:balance}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:var(--k-fw-strong);font-size:var(--k-fs-base);line-height:1;padding:16px 26px;border-radius:var(--k-r-pill);border:var(--k-border);white-space:nowrap;transition:transform var(--k-dur-1) var(--k-ease-out),background-color var(--k-dur-1),color var(--k-dur-1)}
.btn:active{transform:scale(.97)}
.btn--ink{background:var(--k-ink);color:var(--k-on-ink)}
.btn--ink:hover{background:var(--k-ink-2);border-color:var(--k-ink-2)}
.btn--line:hover{background:var(--k-ink);color:var(--k-on-ink)}
.btn--sm{padding:11px 18px;font-size:15px}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--k-paper) 90%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color var(--k-dur-2)}
.nav.on{border-bottom-color:var(--k-hair)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:72px}
.nav__logo img{height:50px;width:auto}
.nav__links{display:flex;gap:26px;margin-left:auto;font-weight:var(--k-fw-medium);font-size:15px}
.nav__links a{position:relative;padding:4px 0}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--k-ink);transform:scaleX(0);transform-origin:left;transition:transform var(--k-dur-2) var(--k-ease-out)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1)}
.nav__actions{display:flex;gap:10px;align-items:center}
.nav__menu{display:none;width:44px;height:44px;border-radius:var(--k-r-pill);border:var(--k-border);align-items:center;justify-content:center;font-size:20px}
.sheet{display:none}

/* hero */
.hero{padding:clamp(48px,7vw,96px) 0 0;text-align:center}
.hero h1{font-size:var(--k-fs-display);letter-spacing:-.01em;max-width:16ch;margin:0 auto}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.hero h1 .ln span{display:block;transform:translateY(105%);animation:k-up var(--k-dur-4) var(--k-ease-out) forwards}
.hero h1 .ln:nth-child(2) span{animation-delay:80ms}
@keyframes k-up{to{transform:none}}
.hero__sub{font-size:var(--k-fs-xl);color:var(--k-ink-2);margin-top:20px}
.hero__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}
.hero__fig{position:relative;margin:clamp(48px,6vw,72px) auto 0;max-width:1120px}
.hero__fig img{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:var(--k-r-lg);background:var(--k-sunken)}
.call{position:absolute;left:clamp(16px,4vw,48px);bottom:-48px;width:min(380px,calc(100% - 32px));text-align:left;background:var(--k-surface);border:var(--k-border);border-radius:var(--k-r-lg);padding:18px 20px 16px;box-shadow:var(--k-shadow-3)}
.call__h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:var(--k-fw-strong);margin-bottom:10px}
.call__h span{margin-left:auto;font-weight:var(--k-fw-body);color:var(--k-mute)}
.call__ln{display:grid;grid-template-columns:70px 1fr;gap:10px;font-size:15px;line-height:1.4;padding:6px 0}
.call__ln b{font-size:var(--k-fs-xs);font-weight:var(--k-fw-strong);text-transform:uppercase;letter-spacing:var(--k-track-label);color:var(--k-mute);padding-top:2px}
.call__ln--k b{color:var(--k-ink)}
.demo .call__done{margin-top:10px}
.call__done{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;padding-top:12px;border-top:1px solid var(--k-hair);font-size:13px;font-weight:var(--k-fw-strong)}
.call__done span{display:inline-flex;align-items:center;gap:6px}
.js .call .call__ln,.js .call .call__done{opacity:0;transform:translateY(6px);transition:opacity var(--k-dur-3) var(--k-ease-out),transform var(--k-dur-3) var(--k-ease-out)}
.js .call .show{opacity:1;transform:none}

/* sections */
.sec{padding:var(--k-section) 0}
.sec__title{font-size:var(--k-fs-4xl)}
.sec__lead{font-size:var(--k-fs-lg);color:var(--k-ink-2);max-width:46ch;margin-top:16px}

/* products */
.products{padding-top:calc(var(--k-section) + 48px)}
.rows{margin-top:56px}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr);gap:var(--k-gutter);padding:40px 0 48px;border-top:var(--k-border);align-items:start}
.row h3{font-size:clamp(26px,2.3vw,34px)}
.row h3 .i{display:block;width:28px;height:28px;margin-bottom:14px}
.row p{color:var(--k-ink-2);max-width:40ch}
.row ul{list-style:none;margin-top:16px;display:grid;gap:8px;font-size:15px;font-weight:var(--k-fw-medium)}
.row li{display:flex;gap:10px;align-items:flex-start}
.row li .i{margin-top:3px}
.row__more{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-weight:var(--k-fw-strong);font-size:15px;border-bottom:2px solid var(--k-ink);padding-bottom:2px}
.row__more .i{transition:transform var(--k-dur-2) var(--k-ease-out)}
.row__more:hover .i{transform:translateX(3px)}
.demo{background:var(--k-surface);border:var(--k-border);border-radius:var(--k-r-lg);padding:18px}
.demo__h{font-size:var(--k-fs-xs);font-weight:var(--k-fw-strong);text-transform:uppercase;letter-spacing:var(--k-track-label);color:var(--k-mute);margin-bottom:14px}
.bub{max-width:86%;width:max-content;padding:11px 15px;border-radius:18px;font-size:15px;line-height:1.4;margin-bottom:8px}
.bub--them{background:var(--k-sunken);border-bottom-left-radius:6px}
.bub--us{background:var(--k-ink);color:var(--k-on-ink);margin-left:auto;border-bottom-right-radius:6px}
.mail__from{font-size:14px;padding-bottom:10px;border-bottom:1px solid var(--k-hair)}
.mail__from b{font-weight:var(--k-fw-strong)}
.mail__draft{font-size:15px;padding:12px 0}
.mail__acts{display:flex;gap:8px;align-items:center}
.mail__acts span{font-size:14px;font-weight:var(--k-fw-strong);padding:9px 16px;border-radius:var(--k-r-pill);border:var(--k-border)}
.mail__acts span:first-child{background:var(--k-ink);color:var(--k-on-ink)}
.mail__acts small{margin-left:auto;font-size:13px;color:var(--k-mute)}

/* founder band */
.band{background:var(--k-ink);color:var(--k-on-ink);padding:var(--k-section) 0;overflow:hidden}
.band q{display:block;quotes:none;font-size:clamp(32px,3.8vw,56px);font-weight:var(--k-fw-bold);font-style:italic;line-height:1.1;letter-spacing:-.02em;color:#FFFFFF;max-width:22ch;transform:rotate(-2deg);transform-origin:left center}
.band__who{margin-top:40px;display:flex;align-items:center;gap:16px;font-size:16px}
.band__who img{height:46px;width:auto;filter:invert(1)}
.band__who b{font-weight:var(--k-fw-strong)}
.band__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(32px,5vw,80px);align-items:center}
.band__logo{width:100%;max-width:440px;height:auto;justify-self:end;filter:invert(1)}
.band p{margin-top:24px;font-size:var(--k-fs-lg);max-width:46ch;color:var(--k-on-ink-mute)}

/* industries */
.ind{margin-top:48px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ind a{display:block}
.ind img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--k-r-lg);background:var(--k-sunken);transition:transform var(--k-dur-3) var(--k-ease-out)}
.ind a:hover img{transform:translateY(-4px)}
.ind span{display:block;margin-top:12px;font-weight:var(--k-fw-strong)}

/* clients */
.client{display:grid;grid-template-columns:auto 1fr auto;gap:24px 32px;align-items:center;background:var(--k-surface);border:var(--k-border);border-radius:var(--k-r-lg);padding:32px 40px}
.client__ic{width:64px;height:64px;border-radius:50%;background:var(--k-sunken);display:flex;align-items:center;justify-content:center;font-size:28px}
.client h2{font-size:var(--k-fs-3xl)}
.client p{color:var(--k-ink-2);margin-top:6px;max-width:52ch}
.client__acts{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.client__first{font-size:14px;color:var(--k-mute)}
.client__first a{color:var(--k-ink);text-decoration:underline;text-underline-offset:3px}

/* footer */
.foot{border-top:var(--k-border);padding:48px 0 40px;font-size:15px}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr;gap:var(--k-gutter)}
.foot__brand img{height:60px;width:auto}
.foot__brand p{margin-top:14px;color:var(--k-mute)}
.foot h2{font-size:13px;letter-spacing:var(--k-track-label);text-transform:uppercase;color:var(--k-mute);font-weight:var(--k-fw-strong);margin-bottom:12px}
.foot__grid a{display:block;padding:3px 0}
.foot__grid a:hover{text-decoration:underline;text-underline-offset:3px}
.foot__reach p{color:var(--k-ink-2);margin-bottom:12px}
.foot__reach .btn{padding:12px 20px;font-size:15px}
.foot__bot{margin-top:40px;color:var(--k-mute);font-size:14px}

/* reveal */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity var(--k-dur-4) var(--k-ease-out),transform var(--k-dur-4) var(--k-ease-out)}
.js .rv.in{opacity:1;transform:none}

@media (max-width:1024px){
  .nav__links{display:none}
  .row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .row .demo{grid-column:1 / -1;max-width:560px}
  .ind{grid-template-columns:repeat(2,1fr)}
  .client{grid-template-columns:auto 1fr}
  .client__acts{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:16px}
}
@media (max-width:767px){
  body{font-size:var(--k-fs-base)}
  .nav .wrap{height:64px;gap:10px}
  .nav__logo img{height:42px}
  .nav__actions{margin-left:auto}
  .nav__actions .btn--ink{display:none}
  .nav__actions .btn--line{padding:9px 14px;font-size:14px}
  .nav__menu{display:inline-flex}
  .sheet{position:fixed;inset:64px 0 auto 0;z-index:19;display:grid;background:var(--k-paper);border-bottom:var(--k-border);padding:8px var(--k-gutter) 24px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity var(--k-dur-2) var(--k-ease-out),transform var(--k-dur-2) var(--k-ease-out)}
  .sheet.open{opacity:1;transform:none;pointer-events:auto}
  .sheet a{font-size:22px;font-weight:var(--k-fw-strong);padding:13px 0;border-bottom:1px solid var(--k-hair)}
  .sheet .btn{margin-top:16px;font-size:17px;border-bottom:var(--k-border)}
  .hero{padding-top:40px}
  .hero h1{font-size:clamp(38px,11vw,48px)}
  .hero__sub{font-size:var(--k-fs-lg);margin-top:14px}
  .hero__cta{flex-direction:column;align-items:stretch;margin-top:28px}
  .hero__fig{margin-top:36px}
  .hero__fig img{aspect-ratio:4/3}
  .call{position:relative;left:auto;bottom:auto;width:auto;margin:-56px 12px 0}
  .products{padding-top:var(--k-section)}
  .rows{margin-top:36px}
  .row{grid-template-columns:minmax(0,1fr);gap:18px;padding:32px 0 36px}
  .band q{font-size:34px;transform:rotate(-2deg)}
  .band__grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .band__logo{justify-self:start;max-width:240px}
  .ind{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:32px calc(var(--k-gutter) * -1) 0;padding:0 var(--k-gutter) 6px;scrollbar-width:none}
  .ind::-webkit-scrollbar{display:none}
  .ind a{flex:0 0 72%;scroll-snap-align:start}
  .ind img{aspect-ratio:4/3}
  .client{grid-template-columns:1fr;padding:28px 24px;gap:16px}
  .client__acts{flex-direction:column;align-items:stretch}
  .client__acts .btn{width:100%}
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__brand,.foot__reach{grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero h1 .ln span{transform:none}
  .js .rv,.js .call .call__ln,.js .call .call__done{opacity:1;transform:none}
}

/* ---------- inner pages ---------- */
.page-head{padding:clamp(48px,6vw,88px) 0 clamp(40px,5vw,64px)}
.page-head h1{font-size:var(--k-fs-display);max-width:18ch}
.page-head p{font-size:var(--k-fs-xl);color:var(--k-ink-2);max-width:40ch;margin-top:18px;line-height:1.45}
.page-head .hero__cta{justify-content:flex-start}
.page-head--center{text-align:center}
.page-head--center h1,.page-head--center p{margin-left:auto;margin-right:auto}
.page-head--center .hero__cta{justify-content:center}
.sec--tight{padding-top:0}
.sec__head{max-width:46ch}
.sec__head+*{margin-top:48px}

.checks{list-style:none;display:grid;gap:10px;font-size:16px;font-weight:var(--k-fw-medium)}
.checks li{display:flex;gap:10px;align-items:flex-start}
.checks li .i{margin-top:3px}

/* product detail */
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center;padding:clamp(48px,6vw,80px) 0;border-top:var(--k-border)}
.feature:last-child{border-bottom:var(--k-border)}
.feature h2{font-size:var(--k-fs-3xl);display:flex;align-items:center;gap:12px}
.feature h2 .i{width:30px;height:30px}
.feature p{color:var(--k-ink-2);margin-top:14px;max-width:46ch}
.feature .checks{margin-top:22px}
.feature__note{font-size:15px;color:var(--k-mute);margin-top:20px}
.feature__media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--k-r-lg);background:var(--k-sunken)}
.feature .hero__cta{justify-content:flex-start;margin-top:26px}

/* steps */
.steps{list-style:none;border-top:var(--k-border)}
.steps>li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) minmax(0,1fr);gap:var(--k-gutter);padding:32px 0;border-bottom:1px solid var(--k-hair)}
.steps h3{font-size:var(--k-fs-xl)}
.steps p{color:var(--k-ink-2)}
.steps .checks{font-size:15px}

/* cards */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--k-surface);border:1px solid var(--k-hair);border-radius:var(--k-r-lg);padding:28px}
.card>.i{width:26px;height:26px;margin-bottom:16px}
.card h3{font-size:var(--k-fs-xl);margin-bottom:8px}
.card p{color:var(--k-ink-2);font-size:16px}
.card--ink{background:var(--k-ink);border-color:var(--k-ink);color:var(--k-on-ink)}
.card--ink h3{color:var(--k-on-ink)}
.card--ink p{color:var(--k-on-ink-mute)}

/* industries detail */
.ind-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ind-row{background:var(--k-surface);border:1px solid var(--k-hair);border-radius:var(--k-r-lg);overflow:hidden;display:flex;flex-direction:column}
.ind-row__media img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--k-sunken)}
.ind-row__body{padding:26px 28px 30px}
.ind-row h2{font-size:var(--k-fs-2xl)}
.ind-row .k-tag{font-size:var(--k-fs-sm);font-weight:var(--k-fw-strong);color:var(--k-mute);margin-bottom:8px;display:block}
.ind-row p{color:var(--k-ink-2);margin-top:12px;font-size:16px}
.ind-row .checks{margin-top:18px;font-size:15px}

/* quote */
.quote{border-left:3px solid var(--k-ink);padding:6px 0 6px 28px}
.quote q{display:block;quotes:none;font-size:var(--k-fs-2xl);font-weight:var(--k-fw-strong);font-style:italic;line-height:1.25;letter-spacing:-.01em}
.quote span{display:block;margin-top:14px;color:var(--k-mute);font-size:15px}

/* prose */
.prose p{color:var(--k-ink-2);max-width:62ch}
.prose p+p{margin-top:16px}
.split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,5vw,80px);align-items:start}

/* faq */
.faq{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:var(--k-gutter);padding:40px 0;border-top:var(--k-border)}
.faq h2{font-size:var(--k-fs-xl)}
.faq details{border-bottom:1px solid var(--k-hair)}
.faq details:first-of-type{border-top:1px solid var(--k-hair)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:20px 0;font-weight:var(--k-fw-strong);font-size:var(--k-fs-md)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .i{transform:rotate(45deg);transition:transform var(--k-dur-2) var(--k-ease-out);margin-top:3px}
.faq details[open] summary .i{transform:none}
.faq details p{color:var(--k-ink-2);padding:0 0 22px;max-width:62ch}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.contact-card{display:flex;flex-direction:column;gap:6px;background:var(--k-surface);border:var(--k-border);border-radius:var(--k-r-lg);padding:32px}
.contact-card>.i{width:28px;height:28px;margin-bottom:10px}
.contact-card small{font-size:var(--k-fs-sm);color:var(--k-mute);font-weight:var(--k-fw-strong)}
.contact-card strong{font-size:var(--k-fs-xl);font-weight:var(--k-fw-strong);word-break:break-word}
.contact-card p{color:var(--k-ink-2);font-size:15px}
.contact-card .btn{align-self:flex-start;margin-top:16px}
.contact-card--quiet{border:1px solid var(--k-hair)}
.next{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--k-gutter);border-top:var(--k-border);padding-top:28px}
.next h3{font-size:var(--k-fs-lg);margin-bottom:8px}
.next p{color:var(--k-ink-2);font-size:16px}

/* demo page */
.tries{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.try{background:var(--k-surface);border:1px solid var(--k-hair);border-radius:var(--k-r-lg);padding:26px}
.try h3{font-size:var(--k-fs-lg);display:flex;gap:10px;align-items:center}
.try q{display:block;quotes:none;font-weight:var(--k-fw-strong);margin-top:12px}
.try p{color:var(--k-ink-2);font-size:15.5px;margin-top:6px}

.places{color:var(--k-ink-2);font-size:16px;margin-top:12px}

@media (max-width:1024px){
  .steps>li{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .steps>li .checks{grid-column:1 / -1}
  .cards--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faq{grid-template-columns:1fr;gap:12px}
}
@media (max-width:767px){
  .page-head h1{font-size:clamp(36px,10vw,46px)}
  .page-head p{font-size:var(--k-fs-lg)}
  .page-head .hero__cta{align-items:stretch}
  .feature,.split{grid-template-columns:minmax(0,1fr);gap:28px}
  .ind-grid{grid-template-columns:minmax(0,1fr)}
  .steps>li{grid-template-columns:minmax(0,1fr);gap:10px;padding:26px 0}
  .cards,.cards--3,.contact-grid,.tries{grid-template-columns:minmax(0,1fr)}
  .next{grid-template-columns:minmax(0,1fr);gap:22px}
  .feature .hero__cta .btn{width:100%}
  .contact-card .btn{align-self:stretch}
}
.band .sec__title{color:#FFFFFF}
.band .card--ink{border-color:#3A3A3A}
a.card{display:block;transition:border-color var(--k-dur-1),transform var(--k-dur-2) var(--k-ease-out)}
a.card:hover{border-color:var(--k-ink);transform:translateY(-2px)}