:root{
  --kalk-canvas: oklch(0.968 0.008 84);
  --kalk-surface: oklch(0.992 0.004 84);
  --kalk-surface-2: oklch(0.955 0.010 82);
  --kalk-ink: oklch(0.245 0.018 62);
  --kalk-ink-soft: oklch(0.505 0.016 66);
  --kalk-ink-faint: oklch(0.635 0.012 70);
  --kalk-hair: oklch(0.905 0.010 80);
  --kalk-hair-strong: oklch(0.855 0.014 78);
  --kalk-accent: oklch(0.605 0.115 168);
  --kalk-accent-deep: oklch(0.470 0.095 168);
  --kalk-accent-wash: oklch(0.945 0.030 168);
  --kalk-focus: oklch(0.605 0.115 168 / 0.35);
  --kalk-ease: cubic-bezier(0.23,1,0.32,1);
  --kalk-shadow: 0 1px 2px oklch(0.30 0.02 62 / 0.04), 0 12px 32px -18px oklch(0.30 0.02 62 / 0.22);
  --kalk-radius: 20px;
}
.kalk-page{
  font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  background:var(--kalk-canvas);
  color:var(--kalk-ink);
  min-height:100dvh;
  padding:clamp(16px,4vw,48px) clamp(14px,4vw,32px);
  background-image:radial-gradient(120% 80% at 12% -8%, oklch(0.985 0.02 148 / 0.55), transparent 60%);
  background-repeat:no-repeat;
}
.kalk-page *{box-sizing:border-box}
.kalk-page .wrap{max-width:1120px;margin:0 auto}
.kalk-page .masthead{margin-bottom:clamp(20px,3.5vw,36px);max-width:none}
.kalk-page .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--kalk-ink-soft);margin-bottom:14px}
.kalk-page .eyebrow .dot,.kalk-page .notes .badge .dot{width:7px;height:7px;border-radius:50%;background:var(--kalk-accent);box-shadow:0 0 0 4px var(--kalk-accent-wash);display:inline-block}
.kalk-page h1{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:700;font-size:clamp(30px,5.2vw,52px);line-height:1.02;letter-spacing:0;max-width:16ch;margin:0}
.kalk-page h1 em{font-style:normal;color:var(--kalk-accent-deep);white-space:nowrap}
.kalk-page .lede{margin-top:14px;color:var(--kalk-ink-soft);font-size:clamp(15px,1.6vw,17px);max-width:56ch}
.kalk-page .grid{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
@media(min-width:900px){.kalk-page .grid{grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);gap:22px}}
.kalk-page .panel{background:var(--kalk-surface);border:1px solid var(--kalk-hair);border-radius:var(--kalk-radius);box-shadow:var(--kalk-shadow)}
.kalk-page .panel-pad{padding:clamp(18px,2.6vw,28px)}
.kalk-page .seg{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--kalk-surface-2);border:1px solid var(--kalk-hair);border-radius:14px;padding:4px}
.kalk-page button{font:inherit}
.kalk-page .seg button{font-weight:600;font-size:13px;color:var(--kalk-ink-soft);background:transparent;border:0;border-radius:10px;padding:10px 6px;cursor:pointer;transition:color .18s var(--kalk-ease),background .18s var(--kalk-ease),transform .12s var(--kalk-ease)}
.kalk-page .seg button:hover{color:var(--kalk-ink)}
.kalk-page .seg button:active{transform:scale(0.97)}
.kalk-page .seg button[aria-pressed="true"]{background:var(--kalk-surface);color:var(--kalk-ink);box-shadow:0 1px 2px oklch(0.30 0.02 62/.08),0 2px 8px -4px oklch(0.30 0.02 62/.18)}
.kalk-page .dir{display:flex;align-items:center;gap:10px;margin:22px 0 6px}
.kalk-page .dir-label{font-size:13px;font-weight:600;color:var(--kalk-ink-soft)}
.kalk-page .switch{display:inline-flex;background:var(--kalk-surface-2);border:1px solid var(--kalk-hair);border-radius:11px;padding:3px}
.kalk-page .switch button{font-weight:600;font-size:12.5px;color:var(--kalk-ink-soft);background:transparent;border:0;border-radius:8px;padding:7px 13px;cursor:pointer;transition:all .18s var(--kalk-ease)}
.kalk-page .switch button[aria-pressed="true"]{background:var(--kalk-ink);color:var(--kalk-surface)}
.kalk-page .field{margin-top:14px}
.kalk-page .field > label{display:block;font-size:13px;font-weight:600;color:var(--kalk-ink-soft);margin-bottom:7px}
.kalk-page .amount{position:relative;display:flex;align-items:center;background:var(--kalk-surface);border:1.5px solid var(--kalk-hair-strong);border-radius:14px;transition:border-color .18s var(--kalk-ease),box-shadow .18s var(--kalk-ease)}
.kalk-page .amount:focus-within{border-color:var(--kalk-accent);box-shadow:0 0 0 4px var(--kalk-focus)}
.kalk-page .amount input{flex:1;min-width:0;font-family:"JetBrains Mono",monospace;font-weight:700;font-size:clamp(26px,4vw,34px);color:var(--kalk-ink);background:transparent;border:0;outline:0;padding:16px 6px 16px 18px}
.kalk-page .amount input::-webkit-outer-spin-button,.kalk-page .amount input::-webkit-inner-spin-button{-webkit-appearance:none}
.kalk-page .amount input[type=number]{-moz-appearance:textfield}
.kalk-page .amount .cur{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:18px;color:var(--kalk-ink-faint);padding-right:18px}
.kalk-page .hint{margin-top:8px;font-size:12.5px;color:var(--kalk-ink-faint)}
.kalk-page .opts{margin-top:22px;padding-top:20px;border-top:1px solid var(--kalk-hair);display:flex;flex-direction:column;gap:2px}
.kalk-page .opts-title{font-size:11.5px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--kalk-ink-faint);margin-bottom:8px}
.kalk-page .opt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--kalk-hair)}
.kalk-page .opt:last-child{border-bottom:0}
.kalk-page .opt .txt{font-size:14px;font-weight:500}
.kalk-page .opt .sub{display:block;font-size:12px;font-weight:400;color:var(--kalk-ink-faint);margin-top:1px}
.kalk-page .toggle{position:relative;flex:0 0 auto;width:42px;height:24px;border-radius:20px;background:var(--kalk-hair-strong);border:0;cursor:pointer;transition:background .2s var(--kalk-ease)}
.kalk-page .toggle::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--kalk-surface);box-shadow:0 1px 2px oklch(0.3 0.02 62/.3);transition:transform .2s var(--kalk-ease)}
.kalk-page .toggle[aria-pressed="true"]{background:var(--kalk-accent)}
.kalk-page .toggle[aria-pressed="true"]::after{transform:translateX(18px)}
.kalk-page .opt select,.kalk-page .opt input[type=number]{font:inherit;font-size:13px;font-weight:600;color:var(--kalk-ink);background:var(--kalk-surface-2);border:1px solid var(--kalk-hair-strong);border-radius:9px;padding:7px 10px}
.kalk-page .opt.hidden{display:none}
.kalk-page .result{position:sticky;top:24px;background:var(--kalk-ink);color:var(--kalk-surface);border-color:transparent;overflow:hidden}
@media(max-width:899px){.kalk-page .result{position:static}}
.kalk-page .result .panel-pad{padding:clamp(22px,3vw,32px)}
.kalk-page .result-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.kalk-page .result-head .k{font-size:13px;font-weight:600;letter-spacing:0.03em;color:oklch(0.75 0.03 168)}
.kalk-page .result-head .per{font-size:12px;color:oklch(0.68 0.01 84)}
.kalk-page .big{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:clamp(38px,7vw,60px);line-height:1;letter-spacing:0;margin-top:6px;color:oklch(0.985 0.004 84);font-variant-numeric:tabular-nums;transition:color .25s var(--kalk-ease)}
.kalk-page .big.flash{color:var(--kalk-accent)}
.kalk-page .big .zl{font-size:0.42em;color:oklch(0.72 0.03 168);margin-left:6px}
.kalk-page .out-sub{margin-top:10px;font-size:13.5px;color:oklch(0.74 0.01 84)}
.kalk-page .out-sub b{font-family:"JetBrains Mono",monospace;font-weight:700;color:oklch(0.86 0.03 168)}
.kalk-page .bar{display:flex;height:12px;border-radius:8px;overflow:hidden;margin-top:22px;background:oklch(0.34 0.02 62)}
.kalk-page .bar span{display:block;height:100%;transition:width .35s var(--kalk-ease)}
.kalk-page .bar .s-net,.kalk-page .legend i.s-net{background:var(--kalk-accent)}
.kalk-page .bar .s-zus,.kalk-page .legend i.s-zus{background:oklch(0.62 0.09 46)}
.kalk-page .bar .s-health,.kalk-page .legend i.s-health{background:oklch(0.68 0.075 52)}
.kalk-page .bar .s-tax,.kalk-page .legend i.s-tax{background:oklch(0.55 0.055 40)}
.kalk-page .legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px}
.kalk-page .legend div{display:flex;align-items:center;gap:7px;font-size:12px;color:oklch(0.80 0.01 84)}
.kalk-page .legend i{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.kalk-page .flow{margin-top:24px;border-top:1px solid oklch(0.36 0.02 62);padding-top:6px}
.kalk-page .row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid oklch(0.33 0.02 62)}
.kalk-page .row:last-child{border-bottom:0}
.kalk-page .row .lab{display:flex;align-items:center;gap:10px;font-size:14px;color:oklch(0.86 0.01 84)}
.kalk-page .row .lab .mk{width:8px;height:8px;border-radius:3px;flex:0 0 auto}
.kalk-page .mk-add{background:var(--kalk-accent)}
.kalk-page .mk-zus{background:oklch(0.62 0.09 46)}
.kalk-page .mk-health{background:oklch(0.68 0.075 52)}
.kalk-page .mk-tax{background:oklch(0.55 0.055 40)}
.kalk-page .row .val{font-family:"JetBrains Mono",monospace;font-weight:500;font-size:15px;font-variant-numeric:tabular-nums;color:oklch(0.90 0.008 84)}
.kalk-page .row .val.minus{color:oklch(0.80 0.075 52)}
.kalk-page .row.total{padding-top:15px;margin-top:3px;border-top:1px solid oklch(0.42 0.02 62);border-bottom:0}
.kalk-page .row.total .lab{font-weight:700;color:var(--kalk-surface);font-size:15px}
.kalk-page .row.total .val{font-weight:700;font-size:19px;color:var(--kalk-accent)}
.kalk-page .employer{margin-top:18px;padding:14px 16px;background:oklch(0.30 0.02 62);border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.kalk-page .employer .lab{font-size:12.5px;color:oklch(0.78 0.01 84)}
.kalk-page .employer .val{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:15px;color:oklch(0.90 0.008 84)}
.kalk-page .hidden,.kalk-page .employer.hidden{display:none}
.kalk-page .out-annual{margin-top:14px;padding-top:14px;border-top:1px solid oklch(0.36 0.02 62);display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.kalk-page .out-annual .k{font-size:13px;color:oklch(0.72 0.01 84)}
.kalk-page .out-annual .v{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:16px;color:oklch(0.90 0.008 84)}
.kalk-page .warn{margin-top:14px;font-size:12.5px;color:oklch(0.80 0.09 60);display:flex;gap:8px;align-items:flex-start}
.kalk-page .warn.hidden{display:none}
.kalk-page .warn .ico{flex:0 0 auto;font-weight:700}
.kalk-page .section{margin-top:clamp(30px,4.5vw,52px)}
.kalk-page .section > h2{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:700;font-size:clamp(21px,3vw,30px);letter-spacing:0;line-height:1.1;margin-bottom:16px}
.kalk-page .section > p.intro{color:var(--kalk-ink-soft);font-size:15px;max-width:62ch;margin-bottom:18px;margin-top:-6px}
.kalk-page .cmp{width:100%;border-collapse:collapse;background:var(--kalk-surface);border:1px solid var(--kalk-hair);border-radius:16px;overflow:hidden;box-shadow:var(--kalk-shadow)}
.kalk-page .cmp th,.kalk-page .cmp td{text-align:left;padding:15px 20px;font-size:14.5px}
.kalk-page .cmp thead th{font-size:12px;font-weight:600;letter-spacing:0.03em;text-transform:uppercase;color:var(--kalk-ink-faint);background:var(--kalk-surface-2);border-bottom:1px solid var(--kalk-hair)}
.kalk-page .cmp tbody tr{border-bottom:1px solid var(--kalk-hair)}
.kalk-page .cmp tbody tr:last-child{border-bottom:0}
.kalk-page .cmp td.name{font-weight:500}
.kalk-page .cmp td.net{font-family:"JetBrains Mono",monospace;font-weight:700;color:var(--kalk-accent-deep)}
.kalk-page .cmp td.pct{color:var(--kalk-ink-faint);font-family:"JetBrains Mono",monospace;font-size:13px}
@media(max-width:560px){.kalk-page .cmp th:nth-child(3),.kalk-page .cmp td:nth-child(3){display:none}}
.kalk-page .faq{display:flex;flex-direction:column;background:var(--kalk-surface);border:1px solid var(--kalk-hair);border-radius:16px;box-shadow:var(--kalk-shadow);overflow:hidden}
.kalk-page .faq details{border-bottom:1px solid var(--kalk-hair)}
.kalk-page .faq details:last-child{border-bottom:0}
.kalk-page .faq summary{list-style:none;cursor:pointer;padding:16px 20px;font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:background .15s var(--kalk-ease)}
.kalk-page .faq summary::-webkit-details-marker{display:none}
.kalk-page .faq summary:hover{background:var(--kalk-surface-2)}
.kalk-page .faq summary::after{content:"+";font-family:"JetBrains Mono",monospace;font-size:20px;color:var(--kalk-ink-faint);font-weight:500;transition:transform .2s var(--kalk-ease)}
.kalk-page .faq details[open] summary::after{transform:rotate(45deg)}
.kalk-page .faq .ans{padding:0 20px 18px;color:var(--kalk-ink-soft);font-size:14.5px;line-height:1.6}
.kalk-page .faq .ans b{color:var(--kalk-ink);font-weight:600}
.kalk-page .pills{display:flex;flex-wrap:wrap;gap:9px}
.kalk-page .pills a{font-family:"JetBrains Mono",monospace;font-size:13.5px;font-weight:500;color:var(--kalk-ink);background:var(--kalk-surface);border:1px solid var(--kalk-hair-strong);border-radius:11px;padding:9px 13px;text-decoration:none;transition:border-color .15s var(--kalk-ease),background .15s var(--kalk-ease),transform .12s var(--kalk-ease)}
.kalk-page .pills a:hover{border-color:var(--kalk-accent);background:var(--kalk-accent-wash)}
.kalk-page .pills a[aria-current="true"]{background:var(--kalk-ink);color:var(--kalk-surface);border-color:var(--kalk-ink)}
.kalk-page .notes{margin-top:26px;max-width:78ch}
.kalk-page .notes .badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--kalk-accent-deep);background:var(--kalk-accent-wash);border-radius:99px;padding:6px 13px;margin-bottom:14px}
.kalk-page .notes p{font-size:13px;color:var(--kalk-ink-soft);margin-bottom:8px}
.kalk-page .notes a{color:var(--kalk-accent-deep);text-decoration:underline;text-underline-offset:2px}
@media(prefers-reduced-motion:reduce){.kalk-page *{transition:none!important}}
