/* Kulman Ziman — "Mono" theme. White paper, black ink, grey for quiet details.
A standalone stylesheet (site.css is not loaded). The one big interactive moment is the KZ logo stage on the home page (mono.js). */
:root{
--paper:#ffffff; --paper-2:#f6f6f4; --paper-3:#efefec;
--ink:#0a0a0a; --ink-2:#3a3a3a; --ink-3:#6b6b6b; --ink-4:#9a9a9a;
--line:#e6e6e3; --line-2:#d4d4d0;
--font-display:"Inter Tight","Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,monospace;
--ease:cubic-bezier(.2,.8,.2,1);
--r:22px;
color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:clip;max-width:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 var(--font-sans);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(2.6rem,6.4vw,5.6rem);font-weight:600;letter-spacing:-.05em;line-height:.98}
h2{font-size:clamp(2rem,4.4vw,3.5rem);font-weight:600;letter-spacing:-.045em;line-height:1.02}
h3{font-size:1.2rem;font-weight:600;letter-spacing:-.02em;line-height:1.25}
h1 em,h2 em,h3 em{font-style:normal;color:var(--ink-4)}
p{margin:0}
ul,ol{margin:0}
/* things from the other themes that this one does not use */
#world,.vignette,.dots,.dock,.stack,#playground,.coins,.play-hint,.hero{display:none!important}
.skip{position:absolute;left:-9999px;top:10px;z-index:100;padding:10px 14px;background:var(--ink);color:var(--paper);border-radius:10px}
.skip:focus{left:10px}
.progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:60;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--p,0));pointer-events:none}
.wrap{width:min(1200px,100%);margin-inline:auto;padding-inline:max(20px,env(safe-area-inset-left))}
.narrow{width:min(820px,100%);margin-inline:auto;padding-inline:max(20px,env(safe-area-inset-left))}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 .78rem/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--ink)}
.lede{color:var(--ink-2);font-size:clamp(1.02rem,1.4vw,1.15rem);max-width:56ch;line-height:1.6}
.muted{color:var(--ink-3)}
.muted a{color:var(--ink);text-underline-offset:3px}
.section{padding-block:clamp(72px,10vw,140px);position:relative}
.section + .section{border-top:1px solid var(--line)}
.section-head{display:grid;gap:16px;margin-bottom:clamp(36px,5vw,56px);max-width:820px}
.linen{background:var(--paper-2)}
.link-arrow{font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--ink);padding-bottom:1px}
.link-arrow:hover{border-color:var(--ink-4)}
/* buttons: black pill, outlined ghost */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px;border-radius:999px;border:0;cursor:pointer;
font:600 .95rem/1 var(--font-sans);text-decoration:none;color:var(--paper);background:var(--ink);transition:transform .25s var(--ease),background .25s,box-shadow .25s}
.btn:hover{background:#2a2a2a;transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn svg{width:17px;height:17px;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn.ghost,.btn.silver{color:var(--ink);background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover,.btn.silver:hover{background:var(--ink);color:var(--paper)}
.btn.small{height:42px;padding:0 18px;font-size:.88rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);transition:box-shadow .3s}
.nav.scrolled{box-shadow:0 1px 0 var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}
.brand{display:block;text-decoration:none}
.brand img{height:16px;width:auto;filter:brightness(0)}
.brand::after{content:none}
.nav-links{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.nav-links a{display:block;padding:8px 14px;border-radius:999px;font-size:.92rem;font-weight:600;color:var(--ink-3);text-decoration:none;transition:color .2s,background .2s}
.nav-links a:hover{color:var(--ink);background:var(--paper-2)}
.nav-links a[aria-current=page]{color:var(--ink);background:var(--paper-3)}
.nav-links .nav-get{display:none}
.nav-cta{display:flex;gap:10px;align-items:center}
.nav-cta .btn{height:42px;padding:0 18px;font-size:.88rem}
.menu-btn{display:none;width:44px;height:44px;border-radius:12px;border:0;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer}
.menu-btn span{display:block;width:18px;height:2px;background:var(--ink);margin:4px auto;border-radius:2px;transition:transform .3s}
@media (max-width:960px){
.nav-links{position:fixed;inset:72px 0 auto 0;flex-direction:column;padding:12px max(20px,env(safe-area-inset-left)) 24px;background:var(--paper);box-shadow:0 20px 40px -20px rgba(0,0,0,.25),0 1px 0 var(--line);
transform:translateY(-12px);opacity:0;pointer-events:none;transition:transform .3s var(--ease),opacity .25s}
.nav-links a{padding:14px 12px;font-size:1.05rem;border-radius:12px}
.nav.open .nav-links{transform:none;opacity:1;pointer-events:auto}
.nav.open .menu-btn span:first-child{transform:translateY(3px) rotate(45deg)}
.nav.open .menu-btn span:last-child{transform:translateY(-3px) rotate(-45deg)}
.menu-btn{display:block}
.nav-cta .btn{display:none}
.nav-links .nav-get{display:block;margin-top:10px}
.nav-links .nav-get .btn{display:flex;width:100%;color:var(--paper);background:var(--ink)}
}
/* reveal: a calm rise (hidden state only once JS runs) */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
/* ================= the KZ logo stage (home) ================= */
.kz-stage{position:relative;height:calc(334vh - 9px);background:var(--paper)}
.kz-pin{--lw:min(66vw,820px,max(260px,calc((50vh - 138px) * 2.75)));--lw:min(66vw,820px,max(260px,calc((50svh - 138px) * 2.75)));position:sticky;top:72px;height:calc(100vh - 72px);height:calc(100svh - 72px);overflow:hidden;display:grid;place-items:center;isolation:isolate}
.kz-grid{position:absolute;inset:-10%;z-index:-1;pointer-events:none;
background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:80px 80px;
-webkit-mask-image:radial-gradient(60% 55% at 50% 48%,#000 20%,transparent 75%);mask-image:radial-gradient(60% 55% at 50% 48%,#000 20%,transparent 75%);
transform:translate3d(0,var(--gy,0px),0)}
.kz-scene{position:absolute;inset:0;display:grid;place-items:center;perspective:1500px;pointer-events:none}
.kz-canvas{position:absolute;inset:0;width:100%;height:100%}
.kz-logo{width:var(--lw);aspect-ratio:600/335;visibility:hidden} /* sizes the canvas logo; the drawing is in .kz-canvas */
.kz-word{position:absolute;left:50%;top:calc(50% + var(--lw) * .32);width:calc(var(--lw) * .537);height:auto;filter:brightness(0);opacity:var(--wo,1);will-change:transform,opacity;
transform:translateX(-50%) scale(var(--ws,1));pointer-events:none}
.kz-cue{position:absolute;top:calc(50% + var(--lw) * .364 + 18px);left:50%;transform:translateX(-50%);display:grid;justify-items:center;gap:10px;
font:500 .72rem var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);opacity:var(--co,1);pointer-events:none}
.kz-cue i{width:1px;height:34px;background:linear-gradient(var(--ink),transparent);transform-origin:top;animation:kz-cue 1.8s var(--ease) infinite}
@keyframes kz-cue{0%{transform:scaleY(0)}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
.kz-copy{position:relative;z-index:2;display:grid;gap:22px;justify-items:center;text-align:center;width:min(880px,100%);padding-inline:20px;
opacity:var(--o2,0);transform:translateY(var(--y2,40px));pointer-events:none}
.kz-copy.live{pointer-events:auto}
.kz-copy h1{max-width:13ch}
.kz-copy .lede{margin-inline:auto}
.kz-copy .btn-row{justify-content:center}
.kz-copy .hero-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;list-style:none;margin:0;padding:0;font:500 .74rem var(--font-mono);color:var(--ink-2)}
.kz-copy .hero-tags li{padding:8px 13px;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-2)}
.kz-copy .hero-tags li.live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ink);margin-right:8px;vertical-align:1px}
@media (max-width:720px){
.kz-stage{height:calc(282vh - 9px)}
.kz-pin{--lw:86vw}
.kz-word{top:calc(50% + var(--lw) * .337);width:calc(var(--lw) * .72)}
.kz-cue{top:calc(50% + var(--lw) * .4 + 18px)}
.kz-copy .hero-tags{display:none}
}
.no-kz .kz-stage{height:auto}
.no-kz .kz-pin{position:relative;height:auto;padding-block:60px 90px;display:grid;gap:40px}
.no-kz .kz-scene{position:relative;height:clamp(180px,40vw,420px)}
.no-kz .kz-copy{--o2:1;--y2:0px;pointer-events:auto}
.no-kz .kz-cue,.no-kz .kz-word{display:none}
/* ================= sections ================= */
/* commitments strip */
.strip{border-block:1px solid var(--line)}
.strip .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.strip .cell{padding:30px 24px;display:grid;gap:6px}
.strip .cell + .cell{border-left:1px solid var(--line)}
.strip b{font:600 clamp(1.9rem,3.4vw,2.7rem)/1 var(--font-display);letter-spacing:-.05em}
.strip .cell > span{color:var(--ink-3);font-size:.9rem}
@media (max-width:760px){.strip .wrap{grid-template-columns:1fr 1fr}.strip .cell:nth-child(3){border-left:0}.strip .cell:nth-child(n+3){border-top:1px solid var(--line)}}
/* marquee: a slow ticker of what we build */
.marquees{padding-block:26px;border-bottom:1px solid var(--line);overflow:hidden}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee + .marquee{margin-top:10px}
.marquee .track{display:flex;width:max-content;animation:mq 60s linear infinite}
.marquee.silver .track{animation-direction:reverse;animation-duration:70s}
.marquee span{font:500 1rem var(--font-sans);color:var(--ink-2);white-space:nowrap;padding:0 22px;display:flex;align-items:center;gap:22px}
.marquee span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--ink-4)}
.marquee.silver span{color:var(--ink-3)}
@keyframes mq{to{transform:translateX(-50%)}}
/* mission */
.mission{display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px}
.mission blockquote{margin:0;font:500 clamp(1.7rem,3.4vw,2.8rem)/1.18 var(--font-display);letter-spacing:-.035em}
.mission cite{display:block;margin-top:22px;font:500 .78rem var(--font-mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.words .w{color:inherit}
@media (max-width:760px){.mission{grid-template-columns:1fr;gap:18px}}
/* packages */
.pkgs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
@media (max-width:960px){.pkgs{grid-template-columns:1fr;max-width:560px}}
.pkg{position:relative;display:flex;flex-direction:column;gap:16px;padding:clamp(24px,3vw,32px);border-radius:var(--r);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-2);transition:box-shadow .3s,transform .3s var(--ease)}
.pkg:hover{box-shadow:inset 0 0 0 1.5px var(--ink);transform:translateY(-3px)}
.pkg.best{background:var(--ink);color:var(--paper);box-shadow:none}
.pkg.best .eyebrow{color:#bdbdbd}.pkg.best .eyebrow::before{background:var(--paper)}
.pkg-badge{position:absolute;top:22px;right:22px;padding:6px 12px;border-radius:999px;font:600 .74rem var(--font-sans);background:var(--paper);color:var(--ink)}
.pkg-price{font:600 clamp(3rem,5vw,4.2rem)/1 var(--font-display);letter-spacing:-.06em}
.pkg-price sup{font-size:.42em;vertical-align:top;margin-right:2px;color:var(--ink-3)}
.pkg.best .pkg-price sup{color:#9a9a9a}
.pkg-scope{color:var(--ink-2);font-size:.95rem;line-height:1.5}
.pkg-scope b{color:var(--ink);font-weight:700}
.pkg.best .pkg-scope{color:#cfcfcf}.pkg.best .pkg-scope b{color:var(--paper)}
.pkg .ticks{flex:1;font-size:.93rem}
.pkg .btn{width:100%}
.pkg.best .btn{background:var(--paper);color:var(--ink)}
.pkg.best .btn:hover{background:#e9e9e9}
.pkg.best .btn.ghost{box-shadow:none}
.pkg-note{margin-top:20px;font-size:.88rem;max-width:760px}
/* ticks */
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.ticks li{position:relative;padding-left:28px;color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;border-radius:50%;background:var(--ink) url("data:image/svg+xml;utf8,") center/12px no-repeat}
.pkg.best .ticks li{color:#d9d9d9}
.pkg.best .ticks li::before{background-color:var(--paper);background-image:url("data:image/svg+xml;utf8,")}
.ticks.no li::before,.box.dont .ticks li::before{background:var(--paper) url("data:image/svg+xml;utf8,") center/12px no-repeat;box-shadow:inset 0 0 0 1.5px var(--ink)}
/* process steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;position:relative}
.steps .rail{display:none}
@media (max-width:860px){.steps{grid-template-columns:1fr}}
.sheet{position:relative;padding:28px;border-radius:var(--r);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-2);display:grid;gap:10px;align-content:start}
.sheet .n{font:600 3.4rem/1 var(--font-display);letter-spacing:-.06em;color:var(--ink);margin-bottom:8px}
.sheet p{color:var(--ink-2)}
.sheet .when{justify-self:start;margin-top:6px;padding:6px 11px;border-radius:999px;font:500 .74rem var(--font-mono);background:var(--paper-2);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.condition{display:flex;gap:16px;align-items:flex-start;margin-top:22px;padding:22px 24px;border-radius:var(--r);background:var(--paper-2)}
.condition svg{stroke:var(--ink)}
.condition p{color:var(--ink-2)}
.condition strong{color:var(--ink)}
/* industries tabs */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.tab{height:42px;padding:0 18px;border-radius:999px;border:0;cursor:pointer;font:600 .9rem var(--font-sans);color:var(--ink-2);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-2);transition:background .2s,color .2s}
.tab:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.tab[aria-selected=true]{background:var(--ink);color:var(--paper);box-shadow:none}
.panel[hidden]{display:none!important}
.panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(24px,4vw,44px);border-radius:28px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-2)}
.panel h3{font-size:1.7rem;margin-bottom:8px}
@media (max-width:860px){.panel{grid-template-columns:1fr}}
.panel .art{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line)}
.panel .art .win{position:absolute;inset:8% 7% 0;border-radius:12px 12px 0 0;overflow:hidden;background:#111;padding-top:24px;box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
.panel .art .win::before{content:"";position:absolute;left:12px;top:9px;width:38px;height:7px;background:radial-gradient(circle at 3.5px 3.5px,#e0e0e0 3px,transparent 3.5px) 0 0/13px 7px repeat-x}
.panel .art img{width:100%;height:100%;object-fit:cover;object-position:left top}
/* proof: sample cards */
.samples{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:28px}
@media (max-width:1060px){.samples{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.samples{grid-template-columns:1fr}}
.sample{display:grid;gap:6px;align-content:start;padding:0 0 22px;border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-2);transition:box-shadow .3s,transform .3s var(--ease)}
.sample:hover{box-shadow:inset 0 0 0 1.5px var(--ink);transform:translateY(-4px)}
.sample .s-shot{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-bottom:1px solid var(--line);margin-bottom:12px}
.sample > :not(.s-shot){margin-inline:20px}
.sample .s-ind{font:500 .7rem var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.sample b{font:600 1.45rem var(--font-display);letter-spacing:-.03em}
.sample span:not(.s-ind){color:var(--ink-2);font-size:.92rem}
.sample em{font-style:normal;font-weight:700;margin-top:4px}
.proof-links{display:grid;gap:10px}
.proof-links a{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-radius:16px;text-decoration:none;font-weight:600;box-shadow:inset 0 0 0 1px var(--line-2);transition:box-shadow .2s}
.proof-links a:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
/* affiliate band */
.aff{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:center;padding:clamp(28px,4vw,52px);border-radius:28px;background:var(--ink);color:var(--paper)}
.aff h2,.aff .lede{color:var(--paper)}.aff .lede{color:#cfcfcf}
.aff .eyebrow{color:#bdbdbd}.aff .eyebrow::before{background:var(--paper)}
.aff .big{font:600 clamp(5rem,10vw,8rem)/.9 var(--font-display);letter-spacing:-.07em}
.aff .btn.silver{background:var(--paper);color:var(--ink);box-shadow:none}
@media (max-width:760px){.aff{grid-template-columns:1fr}}
/* brief / contact */
.cta-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,70px);align-items:start}
@media (max-width:860px){.cta-grid{grid-template-columns:1fr}}
.email-big{font:600 clamp(1.3rem,2.6vw,1.8rem) var(--font-display);letter-spacing:-.02em;overflow-wrap:anywhere}
.email-big a,a.email-big{text-decoration:none;border-bottom:2px solid var(--ink)}
.brief{display:grid;gap:14px;padding:clamp(22px,3vw,32px);border-radius:var(--r);background:var(--paper-2)}
.brief .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.brief .two{grid-template-columns:1fr}}
.brief label{display:grid;gap:7px;font-size:.86rem;font-weight:600;color:var(--ink-2)}
.brief input,.brief select,.brief textarea,.search input{width:100%;font:inherit;font-size:16px;font-weight:500;color:var(--ink);background:var(--paper);border:0;border-radius:12px;padding:13px 15px;box-shadow:inset 0 0 0 1px var(--line-2);transition:box-shadow .2s}
.brief input:focus,.brief select:focus,.brief textarea:focus,.search input:focus{outline:0;box-shadow:inset 0 0 0 2px var(--ink)}
.brief small{color:var(--ink-3);font-size:.82rem}
.mail-alt a{color:var(--ink)}
/* founders */
.founders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:860px){.founders{grid-template-columns:1fr}}
.founder{position:relative;display:grid;grid-template-columns:110px minmax(0,1fr);gap:22px;padding:26px;border-radius:var(--r);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-2);transition:box-shadow .25s,transform .3s var(--ease)}
.founder.linked:hover{box-shadow:inset 0 0 0 1.5px var(--ink);transform:translateY(-3px)}
@media (max-width:520px){.founder{grid-template-columns:1fr}}
.portrait{width:110px;aspect-ratio:4/5;border-radius:16px;display:grid;place-items:center;font:600 2.4rem var(--font-display);letter-spacing:-.05em;background:var(--ink);color:var(--paper)}
.portrait.silver{background:var(--paper-3);color:var(--ink)}
.founder .role{font:500 .74rem var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:6px 0 10px}
.founder p{color:var(--ink-2);font-size:.96rem}
.founder-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:14px;align-items:center}
.founder a.mail{position:relative;z-index:2;font-weight:600;font-size:.9rem;overflow-wrap:anywhere}
.founder .more{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.9rem}
.founder .more svg{width:16px;height:16px}
.stretch{text-decoration:none}
.stretch::after{content:"";position:absolute;inset:0;border-radius:inherit}
/* two-column boxes */
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:860px){.two-col{grid-template-columns:1fr}}
.box{padding:28px;border-radius:var(--r);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-2)}
.box h3{margin-bottom:14px}
.box.dont{background:var(--paper-2);box-shadow:none}
.cta-final{background:var(--paper-2)}
/* affiliates: stats, calculator, timeline */
.stats4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line-2);overflow:hidden}
.stat{padding:26px;display:grid;gap:8px;align-content:start}
.stat + .stat{border-left:1px solid var(--line-2)}
.stat b{font:600 clamp(1.8rem,3vw,2.5rem)/1 var(--font-display);letter-spacing:-.05em}
.stat > span{color:var(--ink-3);font-size:.9rem}
.stat b span{font:inherit;color:inherit}
@media (max-width:860px){.stats4{grid-template-columns:1fr 1fr}.stat:nth-child(3){border-left:0}.stat:nth-child(n+3){border-top:1px solid var(--line-2)}}
.calc{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(24px,4vw,48px);border-radius:28px;background:var(--paper-2)}
@media (max-width:860px){.calc{grid-template-columns:1fr}}
.calc input[type=range]{width:100%;margin-top:14px;accent-color:var(--ink)}
.calc .out{font:600 clamp(3.4rem,7vw,5.4rem)/1 var(--font-display);letter-spacing:-.06em}
.timeline{list-style:none;counter-reset:t;display:grid;gap:26px}
.timeline li{position:relative;padding-left:62px;counter-increment:t}
.timeline li::before{content:counter(t,decimal-leading-zero);position:absolute;left:0;top:-4px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:500 .82rem var(--font-mono);background:var(--ink);color:var(--paper)}
.timeline li::after{content:"";position:absolute;left:21.5px;top:46px;bottom:-22px;width:1px;background:var(--line-2)}
.timeline li:last-child::after{display:none}
.timeline h3{margin-bottom:4px}
.timeline p{color:var(--ink-2)}
/* FAQ */
.faq{display:grid;gap:10px}
.faq details{border-radius:18px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-2);transition:box-shadow .2s}
.faq details[open]{box-shadow:inset 0 0 0 1.5px var(--ink)}
.faq details[hidden]{display:none}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:center;padding:19px 22px;font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.faq .cat{display:block;font:500 .68rem var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.faq .a{padding:0 22px 20px;color:var(--ink-2)}
.faq .a a{color:var(--ink);font-weight:600}
.search{position:relative;max-width:520px;margin-top:10px}
.search svg{position:absolute;left:15px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--ink-3)}
.search input{padding-left:44px}
.empty{color:var(--ink-3)}
/* legal */
.toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.toc a{padding:8px 14px;border-radius:999px;font-size:.86rem;font-weight:600;text-decoration:none;box-shadow:inset 0 0 0 1px var(--line-2)}
.toc a:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.prose{display:grid;gap:16px;color:var(--ink-2)}
.prose h2{font-size:clamp(1.6rem,3vw,2.1rem);margin-top:26px;scroll-margin-top:90px}
.prose h3{font-size:1.05rem;margin-top:8px}
.prose a{color:var(--ink);font-weight:600}
/* page heads */
.page-head{padding-block:clamp(56px,8vw,110px) clamp(32px,5vw,60px);border-bottom:1px solid var(--line);
background:linear-gradient(var(--line) 1px,transparent 1px) 0 0/80px 80px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/80px 80px;
-webkit-mask-image:none}
.page-head .wrap{display:grid;gap:18px;justify-items:start}
.page-head::before{content:none}
.page-head h1{max-width:16ch}
/* founder profile pages */
.founder-page{background:var(--paper)}
.back{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-weight:600;font-size:.88rem;text-decoration:none;box-shadow:inset 0 0 0 1px var(--line-2)}
.back svg{width:16px;height:16px}
.profile{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,70px);align-items:center;margin-top:24px;width:100%}
@media (max-width:860px){.profile{grid-template-columns:1fr}}
.profile-card{display:grid;gap:14px;justify-items:start}
.profile-card .portrait.big{width:100%;max-width:360px;font-size:clamp(4rem,10vw,7rem);border-radius:26px}
.profile-tag{font:500 .74rem var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.profile-copy{display:grid;gap:18px;justify-items:start}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;width:100%}
@media (max-width:560px){.facts{grid-template-columns:1fr}}
.facts div{padding:14px 16px;border-radius:14px;background:var(--paper-2)}
.facts dt{font:500 .68rem var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.facts dd{margin:4px 0 0;font-weight:600}
.contact-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn-linkedin{background:var(--ink)}
.btn-linkedin:hover{background:#2a2a2a}
/* footer */
footer{border-top:1px solid var(--line);padding-block:clamp(56px,7vw,90px) 36px;color:var(--ink-3);font-size:.92rem;background:var(--paper)}
footer .grid{display:grid;grid-template-columns:1.6fr repeat(3,minmax(0,1fr));gap:36px}
@media (max-width:800px){footer .grid{grid-template-columns:1fr 1fr}footer .grid > :first-child{grid-column:1/-1}}
footer h4{font:500 .72rem var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
footer ul{list-style:none;padding:0;display:grid;gap:9px}
footer a{color:var(--ink-2);text-decoration:none}
footer a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
footer .brand{margin-bottom:16px}
footer .base-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:52px;padding-top:22px;border-top:1px solid var(--line);font-size:.82rem}
/* toast */
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:80;transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:12px 18px;border-radius:12px;background:var(--ink);color:var(--paper);font-weight:600;font-size:.9rem;transition:opacity .3s,transform .4s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* package pop-up */
.pkg-modal{width:min(560px,calc(100% - 28px));max-height:calc(100dvh - 40px);margin:auto;padding:0;border:0;background:transparent;color:var(--ink);overflow:visible}
.pkg-modal::backdrop{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1);opacity:0;transition:opacity .22s}
.pkg-modal.open::backdrop{opacity:1}
.pm-box{position:relative;max-height:calc(100dvh - 40px);overflow:auto;padding:clamp(22px,4vw,32px);border-radius:26px;background:var(--paper);box-shadow:0 0 0 1px var(--line-2),0 40px 100px -30px rgba(0,0,0,.4);
opacity:0;transform:translateY(14px) scale(.97);transition:opacity .22s,transform .3s var(--ease)}
.pkg-modal.open .pm-box{opacity:1;transform:none}
.pm-box h2{font-size:clamp(1.6rem,4vw,2.1rem);margin:10px 0 6px}
.pm-lede{color:var(--ink-3);font-size:.95rem;margin-bottom:18px}
.pm-x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:12px;border:0;cursor:pointer;font-size:1.5rem;line-height:1;color:var(--ink);background:var(--paper-2)}
.pm-x:hover{background:var(--paper-3)}
.pm-opts{display:grid;gap:10px}
.pm-opt{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name price" "scope go";gap:4px 14px;align-items:center;padding:16px 18px;border-radius:16px;text-decoration:none;color:inherit;box-shadow:inset 0 0 0 1px var(--line-2);transition:box-shadow .2s,background .2s}
.pm-opt:hover,.pm-opt:focus-visible{box-shadow:inset 0 0 0 1.5px var(--ink);outline:0}
.pm-opt.best{background:var(--ink);color:var(--paper);box-shadow:none}
.pm-opt.best:hover{background:#222}
.pm-name{grid-area:name;font:600 1.1rem var(--font-display);display:flex;align-items:center;gap:10px}
.pm-name em{font:600 .68rem var(--font-sans);font-style:normal;padding:4px 9px;border-radius:999px;background:var(--paper);color:var(--ink)}
.pm-price{grid-area:price;font:600 1.85rem/1 var(--font-display);letter-spacing:-.05em}
.pm-price sup{font-size:.5em;vertical-align:top;color:var(--ink-4)}
.pm-scope{grid-area:scope;color:var(--ink-3);font-size:.9rem}
.pm-opt.best .pm-scope{color:#bdbdbd}
.pm-go{grid-area:go;font-weight:700;font-size:.88rem}
.pm-fine{margin-top:16px;color:var(--ink-3);font-size:.82rem}
.pm-fine a{color:var(--ink)}
html:has(.pkg-modal[open]){overflow:hidden}
@media (max-width:560px){.pm-box{padding:20px 16px 16px}.pm-opt{padding:12px 14px}.pm-price{font-size:1.55rem}.pm-scope,.pm-go{font-size:.82rem}}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.js .reveal{opacity:1;transform:none;transition:none}
.marquee .track,.kz-cue i{animation:none}
.pkg-modal .pm-box,.pkg-modal::backdrop{transition:none}
}
@media (max-width:860px){.profile-card .portrait.big{max-width:220px}}
/* founder pages: the black dot field sits behind the content */
html.founder-field main > *,html.founder-field footer{position:relative;z-index:2}
html.founder-field .founder-page.page-head{background:none;border-bottom:0}
html.founder-field .section + .section{border-top:0}
/* the logo animation (plays only after clicking the top-left wordmark): a black frame closes in, then a black-and-white KZ badge */
#kz-intro{display:none!important}
html.intro #kz-intro{display:grid!important;place-items:center;position:fixed;inset:0;z-index:1000;pointer-events:none;background:#fff;animation:ki-bg 2.35s forwards}
html.intro-hold *{animation-play-state:paused!important}
html.intro-hold #kz-intro,html.intro-hold #kz-intro *{animation-play-state:running!important}
#kz-intro .ki-frame{position:absolute;inset:0;box-shadow:inset 0 0 0 0 #0a0a0a;animation:ki-frame 2.35s cubic-bezier(.7,0,.3,1) forwards}
#kz-intro .ki-fill{position:absolute;inset:0;background:#0a0a0a;opacity:0;animation:ki-fill 2.35s forwards}
#kz-intro .ki-badge{position:relative;width:96px;height:96px;border-radius:26px;display:grid;place-items:center;background:#0a0a0a;box-shadow:0 20px 50px -10px rgba(0,0,0,.35);animation:ki-badge 2.35s cubic-bezier(.3,1.3,.5,1) forwards}
#kz-intro .ki-badge i{width:58px;aspect-ratio:600/335;background:#fff;-webkit-mask:url(kz-logo.svg) center/contain no-repeat;mask:url(kz-logo.svg) center/contain no-repeat;animation:ki-logo 2.35s forwards}
@keyframes ki-bg{0%,48%{background:#fff}49%,100%{background:transparent}}
@keyframes ki-frame{0%,19%{box-shadow:inset 0 0 0 0 #0a0a0a}21%{box-shadow:inset 0 0 0 3px #0a0a0a}41%{box-shadow:inset 0 0 0 75vmax #0a0a0a}42%,100%{box-shadow:inset 0 0 0 75vmax #0a0a0a;opacity:0}}
@keyframes ki-fill{0%,40%{opacity:0;clip-path:inset(0 round 0)}41%,48%{opacity:1;clip-path:inset(0 round 0)}72%{opacity:1;clip-path:inset(calc(50% - 78px) calc(50% - 78px) round 40px)}80%,100%{opacity:0;clip-path:inset(calc(50% - 68px) calc(50% - 68px) round 34px)}}
@keyframes ki-badge{0%{transform:scale(.4);opacity:0}14%{transform:scale(1);opacity:1}38%{background:#0a0a0a}44%,70%{background:#fff;box-shadow:0 0 0 1px #0a0a0a}78%{background:#0a0a0a;transform:scale(1);opacity:1}100%{transform:scale(.3);opacity:0}}
@keyframes ki-logo{0%,38%{background:#fff}44%,70%{background:#0a0a0a}78%,100%{background:#fff}}
.kz-copy h1{max-width:16ch}
@media (max-width:480px){.kz-copy h1{font-size:clamp(1.9rem,8.6vw,2.4rem);max-width:none}}
.calc-pkgs{margin:0 0 18px}
.calc-pkgs .tab[aria-pressed=true]{background:var(--ink);color:var(--paper);box-shadow:none}
/* founder pages: the text column is wider so "Meet Ryder Ziman" / "Meet Rex Kulman" stay on one line */
@media (min-width:861px){
.founder-page .profile{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr)}
.founder-page .profile-copy h1{white-space:nowrap;max-width:none}
}
/* industry previews: a real browser window that opens the sample */
.panel .pv{display:grid;gap:12px;text-decoration:none;color:inherit;perspective:1200px}
.pv-win{display:block;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line-2),0 40px 70px -40px rgba(0,0,0,.45);transform:rotateY(-7deg) rotateX(3deg);transform-origin:left center;transition:transform .7s cubic-bezier(.2,.8,.2,1),box-shadow .7s}
.pv:hover .pv-win,.pv:focus-visible .pv-win{transform:none;box-shadow:0 0 0 1px var(--line-2),0 40px 70px -40px rgba(0,0,0,.45)2}
.pv-bar{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;background:var(--paper-2);border-bottom:1px solid var(--line)}
.pv-bar > i{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.pv-url{display:flex;align-items:center;gap:6px;margin:0 auto;padding:4px 14px;border-radius:99px;font:500 12px var(--font-mono);color:var(--paper)C;background:var(--paper);max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-url svg{width:12px;height:12px;flex:none}
.pv-win img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:center top;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.pv:hover .pv-win img{transform:scale(1.03)}
.pv-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.88rem;color:var(--ink-3)}
.pv-foot b{color:var(--ink)}
@media (max-width:860px){.pv-win{transform:none}}
@media (prefers-reduced-motion:reduce){.pv-win,.pv-win img{transition:none}}
.panel .art{display:none}
.panel{align-items:center}
/* logo animation, one take: black screen, white KZ. The black closes in around the logo, then lets go of the page. */
html.intro #kz-intro{background:transparent!important;animation:none!important}
#kz-intro .ki-frame{display:none!important}
#kz-intro .ki-fill{background:#0a0a0a!important;animation:mki-fill 2.35s cubic-bezier(.7,0,.25,1) forwards!important}
#kz-intro .ki-badge{background:transparent!important;box-shadow:none!important;opacity:0;animation:mki-badge 2.35s cubic-bezier(.3,1.25,.5,1) forwards!important}
#kz-intro .ki-badge i{width:64px;background:#fff!important;animation:none!important}
@keyframes mki-fill{0%,46%{clip-path:inset(0 round 0);opacity:1}74%{clip-path:inset(calc(50% - 56px) calc(50% - 56px) round 28px);opacity:1}88%,100%{clip-path:inset(calc(50% - 50px) calc(50% - 50px) round 26px);opacity:0}}
@keyframes mki-badge{0%{transform:scale(.6);opacity:0}16%{transform:scale(1);opacity:1}74%{transform:scale(1);opacity:1}88%,100%{transform:scale(.9);opacity:0}}