/* Klarleaf — ported from the design canvas (project/Main.dc.html).
   Fonts are self-hosted: no request ever leaves this origin. */

@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/instrument-sans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonts/newsreader-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonts/newsreader-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

body{margin:0}
.kl{--canvas:#F2F0EA;--surface:#FBFAF6;--ink:#1A1C22;--sub:#55575E;--line:#D9D6CC;--accent:#1E3A9E;--behind:#E7E4DA;--muted:#838488;--slip:#FFFFFF;--sh:0 1px 2px rgba(0,0,0,.2),0 18px 36px rgba(0,0,0,.12);--sh-s:0 1px 2px rgba(0,0,0,.2),0 10px 22px rgba(0,0,0,.09);
  container:kl/inline-size;min-height:100vh;overflow-x:clip;background:var(--canvas);color:var(--ink);font-family:'Instrument Sans',-apple-system,system-ui,sans-serif;font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased}
@media (prefers-color-scheme:dark){
  .kl{--canvas:#1A1917;--surface:#25241F;--ink:#EEEAE0;--sub:#ABA79D;--line:#3A3833;--accent:#AFBDF4;--behind:#34322D;--muted:#7A776F;--slip:#F4F1E8;--sh:0 1px 2px rgba(0,0,0,.5),0 18px 36px rgba(0,0,0,.38);--sh-s:0 1px 2px rgba(0,0,0,.5),0 10px 22px rgba(0,0,0,.3)}
  .kl .phone{background:#0F0F0D;outline:1px solid var(--line)}
}
.on-paper{--canvas:#FBFAF6;--surface:#FFFFFF;--ink:#1A1C22;--sub:#55575E;--line:#D9D6CC;--accent:#1E3A9E;--behind:#E7E4DA;--muted:#838488;color:#1A1C22}
.kl *{box-sizing:border-box}
.kl a{color:var(--accent)}
.kl a:hover{text-decoration-thickness:2px}
.kl :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.kl h1,.kl h2,.kl h3,.kl p,.kl ul{margin:0;padding:0}
.kl ul{list-style:none}
.wrap{max-width:1336px;margin-inline:auto;padding-inline:clamp(16px,4cqi,48px)}
.serif{font-family:Newsreader,Georgia,serif;font-weight:400;letter-spacing:-.015em;line-height:1.04;text-wrap:balance}
.h1{font-size:clamp(50px,7.4cqi,108px)}
.h2{font-size:clamp(38px,4.8cqi,64px);line-height:1.08}
.h2find{font-size:clamp(54px,9.8cqi,144px);line-height:1}
.hl{background:#F5DF7A;color:#1A1C22;padding:0 .08em;border-radius:3px}
.lead{color:var(--sub);font-size:clamp(18px,1.5cqi,21px);max-width:34em;text-wrap:pretty}
.rule{display:flex;align-items:center;gap:12px;color:var(--sub);font-size:16px;white-space:nowrap}
.rule div{flex:1;height:1px;background:var(--line)}
.sec{padding-block:clamp(64px,7cqi,100px);scroll-margin-top:8px}
.stack{display:flex;flex-direction:column;gap:20px;min-width:0}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,6cqi,96px);align-items:center;margin-top:36px}

.top{display:flex;align-items:center;flex-wrap:wrap;gap:4px 28px;min-height:88px}
.kl a.brand{display:flex;align-items:center;min-height:44px;margin-right:auto;font-family:Newsreader,Georgia,serif;font-size:30px;letter-spacing:-.015em;color:var(--ink);text-decoration:none}
.nav{display:flex;gap:4px}
.kl .nav a{display:flex;align-items:center;min-height:44px;padding:0 12px;color:var(--ink);font-size:16px;font-weight:500;text-decoration:none}
.kl .nav a:hover{text-decoration:underline}
.seg{display:flex;padding:3px;border-radius:10px;background:var(--behind)}
/* Real links between / and /de/, styled exactly like the canvas's segmented buttons. */
.kl .seg a{display:flex;align-items:center;justify-content:center;min-width:48px;height:44px;padding:0 10px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:inherit;font-size:15px;font-weight:600;text-decoration:none}
.kl .seg a[aria-current=page]{background:var(--surface);box-shadow:0 1px 3px rgba(26,28,34,.15)}

.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center;padding-block:24px 64px}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.small{font-size:15px;color:var(--sub)}
.kl .store{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:0 24px;border-radius:10px;background:var(--ink);color:var(--canvas);font-size:18px;font-weight:600;text-decoration:none}
.kl .store.soon{background:transparent;color:var(--ink);border:1px dashed var(--muted)}
.fan{--k:1;--ks:1;position:relative;height:760px}
.fan .phone{--s:.8}
.fan .sheet{position:absolute;left:50%;top:50%;width:270px;height:370px;margin:-185px 0 0 -135px;transform:translate(calc(var(--x)*var(--k)),calc(var(--y)*var(--k))) rotate(var(--r)) scale(var(--ks))}
.fan .phone{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.sheet{display:flex;flex-direction:column;gap:9px;padding:30px 26px;background:#FFFFFF;border-radius:2px;box-shadow:var(--sh)}
.bar{height:4px;background:#DAD7CE;border-radius:1px}
.bar.head{height:10px;background:#33343A;margin-bottom:12px}
.bar.hit{height:9px;background:#F5DF7A}

.phone{--s:.74;flex:none;box-sizing:content-box!important;width:calc(390px*var(--s));height:calc(844px*var(--s));padding:9px;border-radius:48px;background:#1A1C22;box-shadow:var(--sh)}
.screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:39px;background:var(--canvas)}
/* Screenshot swap: drop an <img> straight into .screen and delete the .scr placeholder. */
.screen>img{display:block;width:100%;height:100%;object-fit:cover}
.scr{position:absolute;left:0;top:0;width:390px;height:844px;transform:scale(var(--s));transform-origin:0 0;background:var(--canvas);color:var(--ink);font-size:15px;line-height:1.3}
.mbox{display:flex;align-items:center;gap:10px;height:48px;padding:0 16px;background:var(--surface);border:1px solid var(--line);border-radius:10px;color:var(--sub);font-size:16px}
.mchip{flex-shrink:0;display:flex;align-items:center;gap:7px;height:44px;padding:0 16px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:15px;font-weight:600}
.mchip.on{background:var(--ink);border-color:var(--ink);color:var(--canvas)}
.mchip span:last-child{font-weight:400}

.scanfig .phone{--s:.72}
.scanfig{position:relative;display:flex;min-height:640px;align-items:center}
.scanfig .out{position:absolute;right:0;top:50%;width:min(46%,290px);aspect-ratio:210/297;margin-top:-140px;padding:28px 24px}

.searchrow{display:flex;flex-direction:column;gap:12px;margin-top:clamp(36px,5cqi,64px)}
.searchrow label{font-size:16px;color:var(--sub)}
.searchbox{display:flex;align-items:center;gap:14px;height:68px;padding:0 20px;background:var(--surface);border:1.5px solid var(--ink);border-radius:10px;color:var(--sub)}
.searchbox input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--ink);font:inherit;font-size:clamp(20px,2cqi,26px);outline:none}
.searchbox:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.tries{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.try{height:44px;padding:0 16px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.try[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--canvas)}
.desk{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,5cqi,72px);align-items:stretch;margin-top:40px}
.desk .phone{--s:.76}
.pages{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:20px;padding-block:12px}
.page{min-height:440px;padding:32px 26px;background:#FFFFFF;border-radius:2px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:14px;font-size:16px;line-height:1.45}
.page .ph{font-size:24px;font-weight:600;padding-bottom:12px;border-bottom:1px solid #1A1C22}
.page .pl{margin:0}
.hit{background:#F5DF7A;color:#1A1C22;border-radius:3px;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 2px}
.res{display:flex;gap:14px;padding:14px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.thumb{flex-shrink:0;width:56px;height:74px;padding:8px 7px;display:flex;flex-direction:column;gap:3px;background:#FFFFFF;box-shadow:0 1px 2px rgba(0,0,0,.2),0 4px 10px rgba(0,0,0,.06)}
.spot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,5cqi,72px);align-items:center;margin-top:clamp(40px,5cqi,72px);padding-top:clamp(32px,4cqi,48px);border-top:1px solid var(--line)}
.h3{font-size:22px;font-weight:600;line-height:1.25}

.pts{display:flex;flex-direction:column;gap:18px;margin-top:8px}
.pt{display:flex;gap:14px;font-size:17px}
.pt strong{display:block;font-weight:600}
.pt span.d{display:block;color:var(--sub);font-size:16px}
.ico{flex-shrink:0;width:34px;height:34px;border-radius:6px;background:var(--behind);color:var(--ink);display:flex;align-items:center;justify-content:center}

.card{border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.row{padding:14px 16px;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.lab{color:var(--sub);font-size:15px}
.val{font-size:17px;font-weight:600}
.tagb{display:inline-flex;align-items:center;height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--ink);background:var(--ink);color:var(--canvas);font-size:15px;font-weight:600}
.tagb.off{background:transparent;color:var(--ink);border:1px dashed var(--muted)}
.orgfig{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.orgfig .hist{margin-top:44px}
.hrow{display:flex;flex-direction:column;gap:1px;padding:11px 16px;border-bottom:1px solid var(--line);font-size:16px}
.hrow:last-child{border-bottom:0}
.hrow strong{font-weight:500}
.hrow span{color:var(--sub);font-size:14px}

.sharefig{position:relative;padding:28px 0 28px 36px}
.sharefig .under{position:absolute;left:0;top:0;width:58%;height:90%;transform:rotate(-4deg)}
.sharecard{position:relative;display:flex;flex-direction:column;gap:18px;padding:22px;max-width:480px;border:1px solid var(--line);border-radius:8px;background:var(--surface);box-shadow:var(--sh-s)}
.mseg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:3px;border-radius:10px;background:var(--behind)}
.mseg div{display:flex;align-items:center;justify-content:center;height:44px;border-radius:10px;font-size:15px;font-weight:600}
.mseg div.on{background:var(--surface);box-shadow:0 1px 3px rgba(26,28,34,.15)}
.opt{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:6px 16px;border-bottom:1px solid var(--line)}
.opt:last-child{border-bottom:0}
.box{flex-shrink:0;width:22px;height:22px;border-radius:6px;border:1px solid var(--muted);display:flex;align-items:center;justify-content:center;color:var(--canvas)}
.box.on{background:var(--ink);border-color:var(--ink)}
.mbtn{display:flex;align-items:center;justify-content:center;gap:10px;height:60px;border-radius:10px;background:var(--ink);color:var(--canvas);font-size:18px;font-weight:600}

.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch;margin-top:40px}
.plan{display:flex;flex-direction:column;gap:18px;padding:clamp(24px,3cqi,40px);border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.plan.slip{border:0;border-radius:4px;background:var(--slip);box-shadow:var(--sh)}
.plan h3{font-size:36px}
.price{font-family:Newsreader,Georgia,serif;font-size:clamp(48px,5cqi,68px);line-height:1;letter-spacing:-.015em}
.meter{display:flex;gap:5px;min-height:68px;align-items:center}
.meter div{width:18px;height:24px;border-radius:2px;background:var(--ink)}
.tear{height:0;border-top:1.5px dashed #C9C6BC;margin-inline:calc(clamp(24px,3cqi,40px)*-1)}
.plan.free .tear{border-top:1px solid var(--line)}
.feat{display:flex;flex-direction:column;gap:12px}
.feat li{display:flex;gap:10px;font-size:17px}
.feat svg{flex-shrink:0;margin-top:4px}
.feat strong{display:block;font-weight:600}
.feat span.d{display:block;color:var(--sub);font-size:16px}
.feat span.d:empty{display:none}
.plan .store{margin-top:auto}

.privfig{display:flex;justify-content:center;padding-block:12px}
.locksheet{position:relative;width:min(100%,300px);aspect-ratio:210/270}
.locksheet .b{position:absolute;inset:12px -12px -12px 12px;background:var(--behind);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.locksheet .f{position:absolute;inset:0;background:#FFFFFF;box-shadow:var(--sh);display:flex;align-items:center;justify-content:center}
.lockb{width:84px;height:84px;border-radius:12px;background:#1A1C22;color:#FBFAF6;display:flex;align-items:center;justify-content:center}
.ptgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:8px}
.qas{margin-top:20px;max-width:880px}
.qa{border-bottom:1px solid var(--line)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding-block:10px;font-size:19px;font-weight:600;cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa svg{flex-shrink:0;transition:transform .15s}
.qa[open] svg{transform:rotate(45deg)}
.qa p{padding-bottom:20px;max-width:40em;color:var(--sub)}
.foot{border-top:1px solid var(--line);padding-block:32px 40px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;font-size:15px;color:var(--sub)}
.foot nav{display:flex;flex-wrap:wrap;gap:0 20px;margin-right:auto}
.foot nav a{display:flex;align-items:center;min-height:44px;font-weight:500}
.foot .note{flex-basis:100%}

@container kl (max-width:1040px){
  .desk{grid-template-columns:minmax(0,1fr)}
  .desk .phone{justify-self:center}
}
@container kl (max-width:880px){
  .hero,.split,.spot{grid-template-columns:minmax(0,1fr)}
  .fan{--k:.62;--ks:.8;height:640px}
  .fan .phone{--s:.7}
  .split.figfirst > .fig{order:2}
  .sharefig{padding-left:20px}
}
@container kl (max-width:640px){
  .kl .nav{order:3;width:100%;margin-inline:-12px}
  .plans,.ptgrid,.orgfig{grid-template-columns:minmax(0,1fr)}
  .orgfig .hist{margin-top:0}
  .kl .store{width:100%}
  .scanfig{min-height:560px}
  .scanfig .phone{--s:.62}
  .scanfig .out{width:172px;margin-top:-90px;padding:18px 16px;gap:6px}
  .pages{grid-template-columns:minmax(0,1fr)}
  .page{min-height:0}
  .desk .phone{--s:.7}
  .sharefig{padding:16px 0}
  .sharefig .under{display:none}
}
@media (prefers-reduced-motion:reduce){
  .qa svg{transition:none}
}

/* Legal pages (/privacy, /terms). Same tokens as the landing page;
   Newsreader stays on the h1 only. */
.prose{display:block;max-width:760px;padding-block:32px 72px;font-size:17px}
.prose-top{display:flex;align-items:center;flex-wrap:wrap;gap:4px 20px;min-height:88px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.prose-top span{color:var(--sub);font-size:16px}
.prose h1{margin:8px 0 0;font-size:clamp(38px,5cqi,56px)}
.prose .updated{margin-top:8px;color:var(--sub);font-size:15px}
.prose h2{margin:40px 0 0;font-size:24px;font-weight:600;line-height:1.25}
.prose h3{margin:28px 0 0;font-size:19px;font-weight:600;line-height:1.3}
.prose p{margin-top:12px;text-wrap:pretty}
.prose ul{margin-top:12px;display:flex;flex-direction:column;gap:8px;padding-left:22px;list-style:disc}
.prose li{padding-left:2px}
.prose table{width:100%;margin-top:16px;border-collapse:collapse;font-size:16px}
.prose th,.prose td{padding:10px 12px;border:1px solid var(--line);text-align:left;vertical-align:top}
.prose th{background:var(--surface);font-weight:600}
.kl .prose .back{display:inline-flex;align-items:center;min-height:44px;margin-top:48px;font-weight:500}