/* Free tools (/free-tools/): the calculator on a white panel in a grey band, results beside the inputs with the
   main figure under the 4 px ink rule. Components (page hero, prose, tiles, faq) come from /shared/ui.css. */
.tool-band{scroll-margin-top:var(--top)}
.tool{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);gap:clamp(24px,3.4vw,48px);align-items:start;background:var(--white);border-radius:var(--radius);padding:clamp(22px,3vw,40px)}
.tool [hidden]{display:none!important}
.tool-stack{display:grid;gap:32px;min-width:0}
.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{float:left;width:100%;grid-column:1/-1;padding:0;margin:0 0 4px;font-size:var(--t-h3);font-weight:700;letter-spacing:-.025em;line-height:1.2;color:var(--ink)}
.tool-inputs legend+*{clear:both}
.tool-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.tool-field>span{font-size:var(--t-small);font-weight:700;color:var(--ink-2)}
.tool-field em{font-style:normal;font-weight:500;color:var(--ink-3)}
.tool-field>small{font-size:.8rem;line-height:1.45;color:var(--ink-3)}
.tool-wide{grid-column:1/-1}
.tool-input{position:relative;display:flex;align-items:center}
.tool-input>i{position:absolute;left:12px;font-style:normal;font-weight:700;color:var(--ink-3);pointer-events:none}
.tool-input>i+input{padding-left:34px}
.tool-input>b{position:absolute;right:12px;font-weight:700;color:var(--ink-3);pointer-events:none}
.tool-input>input:has(+b){padding-right:34px}
.tool-field input,.tool-field select,.tool-field textarea{width:100%;font:600 1.02rem/1.3 Manrope,sans-serif;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:12px;min-height:48px;font-variant-numeric:tabular-nums;transition:border-color .2s,box-shadow .2s}
.tool-field select{appearance:none;cursor:pointer;padding-right:38px;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8l4-3.5' fill='none' stroke='%234a4652' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center}
.tool-field input::placeholder{color:var(--ink-3);font-weight:500}
.tool-field input:focus,.tool-field select:focus,.tool-field textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(123,44,191,.18)}
.tool-field input[aria-invalid=true]{border-color:#b42318}
.tool-check{flex-direction:row;align-items:center;gap:10px}
.tool-check>span{font-weight:600;color:var(--ink)}
.tool-check input{width:20px;height:20px;min-height:20px;flex:none;accent-color:var(--violet);padding:0}

/* results */
.tool-results{position:sticky;top:calc(var(--top) + 24px);min-width:0;background:var(--paper-2);border-radius:var(--radius);padding:22px 24px 24px}
.tool-results h2{font-size:var(--t-h3);letter-spacing:-.025em;line-height:1.2}
.tool-results h2~h2{margin-top:24px}
.tool-result{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0;padding:11px 0;border-bottom:1px solid var(--line);color:var(--ink-2);font-size:.95rem;line-height:1.4}
.tool-result output{font-weight:800;color:var(--ink);font-size:1.05rem;text-align:right;font-variant-numeric:tabular-nums}
.tool-result-main{flex-direction:column;align-items:flex-start;gap:8px;margin-top:14px;padding:16px 0 18px;border-top:4px solid var(--ink)}
.tool-result-main span{font-weight:600}
.tool-result-main output{font-size:clamp(2.2rem,3.6vw,3rem);letter-spacing:-.05em;line-height:1;text-align:left}
.tool.is-empty .tool-results output{color:var(--ink-3)}
.tool-note{margin:14px 0 0;font-size:.9rem;line-height:1.55;color:var(--ink-2)}
.tool-note:empty{display:none}
.tool-note.is-warn{color:#9b1c1c;font-weight:600}
.tool-table{width:100%;border-collapse:collapse;font-size:.88rem;margin-top:10px;font-variant-numeric:tabular-nums}
.tool-table th,.tool-table td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:right}
.tool-table th:first-child,.tool-table td:first-child{text-align:left;padding-left:0}
.tool-table thead th{border-bottom:2px solid var(--ink);font-weight:700;color:var(--ink)}
.tool-brief{margin:12px 0 0;padding:14px 16px;background:var(--white);border-radius:var(--radius);color:var(--ink);font:500 .88rem/1.6 Manrope,sans-serif;white-space:pre-wrap;overflow-wrap:anywhere;max-height:360px;overflow:auto}
.tool-asks{margin:12px 0 0;padding-left:1.2em;color:var(--ink-2);font-size:.9rem;line-height:1.55}
.tool-asks li+li{margin-top:8px}
.tool-asks li::marker{color:var(--violet)}

/* the conversion action, next to the figures it sends */
.tool-send{display:grid;gap:12px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.tool-send p{color:var(--ink-2);font-size:.92rem;line-height:1.55}
.tool-send .btn{width:100%}
.tool-send .link{justify-self:start;font-size:.95rem}
.tool-privacy{margin-top:14px;color:var(--ink-3);font-size:var(--t-small)}

/* hub: one row per service, its tools beside it */
.tool-groups{display:grid;gap:clamp(48px,6vw,80px)}
.tool-group{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:24px clamp(32px,5vw,72px);align-items:start}
.tool-group-head h2{font-size:clamp(1.6rem,2.4vw,2.1rem)}
.tool-group-head p{margin-top:14px}
.tool-group .tiles>:only-child{grid-column:1/-1}

@media (max-width:1080px){
  .tool-page .toc{display:none}
  .tool-group{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){.tool{grid-template-columns:minmax(0,1fr)}.tool-results{position:static}}
@media (max-width:560px){.tool{padding:18px}.tool-inputs{grid-template-columns:minmax(0,1fr)}.tool-results{padding:18px}}
@media (max-width:640px){.tool-page .page-hero .lede{font-size:1rem}}
.tool-inputs legend em{font-style:normal;font-weight:500;color:var(--ink-3)}

/* currency, reset, messages and the phone result bar (added by shared/tools/core.js) */
.tool-fx{font-size:.82rem;color:var(--ink-3)}
.tool-reset{margin-top:14px;padding:0;border:0;background:none;font:700 .9rem/1.4 Manrope,sans-serif;color:var(--violet);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tool-reset:hover{color:var(--violet-dark)}
.tool-err{font-size:.8rem;font-weight:600;color:#b42318}
.tool-field input[aria-invalid=true]:focus{box-shadow:0 0 0 3px rgba(180,35,24,.16)}
.tool-bar{display:none}
@media (max-width:900px){
  .tool-bar{display:flex;align-items:center;gap:10px 14px;position:fixed;left:12px;right:12px;bottom:12px;z-index:40;padding:12px 16px;border-radius:var(--radius);background:var(--onyx);color:var(--white);text-decoration:none;box-shadow:0 12px 32px rgba(13,12,16,.28);opacity:0;visibility:hidden;translate:0 12px;transition:opacity .2s var(--ease),translate .2s var(--ease),visibility .2s}
  .tool-bar.on{opacity:1;visibility:visible;translate:0 0}
  .tool-bar span{font-size:.8rem;color:var(--on-dark-3);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tool-bar b{font-size:1.15rem;font-variant-numeric:tabular-nums;white-space:nowrap}
  .tool-bar i{font-style:normal;font-size:.8rem;font-weight:700;color:var(--amethyst);white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.tool-bar{transition:none}}
/* small laptops: one input column so long choices ("Leads (enquiries, calls, bookings)") are never cut off */
@media (min-width:901px) and (max-width:1180px){.tool-inputs{grid-template-columns:minmax(0,1fr)}}