/* Knofti: static, responsive landing page. */
:root{--ink:#102a43;--teal:#087e8b;--mint:#6ee7b7;--mist:#f7fafc;--line:#d9e2ec;--muted:#526779;--white:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--mist);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.65}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}a:focus-visible{outline:3px solid var(--teal);outline-offset:5px}img,svg{max-width:100%}.container{width:min(1160px,calc(100% - 48px));margin-inline:auto}.skip-link{position:absolute;left:16px;top:-80px;background:var(--ink);color:white;padding:12px;z-index:20}.skip-link:focus{top:12px}.site-header{border-bottom:1px solid var(--line);background:rgba(247,250,252,.97)}.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:96px;gap:24px}.brand{display:inline-flex;gap:8px;align-items:center}.brand span{font-weight:750;font-size:32px;letter-spacing:-1.6px}.brand img{object-fit:contain}nav{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:600}.nav-cta{border:1px solid var(--line);padding:10px 16px;border-radius:9px}.hero{display:grid;grid-template-columns:1.12fr 1fr;gap:56px;align-items:center;padding-block:88px 80px}.eyebrow{font-size:11px;letter-spacing:1.7px;font-weight:750;text-transform:uppercase;color:var(--teal);margin:0 0 20px}.status-dot{display:inline-block;width:7px;height:7px;background:var(--teal);border-radius:50%;margin-right:8px}h1,h2,h3{line-height:1.12;letter-spacing:-1.8px;margin:0}h1{font-size:clamp(40px,4.9vw,64px);font-weight:750}h1 span{color:var(--teal)}.hero-intro{font-size:20px;line-height:1.5;margin-top:28px;max-width:440px}.thats-knoft{font-size:24px;font-weight:750;margin:14px 0}.hero-description{color:var(--muted);max-width:460px}.button-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;padding:13px 20px;border-radius:9px;font-size:14px;font-weight:650;transition:transform .15s,background .15s}.button:hover{text-decoration:none;transform:translateY(-2px)}.primary{background:var(--teal);color:white}.primary:hover{background:#066673}.secondary{border:1px solid var(--line);background:white}.microcopy{font-size:12px;color:var(--muted);margin-top:18px}.hero-art{background:white;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 24px 65px rgba(16,42,67,.07);transform:rotate(-2deg)}.art-top,.art-bottom{display:flex;justify-content:space-between;align-items:center;padding:22px 24px}.art-label{font-size:10px;font-weight:750;letter-spacing:1.8px}.art-dot{width:8px;height:8px;background:var(--mint);border-radius:50%}.cord-art{display:block;width:100%}.tangle,.resolved{fill:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round}.tangle{stroke:var(--ink)}.resolved{stroke:var(--teal)}.art-bottom{font-size:11px;color:var(--muted);border-top:1px solid #edf2f7;gap:12px}.principle-strip{border-block:1px solid var(--line);background:white}.principle-strip .container{display:flex;justify-content:space-around;gap:20px;padding-block:22px;font-size:13px;font-weight:650}.section{padding-block:90px}.story-grid,.example-section{display:grid;grid-template-columns:1fr 1fr;gap:85px;align-items:center}h2{font-size:clamp(32px,3.5vw,46px)}.story-grid>div>p:not(.eyebrow),.example-section>div>p:not(.eyebrow){color:var(--muted);max-width:470px}.definition-card{padding:36px;background:white;border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 32px rgba(16,42,67,.03)}.dictionary-label{font-size:10px;letter-spacing:1.8px;font-weight:750;color:var(--teal);margin:0 0 22px}.definition-card h3{font-size:44px}.pronunciation{font-size:16px;font-weight:400;letter-spacing:0;color:var(--muted)}.part-of-speech{font-size:13px;color:var(--muted)}.definition{font-size:19px;line-height:1.6}blockquote{margin:24px 0;padding-left:18px;border-left:3px solid var(--mint);color:var(--muted);font-style:italic}.definition-note{font-size:11px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px}.approach{background:#edf4f5;border-block:1px solid #e3edef}.section-heading{max-width:640px}.section-heading>p:last-child{color:var(--muted);font-size:17px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}.feature-card{padding:30px;background:white;border:1px solid var(--line);border-radius:14px}.step{font-size:10px;font-weight:750;letter-spacing:1.8px;color:var(--teal)}.feature-card h3{font-size:25px;letter-spacing:-.7px;margin-top:26px}.feature-card p{font-size:14px;color:var(--muted);margin-bottom:0}.roadmap-note{font-size:11px;color:var(--muted);margin-bottom:0;margin-top:22px}.data-example{background:white;border:1px solid var(--line);border-radius:14px;overflow:hidden}.example-title{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:20px;font-size:13px;font-weight:650;border-bottom:1px solid var(--line)}.small-pill{font-size:10px;padding:4px 8px;background:#edf4f5;color:var(--teal);border-radius:5px;letter-spacing:1px}.data-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:17px 20px;border-bottom:1px solid #edf2f7;font-size:12px}.data-row code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere}.data-head{background:var(--mist);font-size:11px;font-weight:650;color:var(--muted)}.review{color:#85410b;background:#fff3e2;border-radius:5px;padding:1px 7px;justify-self:start}.example-note{padding:4px 20px 12px;font-size:11px;color:var(--muted)}.updates-section{padding-bottom:65px}.updates-card{padding:64px;border-radius:22px;background:var(--ink);color:white;position:relative;overflow:hidden}.updates-card .eyebrow{color:var(--mint)}.updates-card>p:not(.eyebrow){max-width:620px;color:#d9e2ec}.updates-card h2{font-size:clamp(32px,4vw,48px)}.light{background:var(--mint);color:var(--ink);margin-top:16px}.updates-note{font-size:12px;margin-top:22px}.footer{border-top:1px solid var(--line);padding-block:30px;display:flex;align-items:center;justify-content:space-between;gap:20px}.footer .brand span{font-size:26px}.footer p,.footer>a:last-child{font-size:12px;color:var(--muted)}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:40px;padding-block:60px}.hero-copy{max-width:650px}.hero-art{max-width:600px;transform:none}.story-grid,.example-section{gap:35px}.cards{gap:12px}.feature-card{padding:22px}.section{padding-block:64px}.updates-card{padding:44px}}
@media(max-width:650px){.container{width:calc(100% - 32px)}.header-inner{flex-wrap:wrap;gap:12px;padding-block:16px;min-height:0}.brand span{font-size:28px}nav{width:100%;gap:18px;font-size:12px;justify-content:space-between}.nav-cta{padding:8px 10px}.hero{padding-block:46px}.hero-intro{font-size:18px}.principle-strip .container{gap:12px;flex-wrap:wrap;justify-content:flex-start;font-size:12px}.story-grid,.example-section,.cards{grid-template-columns:1fr}.section{padding-block:52px}.definition-card{padding:26px}.section-heading>p:last-child{font-size:16px}.feature-card{padding:26px}.feature-card h3{margin-top:18px}.updates-card{padding:32px 24px}.footer{flex-wrap:wrap}.footer p{width:100%;order:3;margin:0}.art-bottom{font-size:10px;padding:16px}.data-row{padding-inline:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}.button:hover{transform:none}}
.hero-art {
  transform: rotate(-2deg);
  transform-origin: center;
}

/* Keep the card straight on tablets and phones. */
@media (max-width: 900px) {
  .hero-art {
    transform: none;
  }
}
.hero-logo-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 36px 24px;
  background: #fff;
}
.hero-logo-symbol {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
}
@media (max-width: 650px) {
  .hero-logo-panel { min-height: 220px; padding: 28px 18px; }
}

