/* Kind Words, the site. White glove. Calm white pages, Satoshi set at a medium weight with room around it,
   fine hairlines, faces in black and white, and aqua kept for the mark and whatever is picked. The shapes
   come from the hard lines of the kw mark, so every corner is square, the mark, the buttons, the photos and
   the panels alike. Nothing rounded and nothing cut. Flat, no shadows, one spacing scale. */
@font-face{font-family:'Satoshi';src:url(/fonts/satoshi-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Satoshi';src:url(/fonts/satoshi-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Satoshi';src:url(/fonts/satoshi-900.woff2) format('woff2');font-weight:900;font-display:swap}
:root{--ink:#0D0D0D;--mut:#62625E;--soft:#F4F4F1;--line:rgba(13,13,13,.13);--aqua:#2EDBCF;--gut:56px;--max:1200px;--out:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:#fff;color:var(--ink);font:500 17px/1.5 'Satoshi',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%}
/* no word left alone on a last line. Short lines are balanced, long ones wrapped with care */
p,li,small,figcaption{text-wrap:pretty}
h1,h2,h3,.sub,.trust,.head p,.ai .words p,.face .say p,.ex p{text-wrap:balance}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.nw{white-space:nowrap}

/* ---------- top ---------- */
.top{height:84px;display:flex;align-items:center}
.top .wrap{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.lock{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 19px/1 'Satoshi';letter-spacing:-.025em}
.lock::after{content:'Kind Words'}
.mk{display:grid;place-items:center;flex:none;width:30px;height:30px;background:var(--aqua);color:var(--ink);font:900 14px/1 'Satoshi';letter-spacing:-.06em}
.top nav{display:flex;align-items:center;gap:28px}
.top nav a:not(.btn){text-decoration:none;font-weight:500}
.top nav a:not(.btn):hover{text-decoration:underline;text-underline-offset:4px}
/* the page you are on, the same header everywhere */
.top nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.top .lock{white-space:nowrap;flex:none}
.top{position:relative}
.menu{display:none;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;font:inherit}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 26px 0 20px;background:var(--ink);color:#fff;text-decoration:none;font:500 16.5px/1 'Satoshi';letter-spacing:0;white-space:nowrap;transition:background-color .2s,transform .3s var(--out)}
.btn:hover{background:#262626}
.btn:active{transform:scale(.98)}
.btn.sm{height:40px;padding:0 16px 0 12px;font-size:14.5px;gap:8px}
.btn .t:empty::after{content:attr(data-t)}
.btn .cr{width:24px;height:24px;flex:none}
.btn.sm .cr{width:20px;height:20px}
.btn .cr svg{width:100%;height:100%;fill:currentColor;display:block}
.btn.plain{padding:0 24px}
.btn[aria-busy="true"]{opacity:.6;pointer-events:none}
button.btn{border:0;cursor:pointer}

/* ---------- hero ---------- */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:start;padding-top:24px}
.hero .copy{padding-top:80px}
h1{font:500 clamp(44px,5.6vw,76px)/1 'Satoshi';letter-spacing:-.04em;text-wrap:balance}
.sub{margin-top:28px;font-size:19px;line-height:1.55;color:var(--mut);max-width:25em;text-wrap:pretty}
.hero .btn{margin-top:40px}
.trust{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:15px;line-height:1.4;color:var(--mut)}
.trust .lk{width:16px;height:16px;flex:none}
.trust .lk svg{width:100%;height:100%;fill:currentColor;display:block}
.faces{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr);gap:12px;height:560px}
.face{position:relative;overflow:hidden;background:#1a1a1a;margin-top:28px}
.face.hi{margin-top:0}
.face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:grayscale(1) contrast(1.08)}
.face::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.78) 86%)}
.face .say{position:absolute;left:18px;right:18px;bottom:24px;z-index:1;color:#fff}
.face .say p{font:500 15.5px/1.4 'Satoshi';display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.face .say b{display:block;margin-top:12px;font:700 13.5px/1.2 'Satoshi'}
.face:not(.hi) .say b{margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.face .say small{display:block;margin-top:5px;font:500 12.5px/1.25 'Satoshi';opacity:.72}
.face .qm{position:absolute;left:18px;top:14px;z-index:1;font:700 56px/1 'Satoshi';color:var(--aqua)}

/* ---------- why, the close. His note, signed, with the last button under it ---------- */
.why{padding:136px 0 144px}
.why .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:56px}
.why .btn{margin-top:40px}
.why .note{max-width:34em}
.why .note p{font-size:21px;line-height:1.6;text-wrap:pretty}
.why .sign{margin-top:22px;font-weight:700;font-size:17px!important}
.why h2{font-size:36px;letter-spacing:-.03em}

/* ---------- sections ---------- */
.band{padding:136px 0}
h2{font:500 54px/1.04 'Satoshi';letter-spacing:-.035em;text-wrap:balance}
.head{max-width:820px}
.head p{margin-top:24px;font-size:19px;line-height:1.55;max-width:30em;text-wrap:pretty;color:var(--mut)}

/* the editor itself, running on the sample people */
.band.aqua{background:var(--soft);color:var(--ink)}
.band.aqua .head p{color:var(--mut)}
.editor{margin-top:56px;height:760px;background:#0E0E0E;border:1px solid var(--ink)}
.editor iframe{display:block;width:100%;height:100%;border:0}

/* after you add it, on black */
.band.ink{background:var(--ink);color:#fff}
.band.ink .head p{color:rgba(255,255,255,.66)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px;align-items:start}
.step h3{margin-top:26px;font:700 21px/1.2 'Satoshi';letter-spacing:-.015em}
.step p{margin-top:10px;color:rgba(255,255,255,.64);font-size:16.5px;line-height:1.55}
.pane{position:relative;height:460px;background:#fff;overflow:hidden}
.pane iframe{position:absolute;left:50%;top:50%;width:360px;height:500px;border:0;transform-origin:50% 50%;transform:translate(-50%,-50%) scale(var(--s,1));pointer-events:none}
.pane.build{background:#0E0E0E}
/* the right end of Chrome's toolbar, with Kind Words open under its button, the way it looks after you click it */
.pane.win{background:#F1F1EE}
.tb{position:absolute;left:0;right:0;top:0;height:48px;display:flex;align-items:center;gap:12px;padding:0 12px 0 14px;background:#fff;border-bottom:1px solid var(--line);color:#474747}
.tb .url{flex:1;min-width:0;height:30px;display:flex;align-items:center;padding:0 14px;border-radius:15px;background:#F1F3F4;font:400 13px/1 system-ui,sans-serif;color:#5F6368;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb .ico{width:17px;height:17px;flex:none;fill:currentColor}
.tb .kwi{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#E3E3E3}
.tb .kwi img{width:18px;height:18px}
.tb .me{flex:none;width:22px;height:22px;border-radius:50%;object-fit:cover}
.pane.win .pop{position:absolute;top:56px;right:var(--r,58px);width:400px;transform-origin:100% 0;transform:scale(var(--s,1));background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.pane.win .pop iframe{position:static;display:block;width:400px;height:640px;transform:none}
/* the builder drawn at a desktop width and shown from its top left corner, the settings and the first cards, easing out at the bottom */
.pane.build{-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.pane.build iframe{left:0;top:0;width:1100px;height:calc(100% / var(--s,.33));transform:scale(var(--s,.33));transform-origin:0 0}

/* four real pages with the section on them */
.examples{padding:136px 0}
.ex-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px;margin-top:56px}
.ex{display:block;text-decoration:none;color:inherit}
.shot{position:relative;aspect-ratio:4/3;overflow:hidden;background:#fff;border:1px solid var(--line);transition:transform .3s var(--out)}
.shot iframe{position:absolute;left:0;top:0;width:1280px;height:960px;border:0;transform-origin:0 0;transform:scale(var(--s,.4)) translateY(var(--y,0px));pointer-events:none}
.ex:hover .shot{transform:translateY(-4px)}
.ex p{display:flex;align-items:baseline;gap:10px;margin-top:16px;font-size:16.5px}
.ex p b{font-weight:500}
.ex p span{color:var(--mut)}
.ex:hover p b{text-decoration:underline;text-underline-offset:4px}

/* the AI site builders the download works with */
.ai{padding:136px 0;background:var(--soft)}
.ai .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.ai .words p{margin-top:24px;font-size:19px;line-height:1.55;color:var(--mut);max-width:24em;text-wrap:pretty}
.tools{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tools li{aspect-ratio:1.35;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#fff;font-size:15px;color:var(--mut)}
.tools svg,.tools img{width:40px;height:40px;color:var(--ink)}
.tools li span{color:var(--ink)}

/* ---------- inside pages. One centered column, the way help centers (GetYourGuide, ElevenLabs), changelogs (Canny,
   GitBook) and policies (Pi) read. Title and a line on top, the page under it ---------- */
.doc{padding:80px 0 144px}
.doc .wrap{max-width:calc(760px + var(--gut) * 2)}
.doc-head h1{font-size:clamp(40px,4.4vw,52px);line-height:1.05}
.lede{margin-top:14px;font-size:18px;line-height:1.55;color:var(--mut);max-width:34em;text-wrap:pretty}
.doc-head .btn{margin-top:24px}
.doc-body{margin-top:48px;color:#34342F;font-size:17px;line-height:1.65}
.doc-body h2{font:500 22px/1.3 'Satoshi';letter-spacing:-.015em;color:var(--ink);margin-top:44px}
.doc-body>h2:first-child{margin-top:0}
.doc-body p,.doc-body ul,.doc-body ol{margin-top:12px}
.doc-body ul,.doc-body ol{padding-left:1.2em}
.doc-body li{margin-top:6px}
.doc-body .btn{margin-top:20px}

/* questions that open in place, one row each */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;font:500 19px/1.35 'Satoshi';letter-spacing:-.01em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:16px;height:16px;background:var(--ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .25s var(--out)}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq summary:hover{color:#3A3A36}
.faq .a{padding:0 0 26px;max-width:38em}
.faq .a>:first-child{margin-top:0}

/* a release. The version beside it, the product as it shipped and what is in it */
.rel{display:grid;grid-template-columns:120px minmax(0,1fr);gap:32px;padding-top:32px;border-top:1px solid var(--line)}
.rel-meta b{font:500 22px/1.3 'Satoshi';letter-spacing:-.015em;color:var(--ink)}
.rel-shot{display:block;background:#0E0E0E}
.rel-list{list-style:none;padding:0!important;margin-top:24px!important}
.rel-list li{margin:0;padding:14px 0;border-bottom:1px solid var(--line)}
.rel-list li:first-child{border-top:1px solid var(--line)}

/* the guides. Pick where your site is made, then only that one's steps, the way Dub and Typeform set up an embed */
.picks{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:0!important;margin:0!important}
.picks li{margin:0}
.picks a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;aspect-ratio:1.4;background:var(--soft);color:var(--ink);text-decoration:none;font-size:15px;transition:background-color .15s,color .15s}
.picks a:hover{background:#EBEBE7}
.picks a[aria-selected="true"]{background:var(--ink);color:#fff}
.picks svg{width:28px;height:28px;fill:currentColor}
.how{margin-top:16px;padding:32px 36px 34px;border:1px solid var(--line)}
.how h2,.else h2{margin-top:0}
.js .how[hidden]{display:none}
.how ol{list-style:none;padding:0;counter-reset:step;margin-top:18px}
.how ol li{counter-increment:step;position:relative;min-height:28px;padding:2px 0 0 44px;margin-top:14px;text-wrap:pretty}
.how ol li::before{content:counter(step);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font:700 13.5px/1 'Satoshi';color:var(--ink)}
.doc-body .aside{margin-top:24px;padding:16px 18px;background:var(--soft);font-size:15.5px;line-height:1.6;color:var(--mut);text-wrap:pretty}
.guide .else{margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}
@media (max-width:640px){
  .doc{padding:48px 0 112px}
  .doc-body{margin-top:36px}
  .picks{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .picks a{aspect-ratio:auto;height:52px;flex-direction:row;justify-content:flex-start;gap:12px;padding:0 16px;font-size:15px}
  .picks svg{width:20px;height:20px}
  .how{padding:24px 20px 26px}
  .rel{grid-template-columns:1fr;gap:16px}
  .faq summary{font-size:17.5px;padding:20px 0}
}

/* ---------- foot ---------- */
.foot{background:var(--ink);color:#fff;padding:56px 0 64px}
.foot .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot .lock{color:#fff}
.foot nav{display:flex;gap:28px}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline;text-underline-offset:4px}
.foot nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.foot .from{color:rgba(255,255,255,.6);font-size:15px}
.foot .from a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ---------- phone ---------- */
@media (max-width:1099px){
  .hero .wrap{grid-template-columns:1fr;gap:48px}
  .hero .copy{padding-top:32px}
  h1{font-size:64px}
  .faces{height:460px}
}
@media (max-width:980px){
  :root{--gut:32px}
  h2{font-size:46px}
  .why .wrap{grid-template-columns:1fr}
  .why .note{margin-top:20px}
  .why .note p{font-size:20px}
  .steps{grid-template-columns:1fr;gap:56px}
  .pane{height:470px}
  .ai .wrap{grid-template-columns:1fr;gap:40px}
}
@media (max-width:640px){
  :root{--gut:20px}
  .top{height:68px}
  .top nav{gap:18px}
  .top nav .btn .t{display:none}
  .top nav .btn.sm{padding:0 10px}
  /* on a phone the links fold into a menu, the way product sites do it */
  .top nav{display:none}
  .menu{display:grid;place-items:center;width:44px;height:44px;margin-right:-10px}
  .menu svg{width:22px;height:22px;fill:currentColor}
  .top.open nav{display:flex;position:absolute;left:0;right:0;top:100%;z-index:30;flex-direction:column;align-items:stretch;gap:0;padding:4px var(--gut) 24px;background:#fff;border-bottom:1px solid var(--line)}
  .top.open nav a:not(.btn){padding:16px 0;font-size:19px;border-bottom:1px solid var(--line)}
  .top.open nav .btn.sm{margin-top:20px;height:52px;padding:0 20px;justify-content:center}
  .top.open nav .btn .t{display:inline}
  h1{font-size:46px}
  .why{padding:72px 0 80px}
  .why h2{font-size:32px}
  .why .note p{font-size:18px}
  .hero .copy{min-width:0}
  .sub{font-size:18px}
  .hero .btn{width:100%;justify-content:center}
  .faces{height:360px;gap:8px}
  .face .say{left:12px;right:12px;bottom:16px}
  .face .say p{font-size:13px;-webkit-line-clamp:4}
  .face:not(.hi) .say{display:none}
  .face .qm{font-size:40px;left:10px;top:8px}
  .band{padding:80px 0}
  h2{font-size:40px}
  .head p{font-size:17px}
  .editor{height:860px;margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1);border-left:0;border-right:0}
  .examples,.ai{padding:80px 0}
  .ex-grid{grid-template-columns:1fr;gap:32px;margin-top:40px}
  .ai .words p{font-size:17px}
  .tools{gap:8px}
  .tools li{gap:10px;font-size:13.5px}
  .tools svg,.tools img{width:32px;height:32px}
  .why .btn{width:100%;justify-content:center}
  .doc-head h1{font-size:40px}
  .foot .wrap{flex-direction:column;align-items:flex-start}
  .foot nav{display:grid;grid-template-columns:repeat(3,auto);gap:14px 28px}
  #try{padding-bottom:0}
  .trust{align-items:flex-start;margin-top:14px;font-size:14px;line-height:1.35}
  .trust .lk{width:15px;height:15px;margin-top:1px}
  .tb .kwi~.ico{display:none}
  .shot{aspect-ratio:1}
  .shot iframe{width:390px}
}
@media (max-width:400px){.top .wrap{gap:12px}.top nav{gap:14px}.top .lock{gap:8px;font-size:17px}}
@media (max-width:370px){h1{font-size:38px}h2{font-size:34px}}

/* a sample page, inside a bar that goes back, switches samples, opens its look in the editor or installs */
html:has(body.viewer){height:100%}
body.viewer{height:100%;display:flex;flex-direction:column;overflow:hidden;background:var(--soft)}
.vbar{flex:none;height:64px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:0 12px 0 10px;background:#fff;border-bottom:1px solid var(--line)}
.vback{justify-self:start;display:flex;align-items:center;gap:10px;height:44px;padding:0 10px 0 8px;text-decoration:none;transition:background-color .15s}
.vback:hover{background:var(--soft)}
.vback svg{width:18px;height:18px;fill:currentColor}
.vpick{display:flex;height:64px}
.vpick a{display:grid;place-items:center;padding:0 16px;text-decoration:none;font-size:15.5px;color:var(--mut);box-shadow:inset 0 -2px 0 transparent;transition:color .15s,box-shadow .15s}
.vpick a:hover{color:var(--ink)}
.vpick a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--aqua)}
.vacts{justify-self:end;display:flex;align-items:center;gap:20px}
.vedit{font-size:15.5px;text-decoration:none;white-space:nowrap}
.vedit:hover{text-decoration:underline;text-underline-offset:4px}
.vsite{flex:1;min-height:0;width:100%;border:0;background:#fff}
@media (max-width:760px){
  .vbar{height:auto;grid-template-columns:auto 1fr;grid-template-areas:"back acts" "pick pick";row-gap:0;padding:8px 12px 0 6px}
  .vback{grid-area:back}.vacts{grid-area:acts}
  .vacts{gap:14px}
  .vedit{font-size:14.5px}
  .vbar .btn .t{display:none}
  .vbar .btn.sm{padding:0 10px}
  .vpick{grid-area:pick;height:44px;margin:4px -12px 0 -6px;padding:0 6px;overflow-x:auto;scrollbar-width:none}
  .vpick a{padding:0 14px;font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}