/* Free tools (/free-tools/): the calculator card on the article layout. Scoped to .tool-page and .tool-index-page.
   Form controls follow the enquiry form (contact/form.css); results use the article "short answer" card. */
.tool-shell{padding-bottom:56px;scroll-margin-top:120px}
.tool{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:22px;align-items:start;padding:30px;border:1px solid #c77dff33;border-radius:26px;background:radial-gradient(circle at 92% 0%,#7b2cbf33,transparent 42%),linear-gradient(160deg,#1c1527,#111016);box-shadow:0 24px 70px #0006}
.tool-inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;min-width:0;margin:0;padding:0;border:0}
.tool-inputs legend{grid-column:1/-1;padding:0;margin:0 0 4px;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#c77dff}
.tool-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.tool-field>span{font-size:.82rem;font-weight:700;color:#eee9f3;letter-spacing:.01em}
.tool-field>small{font-size:.76rem;line-height:1.45;color:#9d96a6}
.tool-wide{grid-column:1/-1}
.tool-input{position:relative;display:flex;align-items:center}
.tool-input>i{position:absolute;left:14px;font-style:normal;font-weight:700;color:#c77dff;pointer-events:none}
.tool-input>i+input{padding-left:38px}
.tool-input>b{position:absolute;right:14px;font-weight:700;color:#9d96a6;pointer-events:none}
.tool-field input,.tool-field select{width:100%;box-sizing:border-box;font:500 1rem/1.4 Manrope,system-ui,sans-serif;color:#fff;background:#0d0c10cc;border:1px solid #ffffff26;border-radius:14px;padding:13px 15px;min-height:50px;transition:border-color .25s,box-shadow .25s}
.tool-field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#c77dff 50%),linear-gradient(135deg,#c77dff 50%,transparent 50%);background-position:calc(100% - 20px) 52%,calc(100% - 15px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
.tool-field select option{background:#17131f;color:#fff}
.tool-field input:focus,.tool-field select:focus{outline:none;border-color:#c77dff;box-shadow:0 0 0 3px #7b2cbf55}
.tool-field input[aria-invalid=true]{border-color:#ff8fa3}
.tool-check{flex-direction:row;align-items:center;gap:10px}
.tool-check input{width:20px;min-height:20px;height:20px;accent-color:#a35dff;padding:0}
.tool-results{position:sticky;top:120px;display:grid;gap:12px;padding:22px;border:1px solid #c77dff40;border-radius:18px;background:radial-gradient(circle at 95% 0%,#7b2cbf2e,transparent 50%),#ffffff06}
.tool-results h2{margin:0;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#c77dff}
.tool-result{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:1px solid #ffffff12;color:#c9c2d0;font-size:.9rem}
.tool-result output{font-weight:800;color:#fff;font-size:1.05rem;text-align:right;font-variant-numeric:tabular-nums}
.tool-result-main{flex-direction:column;align-items:flex-start;gap:4px}
.tool-result-main output{font-size:clamp(1.9rem,4vw,2.6rem);letter-spacing:-.04em;line-height:1.1;text-align:left;background:linear-gradient(110deg,#fff 0%,#c77dff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.tool-note{margin:0;font-size:.84rem;line-height:1.6;color:#d8cfe0}
.tool-note.is-warn{color:#ffc9d3}
.tool.is-empty .tool-results output{opacity:.55}
.tool-table{width:100%;border-collapse:collapse;font-size:.86rem}
.tool-table th,.tool-table td{padding:7px 8px;border-bottom:1px solid #ffffff12;text-align:right;font-variant-numeric:tabular-nums}
.tool-table th:first-child,.tool-table td:first-child{text-align:left}
.tool-table th{color:#c77dff;font-weight:700}
.tool-send{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:18px;padding:18px 22px;border:1px solid #ffffff17;border-radius:18px;background:#ffffff05}
.tool-send p{margin:0;flex:1 1 280px;color:#c9c2d0;font-size:.92rem;line-height:1.6}
.tool-send .button{text-decoration:none;color:#fff}
.tool-privacy{margin:12px 2px 0;color:#9d96a6;font-size:.8rem}
.tool-index .tool-group-title{font-size:clamp(1.4rem,2.2vw,1.9rem);color:#fff;letter-spacing:-.03em;margin:40px 0 16px}
.tool-index .tool-group-title:first-child{margin-top:0}
.tool-index{padding-bottom:80px}
@media (max-width:900px){.tool{grid-template-columns:1fr;padding:22px}.tool-results{position:static}}
@media (max-width:560px){.tool{padding:18px;border-radius:20px}.tool-inputs{grid-template-columns:1fr}.tool-send .button{width:100%;justify-content:center}}
.tool-about{padding-top:0}.tool-about .info-prose{max-width:780px}.tool-about h2{margin-top:0}