/* 054 (Oct 2026): the Employee Cost Calculator page (33112), loaded after compiled-css/employee-cost-calculator-page.css */
/* 054 (Oct 2026): the redone tools' shared sections (How to Use, FAQ, More Tools, closing), as in the Hours sheet */
/* 024: 021 section styles (How to Use, FAQ) */
@keyframes tcFadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}@keyframes tcPop{0%{opacity:0;transform:scale(0.6)}70%{transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}@supports(animation-timeline: view()){.t-page .tc-reveal{animation:tcFadeUp linear both;animation-timeline:view();animation-range:entry 0% entry 100%}.t-page .tc-pop{animation:tcPop linear both;animation-timeline:view();animation-range:entry 20% entry 100%}}@media(prefers-reduced-motion: reduce){.t-page .tc-reveal,.t-page .tc-pop{animation:none}}.has-t-page .single-entry-content{margin:0;padding:0;max-width:none}.t-page{font-family:Inter,Arial,sans-serif;color:#1d2b3a;background:#fff;width:100%;overflow-x:clip;line-height:1.5}.t-page *,.t-page ::before,.t-page ::after{box-sizing:border-box}.t-page :focus:not(:focus-visible){outline:none}.t-page :focus-visible{outline:2px solid #2aa5d5;outline-offset:2px}.t-page .t-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}.t-page .t-h1{margin:0;font-family:"Work Sans",Arial,sans-serif;font-weight:700;font-size:clamp(32px,3.6vw,46px);line-height:1.1;letter-spacing:-0.01em;color:#1d2b3a}.t-page .t-h2{margin:0;font-family:"Work Sans",Arial,sans-serif;font-weight:700;font-size:clamp(26px,2.8vw,36px);line-height:1.2;letter-spacing:0;color:#1d2b3a}.t-page .t-h2.sm{font-size:clamp(24px,2.4vw,30px)}.t-page .t-lead{margin:0;font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:#4f5d6b;max-width:560px}.t-page .t-p{margin:0;font-size:17px;line-height:1.65;color:#4f5d6b}.t-page .t-p a,.t-page .t-faq a{color:#1f8fbf;font-weight:600;text-decoration:underline}.t-page .t-p a:hover,.t-page .t-faq a:hover{color:#2aa5d5}.t-page .t-sec{padding:clamp(56px,7vw,96px) 0}.t-page .t-sec.tint{background:#eaf6fb}.t-page .t-sec.gray{background:#f6fafc}.t-page .t-sec.flush{padding-top:0}.t-page .t-stack{display:flex;flex-direction:column;gap:32px}.t-page .t-head-c{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;max-width:760px;margin:0 auto}.t-page .t-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:0;border:0;background:none;color:#1f8fbf;font:600 16px/1.4 Inter,Arial,sans-serif;text-decoration:none;cursor:pointer}.t-page .t-link:hover{color:#2aa5d5;text-decoration:underline}.t-page .t-link svg{display:block;flex:none}.t-page .t-btns{display:flex;flex-wrap:wrap;gap:12px}.t-page .t-cta,.t-page .t-ghost,.t-page .t-ghost-w{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border-radius:12px;font-family:"Work Sans",Arial,sans-serif;font-weight:600;font-size:16px;line-height:1.2;text-decoration:none;cursor:pointer}.t-page .t-cta{background:#ff6500;color:#fff;border:0}.t-page .t-ghost{padding:0 22px;border:1.5px solid #2aa5d5;color:#1f8fbf;background:#fff}.t-page .t-ghost-w{padding:0 22px;border:1.5px solid rgba(255, 255, 255, 0.8);color:#fff;background:transparent}.t-page .t-cta svg,.t-page .t-ghost svg{display:block;flex:none}.t-page .tc-btn{transition:filter .18s ease,background-color .18s ease}.t-page .tc-btn:hover{filter:brightness(1.05)}.t-page .t-cta:hover,.t-page .t-cta:focus{color:#fff}.t-page .t-ghost:hover{background:#eaf6fb;color:#1f8fbf}.t-page .t-ghost-w:hover,.t-page .t-ghost-w:focus{background:rgba(255, 255, 255, 0.12);color:#fff}.t-page .t-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:20px}.t-page .t-step{display:flex;flex-direction:column;gap:8px;margin:0;padding:26px 22px;border-radius:18px;background:#fff;list-style:none}.t-page .t-num{width:44px;height:44px;border-radius:12px;background:#2aa5d5;color:#fff;font-family:"Work Sans",Arial,sans-serif;font-weight:700;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;margin-bottom:8px}.t-page .t-step-t{margin:0;font-family:"Work Sans",Arial,sans-serif;font-weight:600;font-size:18px;line-height:24px;color:#1d2b3a}.t-page .t-step-d{margin:0;font-size:15px;line-height:23px;color:#5d6b78}.t-page .t-faqwrap{display:flex;flex-wrap:wrap;gap:32px 64px;align-items:flex-start}.t-page .t-faq-head{flex:0 1 340px;min-width:0;display:flex;flex-direction:column;gap:16px}.t-page .t-faq-list{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;background:#fff;border:1px solid #dde9f0;border-radius:16px;overflow:hidden}.t-page .t-faq{margin:-1px 0 0;padding:0;background:#fff;border-top:1px solid #eef3f6}.t-page .t-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:16px 22px;transition:background-color .15s ease}.t-page .t-faq summary:hover{background:#f6fafc}.t-page .t-faq summary:focus{outline:none}.t-page .t-faq summary:focus-visible{outline:2px solid #2aa5d5;outline-offset:-2px}.t-page .t-faq summary::-webkit-details-marker{display:none}.t-page .t-faq summary::marker{content:""}.t-page .t-faq-q{margin:0;font-family:Inter,Arial,sans-serif;font-weight:600;font-size:16px;line-height:1.4;letter-spacing:0;color:#1d2b3a}.t-page .t-faq[open] .t-faq-q{color:#1f7fa8}.t-page .t-plus{display:flex;flex:none;color:#2aa5d5;transition:transform .2s ease}.t-page .t-plus svg{display:block}.t-page .t-faq[open] .t-plus{transform:rotate(180deg)}.t-page .t-faq p,.t-page .t-faq li{margin:0 0 18px;font-size:15px;line-height:24px;color:#4f5d6b}.t-page .t-faq p:not(:last-child){margin-bottom:12px}.t-page .t-faq ul{margin:0 0 18px;padding:0 0 0 20px;list-style:disc}.t-page .t-faq li{margin:0 0 6px;list-style:disc}.t-page .t-faq>:not(summary){margin-left:22px;margin-right:22px}.t-page .t-call{align-self:flex-start;min-height:48px;font-size:15px}.t-page .t-faqwrap--groups{display:grid;grid-template-columns:minmax(0, 340px) minmax(0, 1fr);gap:40px 72px}.t-page .t-faq-side{position:sticky;top:101px;gap:18px}.t-page .t-faq-jump{display:flex;flex-direction:column;gap:2px;margin-top:4px;padding-top:14px;border-top:1px solid #dde9f0}.t-page .t-faq-jump a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:40px;padding:6px 0;color:#1d2b3a;font-size:15px;font-weight:500;text-decoration:none}.t-page .t-faq-jump a:hover{color:#1f8fbf}.t-page .t-faq-jump span{font-size:13px;font-weight:500;color:#6b7884}.t-page .t-faq-groups{min-width:0;display:flex;flex-direction:column;gap:32px}.t-page .t-faq-group{scroll-margin-top:101px}.t-page .t-faq-label{margin:0 0 10px;font-size:13px;font-weight:600;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;color:#6b7884}@media(max-width: 900px){.t-page .t-faqwrap--groups{grid-template-columns:minmax(0, 1fr);gap:28px}.t-page .t-faq-side{position:static}.t-page .t-faq-jump{display:none}}@media(max-width: 480px){.t-page .t-faq summary{padding:14px 16px}.t-page .t-faq-q{font-size:15px}.t-page .t-faq>:not(summary){margin-left:16px;margin-right:16px}}@media(prefers-reduced-motion: reduce){.t-page .t-plus,.t-page .t-faq summary{transition:none}}.t-page .t-mores{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:16px}.t-page .t-more{display:flex;align-items:flex-start;gap:14px;padding:20px;border:1px solid #dde9f0;border-radius:16px;background:#fff;text-decoration:none;color:#1d2b3a;transition:border-color .15s ease}.t-page .t-more:hover{border-color:#2aa5d5;color:#1d2b3a}.t-page .t-more-txt{flex:1 1 auto;min-width:0}.t-page .m-ic{flex:none;width:38px;height:38px;border-radius:10px;background:#eaf6fb;display:flex;align-items:center;justify-content:center;transition:background-color .15s ease}.t-page .m-ic svg{display:block;stroke:#2aa5d5}.t-page .t-more:hover .m-ic{background:#2aa5d5}.t-page .t-more:hover .m-ic svg{stroke:#fff}.t-page .m-t{display:block;font-size:15px;line-height:20px;font-weight:600;color:#1d2b3a}.t-page .m-d{display:block;font-size:13px;line-height:18px;color:#5d6b78;margin-top:2px}.t-page .t-more-arrow{display:flex;align-self:center;color:#8a97a3}.t-page .t-more-arrow svg{display:block}.t-page .t-final-sec{padding:0 0 clamp(56px,7vw,96px)}.t-page .t-final{background:linear-gradient(135deg, #2aa5d5 0%, #1f8fbf 100%);border-radius:24px;padding:clamp(36px,5vw,64px) clamp(20px,4vw,48px);display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}.t-page .t-final .t-h2{color:#fff;text-align:center}.t-page .t-final-k{font-size:14px;font-weight:600;line-height:1.4;color:#fff;background:rgba(255, 255, 255, 0.16);padding:6px 14px;border-radius:999px}.t-page .t-final-p{margin:0;color:#e6f5fb;font-size:17px;line-height:1.6;text-align:center;max-width:600px}.t-page .t-final .t-btns{justify-content:center}@media(max-width: 980px){.t-page .t-steps{grid-template-columns:repeat(2, minmax(0, 1fr))}.t-page .t-mores{grid-template-columns:repeat(2, minmax(0, 1fr))}}@media(max-width: 560px){.t-page .t-steps,.t-page .t-mores{grid-template-columns:minmax(0, 1fr)}.t-page .t-step{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:14px;padding:18px}.t-page .t-num{margin:0;width:40px;height:40px;font-size:18px}.t-page .t-step-t{flex:1 1 0}.t-page .t-step-d{flex:1 1 100%;padding-left:54px}.t-page .t-btns{flex-direction:column;align-self:stretch}.t-page .t-btns a{width:100%}}@media print{.t-page .tc-reveal,.t-page .tc-pop{animation:none !important}}
/* 054 (Oct 2026): the redone tools' header and tool card (as on the Hours to Decimal Calculator). Brand: navy #1d2b3a, gray #4f5d6b,
   blue #2aa5d5, orange #ff6500. No one-side stripes, no hover lift or glow. */
.hd { --navy: #1d2b3a; --gray: #4f5d6b; --blue: #2aa5d5; --orange: #ff6500; --line: #dfe6ed; --soft: #eef2f6; --tint: #f1f8fc; --tint-line: #d6ecf6; color: var(--navy); }
.hd *, .hd *::before, .hd *::after { box-sizing: border-box; }
.hd-hero { padding: 56px 0 64px; background: linear-gradient(180deg, #fff 0%, #fff 55%, var(--tint) 55%, var(--tint) 100%); }
.hd-hero-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; margin-bottom: 36px; }
.hd .hd-h1 { font-family: "Work Sans", Arial, sans-serif; font-weight: 700; font-size: 44px; line-height: 1.12; letter-spacing: -.015em; color: var(--navy); margin: 0 0 16px; text-align: left; }
.hd .t-lead { color: var(--gray); font-size: 19px; line-height: 1.6; margin: 0; max-width: 34em; text-align: left; }
.hd-chks { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 20px; font-weight: 600; font-size: 15px; }
.hd-chks span { display: inline-flex; align-items: center; gap: 8px; }
.hd-art { width: 100%; height: auto; display: block; }

.hd-tool { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 1px 2px rgba(29, 43, 58, .05), 0 14px 36px rgba(29, 43, 58, .08); padding: 28px; max-width: 860px; margin: 0 auto; }
.hd-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--soft); border-radius: 12px; padding: 6px; margin-bottom: 24px; }
.hd .hd-tab { border: 0; background: transparent; color: var(--gray); font: 600 16px/1.3 "Inter", Arial, sans-serif; padding: 12px 14px; border-radius: 9px; cursor: pointer; min-height: 48px; }
.hd .hd-tab.active { background: #fff; color: var(--navy); box-shadow: 0 1px 2px rgba(29, 43, 58, .1), 0 0 0 1px var(--line); }
.hd .hd-tab:focus-visible, .hd button:focus-visible, .hd input:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.hd-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hd-row--one { grid-template-columns: 1fr; }
.hd-field label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 8px; color: var(--navy); }
.hd .hd-field input { width: 100%; height: 60px; border: 2px solid var(--line); border-radius: 12px; padding: 0 18px; font: 600 24px "Inter", Arial, sans-serif; color: var(--navy); background: #fff; }
.hd .hd-field input:focus { border-color: var(--blue); }
.hd .hd-field input.border-red-500 { border-color: var(--orange); }
.hd-err { display: block; margin-top: 6px; font-size: 14px; color: var(--navy); }
.hd-err:not(:empty)::before { content: "!"; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--orange); color: #fff; font-weight: 700; font-size: 12px; margin-right: 6px; vertical-align: 1px; }
.hd-result { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; margin-top: 20px; background: var(--tint); border: 1px solid var(--tint-line); border-radius: 14px; padding: 18px 22px; }
.hd .hd-result-label { margin: 0; font-size: 14px; font-weight: 600; color: var(--gray); text-transform: uppercase; letter-spacing: .04em; }
.hd .hd-result-value { margin: 2px 0 0; font-family: "Work Sans", Arial, sans-serif; font-weight: 700; font-size: 44px; line-height: 1.1; color: var(--navy); }
.hd .hd-copy { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 18px; border-radius: 10px; border: 2px solid var(--navy); background: #fff; color: var(--navy); font: 700 16px "Inter", Arial, sans-serif; cursor: pointer; }
.hd .hd-copy:hover { background: var(--tint); }
.hd .hd-copy:disabled { opacity: .45; cursor: default; }
.hd-feedback { grid-column: 1 / -1; font-size: 14px; color: var(--navy); min-height: 0; }
.hd-examples { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.hd .hd-examples p { margin: 0; font-size: 14px; font-weight: 600; color: var(--gray); }
.hd-examples > div { display: flex; flex-wrap: wrap; gap: 8px; }
.hd .hd-chip { border: 1px solid var(--line); background: #fff; color: var(--navy); border-radius: 999px; padding: 8px 14px; font: 600 14px "Inter", Arial, sans-serif; cursor: pointer; min-height: 40px; }
.hd .hd-chip:hover { background: var(--tint); border-color: var(--tint-line); }

.hd-chart-sec { background: var(--tint); }
.hd .t-sub { color: var(--gray); font-size: 17px; margin-top: 8px; }
.hd-chart { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.hd-chart div { display: flex; justify-content: space-between; align-items: baseline; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 15px; }
.hd-chart span { color: var(--gray); }
.hd-chart b { color: var(--navy); font-weight: 700; }
.hd-how { max-width: 860px; }
.hd .hd-formula { margin: 8px 0 0; font-family: "Work Sans", Arial, sans-serif; font-weight: 700; font-size: 24px; text-align: center; background: var(--tint); border: 1px solid var(--tint-line); border-radius: 14px; padding: 18px; }
.hd-ex3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hd-ex3 div { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: #fff; }
.hd-ex3 b { display: block; font-size: 16px; }
.hd-ex3 span { color: var(--gray); font-size: 15px; }
.hd .hd-p { color: var(--gray); font-size: 17px; line-height: 1.65; margin: 0; }
.hd-table-card { border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; background: #fff; }
.hd-table-card h3 { font-family: "Work Sans", Arial, sans-serif; font-size: 20px; margin: 0 0 8px; }
.hd .hd-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.hd .hd-table th, .hd .hd-table td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--soft); }
.hd .hd-table th { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--gray); }
.hd .hd-table td:last-child, .hd .hd-table th:last-child { text-align: right; font-weight: 600; }

@media (max-width: 900px) {
	.hd-hero { padding: 32px 0 40px; background: linear-gradient(180deg, #fff 0%, #fff 62%, var(--tint) 62%); }
	.hd-hero-row { grid-template-columns: 1fr; gap: 20px; margin-bottom: 24px; }
	.hd-art-wrap { max-width: 360px; }
	.hd .hd-h1 { font-size: 32px; }
	.hd .t-lead { font-size: 17px; }
	.hd-tool { padding: 18px; }
	.hd .hd-tab { font-size: 14px; padding: 10px 8px; }
	.hd-row { grid-template-columns: 1fr 1fr; gap: 12px; }
	.hd .hd-result-value { font-size: 36px; }
	.hd-chart { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hd-ex3 { grid-template-columns: 1fr; }
	.hd .hd-formula { font-size: 19px; }
}

/* the minutes chart folds on phones: 12 minutes, then "Show all 59 minutes" (a checkbox, no script) */
.hd-more-cb { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.hd-more-btn { display: none; }
@media (max-width: 900px) {
	.hd-chart > div:nth-child(n+13) { display: none; }
	.hd-more-cb:checked + .hd-chart > div { display: flex; }
	.hd-more-btn { display: inline-flex; align-items: center; justify-content: center; margin: 12px auto 0; min-height: 48px; padding: 10px 20px; border: 2px solid var(--navy); border-radius: 10px; background: #fff; color: var(--navy); font: 700 16px "Inter", Arial, sans-serif; cursor: pointer; }
	.hd-more-cb:checked ~ .hd-more-btn { display: none; }
	.hd-more-cb:focus-visible ~ .hd-more-btn { outline: 3px solid var(--blue); outline-offset: 2px; }
}

/* 054 (Oct 2026): the Employee Cost Calculator restyled (on top of the rules above). Brand colors
   only; errors in navy with an orange mark; no one-side stripes, no hover lift or glow. */
.ec .ec-tool { max-width: 1080px; margin: 0 auto; }
.ec .employee-cost-calculator-container { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 24px; align-items: start; max-width: none; margin: 0; padding: 0; }
.ec .hiring-calculator { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 1px 2px rgba(29, 43, 58, .05), 0 14px 36px rgba(29, 43, 58, .08); padding: 26px 28px; margin: 0; width: auto; max-width: none; }
.ec .mode-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--soft); border-radius: 12px; padding: 6px; margin: 0 0 22px; width: auto; }
.ec .mode-toggle button { border: 0; background: transparent; color: var(--gray); font: 600 16px/1.3 "Inter", Arial, sans-serif; padding: 12px; border-radius: 9px; min-height: 48px; cursor: pointer; }
.ec .mode-toggle button.active { background: #fff; color: var(--navy); box-shadow: 0 1px 2px rgba(29, 43, 58, .1), 0 0 0 1px var(--line); }
.ec .calculator-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.ec .calculator-form .form-field { margin: 0 !important; }
.ec .calculator-form .form-field label { display: flex; align-items: center; gap: 6px; font: 600 15px "Inter", Arial, sans-serif; color: var(--navy); margin-bottom: 8px; }
.ec .calculator-form input[type=number], .ec .calculator-form select { width: 100%; height: 52px; border: 2px solid var(--line); border-radius: 12px; padding: 0 14px; font: 600 17px "Inter", Arial, sans-serif; color: var(--navy); background-color: #fff; }
.ec .calculator-form input:focus, .ec .calculator-form select:focus { border-color: var(--blue); outline: none; }
.ec .calculator-form input:focus-visible, .ec .calculator-form select:focus-visible, .ec .mode-toggle button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.ec .calculator-form [aria-invalid=true] { border-color: var(--orange); }
.ec .form-field-checkbox label { margin: 30px 0 0; font-weight: 600; }
.ec .form-field-checkbox input { width: 20px; height: 20px; accent-color: var(--blue); }
.ec .tax-info { grid-column: 1 / -1; background: var(--tint); border: 1px solid var(--tint-line); border-radius: 12px; padding: 12px 16px; margin: 0; }
.ec .tax-info dl { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; font-size: 15px; }
.ec .tax-info dt { color: var(--gray); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.ec .tax-info dd { margin: 0 0 0 -14px; font-weight: 700; color: var(--navy); }
.ec .advanced-fields { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin: 4px 0 0; }
.ec .advanced-fields.hidden { display: none; }
.ec .advanced-fields legend { font: 700 16px "Work Sans", Arial, sans-serif; padding: 0 6px; color: var(--navy); }
.ec .error-message, .ec #errorMessage { color: var(--navy) !important; background: none !important; border: 0 !important; font-size: 14px; padding: 0 !important; margin: 6px 0 0 !important; }
.ec .error-message:not(:empty)::before, .ec #errorMessage:not(:empty)::before { content: "!"; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--orange); color: #fff; font-weight: 700; font-size: 12px; margin-right: 6px; vertical-align: 1px; }
.ec #errorMessage.hidden { display: none; }
.ec #resetBtn { background: #fff !important; color: var(--navy) !important; border: 2px solid var(--navy) !important; border-radius: 10px !important; font: 700 16px "Inter", Arial, sans-serif !important; min-height: 48px; padding: 10px 20px !important; box-shadow: none !important; transform: none !important; }
.ec #resetBtn:hover { background: var(--tint) !important; }
.ec .results-container { position: sticky; top: 96px; display: grid; gap: 16px; margin: 0; width: auto; max-width: none; }
.ec .results { background: var(--navy); color: #fff; border-radius: 18px; padding: 24px 26px; margin: 0; width: auto; }
.ec .results .cost { display: grid; gap: 14px; }
.ec .results .cost p { margin: 0; display: grid; gap: 2px; color: #c9d6e2; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.ec .results #totalCost { font: 700 44px/1.1 "Work Sans", Arial, sans-serif; color: #fff; text-transform: none; letter-spacing: -.01em; }
.ec .results #breakEven { font: 700 24px "Work Sans", Arial, sans-serif; color: #fff; text-transform: none; letter-spacing: 0; }
.ec .results hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .18); margin: 18px 0 12px; }
.ec .results .cost-breakdown > p { color: #c9d6e2; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 6px; }
.ec .results .item-row { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; font-size: 15px; }
.ec .results .item-row dt { color: #e6edf3; font-weight: 500; }
.ec .results .item-row .dots { flex: 1; border-bottom: 1px dotted rgba(255, 255, 255, .25); }
.ec .results .item-row dd { margin: 0; font-weight: 700; color: #fff; }
.ec .ec-prompt { display: none; margin: 4px 0 0; color: #fff; font-size: 16px; line-height: 1.5; }
.ec .ec-waiting .cost, .ec .ec-waiting .cost-breakdown { display: none; }
.ec .ec-waiting .ec-prompt { display: block; }
.ec .ec-waiting .results::before { content: "Total hiring cost"; display: block; color: #c9d6e2; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.ec .tooltip { color: var(--blue); }

/* the article below: one readable column */
.ec-article { max-width: 780px !important; margin: 0 auto; padding: 56px 24px 24px; }
.ec-article h2 { font: 700 30px/1.25 "Work Sans", Arial, sans-serif !important; color: var(--navy) !important; margin: 40px 0 12px !important; text-align: left !important; }
.ec-article h3 { font: 700 21px/1.3 "Work Sans", Arial, sans-serif !important; color: var(--navy) !important; margin: 24px 0 8px !important; }
.ec-article p, .ec-article li { color: var(--gray) !important; font-size: 17px !important; line-height: 1.7 !important; }
.ec-article img { max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.ec-article a { color: var(--navy) !important; text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ec-article section.faq { margin-top: 48px; }
.ec-article section.faq details { border: 1px solid var(--line); border-radius: 12px; padding: 0; margin: 10px 0; background: #fff; }
.ec-article section.faq summary { cursor: pointer; padding: 16px 20px; font: 600 17px "Inter", Arial, sans-serif; color: var(--navy); list-style: none; }
.ec-article section.faq details[open] summary { border-bottom: 1px solid var(--soft); }
.ec-article section.faq details > div { padding: 12px 20px 16px; }

@media (max-width: 900px) {
	.ec .employee-cost-calculator-container { grid-template-columns: 1fr; }
	.ec .results-container { position: static; order: -1; }
	.ec .calculator-form, .ec .advanced-fields { grid-template-columns: 1fr; }
	.ec .hiring-calculator { padding: 18px; }
	.ec .results #totalCost { font-size: 36px; }
	.ec .form-field-checkbox label { margin-top: 0; }
	.ec-article h2 { font-size: 25px !important; }
}

/* the page's own sheet wins on these otherwise: the result card, the waiting state, the 700px section cap */
.ec .ec-hero { background: #fff; padding-bottom: 40px; }
.ec .results-container .results { background: var(--navy) !important; }
.ec .results-container.ec-waiting .results .cost, .ec .results-container.ec-waiting .cost-breakdown { display: none !important; }
.ec .results-container .results .cost { display: grid !important; }
.ec .t-page > section, .ec .t-page section.t-sec, .ec .t-page section.t-final-sec { max-width: none !important; width: auto !important; }
.ec .t-page .t-wrap { max-width: 1120px !important; width: auto !important; }
.ec .results-container .results .ec-prompt { color: #fff !important; font-size: 17px !important; text-align: left !important; }
.ec .results-container .results .cost p, .ec .results-container .results .cost-breakdown > p { text-align: left !important; }
.ec .results-container .cost-breakdown { background: transparent !important; padding: 0 !important; }
.ec .mode-toggle button { background: transparent !important; color: var(--gray) !important; border: 0 !important; box-shadow: none !important; }
.ec .mode-toggle button.active { background: #fff !important; color: var(--navy) !important; box-shadow: 0 1px 2px rgba(29, 43, 58, .1), 0 0 0 1px var(--line) !important; }
/* Cowork's notes: the "?" stays on its label's line; the result card's top lines up with the form card's */
.ec .results-container, .ec .results-container .results { margin-top: 0 !important; padding-top: 24px; }
.ec .results-container { padding-top: 0 !important; }
.ec .results-container .results .cost p { display: block !important; }
.ec .results-container .results .cost p .tooltip { display: inline-flex !important; vertical-align: -2px; margin-left: 6px !important; }
.ec .results-container .results .cost p #totalCost, .ec .results-container .results .cost p #breakEven { display: block; margin-top: 4px; }
body .ec .employee-cost-calculator-container > .results-container { margin: 0 !important; }
/* the tax box note (wage bases, typical rates) */
.single-entry-content .employee-cost-calculator-container .tax-info p.ec-tax-note { margin: 8px 0 0 !important; font-size: 13px !important; line-height: 1.5 !important; font-weight: 400 !important; color: var(--gray) !important; }
.ec #taxBase { font: inherit; line-height: inherit; color: inherit; margin: 0; }

/* 059 (Oct 28, after the live check) */
/* 059: section headings get a wider measure and balanced lines (no lone last word) */
.hd .t-head-c { max-width: 960px; }
.hd .t-h2, .hd .hd-h1, .hd .t-final h2 { text-wrap: balance; }
/* 059: the content area spans the page like the other redone tools (the old sheet caps it at 1296px, 64px down) */
body.postid-33112 .entry-content { margin-top: 0 !important; max-width: none !important; width: auto !important; padding: 0 !important; }
/* resources.css (also loaded on this page) shrinks the icons (svg max-width 100%) and restyles the FAQ's rows */
.single-entry-content .hd.ec #faq svg, .single-entry-content .hd.ec .t-mores svg, .single-entry-content .hd.ec .t-final svg { max-width: none !important; }
.single-entry-content .hd.ec .t-more-arrow > svg { width: 18px !important; height: 18px !important; }
.single-entry-content .hd.ec #faq details.t-faq { border-bottom-width: 0 !important; }
.single-entry-content .hd.ec #faq .t-faq > summary { color: #1d2b3a !important; font-family: Inter, Arial, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 24px !important; }
.single-entry-content .hd.ec #faq span.t-plus, .single-entry-content .hd.ec #faq .t-plus > svg { font-size: 16px !important; font-weight: 400 !important; line-height: 24px !important; }
/* the tax box: one rate per row, label then value */
.ec .tax-info dl { display: grid !important; grid-template-columns: max-content max-content; gap: 6px 28px; }
.ec .tax-info dl dt, .ec .tax-info dl dd { margin: 0 !important; display: flex !important; align-items: center; }
/* the article opens with its heading, no extra gap above it */
.ec-article #employee-cost-calculator-content > h2:first-child { margin-top: 0 !important; }
/* the FAQ, More Tools and the closing section as wide as on the other redone tools (the calculator keeps its 1120px) */
.single-entry-content .hd.ec .t-sec > .t-wrap, .single-entry-content .hd.ec .t-final-sec > .t-wrap { max-width: 1180px !important; }
/* 059b: only the chevron after each FAQ question. pages-base.css, resources.css and the Time Card sheet add a "▼" after any
   ".faq details summary", and these FAQ sections carry "faq" (the schema plugin reads them by it) */
.t-page .faq .t-faq summary::after, .t-page .faq .t-faq summary::before { content: none !important; display: none !important; }

/* 059 photos: the hard and soft costs as a 2-column card instead of the AI chart */
.ec-article .ec-costs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin: 8px 0 32px; }
.ec-article .ec-costs-col { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; }
.ec-article .ec-costs .ec-costs-h { display: flex; align-items: center; gap: 10px; font: 700 19px/1.3 "Work Sans", Arial, sans-serif !important; color: var(--navy) !important; margin: 0 0 8px !important; }
.ec-article .ec-costs .ec-costs-h::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); flex: none; }
.ec-article .ec-costs-col + .ec-costs-col .ec-costs-h::before { background: var(--orange); }
.ec-article .ec-costs ul { margin: 0 !important; padding-left: 20px !important; }
.ec-article .ec-costs li { margin: 4px 0 !important; font-size: 16px !important; line-height: 1.5 !important; }
@media (max-width: 600px) {
	.ec-article .ec-costs { grid-template-columns: 1fr; }
}


/* 060: the rebuilt Employee Cost Calculator (pay, the job, hiring and benefits; more costs folded away; the result with the first
   year, every year after, per month, per hour, the multiple of pay, where the money goes, compare, copy, link, print) */
.ec .ec2-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px; align-items: start; }
.ec .ec2-form { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 1px 2px rgba(29, 43, 58, .05), 0 14px 36px rgba(29, 43, 58, .08); padding: 24px 26px; display: grid; gap: 24px; }
.ec .ec2-step { border: 0; margin: 0; padding: 0; display: grid; gap: 14px; min-width: 0; }
.ec .ec2-step legend { display: flex; align-items: center; gap: 10px; font: 700 18px "Work Sans", Arial, sans-serif; color: var(--navy); padding: 0; margin: 0 0 12px; }
.ec .ec2-step legend span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; font: 700 14px "Inter", Arial, sans-serif; }
.ec .ec2-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; background: var(--soft); border-radius: 12px; padding: 5px; }
.ec .ec2-seg label { position: relative; margin: 0; }
.ec .ec2-seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ec .ec2-seg span { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 9px; font: 600 15px "Inter", Arial, sans-serif; color: var(--gray); }
.ec .ec2-seg input:checked + span { background: #fff; color: var(--navy); box-shadow: 0 1px 2px rgba(29, 43, 58, .1), 0 0 0 1px var(--line); }
.ec .ec2-seg input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.ec .ec2-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.ec .ec2-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ec .ec2-field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.ec .ec2-field[hidden] { display: none; }
.ec .ec2-field label { font: 600 14px/1.35 "Inter", Arial, sans-serif; color: var(--navy); margin: 0; }
.ec .ec2-field input, .ec .ec2-field select { width: 100%; height: 50px; border: 2px solid var(--line); border-radius: 12px; padding: 0 14px; font: 600 17px "Inter", Arial, sans-serif; color: var(--navy); background-color: #fff; }
.ec .ec2-field input:focus, .ec .ec2-field select:focus { border-color: var(--blue); outline: none; }
.ec .ec2-field input:focus-visible, .ec .ec2-field select:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.ec .ec2-field input:disabled { background: var(--soft); color: var(--gray); }
.ec .ec2-hint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--gray); }
.ec .ec2-more { border: 1px solid var(--line); border-radius: 14px; }
.ec .ec2-more summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 10px; padding: 14px 16px; font: 700 16px "Work Sans", Arial, sans-serif; color: var(--navy); }
.ec .ec2-more summary::-webkit-details-marker { display: none; }
.ec .ec2-more summary::after { content: "+"; margin-left: auto; font: 700 20px "Inter", Arial, sans-serif; color: var(--blue); }
.ec .ec2-more[open] summary::after { content: "\2212"; }
.ec .ec2-more summary span { font: 500 13px "Inter", Arial, sans-serif; color: var(--gray); }
.ec .ec2-group { padding: 0 16px 16px; display: grid; gap: 12px; }
.ec .ec2-group-t { margin: 4px 0 0; font: 700 12px "Inter", Arial, sans-serif; text-transform: uppercase; letter-spacing: .05em; color: var(--gray); }
.ec .ec2-result { background: var(--navy); color: #fff; border-radius: 18px; padding: 24px 26px; position: sticky; top: 96px; }
.ec .ec2-empty-msg { display: none; margin: 0; font-size: 17px; color: #fff; }
.ec .ec2-empty .ec2-empty-msg { display: block; }
.ec .ec2-empty .ec2-figures { display: none; }
.ec .ec2-k { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #c9d6e2; }
.ec .ec2-k--gap { margin-top: 22px; }
.ec .ec2-big { margin: 2px 0 14px; font: 700 46px/1.1 "Work Sans", Arial, sans-serif; color: #fff; }
.ec .ec2-mid { margin: 2px 0 12px; font: 700 28px/1.2 "Work Sans", Arial, sans-serif; color: #fff; }
.ec .ec2-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ec .ec2-facts li { background: rgba(255, 255, 255, .09); border-radius: 999px; padding: 6px 12px; font-size: 14px; color: #e6edf3; }
.ec .ec2-facts b { color: #fff; }
.ec .ec2-bar { display: flex; height: 16px; border-radius: 8px; overflow: hidden; margin: 10px 0 12px; background: rgba(255, 255, 255, .1); }
.ec .ec2-bar span { display: block; height: 100%; }
.ec #ec2-bar-pay, .ec .k-pay { background: #2aa5d5; }
.ec #ec2-bar-benefits, .ec .k-ben { background: #9fd6ec; }
.ec #ec2-bar-taxes, .ec .k-tax { background: #c9d3dc; }
.ec #ec2-bar-onetime, .ec .k-one { background: #ff6500; }
.ec .ec2-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; color: #e6edf3; }
.ec .ec2-legend li { display: flex; align-items: center; gap: 8px; }
.ec .ec2-legend i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.ec .ec2-legend b { margin-left: auto; color: #fff; }
.ec .ec2-ramp { margin: 16px 0 0; font-size: 15px; color: #e6edf3; }
.ec .ec2-ramp b { color: #fff; }
.ec .ec2-break { margin-top: 16px; border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 12px; }
.ec .ec2-break summary { cursor: pointer; font-weight: 600; font-size: 15px; color: #fff; }
.ec .ec2-break dl { margin: 10px 0 0; display: grid; gap: 4px; }
.ec .ec2-break dl > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: #e6edf3; }
.ec .ec2-break dt, .ec .ec2-break dd { margin: 0; }
.ec .ec2-break dd { color: #fff; font-weight: 600; white-space: nowrap; }
.ec .ec2-break .ec2-total { border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 6px; margin-top: 4px; font-weight: 700; }
.ec .ec2-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ec .ec2-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .4); background: transparent; color: #fff; font: 600 14px "Inter", Arial, sans-serif; cursor: pointer; }
.ec .ec2-btn:hover { background: rgba(255, 255, 255, .1); }
.ec .ec2-btn:focus-visible, .ec .ec2-compare-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.ec .ec2-compare-btn { display: block; width: 100%; margin-top: 18px; min-height: 46px; border-radius: 10px; border: 2px solid #fff; background: #fff; color: var(--navy); font: 700 15px "Inter", Arial, sans-serif; cursor: pointer; }
.ec .ec2-compare { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .18); }
.ec .ec2-compare .ec2-field label { color: #fff; }
.ec .ec2-cmp { margin: 14px 0 0; display: grid; gap: 8px; }
.ec .ec2-cmp > div { background: rgba(255, 255, 255, .08); border-radius: 10px; padding: 10px 12px; }
.ec .ec2-cmp dt { font-size: 13px; color: #c9d6e2; font-weight: 600; }
.ec .ec2-cmp dd { margin: 2px 0 0; color: #fff; font-weight: 700; }
.ec .ec2-cmp-diff { margin: 10px 0 0; color: #fff; font-size: 15px; }
/* labels in a row of 3 take 2 lines' room, so the boxes line up; in the comparison the worker type gets its own line */
.ec .ec2-row--3 .ec2-field label { min-height: 2.7em; display: flex; align-items: flex-end; }
.ec .ec2-compare .ec2-row--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ec .ec2-compare .ec2-row--3 > :first-child { grid-column: 1 / -1; }
.ec .ec2-compare .ec2-row--3 .ec2-field label { min-height: 0; }
@media (max-width: 900px) {
	.ec .ec2-grid { grid-template-columns: 1fr; }
	.ec .ec2-result { position: static; order: -1; }
	.ec .ec2-form { padding: 18px; }
	.ec .ec2-big { font-size: 38px; }
	.ec .ec2-row--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 600px) {
	.ec .ec2-row, .ec .ec2-row--3 { grid-template-columns: 1fr; }
	.ec .ec2-more summary { flex-wrap: wrap; row-gap: 2px; }
	.ec .ec2-more summary span { order: 3; flex-basis: 100%; }
}
/* the TimeClick line at the bottom of the result card */
.ec .ec2-tc { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 15px; line-height: 1.4; }
.ec .ec2-tc a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .5); text-underline-offset: 3px; }
.ec .ec2-tc a:hover { color: #fff; text-decoration-color: #fff; }
.ec .ec2-tc a:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.ec .ec2-tc svg { display: inline-block; vertical-align: -3px; margin-left: 6px; }
/* Print (the Print button): only the calculator and its result, the result first, the money bar in color */
@media print {
	.ec2-print-hide { display: none !important; }
	.ec .ec2-actions, .ec .ec2-compare-btn, .ec .ec2-more, .ec .ec2-tc { display: none !important; }
	.ec .ec2-grid { grid-template-columns: 1fr; }
	.ec .ec2-result { position: static; order: -1; background: #fff !important; border: 1px solid #1d2b3a; break-inside: avoid; }
	.ec .ec2-result * { color: #1d2b3a !important; }
	.ec .ec2-form { box-shadow: none; }
	.ec .ec2-bar span, .ec .ec2-legend i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	/* compact: the result on the first page, the inputs on the second */
	.ec .ec2-result { padding: 14px 18px; }
	.ec .ec2-big { font-size: 32px; margin-bottom: 4px; }
	.ec .ec2-mid { font-size: 22px; margin-bottom: 6px; }
	.ec .ec2-k--gap { margin-top: 12px; }
	.ec .ec2-facts li { padding: 2px 8px; font-size: 12px; }
	.ec .ec2-legend, .ec .ec2-break dl > div, .ec .ec2-ramp { font-size: 12px; }
	.ec .ec2-break { margin-top: 8px; padding-top: 6px; }
	.ec .ec2-break dl { margin-top: 4px; gap: 1px; }
	.ec .ec2-compare { margin-top: 8px; padding-top: 8px; }
	.ec .ec2-compare .ec2-row--3 { gap: 6px 10px; }
	.ec .ec2-field { gap: 2px; }
	.ec .ec2-field label { font-size: 12px; }
	.ec .ec2-cmp { margin-top: 6px; gap: 4px; }
	.ec .ec2-cmp > div { padding: 4px 8px; }
	.ec .ec2-cmp dt { font-size: 11px; }
	.ec .ec2-cmp dd, .ec .ec2-cmp-diff { font-size: 13px; }
	.ec .ec2-cmp-diff { margin-top: 6px; }
	.ec .ec2-form { break-before: page; padding: 14px 16px; gap: 12px; }
	.ec .ec2-step { gap: 8px; }
	.ec .ec2-step legend { font-size: 15px; margin-bottom: 4px; }
	.ec .ec2-step legend span { background: none; color: #1d2b3a; border: 1px solid #1d2b3a; width: 22px; height: 22px; }
	.ec .ec2-field input, .ec .ec2-field select { height: 34px; font-size: 14px; border-width: 1px; }
	.ec .ec2-seg { padding: 3px; }
	.ec .ec2-seg span { min-height: 28px; font-size: 13px; }
	.ec .ec2-hint { font-size: 11px; }
}