:root { --ink:#193833; --muted:#687972; --teal:#205d50; --line:#dde5df; --paper:#f7f9f6; }
* { box-sizing:border-box; }
body { margin:0; font-family:Inter,"Segoe UI",Arial,sans-serif; color:var(--ink); background:var(--paper); font-size:15px; line-height:1.5; }
a { color:inherit; } button,input,select { font:inherit; }
.site-header { background:#fff; border-bottom:1px solid var(--line); }
.header-inner { max-width:1220px; margin:auto; padding:7px 30px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.brand { display:flex; align-items:center; gap:10px; font-size:21px; font-weight:700; text-decoration:none; letter-spacing:-.7px; }
.header-brand-group { display:flex; align-items:center; gap:14px; min-width:0; }
.company-logo-link { min-width:0; flex-shrink:0; }
.company-logo-main { display:block; width:64px; height:auto; }
.header-contact { display:flex; flex-direction:column; gap:1px; font-size:12px; line-height:1.2; color:var(--muted); }
.header-contact strong { color:var(--ink); font-size:13px; font-weight:600; }
.header-contact a { text-decoration:none; }
.header-contact a:hover { color:var(--teal); }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:8px; background:var(--ink); color:#d8edb9; font-size:16px; }
.brand-iq { color:#53816b; } .status-dot { display:none; }
.page { max-width:1220px; margin:auto; padding:12px 30px 65px; min-height:calc(100vh - 132px); }
h1 { margin:0 0 6px; font-size:32px; font-weight:650; letter-spacing:-1px; line-height:1.2; }
.intro { margin-bottom:14px; text-align:center; }
.intro p { margin:0; color:var(--muted); } .trust-line { display:inline-flex; justify-content:center; margin-top:8px!important; padding:6px 11px; border:1px solid #e4ebe6; border-radius:999px; background:#fff; font-size:12px; color:#557068!important; }
.product-logo { display:block; width:168px; max-width:70vw; height:auto; margin:-6px auto -18px; mix-blend-mode:multiply; opacity:.92; }
.card { background:white; border:1px solid var(--line); border-radius:14px; }
.input-card { padding:25px; }
.form-fields { display:grid; grid-template-columns:1.1fr 1fr .9fr 1.15fr 1.1fr; gap:16px; align-items:start; }
.field { min-width:0; } .field label { display:block; font-size:13px; font-weight:600; margin-bottom:8px; }
input:not([type=checkbox]):not([type=radio]),select { min-width:0; width:100%; min-height:48px; padding:11px 12px; border:1px solid #cbd7ce; border-radius:7px; background:white; color:var(--ink); font-size:16px; }
input:focus,select:focus { outline:none; border-color:#3c8067; box-shadow:0 0 0 3px #e5f0e8; }
.money-input { position:relative; } .money-input>span { position:absolute; top:11px; left:13px; color:#748278; } .money-input input[type=number] { padding-left:30px; }
.tax-code { text-transform:uppercase; } .field-help { margin:13px 0 21px; font-size:12px; color:var(--muted); } .field-help strong { font-weight:600; }
.form-actions { display:flex; justify-content:space-between; align-items:center; gap:22px; }
.check-options { display:flex; align-items:center; flex-wrap:wrap; gap:10px 22px; }
.check-field { display:flex; align-items:center; gap:10px; min-height:44px; } .check-field input { width:19px; height:19px; accent-color:var(--teal); margin:0; flex-shrink:0; } .check-field label { cursor:pointer; font-size:13px; }
.calculate-button { min-height:48px; display:flex; justify-content:space-between; align-items:center; gap:35px; padding:12px 20px; border:none; border-radius:8px; color:white; background:var(--teal); cursor:pointer; font-weight:600; font-size:14px; }
.calculate-button:hover { background:#174638; } .calculate-button span { font-size:19px; }
.results-column { margin-top:30px; scroll-margin-top:20px; }
.results-heading { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:13px; }
h2 { font-size:19px; font-weight:600; letter-spacing:-.4px; margin:0; } .results-heading>span { color:var(--muted); font-size:12px; }
#results-title:focus { outline:none; }
.summary-grid { display:grid; grid-template-columns:1.2fr repeat(3,1fr); background:white; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.summary-item { padding:23px; min-width:0; border-left:1px solid var(--line); } .summary-item:first-child { border-left:0; } .summary-item>span { display:block; font-size:12px; color:var(--muted); margin-bottom:6px; } .summary-item strong { display:block; font-size:25px; font-weight:600; letter-spacing:-.8px; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.net-summary { background:#eaf2e6; } .net-summary strong { color:#205d42; }
.full-details { margin-top:15px; } summary { cursor:pointer; font-size:13px; font-weight:600; padding:12px 0; }
.breakdown-card { padding:22px 25px; margin-top:5px; }
.breakdown-heading { display:flex; justify-content:space-between; gap:12px; align-items:baseline; } .breakdown-heading h3 { font-size:16px; margin:0 0 12px; } .breakdown-heading>span { color:var(--muted); font-size:12px; }
.breakdown-list { margin:0; } .breakdown-list>div { display:flex; justify-content:space-between; gap:20px; padding:9px 0; font-size:14px; } .breakdown-list dt { color:var(--muted); } .breakdown-list dd { margin:0; font-weight:600; text-align:right; font-variant-numeric:tabular-nums; flex-shrink:0; }
.total-row { border-top:1px solid var(--line); margin-top:6px; } .total-row dt,.total-row dd { color:var(--teal); font-weight:650; }
.employer-section,.ni-section { margin-top:20px; padding-top:17px; border-top:1px solid var(--line); } .employer-section h4,.ni-section h4 { font-size:14px; margin:0 0 8px; } .employer-section p,.ni-section p { font-size:12px; color:var(--muted); margin:9px 0 0; }
.rates-details { border-top:1px solid var(--line); margin-top:20px; } .rates-details .breakdown-list>div { font-size:12px; }
.print-button { margin-top:15px; min-height:44px; background:none; border:0; color:var(--teal); padding:0; cursor:pointer; font-size:13px; }
.estimate-note { color:var(--muted); font-size:12px; margin:14px 0; }
.site-footer { border-top:1px solid var(--line); color:var(--muted); font-size:11px; } .footer-inner { max-width:1220px; margin:auto; padding:20px 30px; display:flex; justify-content:space-between; align-items:center; gap:18px; } .footer-company { display:flex; flex-direction:column; gap:3px; } .footer-company strong { color:var(--ink); font-weight:600; } .footer-links { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:12px 18px; } .site-footer a { text-decoration:none; } .site-footer a:hover { color:var(--teal); } .footer-divider { margin:0 8px; }
.field-error { display:block; color:#a13e35; font-size:12px; margin-top:5px; } .field-error:empty { display:none; } .input-validation-error { border-color:#a13e35!important; }
.validation-summary { color:#a13e35; font-size:13px; } .validation-summary-valid { display:none; } .validation-summary ul { margin:0 0 20px; padding-left:18px; }
.skip-link { position:absolute; left:15px; top:-60px; background:white; padding:10px; z-index:10; } .skip-link:focus { top:10px; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid #639a81; outline-offset:4px; }
.privacy-page { padding:30px; max-width:760px; margin:auto; } .privacy-page p { color:var(--muted); } .privacy-page h2 { margin-top:25px; } .eyebrow { color:var(--muted); font-size:11px; letter-spacing:1px; } .back-link { display:inline-block; margin-top:20px; }
@media(min-width:900px) { .breakdown-card { display:grid; grid-template-columns:1fr 1fr; column-gap:50px; } .breakdown-heading { grid-column:1/-1; } .ni-section { grid-column:1; grid-row:3; } .employer-section { grid-column:2; grid-row:2; margin:0; padding:0 0 0 25px; border-top:0; border-left:1px solid var(--line); } .rates-details { grid-column:1/-1; } .print-button { justify-self:start; } }
@media(max-width:1000px) { .form-fields { grid-template-columns:repeat(3,minmax(0,1fr)); } .summary-item { padding:20px 16px; } .summary-item strong { font-size:23px; } }
@media(max-width:640px) { .header-inner { padding:7px 16px; } .header-brand-group { gap:9px; } .company-logo-main { width:54px; } .header-contact { font-size:11px; } .header-contact strong { font-size:12px; } .page { padding:10px 16px 40px; } h1 { font-size:27px; } .intro { margin-bottom:16px; } .intro p { font-size:14px; } .product-logo { width:142px; margin-top:-5px; margin-bottom:-14px; } .trust-line { display:flex; width:fit-content; max-width:100%; margin-left:auto!important; margin-right:auto!important; font-size:11px; } .input-card { padding:20px; } .form-fields { grid-template-columns:1fr; gap:16px; } .field label { font-size:14px; margin-bottom:6px; } input:not([type=checkbox]):not([type=radio]),select { min-height:50px; } .field-help { margin:16px 0 12px; } .form-actions { flex-direction:column; align-items:stretch; gap:14px; } .check-options { flex-direction:column; align-items:flex-start; gap:4px; } .check-field label { font-size:14px; } .calculate-button { width:100%; min-height:50px; font-size:15px; } .results-heading { align-items:start; flex-direction:column; gap:5px; } .summary-grid { grid-template-columns:1fr 1fr; } .summary-item { padding:18px; border-top:1px solid var(--line); border-left:0; } .net-summary { grid-column:1/-1; border-top:0; } .net-summary strong { font-size:32px; } .summary-item:nth-child(3) { border-left:1px solid var(--line); } .summary-item:last-child { grid-column:1/-1; } .breakdown-card { padding:18px; } .breakdown-list>div { font-size:13px; gap:12px; } .breakdown-heading { flex-wrap:wrap; margin-bottom:10px; } .breakdown-heading h3 { margin:0; } .footer-inner { padding:18px 16px; font-size:10px; align-items:flex-start; flex-direction:column; } .footer-links { justify-content:flex-start; gap:8px 14px; } .privacy-page { padding:22px; } }
@media print { body { background:white; } .site-header,.intro,.input-card,.privacy-note,.site-footer,.print-button,.skip-link { display:none; } .page { padding:0; } .results-column { margin:0; } .summary-grid { print-color-adjust:exact; } .full-details>summary { display:none; } .breakdown-card { border:0; padding:15px 0; } }

[hidden] { display: none !important; }
.mode-toggle { display: flex; position: relative; gap: 4px; width: fit-content; max-width: 100%; padding: 4px; margin: 0 0 22px; border: 1px solid #dce3e6; border-radius: 12px; background: #f3f6f7; }
.mode-toggle legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.mode-toggle input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mode-toggle label { padding: 12px 20px; cursor: pointer; border-radius: 8px; font-weight: 600; text-align: center; }
.mode-toggle input:checked + label { background: #163e49; color: white; }
.mode-toggle input:focus-visible + label { outline: 3px solid #228fa4; outline-offset: 2px; }
@media (max-width: 640px) { .mode-toggle { width: 100%; } .mode-toggle label { flex: 1; padding: 12px 8px; } }


.payslip-action { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:16px; }
.payslip-action button { min-height:44px; padding:10px 16px; border:1px solid var(--teal); border-radius:8px; color:var(--teal); background:white; font:inherit; font-size:13px; cursor:pointer; }
.payslip-action > span { color:var(--muted); font-size:11px; }
@media print { .payslip-action { display:none; } }