@font-face{
  font-family:"DM Sans";
  src:url("fonts/dm-sans-latin-wght.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:Manrope;
  src:url("fonts/manrope-latin-wght.woff2") format("woff2");
  font-weight:600 800;
  font-style:normal;
  font-display:swap;
}
:root{
  --ink:#17231f;
  --muted:#3d4a44;
  --paper:#f5f2e9;
  --card:#fffdf8;
  --line:#dedbd0;
  --green:#116548;
  --ring:#3f55c9;
  --shadow:0 16px 40px rgba(30,48,41,.08);
}
*{box-sizing:border-box}
html,body{overflow-x:clip;max-width:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"DM Sans",sans-serif;
}
body[data-theme="midnight"]{
  --ink:#f1f3ff;
  --muted:#aeb5d0;
  --paper:#080b16;
  --card:#12172a;
  --line:#29314d;
  --green:#9a6cff;
  --ring:#9ec0ff;
  background:radial-gradient(circle at 70% 0,#24174c 0,transparent 32%),var(--paper);
  color:var(--ink);
}
.public-paycheck-shell{
  min-width:0;
  max-width:1260px;
  margin:0 auto;
  padding:20px 16px 48px;
}
.public-paycheck-header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:22px;
}
.marketing-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
  min-width:0;
}
.marketing-brand-icon{width:42px;height:42px;border-radius:10px}
.marketing-brand-name{
  font:800 20px/1 Manrope,sans-serif;
  letter-spacing:-.03em;
}
.marketing-brand-name span{color:#3f55c9}
body[data-theme="midnight"] .marketing-brand-name span{color:#9ec0ff}
.public-paycheck-tools{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
.public-paycheck-tools button,
.public-paycheck-tools a{
  min-height:44px;
  padding:0 14px;
  border-radius:11px;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--ink);
  font:800 13px/1.2 "DM Sans",sans-serif;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}
.public-paycheck-title-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin:0 0 8px;
}
.public-paycheck-title-row h1{
  margin:0;
  font:800 clamp(26px,4vw,36px)/1.1 Manrope,sans-serif;
}
.public-paycheck-lead{
  margin:0 0 10px;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}
.public-paycheck-top-cta{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  margin:0 0 18px;
  color:#263b9c;
  font:800 14px/1.35 "DM Sans",sans-serif;
  text-decoration:underline;
}
body[data-theme="midnight"] .public-paycheck-top-cta{color:#9ec0ff}
.tax-year-badge{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  padding:9px 14px;
  border-radius:999px;
  background:#e8f7ef;
  color:#087353;
  font-size:13px;
  font-weight:800;
  border:1px solid #bce8cf;
}
body[data-theme="midnight"] .tax-year-badge{
  background:#12261f;
  color:#53f0d0;
  border-color:#1f4a3b;
}
.public-paycheck-cleared{
  margin:10px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}
.public-paycheck-cleared[hidden]{display:none}
.public-paycheck-footer{
  margin-top:28px;
  display:grid;
  gap:12px;
}
.public-paycheck-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 20px;
  border-radius:20px;
  border:1px solid var(--line);
  background:var(--card);
}
.public-paycheck-cta p{
  margin:0;
  font-size:14px;
  line-height:1.45;
}
.public-paycheck-cta a{
  min-height:44px;
  padding:0 16px;
  border-radius:11px;
  background:#3f55c9;
  color:#fff;
  font:800 14px/1 "DM Sans",sans-serif;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
body[data-theme="midnight"] .public-paycheck-cta a{
  background:#6d45d7;
  color:#fff;
}
.paycheck-view{width:100%;min-width:0}
.paycheck-results,
.paycheck-results *,
.pay-breakdown-row span,
.pay-breakdown-row strong,
#payTakeHome,
#payGrossLabel{
  min-width:0;
  overflow-wrap:anywhere;
}
body .paycheck-view .pay-field-grid label small,
body .paycheck-view .pay-help,
body .paycheck-view .paycheck-card-heading p,
body .paycheck-view .pay-mode-switch button,
body .paycheck-view .pay-breakdown-card header span,
body .paycheck-view .pay-annual-card header span{
  color:var(--muted);
  font-size:12px;
}
body .paycheck-view .pay-mode-switch button.active{
  color:#263b9c;
}
body[data-theme="midnight"] .paycheck-view .pay-mode-switch button.active{
  color:#f1f3ff;
}
.public-paycheck-shell input:focus,
.public-paycheck-shell select:focus{
  outline:none;
}
.public-paycheck-shell input:focus-visible,
.public-paycheck-shell select:focus-visible,
.public-paycheck-shell button:focus-visible,
.public-paycheck-shell a:focus-visible,
.public-paycheck-shell [type="checkbox"]:focus-visible,
.public-paycheck-shell .pay-field-grid input:focus-visible,
.public-paycheck-shell .pay-field-grid select:focus-visible{
  outline:2px solid var(--ring);
  outline-offset:2px;
}
@media(max-width:640px){
  .public-paycheck-shell{padding:16px 12px 40px}
  .public-paycheck-cta{flex-direction:column;align-items:stretch}
  .public-paycheck-cta a{width:100%}
}