/* Dictionary-page-only layout. Shared branding and tokens are inherited above. */
.word-page .wrap { width:min(960px,calc(100% - 48px));margin:auto }
.word-page .skip { position:absolute;top:-80px;left:12px;background:white;padding:12px }
.word-page .skip:focus { top:12px }
.word-page .header { display:flex;justify-content:space-between;align-items:center;padding-block:28px;border-bottom:1px solid var(--line);gap:20px }
.word-page .header>a:last-child { font-size:14px }
.word-page .intro { padding-block:76px 50px }
.word-page h1, .word-page h2, .word-page h3 { line-height:1.15;margin:0 0 20px;letter-spacing:-1px }
.word-page h1 { font-size:clamp(54px,8vw,88px) }
.word-page h2 { font-size:clamp(30px,4vw,42px) }
.word-page h3 { font-size:22px;letter-spacing:-.5px }
.word-page .lead { font-size:clamp(18px,2.5vw,24px);color:var(--muted);max-width:750px }
.word-page .accent { color:var(--teal) }
.word-page .contents { display:flex;flex-wrap:wrap;gap:12px 24px;padding-block:20px;border-block:1px solid var(--line);font-size:14px }
.word-page .section { padding-block:52px }
.word-page .section>p { max-width:820px;color:var(--muted) }
.word-page .dictionary { background:white;border:1px solid var(--line);border-radius:18px;padding:36px }
.word-page .entry-top { display:flex;align-items:baseline;gap:24px;flex-wrap:wrap }
.word-page .entry-top h2 { font-size:56px;margin-bottom:0 }
.word-page .entry-top span, .word-page .note { color:var(--muted);font-size:13px }
.word-page .dictionary h3 { margin-top:28px }
.word-page .definition { font-size:23px;line-height:1.55 }
.word-page .forms { font-size:14px;color:var(--muted) }
.word-page blockquote { margin:24px 0;border-left:3px solid var(--mint);padding-left:20px;font-style:italic;color:var(--muted) }
.word-page .grid { display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px }
.word-page .card { background:white;border:1px solid var(--line);border-radius:14px;padding:26px }
.word-page .card p { margin-bottom:0;color:var(--muted) }
.word-page .callout { background:#edf4f5;border-left:4px solid var(--teal);padding:24px 28px;margin-top:28px;border-radius:0 12px 12px 0 }
.word-page .callout p:last-child { margin-bottom:0 }
.word-page .data-band { background:#edf4f5;border-block:1px solid var(--line) }
.word-page .data-band .callout { background:white }
.word-page .words { margin:28px 0 0 }
.word-page .words>div { padding:24px 0;border-bottom:1px solid var(--line) }
.word-page dt { font-size:23px;font-weight:750 }
.word-page dt span { font-size:12px;font-weight:400;color:var(--muted);margin-left:12px }
.word-page dd { margin:10px 0 0;color:var(--muted) }
.word-page .story { max-width:720px;font-size:18px;color:var(--muted) }
.word-page .share-panel { padding:42px;background:var(--ink);border-radius:20px;color:white }
.word-page .share-panel .eyebrow { color:var(--mint) }
.word-page .share-panel p, .word-page .share-panel li { color:#e0eaf2 }
.word-page .share-panel ul { padding-left:22px }
.word-page .share-copy { border:1px solid #486176;border-radius:12px;padding:8px 22px;margin-top:26px }
.word-page .faq details { border-bottom:1px solid var(--line);padding:20px 0 }
.word-page .faq summary { cursor:pointer;font-weight:650 }
.word-page .faq details p { color:var(--muted);max-width:800px }
@media (max-width:650px) {
.word-page .wrap { width:calc(100% - 32px) }
.word-page .intro { padding-block:48px 28px }
.word-page .section { padding-block:38px }
.word-page .grid { grid-template-columns:1fr }
.word-page .dictionary, .word-page .share-panel { padding:24px }
.word-page .entry-top { gap:10px }
.word-page .definition { font-size:20px }
.word-page .callout { padding:20px }
.word-page .contents { gap:10px 18px }
}
.word-page .contents { justify-content: flex-start; font-weight: 400; }
.word-page main a:not(.button) { color: var(--teal); text-decoration: underline; text-underline-offset: 4px; }
.word-page summary:focus-visible { outline: 3px solid var(--teal); outline-offset: 5px; }
.word-page .share-panel .button { background: var(--mint); color: var(--ink); margin-top: 12px; }
.word-page .share-panel .eyebrow { color: var(--mint); }