/* Agentic Workflows — light page. Kizen type (Season Light statements, Booton substance), v6ex line language re-inked for white. */
@font-face{font-family:'Booton';src:url(fonts/booton/Booton-Light.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Booton';src:url(fonts/booton/Booton-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Booton';src:url(fonts/booton/Booton-Medium.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Booton';src:url(fonts/booton/Booton-SemiBold.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Season Serif';src:url(fonts/season/SeasonSerif-Light.woff2) format('woff2');font-weight:300;font-display:swap}

:root{
  --bg:#FFFFFF; --s1:#F6F7F9; --s2:#F6F7F9; --s3:#F6F7F9; --aw-panel:#F6F7F9; --tint:#E4F0EF; --mist:#E4F0EF; --mist-2:#E4F0EF;
  --line:#E6E8EB; --line-2:#D4D8DD; --line-3:#C2C8CE;
  --ink:#0B1724; --t2:#3B4550; --t3:#5F6872; --t4:#8A929A;
  --teal:#0C595C; --teal-2:#18696C; --teal-3:#15999D; --aqua:#4CBED2; --mint:#E4F0EF; --mint-2:#E4F0EF; --mint-3:#E4F0EF;
  --coral:#F26C56; --coral-2:#E25A44; --peach:#FDEFE9;
  --navy:#0B1724;
  /* this page's colour (chosen for Custom App Builder): icon grounds, kickers, figures */
  --accent:#01989E; --accent-tint:#E1F2F3;
  --serif:'Season Serif',Georgia,'Times New Roman',serif;
  --sans:Booton,Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
  --ease:cubic-bezier(.23,1,.32,1);
  --wrap:1296px;
  color-scheme:light;
}
*{box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html{scroll-padding-top:72px}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Booton's alternates for a, g, r and l (ss01-ss04), everywhere Booton sets type, demos included. The font shorthand
   resets feature settings, so they are set on every element; Season Serif has its own ss01-ss05, so its type and the
   mono lines are left out. */
*{font-feature-settings:'ss01','ss02','ss03','ss04' !important}
.h1,.h1 *,.h2,.h2 *,.cs-banner em,.abh-banner em,.abb-l,.abb-l *{font-feature-settings:normal !important}
.faq .h2{font-feature-settings:'ss01','ss02','ss03','ss04' !important}
html,body{overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
img,svg{display:block;max-width:100%}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,p{margin:0}
.wrap{width:100%;max-width:calc(var(--wrap) + 48px);margin:0 auto;padding:0 24px}
:focus-visible{outline:2px solid var(--teal-3);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px;font-size:14px}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.center{text-align:center}
p,h1,h2,h3,li,dt,dd,summary{text-wrap:balance}
.body,.lede,.qa-a p{text-wrap:pretty}

/* ---------------- type ---------------- */
.h1{font:300 clamp(44px,5.2vw,76px)/1.1 var(--serif);color:var(--ink)}
.h1 span{display:block}
.h2{font:300 clamp(40px,4.4vw,60px)/1.12 var(--serif);color:var(--ink)}
.feat .h2{font-size:clamp(36px,3.5vw,52px)}
.h2-xl{font-size:clamp(40px,4.2vw,62px);line-height:1.08}
.h3{font:500 19px/1.3 var(--sans);color:var(--ink)}
.lede{font:400 18px/1.75 var(--sans);color:var(--t3);max-width:580px;margin:24px auto 0}
.body{font:400 16px/1.65 var(--sans);color:var(--t3)}
.kicker{display:inline-block;padding:10px 16px;border-radius:999px;box-shadow:inset 0 0 0 1px #DDE2E6;font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.kicker+.h2{margin-top:20px}
.sec-head .kicker{margin-bottom:0}
#case .sec-head{margin-bottom:26px}
.link{display:inline-flex;align-items:center;gap:6px;color:var(--teal);font-weight:500;transition:color .2s}
.link:hover{color:var(--teal-3)}
.link .chev{width:12px;height:12px}

/* ---------------- buttons ---------------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;height:50px;padding:0 22px;border-radius:999px;font:500 14px/1 var(--sans);white-space:nowrap;
  transition:background .2s ease,color .2s ease,transform .16s var(--ease)}
.btn:active{transform:scale(.97)}
.btn-coral{background:var(--coral);color:#fff;padding-right:6px}
.btn-coral:hover{background:var(--coral-2)}
.btn-quiet{background:rgba(11,23,36,.05);color:var(--ink)}
.btn-quiet:hover{background:rgba(11,23,36,.08)}
.btn-sm{height:38px;padding:0 18px;font-size:14px}
.btn-xs{height:32px;padding:0 14px;font-size:13px}
.btn-sm.btn-coral,.btn-xs.btn-coral{padding-right:16px}
.btn-arrow{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--coral-2)}
.btn-quiet{padding-right:6px}
.btn-quiet .btn-arrow{background:#fff}
/* chevron: slides out right while its twin slides in (v6ex) */
.chev{position:relative;display:inline-block;width:14px;height:14px;overflow:hidden;flex:none}
.chev svg{position:absolute;inset:0;width:14px;height:14px;transition:transform .45s var(--ease)}
.chev .c2{transform:translateX(-120%)}
a:hover .chev .c1,a:focus-visible .chev .c1{transform:translateX(120%)}
a:hover .chev .c2,a:focus-visible .chev .c2{transform:none}
@media (prefers-reduced-motion:reduce){.chev svg{transition:none}}

/* ---------------- header (kizen.com) ---------------- */
.nav{position:relative;z-index:60;background:#fff}
.nav-row{display:flex;align-items:center;height:68px;gap:24px;position:relative;z-index:2}
.brand{display:flex;align-items:center;flex:none;width:86px;height:28px;color:var(--ink)}
.brand-clip{display:block;width:28px;overflow:hidden;transition:width .6s var(--ease)}
.brand .brand-logo{display:block;width:86px;height:28px;flex:none;overflow:visible}
.brand .bm{fill:var(--teal);transform-box:fill-box;transform-origin:center;transition:transform .8s var(--ease)}
.brand .bw{fill:var(--ink);opacity:0;transform:translateX(-10px);transition:opacity .35s ease,transform .6s var(--ease)}
.brand{overflow:hidden}
.brand .brand-logo{clip-path:inset(0 calc(100% - 28px) 0 0);transition:clip-path .6s var(--ease)}
.brand.full .brand-logo,.brand:hover .brand-logo,.brand:focus-visible .brand-logo{clip-path:inset(0 0 0 0)}
.brand.full .bw,.brand:hover .bw,.brand:focus-visible .bw{opacity:1;transform:none;transition-delay:.08s,0s}
.brand.full .bm,.brand:hover .bm,.brand:focus-visible .bm{transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.brand .brand-logo,.brand .bw,.brand .bm{transition:none}}
.menu{display:flex;align-items:center;gap:30px;margin:0 auto;font:400 14px var(--sans)}
.menu>a,.dd-t{display:flex;align-items:center;gap:5px;color:var(--ink);transition:color .2s;height:68px}
.menu>a:hover,.dd-t:hover,.dd-t[aria-expanded="true"]{color:var(--teal-3)}
.caret{width:10px;height:10px;opacity:.6;transition:transform .25s var(--ease)}
.dd-t[aria-expanded="true"] .caret{transform:rotate(180deg)}
.nav-cta{display:flex;align-items:center;gap:18px;font:400 14px var(--sans)}
.login-wrap{position:relative}
.burger{display:none;width:40px;height:40px;border-radius:12px;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:1.5px;background:var(--ink);border-radius:2px}
.burger span:first-child{top:16px}.burger span:last-child{top:23px}
/* dropdowns: one white sheet drops from under the header */
.dd{position:absolute;left:0;right:0;top:100%;z-index:1;pointer-events:none}
.dd .wrap{position:relative}
.dd-panel{position:absolute;left:24px;right:24px;top:0;background:#fff;border-radius:20px;overflow:hidden;
  opacity:0;visibility:hidden;transform:translateY(-6px);box-shadow:0 24px 48px -24px rgba(11,23,36,.16);
  transition:opacity .2s ease,transform .3s var(--ease),visibility 0s linear .3s}
.dd-panel.open{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .25s ease .04s,transform .4s var(--ease),visibility 0s}
.dd-body{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:30px 36px 34px}
.dd-title{font:500 15px var(--sans);color:var(--t4)}
.dd-list{display:flex;flex-direction:column;gap:6px}
.dd-list a{display:flex;align-items:center;gap:14px;font:400 16px/1.3 var(--sans);color:var(--ink);padding:6px 0;transition:color .2s}
.dd-list a:hover{color:var(--teal-3)}
.dd-icons{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dd-icons a{align-items:flex-start;padding:14px;border-radius:14px;transition:background .2s}
.dd-icons a:hover{background:var(--s1);color:var(--ink)}
.dd-icons b{display:block;font-weight:500;margin-bottom:4px}
.dd-icons i{display:block;font-style:normal;font-size:13.5px;line-height:1.45;color:var(--t3)}
.dd-ico{width:48px;height:48px;flex:none;border-radius:12px;background:var(--mint);color:var(--teal);display:grid;place-items:center;transition:background .25s,color .25s}
.dd-ico svg{width:26px;height:26px}
.dd-icons a:hover .dd-ico{background:var(--teal);color:#fff}
.dd-foot{display:flex;align-items:center;justify-content:center;gap:16px;height:58px;background:linear-gradient(90deg,#0C595C,#0E7E83 60%,#159CA0)}
.dd-foot p{font:400 15px var(--sans);color:#fff}
.dd-foot a{display:inline-flex;align-items:center;height:32px;padding:0 16px;border-radius:999px;background:#fff;color:var(--teal);font:500 13.5px var(--sans)}
.dd-small{left:auto;right:-12px;top:calc(100% + 8px);min-width:190px;border-radius:14px}
.dd-small .dd-list{padding:10px 18px}
.dd-small .dd-list a{font-size:14.5px}
@media (prefers-reduced-motion:reduce){.dd-panel,.dd-panel.open,.caret{transition:none}}

/* mobile menu */
.mnav{position:fixed;inset:0;z-index:120;background:#fff;overflow:auto;padding-bottom:40px}
.mnav[hidden]{display:none}
.mn-top{display:flex;align-items:center;justify-content:space-between;height:68px}
.mn-x{width:40px;height:40px;display:grid;place-items:center}
.mn-x svg{width:22px;height:22px}
.mn-body{display:flex;flex-direction:column;padding-top:8px}
.mn-link,.mn-g summary{display:flex;align-items:center;justify-content:space-between;height:56px;font:400 19px var(--sans);list-style:none;cursor:pointer}
.mn-g summary::-webkit-details-marker{display:none}
.mn-g summary::after{content:'';width:9px;height:9px;border-right:1.5px solid var(--t3);border-bottom:1.5px solid var(--t3);transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s var(--ease)}
.mn-g[open] summary::after{transform:rotate(-135deg)}
.mn-g a{display:block;padding:11px 0 11px 14px;color:var(--t2);font-size:16px}
.mn-g[open]{padding-bottom:8px}
.mn-cta{margin-top:28px;height:50px;padding-right:20px}

/* sub-nav */
/* the sub-nav is not there at the top of the page; it slides down once the page is scrolled */
.subbar{position:fixed;top:0;left:0;right:0;z-index:50;background:#fff;
  transform:translateY(-100%);opacity:0;pointer-events:none;transition:transform .45s var(--ease),opacity .3s ease}
.subbar.stuck{transform:none;opacity:1;pointer-events:auto}
.subnav{display:flex;align-items:center;height:52px;gap:24px}
.sub-title{font:500 15px var(--sans);color:var(--ink)}
.subnav nav{position:relative;display:flex;gap:28px;margin-left:auto;font:400 14px var(--sans);align-self:stretch}
.subnav nav a{display:flex;align-items:center;color:var(--t3);transition:color .2s}
.subnav nav a:hover,.subnav nav a.on{color:var(--ink)}
.sub-ind{position:absolute;bottom:-1px;left:0;height:2px;width:0;background:var(--teal);border-radius:2px;transition:transform .45s var(--ease),width .45s var(--ease)}
.sub-cta{opacity:0;transform:translateX(8px);pointer-events:none;transition:opacity .3s ease,transform .45s var(--ease);margin-left:4px}
.subbar.stuck .sub-cta{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.sub-ind,.sub-cta,.subbar{transition:none}}

/* ---------------- hero ---------------- */
.hero{position:relative;padding:104px 0 0;isolation:isolate}
.hero-copy{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}
/* the tag from Figma 1574:1678: pale pill, mark and words in one dark teal */
.eyebrow{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 18px 0 15px;margin-bottom:28px;border-radius:24px;background:#F6F7F9;font:400 18px/1 var(--sans);color:#2B5457}
.eyebrow .kz-mark{width:20px;height:20px}
.hero-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}
.certs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:22px;font:400 13px var(--sans);color:var(--t3)}
.certs li{display:flex;align-items:center;gap:6px}
.ico-shield{width:16px;height:16px;color:var(--teal-3)}
/* entrance: lines rise in sequence */
.hi{opacity:0;transform:translateY(14px);animation:hi 1s var(--ease) forwards;animation-delay:calc(.12s + var(--i,0) * .09s)}
@keyframes hi{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hi{animation:none;opacity:1;transform:none}}

/* the WorkOS-style band, in Kizen colour: white -> peach whisper -> aqua/teal band -> white, with a fine scanline over it */
.hero-bg,.cta-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
/* the band dissolves into the page instead of ending on the section's edge */
.hero-bg{bottom:-160px;-webkit-mask:linear-gradient(#000 0,#000 58%,transparent 100%);mask:linear-gradient(#000 0,#000 58%,transparent 100%)}
.hb-band{position:absolute;left:50%;top:0;width:max(1680px,124%);height:1180px;transform:translateX(-50%);
  background:radial-gradient(107% 100% at 50% 0,
    #FFFFFF 0%,#FFFFFF 37%,#FEFEFD 43%,#FBFCFB 48%,#F6FAF8 52%,#EEF6F4 55.5%,#E2F1F0 58.5%,
    #CFE9E9 61.5%,#B6DEDF 64%,#9CD2D5 66.3%,#88C9CD 68.2%,#7FC3C8 69.8%,#84C5CA 71.4%,#95CDD1 73.2%,
    #ADD8DB 75.2%,#C5E4E5 77.4%,#D9EEEE 79.6%,#E8F5F4 82%,#F3F9F8 84.5%,#FAFCFC 87.2%,#FFFFFF 90%);
  filter:blur(10px);transform-origin:50% 0}
.hb-lines{position:absolute;left:0;right:0;top:440px;height:640px;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 3px,rgba(255,255,255,.5) 3px,rgba(255,255,255,.5) 4px);
  -webkit-mask:radial-gradient(60% 55% at 50% 52%,#000 0,rgba(0,0,0,.65) 45%,transparent 75%);mask:radial-gradient(60% 55% at 50% 52%,#000 0,rgba(0,0,0,.65) 45%,transparent 75%)}
.hero .hb-band{animation:band-in 1.8s cubic-bezier(.33,1,.68,1) backwards,fade-in .8s linear backwards}
.hero .hb-lines{animation:fade-in 1.4s .3s linear backwards}
@keyframes band-in{from{transform:translateX(-50%) translateY(90px) scaleY(.72)}}
@keyframes fade-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.hero .hb-band,.hero .hb-lines{animation:none}}
.hero-stage{position:relative;margin-top:58px;padding-bottom:0}
.demo-hero{position:relative;width:100%;max-width:1200px;margin:0 auto;aspect-ratio:1200/440;animation:stage-in 1.3s .45s var(--ease) backwards}
@media (max-width:760px){.demo-hero{max-width:420px}}
@keyframes stage-in{from{opacity:0;transform:translateY(40px) scale(.97)}}
@media (prefers-reduced-motion:reduce){.demo-hero{animation:none}}

/* ---------------- trusted ---------------- */
.trusted{padding:64px 24px 0;text-align:center}
.trusted-h{font:400 15px var(--sans);color:var(--t3)}
.logos{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;margin-top:22px}
.logos li{height:72px;display:grid;place-items:center}
.logos .dup{display:none}
@media (max-width:760px){.logos .dup{display:grid}}
.logos img{max-height:30px;width:auto}
.logos img[alt="AmeriLife"],.logos img[alt="Harbor Health"]{max-height:15px}
.logos img[alt="Pinnacle Financial Services"]{max-height:36px}

@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.logos{animation:none!important}}
/* ---------------- sections ---------------- */
.sec{padding:140px 24px 0}
.sec-head{max-width:1200px;margin:0 auto 56px;text-align:center}
/* section titles run in two lines on wide screens; on phones they wrap as they fit */
.sec-head .h2{text-wrap:balance}
@media (max-width:760px){.br2{display:none}}
.panel{background:var(--s1);border-radius:20px}

/* popular: five cards, the open one widens and plays its one idea */
.sec-sub{margin-top:18px;font:400 17px/1.6 var(--sans);color:var(--t3)}
.wf{display:flex;gap:12px;height:470px}
.wf-card{position:relative;flex:1 1 0;min-width:0;display:block;padding:0;border-radius:26px;background:var(--s1);text-align:left;overflow:hidden;cursor:pointer;
  transition:flex-grow .8s var(--ease),background .4s ease}
.wf-card.on{flex-grow:3.6}
.wf-ico{position:absolute;left:28px;top:28px;display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:#fff;color:var(--accent);transition:background .4s ease,color .4s ease}
.wf-ico .ico{width:26px;height:26px}
.wf-card.on .wf-ico{background:var(--accent);color:#fff}
.wf-t{position:absolute;left:28px;right:24px;bottom:28px;font:400 19px/1.3 var(--sans);color:var(--ink);text-wrap:balance}
.wf-card.on .wf-t{font-size:22px;right:40%}
.wf-stage{position:absolute;left:28px;right:28px;top:108px;bottom:96px;opacity:0;transition:opacity .35s ease}
.wf-card.on .wf-stage{opacity:1;transition:opacity .6s ease .35s}
.wf-in{position:absolute;inset:0;display:block;font-family:var(--sans)}
/* a page: white sheet, a few soft lines */
.pg{position:absolute;display:flex;flex-direction:column;gap:9px;width:84px;height:108px;padding:16px 12px;border-radius:12px;background:#fff;box-shadow:0 14px 30px -18px rgba(11,23,36,.3)}
.pg i{display:block;height:6px;border-radius:3px;background:#E8ECEC}
.pg i:nth-child(2){width:72%}.pg i:nth-child(4){width:58%}
/* classification */
.wc-pile{position:absolute;left:0;top:30px;width:110px;height:140px}
.wc-pile .pg{left:0;top:0}.wc-pile .p2{left:8px;top:-8px}.wc-pile .p3{left:16px;top:-16px}
.wc-fly{position:absolute;left:16px;top:14px;transform-origin:0 0;will-change:transform}
.wc-fly .pg{position:relative}
.wc-trays{position:absolute;right:0;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;gap:12px;width:58%}
.wc-tray{display:flex;align-items:center;justify-content:space-between;height:62px;padding:0 22px;border-radius:16px;background:#fff;transition:background .35s ease}
.wc-tray b{font:400 17px var(--sans);color:var(--ink)}
.wc-tray em{font:400 22px var(--sans);font-style:normal;color:var(--teal);font-variant-numeric:tabular-nums}
.wc-tray.hit{background:#DCEFEF}
/* extraction */
.we-doc{position:absolute;left:0;top:0;bottom:0;width:44%;display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:18px;background:#fff}
.we-doc b{font:500 15px var(--sans);color:var(--ink);margin-bottom:6px}
.we-doc i{position:relative;display:block;height:8px;border-radius:4px;background:#E8ECEC;overflow:hidden;--hl:0}
.we-doc i::after{content:'';position:absolute;inset:0;background:var(--teal-3);transform-origin:0 50%;transform:scaleX(var(--hl))}
.we-doc i:nth-of-type(3){width:70%}.we-doc i:nth-of-type(5){width:60%}
.we-rec{position:absolute;right:0;top:0;bottom:0;width:50%;display:flex;flex-direction:column;justify-content:center;gap:12px}
.we-row{display:flex;flex-direction:column;gap:6px;padding:18px 22px;border-radius:16px;background:#fff;opacity:0}
.we-row span,.wm-row span,.wq-row span,.wq-total span{font:400 14px var(--sans);color:var(--t3)}
.we-row strong{font:400 24px var(--sans);color:var(--ink);white-space:nowrap}
/* missing data */
.wm-form{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;gap:10px}
.wm-row{position:relative;display:flex;align-items:center;justify-content:space-between;height:50px;padding:0 20px;border-radius:14px;background:#fff;--ring:0;transition:background .35s ease}
.wm-row strong{font:400 16px var(--sans);color:var(--ink)}
.wm-row.empty strong{width:120px;height:10px;border-radius:5px;background:#F2F4F4}
.wm-row.empty::after{content:'';position:absolute;inset:-4px;border-radius:18px;box-shadow:0 0 0 2px rgba(21,153,157,var(--ring))}
.wm-row.flag{background:#DCEFEF}
.wm-note{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;font:400 16px var(--sans);color:var(--teal);opacity:0}
.wm-note .gi{width:20px;height:20px}
/* draft */
.wd-mail{position:absolute;inset:0;display:flex;flex-direction:column;padding:24px 26px;border-radius:18px;background:#fff}
.wd-mail b{font:500 16px var(--sans);color:var(--ink)}
.wd-lines{display:flex;flex-direction:column;gap:14px;margin-top:24px}
.wd-lines i{display:block;height:8px;width:var(--w);border-radius:4px;background:#E8ECEC;transform-origin:0 50%;transform:scaleX(var(--k,0))}
.wd-foot{display:flex;align-items:center;gap:10px;margin-top:auto;font:400 15px var(--sans);color:var(--ink);opacity:0}
.wd-foot .mr-av{display:grid}
/* calculations */
.wk-calc{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px}
.wq-row{display:flex;align-items:center;justify-content:space-between;height:54px;padding:0 22px;border-radius:14px;background:#fff}
.wq-row strong{font:400 18px var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.wq-total{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px 16px;margin-top:auto;padding:20px 22px;border-radius:16px;background:var(--teal)}
.wq-total span{color:rgba(255,255,255,.8)}
.wq-total strong{font:400 30px var(--sans);color:#fff;font-variant-numeric:tabular-nums}
.wq-bar{grid-column:1/-1;height:6px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden}
.wq-bar i{display:block;height:100%;border-radius:3px;background:#fff;transform-origin:0 50%;transform:scaleX(0)}

/* two-column feature rows */
.feat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center;padding:150px 24px 0}
.feat-r .feat-copy{order:0}
.feat-copy .h2{max-width:520px}
.feat-copy .body{margin-top:22px;max-width:460px}
.feat-art{margin:0;position:relative;aspect-ratio:7/5;overflow:hidden}
.art{position:absolute;inset:0}
.art svg{width:100%;height:100%}
.ticks{margin-top:40px;display:flex;flex-direction:column;gap:22px}
.ticks li{display:flex;align-items:center;gap:16px;font:400 17px/1.45 var(--sans);color:var(--t4);transition:color .4s ease}
.tick-ico{display:grid;place-items:center;flex:none;color:var(--t4);transition:color .4s ease}
.tick-ico .ico{width:24px;height:24px}
.ticks li.on{color:var(--ink)}
.ticks li.on .tick-ico{color:var(--teal)}
.ship .h2 em{display:block;font-style:normal;color:var(--teal-3)}

/* show their work: three RBAC-style panels */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tcard-ui{position:relative;aspect-ratio:4/3.1;overflow:hidden;margin-bottom:28px}
.tcard .kicker{margin-bottom:12px}
.tcard .h3{font-size:21px}
.dots{margin-top:16px;display:flex;flex-direction:column;gap:9px}
.dots li{position:relative;padding-left:18px;font:400 15px/1.55 var(--sans);color:var(--t3)}
.dots li::before{content:'';position:absolute;left:2px;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--teal-3)}
/* the security strip: one hairline frame, the shield leading it, the link at its far end */
.trust-line{display:flex;align-items:center;gap:22px;margin:72px auto 0;padding:18px 30px 18px 18px;border:1.5px solid #E2E5E8;border-radius:22px}
.trust-line p{display:flex;flex-wrap:wrap;align-items:center;gap:8px 32px;font:400 15px/1.5 var(--sans);color:var(--t3)}
.trust-line p span:first-child{color:var(--ink)}
.tl-shield{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:16px;background:#E4F0EF;color:#0C595C}
.tl-shield .ico{width:26px;height:26px}
.trust-line>.link{margin-left:auto;flex:none;font:400 15px/1.5 var(--sans)}
.quiet3{display:flex;flex-direction:column;gap:18px;margin-top:40px}
.quiet3 li{display:flex;align-items:flex-start;gap:14px;font:400 15px/1.5 var(--sans);color:var(--t3)}
.quiet3 .ico{width:22px;height:22px;flex:none;color:var(--teal);margin-top:1px}
.quiet3 b{display:block;font-weight:500;color:var(--ink)}
.dtabs{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:40px}
.dtab{position:relative;padding:10px 0 14px;font:400 20px/1.3 var(--sans);color:var(--t4);transition:color .35s ease}
.dtab i{position:absolute;left:0;right:0;bottom:4px;height:2px;border-radius:2px;background:var(--line)}
.dtab i::after{content:'';position:absolute;inset:0;border-radius:2px;background:var(--teal);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.dtab.on{color:var(--ink)}
.dtab:not(.on) i{opacity:0}
#work .center{margin-top:34px}

/* prompt to production */
.build{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.bcard-ui{position:relative;aspect-ratio:4/3.3;border-radius:20px;overflow:hidden;margin-bottom:26px;background:var(--s1)}
.bcard .body{margin-top:10px;max-width:360px}

/* kizen difference */
.diff{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:22px;align-items:stretch}
.dcard{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 30px 36px;border-radius:28px;background:var(--s1);cursor:pointer;transition:transform .45s var(--ease);overflow:hidden;outline-offset:4px}
.dcard h3{font:400 26px var(--sans);color:var(--ink)}
.dsub{margin-top:6px;font:400 15px var(--sans);color:var(--t3)}
/* Legacy's three words light in turn with the moment that names them */
.dsub span{transition:color .35s ease}
.dsub span.lit{color:var(--ink)}
.art-diff{position:relative;inset:auto;width:112%;margin:8px -6% 6px;aspect-ratio:360/300}
.dfail{margin-top:auto;font:400 14px/1.5 var(--sans);color:var(--t3)}
.dfail b{display:block;margin-bottom:2px;font:600 11px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--t4)}
.dcard-k{background:var(--teal);color:#fff}
.dcard.on{transform:translateY(-6px) scale(1.01)}
@media (prefers-reduced-motion:reduce){.dcard{transition:none}.dcard.on{transform:none}}
.dcard-k h3{color:#fff;font-size:30px}
.dcard-k .dsub{color:rgba(255,255,255,.78)}
.dpoints{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;padding-top:24px}
.dpoints li{display:flex;flex-direction:column;align-items:center;gap:10px;font:400 13.5px/1.35 var(--sans);color:rgba(255,255,255,.92)}
.dpoints .ico{width:26px;height:26px;color:#fff}

/* case study: three ways to classify a loan packet, as one table; the bars carry the comparison */
.case-h em{display:block;font-style:normal;color:var(--accent)}
.cmp{max-width:1120px;margin:0 auto}
.cmp-h,.cmp-r{display:grid;grid-template-columns:minmax(220px,1.15fr) 1fr 1fr minmax(170px,.8fr);gap:0 44px;align-items:center}
.cmp-h{padding:0 32px 14px;font:400 13.5px/1.3 var(--sans);color:var(--t4)}
.cmp-r{padding:28px 32px;border-radius:24px;opacity:0;transform:translateY(14px);
  transition:opacity .6s ease calc(var(--i) * .12s),transform .9s var(--ease) calc(var(--i) * .12s)}
.cmp.in .cmp-r{opacity:1;transform:none}
.cmp-r+.cmp-r{margin-top:6px}
.cmp-name b{display:flex;align-items:center;gap:10px;font:400 20px/1.3 var(--sans);color:var(--ink)}
.cmp-name>span{display:block;margin-top:4px;font:400 14px/1.45 var(--sans);color:var(--t3)}
.cmp-v em{display:block;font:400 28px/1.1 var(--sans);font-style:normal;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.cmp-v .bar{position:relative;display:block;height:10px;margin-top:14px}
.cmp-v .bar i{position:absolute;left:0;top:0;bottom:0;width:max(8px,calc(var(--w) * 80%));border-radius:5px;background:#D4D8DD;transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.3s var(--ease) calc(.4s + var(--i) * .18s)}
.cmp.in .cmp-v .bar i{transform:none}
/* "timelines inflate in high demand": the time bar keeps stretching past its typical length */
.cmp-t .bar::after{content:'';position:absolute;top:0;bottom:0;left:calc(var(--w) * 80% - 5px);width:calc(var(--w) * 18% + 5px);border-radius:0 5px 5px 0;
  background:linear-gradient(90deg,#D4D8DD,rgba(212,216,221,0));transform-origin:0 50%;opacity:0}
.cmp.in .cmp-t .bar::after{animation:inflate 2.6s ease-in-out calc(1.7s + var(--i) * .18s) infinite both}
@keyframes inflate{0%,100%{transform:scaleX(.1);opacity:1}50%{transform:scaleX(1);opacity:1}}
.cmp-n{font:400 15px/1.45 var(--sans);color:var(--t3)}
.cl{display:none}
/* Kizen's row: it lights once the bars have landed */
.cmp-k{transition:opacity .6s ease calc(var(--i) * .12s),transform .9s var(--ease) calc(var(--i) * .12s),background-color .7s ease 1.5s}
.cmp.in .cmp-k{background-color:var(--tint)}
.cmp-k .cmp-name b,.cmp-k .cmp-v em,.cmp-k .cmp-n{color:var(--teal)}
.cmp-k .cmp-v .bar i{background:var(--teal)}
.ck-mark{display:inline-grid}
.ck-mark .kz-mark{width:20px;height:20px;color:var(--teal)}
.cmp-figs{grid-column:1/-1;display:grid;grid-template-columns:subgrid;margin-top:30px}
.cmp-figs p{display:flex;flex-direction:column;gap:8px;font:400 14px/1.3 var(--sans);color:var(--t3)}
.cmp-figs b{font:400 44px/1 var(--sans);color:var(--teal);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.cmp-r,.cmp-v .bar i{transition:none}.cmp.in .cmp-t .bar::after{animation:none;opacity:1;transform:scaleX(.6)}}

/* connect · build · stay in control */
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hcard-art{position:relative;aspect-ratio:360/220;overflow:hidden;margin-bottom:26px}
.hcard .body{margin-top:10px;max-width:360px}

/* ---------------- custom app builder ---------------- */
.feat-cta{margin-top:30px}
.hero-stage .demo-hero-app{position:relative;aspect-ratio:1120/640}
.hero-stage .demo-hero-app>*{position:absolute;inset:0}

/* frontend + backend: Natively Agentic leads, then two groups */
.fb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 56px;max-width:1200px;margin:0 auto}
/* Frontend + Backend: three columns, each a still on a panel (as the three ways to build), then its line, title and points */
.pf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.pf-ui{position:relative;aspect-ratio:480/300;border-radius:20px;overflow:hidden;background:var(--s1)}
.pf-ui .demo{position:absolute;inset:0}
.pf-k{margin-top:28px;font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.pf-h{margin-top:14px;font:400 clamp(24px,2.1vw,28px)/1.2 var(--sans);letter-spacing:-1px;color:var(--ink);text-wrap:balance}
.pf-list{margin-top:20px;display:flex;flex-direction:column;gap:16px}
.pf-list b{display:block;font:400 16px/1.3 var(--sans);color:var(--ink)}
.pf-list span{display:block;margin-top:3px;font:400 14px/1.5 var(--sans);color:var(--t3)}
/* a section line set in a pill, as Figma draws it for Frontend + Backend */
.fb-group{padding-top:10px}
.fb-h{margin-bottom:10px;font:400 15px/1.3 var(--sans);color:var(--t4)}
.fb-list li{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;row-gap:4px;padding:18px 0}
.fb-list .ico{grid-row:1/3;width:44px;height:44px;padding:11px;border-radius:14px;background:var(--accent-tint);color:var(--accent)}
.fb-list b{font:400 18px/1.3 var(--sans);color:var(--ink)}
.fb-list span{font:400 15px/1.5 var(--sans);color:var(--t3)}

/* for developers: nine plain items, three by three */
.dev{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1200px;margin:0 auto}
.dev li{padding:30px 28px 32px;border-radius:20px;background:#121F2C;transition:background .35s ease}
.dev li:hover{background:#172735}
.dev li>.ico{display:block;width:52px;height:52px;padding:13px;margin-bottom:22px;border-radius:14px;background:var(--accent);color:#fff}
.dev h3{font:400 20px/1.3 var(--sans);color:#fff}
.dev p{margin-top:8px;max-width:300px;font:400 15.5px/1.6 var(--sans);color:#A3AEB7}
/* For developers: the IT section, on the page's ink */
.sec-dark{position:relative;margin-top:140px;padding:128px 0 136px;background:#0B1724;color:#fff}
.sec-dark .h2{color:#fff}
.sec-dark .kicker{color:#5CCBCF;box-shadow:inset 0 0 0 1px #26394A}
.sec-dark .dev{gap:16px}
.dev-sec{display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px;max-width:1200px;margin:16px auto 0;padding:22px 28px;border-radius:20px;background:#121F2C}
.dev-sec-h{display:flex;align-items:center;gap:12px;font:400 18px/1 var(--sans);color:#fff}
.dev-sec-h .ico{width:40px;height:40px;padding:10px;border-radius:12px;background:var(--accent);color:#fff}
.dev-badges{display:flex;gap:12px}
.dev-badges img{display:block;width:40px;height:40px}
.dev-sec-p{flex:1;min-width:240px;font:400 15px/1.5 var(--sans);color:#A3AEB7}
.dev-sec-a{color:#5CCBCF}
@media (max-width:760px){.dev-sec{padding:22px}.dev-sec-p{min-width:0;flex-basis:100%}}

/* customer story: one paragraph, then three results, each with its before and after */
.cs{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;max-width:1296px;margin:0 auto}
.cs-copy{padding:0}
.cs-p{font:400 21px/1.6 var(--sans);color:var(--t3);text-wrap:pretty}
.cs-p b{font-weight:400;color:var(--ink)}
.cs-h{margin-top:44px;font:400 22px/1.3 var(--sans);color:var(--ink)}
.cs-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.cs-figs div{display:flex;flex-direction:column;justify-content:flex-end;min-height:150px;padding:22px 20px;border-radius:20px;background:var(--s1)}
.cs-figs dd{margin:0;font:400 50px/1 var(--sans);color:var(--accent);font-variant-numeric:tabular-nums}
.cs-figs [data-count]{display:inline-block}
.cs-figs dt{margin-top:12px;font:400 16px/1.35 var(--sans);color:var(--ink)}
.cs-art{position:relative;margin:0;padding:28px;border-radius:20px;background:var(--s1)}

.cs-fitbox{position:relative;overflow:hidden;border-radius:16px;box-shadow:0 1px 2px rgba(11,23,36,.05),0 30px 60px -34px rgba(11,23,36,.28)}
.cs-fit{position:absolute;left:0;top:0;width:880px;transform-origin:0 0}
/* the commissions application, redrawn in the page's UI: the same structure and words as the product */
.cs-dash{position:relative;padding-bottom:18px;background:#F2F4F5;font-family:var(--sans)}
.cs-nav{display:flex;align-items:center;gap:16px;height:46px;padding:0 18px;background:#fff;font:400 11.5px/1 var(--sans);color:var(--t3);white-space:nowrap}
.cs-mark{display:grid;color:var(--accent)}
.cs-mark .kz-mark{width:20px;height:20px}
.cs-av{display:grid;place-items:center;width:26px;height:26px;margin-left:auto;border-radius:50%;background:var(--accent);font:500 11px/1 var(--sans);font-style:normal;color:#fff}
.cs-banner{position:relative;height:186px;margin:18px 22px 0;border-radius:16px;color:#fff;background:var(--accent)}
.cs-banner b{position:absolute;left:24px;bottom:66px;font:400 24px/1.2 var(--sans)}
.cs-banner span{position:absolute;left:24px;bottom:44px;font:400 13px/1.2 var(--sans);color:#D6EEEF}
.cs-state{position:absolute;left:24px;bottom:18px;display:flex;align-items:center;gap:8px;font:400 12px/1 var(--sans);color:#E6F5F5}
.cs-state i{width:8px;height:8px;border-radius:50%;background:#4ACB86}
.cs-banner em{position:absolute;right:26px;bottom:18px;font:300 42px/1 var(--serif);font-style:normal;color:#fff}
.cs-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:16px 22px 0}
.cs-kpis div{padding:18px 22px;border-radius:14px;background:#fff}
.cs-kpis span{display:block;font:400 12px/1.2 var(--sans);color:var(--t4)}
.cs-kpis b{display:block;margin-top:10px;font:400 32px/1 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.cs-learnhead{margin:22px 22px 0}
.cs-learnhead b{display:block;font:400 19px/1.2 var(--sans);color:var(--ink)}
.cs-learnhead span{display:block;margin-top:5px;font:400 12px/1.2 var(--sans);color:var(--t4)}
.cs-learn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:12px 22px 0;padding:22px 24px;border-radius:14px;background:#fff}
.cs-learn h5{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:400 14px/1.2 var(--sans);color:var(--ink)}
.cs-learn .csi{flex:none;width:16px;height:16px;color:var(--accent)}
.cs-feature{position:relative;margin-bottom:6px;padding:14px 56px 14px 16px;border-radius:12px;background:var(--s1)}
.cs-feature span{display:block;font:400 10.5px/1.2 var(--sans);color:var(--t4)}
.cs-feature b{display:block;margin-top:4px;font:400 14px/1.3 var(--sans);color:var(--ink)}
.cs-play{position:absolute;right:14px;top:50%;display:grid;place-items:center;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:var(--accent)}
.cs-learn .cs-play .csi{width:14px;height:14px;color:#fff}
.cs-learn p{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:10px 0;font:400 12.5px/1.3 var(--sans);color:var(--t2)}
.cs-learn p .csi{width:15px;height:15px}
.cs-learn>div:last-child p{display:block}
.cs-learn small{display:block;margin-top:3px;font:400 11px/1.2 var(--sans);color:var(--t4)}
.cs-news{margin:14px 22px 0;padding:14px 18px;border-radius:14px;background:#fff;font:400 13px/1.2 var(--sans);color:var(--ink)}
.cs-ki{position:absolute;right:22px;bottom:22px;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--accent);color:#fff;box-shadow:0 12px 24px -10px rgba(11,23,36,.35)}
.cs-ki .kz-mark{width:34px;height:34px}

/* the Kizen difference: three reasons, each with its line icon */
.kd{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:1296px;margin:0 auto}
.kd{gap:22px}
.kd-ui{display:grid;place-items:center;aspect-ratio:480/300;border-radius:20px;background:var(--s1)}
.kd-ico{display:grid;place-items:center;width:128px;height:128px;border-radius:32px;background:#fff;color:var(--accent)}
.kd-svg{width:80px;height:80px}
.kd h3{margin-top:28px;font:400 clamp(26px,2.3vw,32px)/1.2 var(--sans);letter-spacing:-1px;color:var(--ink)}
.kd p{max-width:380px;margin-top:14px;font:400 17px/1.65 var(--sans);color:var(--t3);text-wrap:pretty}

/* faq: the title column carries a pointer to the docs */
.faq-side{position:sticky;top:90px}
.faq .faq-side .h2{position:static}
.faq-sub{margin-top:18px;font:400 16px/1.6 var(--sans);color:var(--t3)}
.cta-p{max-width:560px;margin:22px auto 0;text-align:center;font:400 18px/1.65 var(--sans);color:var(--t2)}

/* faq */
.faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px;align-items:start}
.faq .h2{font:400 clamp(36px,3.4vw,48px)/1.1 var(--sans);position:sticky;top:90px}
.faq-list{display:flex;flex-direction:column;gap:4px}
.qa{border-radius:0;background:none}
.qa summary{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;font:400 19px/1.4 var(--sans);color:var(--ink);cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{position:relative;width:30px;height:30px;flex:none;border-radius:50%;background:var(--s1);transition:background .25s,transform .45s var(--ease)}
.qa summary i::before,.qa summary i::after{content:'';position:absolute;left:50%;top:50%;width:11px;height:1.4px;margin:-.7px 0 0 -5.5px;background:var(--ink);border-radius:1px;transition:transform .45s var(--ease),background .25s}
.qa summary i::after{transform:rotate(90deg)}
.qa[open] summary i{transform:rotate(45deg);background:var(--ink)}
.qa[open] summary i::before,.qa[open] summary i::after{background:#fff}
.qa-a{overflow:hidden}
.qa-a p{padding:0 72px 24px 0;font:400 16px/1.7 var(--sans);color:var(--t3)}
@media (prefers-reduced-motion:reduce){.qa summary i,.qa summary i::before,.qa summary i::after{transition:none}}

/* cta */
.cta{position:relative;margin-top:150px;padding:150px 0 170px;isolation:isolate;overflow:hidden}
.cta-bg{-webkit-mask:linear-gradient(#000 62%,transparent 96%);mask:linear-gradient(#000 62%,transparent 96%)}
.cta-bg .hb-band{top:-48px;bottom:auto;transform-origin:50% 50%;transform:translateX(-50%) scaleY(-1);opacity:.9}
.cta-bg .hb-lines{top:120px;bottom:auto;height:520px}
.cta-in .hero-ctas{margin-top:38px}

/* ---------------- footer (finished design) ---------------- */
.footer{padding-bottom:24px}
.fbox{background:var(--navy);color:#fff;border-radius:30px;padding:56px 56px 26px}
.ftop{display:grid;grid-template-columns:minmax(0,3.2fr) minmax(0,8fr);gap:40px}
.ftag{font:300 34px/1.15 var(--sans);color:#fff}
.fcols{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 28px}
.fcol{display:flex;flex-direction:column;gap:10px}
.fh{font:500 15px var(--sans);color:#fff;margin-bottom:4px}
.fh2{margin-top:22px}
.fcol a{font:400 14px/1.4 var(--sans);color:#A7B0BA;transition:color .2s}
.fcol a.fh{color:#fff}
.fcol a:hover{color:#fff}
.hiring{display:inline-flex;align-items:center;height:20px;padding:0 8px;margin-left:6px;border-radius:999px;background:#1E7F80;color:#fff;font-size:11.5px}
.fmid{margin-top:48px}
.flogo{display:inline-flex;color:#fff}
.flogo .brand-logo{width:150px;height:auto}
.flogo .bm,.flogo .bw{fill:#fff}
.fbadges{display:flex;align-items:center;justify-content:space-between;margin-top:36px}
.fcerts{display:flex;gap:10px}
.fcerts img{width:44px;height:44px}
.faward{width:34px;height:auto}
.fbottom{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font:400 13px var(--sans);color:#8D97A2}
.fbottom .legal{margin-left:auto}
.fbottom a{transition:color .2s}
.fbottom a:hover{color:#fff}
.social{display:flex;gap:22px}

/* ---------------- product demos (Stageshow, demos.js) ---------------- */
.demo{position:absolute;inset:0}
.feat-art .demo{inset:0}
.tcard-ui .demo,.bcard-ui .demo{inset:0}

/* ---------------- scroll reveals ---------------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform 1s var(--ease);transition-delay:calc(var(--d,0) * .08s)}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{transition:opacity .4s ease;transform:none}}

/* ---------------- responsive ---------------- */
@media (max-width:1100px){
  .menu,.login-wrap{display:none}
  .nav-cta{margin-left:auto}
  .burger{display:block}
  .logos{display:flex;flex-wrap:wrap;justify-content:center}
  .logos li{flex:0 0 calc(25% - 8px)}
  .feat{grid-template-columns:1fr;gap:40px}
  .feat-copy .h2,.feat-copy .body{max-width:640px}
  .trio,.build,.how{grid-template-columns:1fr;max-width:620px;margin:0 auto}
  .diff{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .dcard-k{margin:0}
  .cmp-h{display:none}
  .cmp-r{grid-template-columns:1fr 1fr;gap:20px 22px;padding:22px}
  .cmp-name,.cmp-n{grid-column:1/-1}
  .cl{display:block;margin-bottom:6px;font:400 12.5px/1.3 var(--sans);color:var(--t4)}
  .cmp-v em{font-size:24px}
  .cmp-figs{grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px}
  .cmp-figs b{font-size:28px}
  .faq{grid-template-columns:1fr;gap:28px}
  .faq-side{position:static}
  .fb{grid-template-columns:1fr;gap:0}
  .dev{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px}
  .cs{grid-template-columns:minmax(0,1fr)}
  .cs{gap:40px}
  .cs-p{font-size:18px}
  .cs-figs div{min-height:0}
  .cs-figs dd{font-size:42px}
  .cs-art{padding:20px}
  .kd{grid-template-columns:1fr;gap:44px}
  .pf{grid-template-columns:1fr;gap:56px}
  .cs-figs div{background:var(--s1)}
  .sec-dark{padding:96px 0 104px}
  .faq .h2{position:static}
  .ftop{grid-template-columns:1fr}
}
@media (max-width:560px){#models .feat-art{aspect-ratio:358/400}#learn .feat-art{aspect-ratio:358/420}}
@media (max-width:560px){.cs-figs{grid-template-columns:1fr}.cs-art{padding:12px}}
@media (max-width:900px){
  .wf{flex-direction:column;height:auto}
  .wf-card{flex:none;height:96px;transition:height .7s var(--ease),background .4s ease}
  .wf-card.on{height:470px}
  .wf-ico{top:20px;left:20px}
  .wf-t,.wf-card.on .wf-t{left:96px;right:20px;top:20px;bottom:auto;min-height:56px;display:flex;align-items:center;font-size:18px}
  .wf-stage{left:20px;right:20px;top:100px;bottom:22px}
}
@media (max-width:760px){
  .wrap{padding:0 16px}
  .hero{padding-top:64px}
  .hero-stage{margin-top:52px}
  .trust-line{align-items:flex-start;padding:16px 20px 18px 16px;gap:16px}
  .trust-line{flex-wrap:wrap}
  .trust-line p{flex:1;flex-direction:column;align-items:flex-start;gap:6px}
  .trust-line>.link{flex-basis:100%;margin-left:68px}
  .subnav nav{display:none}
  .sub-cta{margin-left:auto}
  .trusted{overflow:hidden}
  .logos{display:flex;flex-wrap:nowrap;width:max-content;gap:44px;animation:marquee 34s linear infinite}
  .logos li{flex:none;height:56px}
  .trusted .logos-mask{-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  .certs{gap:6px 14px;font-size:12px}
  .sec,.feat{padding-top:96px}
  .trusted{padding-left:16px;padding-right:16px}
  .sec,.feat{padding-left:16px;padding-right:16px}
  .fbox{padding:40px 22px 22px;border-radius:24px}
  .fcols{grid-template-columns:1fr 1fr}
  .fbottom .legal{margin-left:0}
  .qa summary{font-size:17px}
  .qa-a p{padding-right:8px}
  .hb-band{height:980px}
  .cta{padding:110px 0 120px}
}

.cta .btn-quiet{background:#fff}
.cta .btn-quiet .btn-arrow{background:var(--s1)}
/* the light button: same build as the coral one (words, then a round arrow), solid, no shadow */
.btn-white{background:#EEF1F3;color:var(--ink);padding-right:6px}
.btn-white:hover{background:#E4E8EB}
.btn-white .btn-arrow{background:var(--accent);color:#fff}

@media (max-width:760px){.dev{grid-template-columns:1fr;gap:36px}}
@media (max-width:600px){.hero-stage .demo-hero-app{aspect-ratio:360/700}}




/* case study: the contracting application, redrawn in the page's UI (the product's structure and words) */
.ct-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 22px 0}
.ct-kpis>div{min-height:96px;padding:18px 22px;border-radius:14px;background:#fff}
.ct-kpis span{display:block;font:400 12px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--t3)}
.ct-kpis b{display:block;margin-top:12px;font:300 40px/1 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.ct-kpis .ct-up{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.ct-up i{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:10px;background:var(--accent-tint);font:400 14px/1 var(--sans);font-style:normal;color:#0C595C}
.ct-up .csi{width:17px;height:17px;color:#0C595C}
.ct-tbl{margin:12px 22px 0;padding:18px 22px 8px;border-radius:14px;background:#fff}
.ct-tbl h5{display:flex;align-items:baseline;gap:10px;margin:0 0 8px;font:500 15px/1.2 var(--sans);color:var(--ink)}
.ct-tbl h5 em{font:400 12px/1 var(--sans);font-style:normal;color:var(--t4)}
.ct-row{display:grid;align-items:center;gap:16px;height:34px;font:400 12.5px/1 var(--sans);color:var(--t2);white-space:nowrap}
.ct-row span{min-width:0;overflow:hidden}
.ct-row:nth-child(odd):not(.ct-hd){background:#F8F9FA;margin:0 -10px;padding:0 10px;border-radius:8px}
.ct-4{grid-template-columns:1.15fr 1.3fr 1fr 1.05fr}
.ct-3{grid-template-columns:1.6fr 1.25fr 1.35fr}
.ct-hd{height:30px;font:500 11.5px/1 var(--sans);color:var(--t4)}
.ct-dot{display:inline-block;width:7px;height:7px;margin-right:9px;border-radius:50%;background:#C9D3D8;vertical-align:1px}
.cs-figs dd{white-space:nowrap}
.cs-figs dd small{font-size:.56em}
.ct-row{line-height:1.4}

/* component library: the section title set as the Frontend + backend titles (Booton, -1px) */
#components .feat-copy .h2{font:400 clamp(30px,2.8vw,40px)/1.2 var(--sans);letter-spacing:-1px}
/* the library as the product shows it: a card with the parts as picks (icon, name, add / added), a count and Add */
.lib{display:grid;place-items:center;aspect-ratio:auto;padding:40px}
.lib-card{width:100%;max-width:580px;padding:20px;border-radius:24px;background:#fff;box-shadow:0 1px 2px rgba(11,23,36,.04),0 30px 60px -36px rgba(11,23,36,.22)}
.lib-head{display:flex;align-items:center;gap:12px;padding:2px 2px 16px}
.lib-mark{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:10px;background:var(--accent);color:#fff}
.lib-mark .kz-mark{width:18px;height:18px}
.lib-head b{flex:1;font:400 17px/1.2 var(--sans);color:var(--ink)}
.lib-count{height:28px;padding:0 12px;border-radius:14px;background:var(--accent-tint);font:400 13px/28px var(--sans);color:#0C595C;white-space:nowrap}
.lib-count em{font-style:normal;font-variant-numeric:tabular-nums}
.lib-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lib-item{display:flex;align-items:center;gap:12px;min-height:58px;padding:10px 12px 10px 10px;border:0;border-radius:14px;background:#F6F7F9;text-align:left;cursor:pointer;transition:background-color .25s ease}
.lib-item:hover{background:#EEF1F3}
.lib-ico{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:11px;background:#fff;color:#0C595C;transition:background-color .25s ease,color .25s ease}
.lib-ico .ico{width:20px;height:20px}
.lib-name{flex:1;min-width:0;font:400 15px/1.25 var(--sans);color:var(--ink)}
.lib-tog{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:#fff;color:var(--t4);transition:background-color .25s ease,color .25s ease}
.lib-tog svg{grid-area:1/1;width:13px;height:13px;transition:opacity .2s ease}
.lib-tog .t-check{opacity:0}
.lib-item[aria-pressed="true"]{background:var(--accent-tint)}
.lib-item[aria-pressed="true"] .lib-ico,.lib-item[aria-pressed="true"] .lib-tog{background:var(--accent);color:#fff}
.lib-item[aria-pressed="true"] .t-plus{opacity:0}
.lib-item[aria-pressed="true"] .t-check{opacity:1}
.lib-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 2px 0}
.lib-more{font:400 14px/1 var(--sans);color:var(--t3)}
.lib-add{display:inline-flex;align-items:center;height:38px;padding:0 18px;border-radius:19px;background:var(--accent);font:400 14px/1 var(--sans);color:#fff;white-space:nowrap}
@media (max-width:600px){.lib{padding:16px}.lib-card{padding:14px;border-radius:20px}.lib-grid{grid-template-columns:1fr;gap:8px}.lib-item{min-height:52px}}
@media (prefers-reduced-motion:reduce){.lib-item,.lib-ico,.lib-tog,.lib-tog svg{transition:none}}
@media (max-width:600px){.lib-head{gap:10px}.lib-head b{font-size:15px;white-space:nowrap}.lib-count{padding:0 10px;font-size:12px}}
/* phones: the library demo plays its phone card (358 x 400) */
@media (max-width:551px){#components .feat-art{aspect-ratio:358/400}}

/* component library: one list that turns. The middle part is lit (tint, teal tile, ink), its neighbours step down to
   grey (solid greys, no transparency) so the list reads longer than it is; page.js steps it up by one, looping.
   Row height comes from the view (5 rows fill it), so the lit row always sits in the middle. */
#components .feat-art.lb3{display:grid;padding:32px}
.lb3-card{display:flex;flex-direction:column;min-height:0;padding:22px;border-radius:24px;background:#fff;box-shadow:0 1px 2px rgba(11,23,36,.04),0 30px 60px -36px rgba(11,23,36,.22)}
.lb3-head{display:flex;align-items:center;gap:12px;padding-left:8px}
.lb3-mark{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;background:var(--accent);color:#fff}
.lb3-mark .kz-mark{width:20px;height:20px}
.lb3-head b{flex:1;font:400 17px/1.2 var(--sans);color:var(--ink);white-space:nowrap}
.lb3-more{font:400 14px/1 var(--sans);color:var(--t3);white-space:nowrap}
.lb3-view{position:relative;flex:1;min-height:0;margin-top:16px;overflow:hidden}
.lb3-list{display:flex;flex-direction:column;gap:10px;--rh:60px}
.lb3-list.moving{transition:transform .7s cubic-bezier(.22,1,.36,1)}
.lb3-row{display:flex;align-items:center;gap:14px;flex:none;height:var(--rh);padding:0 14px 0 8px;border-radius:14px;background:#fff;transition:background-color .6s ease}
.lb3-ico{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:#F6F7F9;color:#D9DDE1;transition:background-color .6s ease,color .6s ease}
.lb3-ico .ico{width:22px;height:22px}
.lb3-name{min-width:0;font:400 17px/1.25 var(--sans);color:#E1E4E8;white-space:nowrap;transition:color .6s ease}
.lb3-row[data-d="0"]{background:var(--accent-tint)}
.lb3-row[data-d="0"] .lb3-ico{background:var(--accent);color:#fff}
.lb3-row[data-d="0"] .lb3-name{color:var(--ink)}
.lb3-row[data-d="1"] .lb3-ico{color:#8A929A}
.lb3-row[data-d="1"] .lb3-name{color:#8A929A}
.lb3-row[data-d="2"] .lb3-ico{color:#C2C8CE}
.lb3-row[data-d="2"] .lb3-name{color:#C2C8CE}
@media (max-width:600px){
  #components .feat-art.lb3{padding:16px;aspect-ratio:358/400}
  .lb3-card{padding:16px;border-radius:20px}
  .lb3-head b{font-size:15px}
  .lb3-ico{width:38px;height:38px}
  .lb3-name{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.lb3-list.moving,.lb3-row,.lb3-ico,.lb3-name{transition:none}}

/* developers band: the Security strip set like the nine cards above it (icon tile, title, text), larger badges, and
   the button under the blocks, as on the sister page */
#developers .dev-sec-h{gap:16px;font:400 20px/1.3 var(--sans)}
#developers .dev-sec-h .ico{width:52px;height:52px;padding:13px;border-radius:14px}
#developers .dev-sec-p,#developers .dev-sec-a{font:400 15.5px/1.55 var(--sans)}
#developers .dev-badges{gap:14px}
#developers .dev-badges img{width:56px;height:56px}
.gov-cta{margin-top:40px;text-align:center}


/* the pages' CTAs in the site header's button style (www-staging.kizen.com): Try for free white with a coral edge,
   the others solid coral; the site's Switzer, no arrows. Each button keeps its own size. */
.btn{font-family:Switzer,Booton,sans-serif;font-weight:400;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
.btn-tff{background:#fff;color:#0B1724;box-shadow:inset 0 0 0 1px #F26C56}
.btn-tff:hover{background:#F26C56;color:#fff}
.btn.btn-coral{padding-right:22px;background:#F26C56;color:#fff;box-shadow:inset 0 0 0 1px #F26C56}
.btn.btn-coral:hover{background:#E45A43;box-shadow:inset 0 0 0 1px #E45A43}
.btn-xs.btn-tff,.btn-xs.btn-coral{padding:0 14px}

/* dark bands take the solid orange button; in the closing CTA, Try for free is plain white (no edge) beside the orange Book a demo */
.sec-dark .btn-tff{background:#F26C56;color:#fff}
.cta .btn.btn-tff{background:#fff;color:#0B1724;box-shadow:none}
.cta .btn.btn-tff:hover{background:#F26C56;color:#fff}

/* customer logos: seven now (Gordon Marketing out), spread with equal space between them and set to one optical size */
@media (min-width:1101px){.logos{display:flex;justify-content:space-between;align-items:center;gap:24px;max-width:1120px;margin-left:auto;margin-right:auto}.logos li{flex:none}}
.logos img[alt="Pinnacle Financial Services"]{max-height:34px}
.logos img[alt="AmeriLife"]{max-height:14px}
.logos img[alt="JSA"]{max-height:28px}
.logos img[alt="MPK Equity Partners"]{max-height:40px}
.logos img[alt="Werqwise"]{max-height:23px}
.logos img[alt="Harbor Health"]{max-height:17px}
.logos img[alt="Platinum Health"]{max-height:16px}