/* Planning tools: the hub, the system questionnaire and the room-size calculator, in the language of the knowledge pages. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.topic-card-tool { position: relative; }
.topic-card-tool .guide-link::after { content: ""; position: absolute; inset: 0; }
.topic-card-tool .topic-art svg { display: block; width: 100%; height: auto; }
.tools-page .library-note p { margin-top: 12px; }

.tool-top { padding-top: 124px; }
.tool-top .breadcrumbs { margin-bottom: 34px; }
.tool-heading { max-width: 800px; padding-bottom: 38px; }
.tool-heading .eyebrow { margin-bottom: 18px; }
.tool-heading h1 { margin: 0; font-size: clamp(2.3rem, 5vw, 3.9rem); font-weight: 400; line-height: 1.12; letter-spacing: -.045em; text-wrap: balance; }
.tool-heading p:not(.eyebrow) { margin: 20px 0 0; color: #b0c3ca; font-size: 1.08rem; line-height: 1.85; }
.tool-single .contact-fab { display: none; }

.tool-review { display: flex; flex-direction: column; gap: 6px; margin-bottom: 26px; padding: 16px 20px; border: 1px solid rgba(244, 196, 104, .45); border-radius: 12px; background: rgba(244, 196, 104, .07); color: #f1dcae; font-size: .9rem; line-height: 1.7; }
.tool-review strong { color: #ffe9b8; font-weight: 600; }

.tool { padding-bottom: 60px; }
.tool-card { min-width: 0; padding: clamp(22px, 4vw, 42px); background: linear-gradient(135deg, #0f2330, #0c1b26); border: 1px solid var(--line); border-radius: 20px; }
.tool-progress { height: 2px; margin-bottom: 30px; background: var(--line); border-radius: 2px; overflow: hidden; }
.tool-progress span { display: block; height: 100%; width: 0; background: var(--ice); transition: width .3s ease; }
.tool-step { margin: 0; padding: 0; min-width: 0; border: 0; }
.tool-step + .tool-step { margin-top: 44px; }
.tool-quiz.is-stepped .tool-step + .tool-step { margin-top: 0; }
.tool-step legend { padding: 0; font-size: clamp(1.5rem, 3.2vw, 2.15rem); font-weight: 400; line-height: 1.3; letter-spacing: -.035em; text-wrap: balance; }
.tool-step legend:focus { outline: none; }
.tool-step-index { display: block; margin-bottom: 12px; color: #a2bec7; font-size: .78rem; letter-spacing: .02em; }
.tool-help { margin: 12px 0 0; color: #a9c0c8; font-size: .95rem; line-height: 1.8; }
.tool-options { display: grid; gap: 10px; margin-top: 26px; }
.tool-option { display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 14px 18px; border: 1px solid #395966; border-radius: 12px; color: #d3e6ec; cursor: pointer; transition: border-color .2s, background .2s; }
.tool-option:hover { border-color: #6aa6b8; }
.tool-option:has(input:checked) { background: #244454; border-color: #9ddce8; color: #eefbff; }
.tool-option:has(input:focus-visible) { outline: 2px solid var(--ice); outline-offset: 2px; }
.tool-option input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: #86d4e8; }
.tool-option input:focus-visible, .tool-choice .choice-row input:focus-visible { outline: none; }
.tool-option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tool-option-text strong { font-size: 1.02rem; font-weight: 500; }
.tool-option-text small { color: #a5bfc8; font-size: .86rem; }
.tool-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; }
.tool-nav .button { gap: 12px; min-width: 128px; }
.tool-nav .button[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.tool-nav [data-next] { margin-inline-start: auto; }
.tool-quiz:not(.is-stepped) .tool-nav, .tool-quiz:not(.is-stepped) .tool-progress { display: none; }

.tool-result h2, .tool-compare h2, .tool-rooms h2 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 400; line-height: 1.25; letter-spacing: -.035em; }
.tool-result h2:focus { outline: none; }
.tool-disclaimer { margin: 12px 0 0; max-width: 46em; color: #a9c0c8; font-size: .95rem; line-height: 1.8; }
.tool-ranking { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.tool-system { display: grid; gap: 14px; min-width: 0; padding: 24px 26px; border: 1px solid var(--line); border-radius: 16px; background: rgba(8, 19, 28, .5); }
.tool-system.is-top { border-color: #9ddce8; background: radial-gradient(ellipse at right top, rgba(134, 212, 232, .12), transparent 70%), rgba(8, 19, 28, .5); }
.tool-system.is-weak, .tool-system.is-blocked { opacity: .82; }
.tool-system-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.tool-system h3 { margin: 0; font-size: 1.5rem; font-weight: 500; letter-spacing: -.02em; }
.tool-fit { order: 2; padding: 4px 11px; border: 1px solid var(--line-strong); border-radius: 999px; color: #c5dde6; font-size: .78rem; white-space: nowrap; }
.is-top .tool-fit { border-color: #9ddce8; background: #9ddce8; color: #071018; font-weight: 600; }
.is-close .tool-fit { border-color: #9ddce8; color: #dff6fc; }
.is-blocked .tool-fit { border-color: rgba(255, 154, 157, .5); color: #ffb3b6; }
.tool-system-summary { margin: 0; color: #b8cdd5; line-height: 1.8; }
.tool-system-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 30px; }
.tool-system-lists h4 { margin: 0 0 8px; color: #a2bec7; font-size: .8rem; font-weight: 500; letter-spacing: .02em; }
.tool-system-lists ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.tool-system-lists li { position: relative; padding-inline-start: 18px; color: #d3e6ec; font-size: .95rem; line-height: 1.7; }
.tool-system-lists li::before { content: ""; position: absolute; inset-inline-start: 0; top: .72em; width: 8px; height: 1px; background: var(--ice); }
.tool-system-lists .is-caution li::before { background: #f4c468; }
.tool-system .text-link { margin-top: 0; justify-self: start; font-size: .88rem; }
.tool-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.tool-actions .share-whatsapp { flex: 1 1 260px; min-height: 52px; }
.tool-actions .button { flex: 0 1 auto; }
.tool-privacy { margin: 16px 0 0; color: #9ab9c5; font-size: .82rem; line-height: 1.7; }
.tool-compare { margin-top: 56px; }
.tool-compare .table-wrap { margin-top: 24px; }
.tool-compare table { min-width: 760px; }
.tool-compare thead th { font-size: .9rem; }

.tool-size { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 22px; align-items: start; }
.tool-form { display: grid; gap: 26px; }
.tool-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.tool-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tool-field label, .tool-choice legend { color: #d3e6ec; font-size: .95rem; font-weight: 500; }
.tool-field input { width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid #395966; border-radius: 12px; background: #0a1923; color: var(--text); font: inherit; font-size: 1.05rem; }
.tool-field input::placeholder { color: #6f8a94; }
.tool-field input:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; border-color: #9ddce8; }
.tool-field input[aria-invalid="true"] { border-color: #ff9a9d; }
.tool-field small { color: #9ab9c5; font-size: .82rem; line-height: 1.6; }
.tool-error { margin: 0; color: #ffb3b6; font-size: .86rem; }
.tool-choice { margin: 0; padding: 0; min-width: 0; border: 0; }
.tool-choice legend { padding: 0; margin-bottom: 12px; }
.tool-choice .choice-row label { min-height: 46px; padding: 10px 14px; font-size: .92rem; }
.tool-choice .choice-row label:has(input:focus-visible) { outline: 2px solid var(--ice); outline-offset: 2px; }
.tool-choice .choice-row input { width: 17px; height: 17px; }

.tool-output { position: sticky; top: 124px; display: grid; gap: 14px; }
.tool-output-label { margin: 0; color: #a2bec7; font-size: .82rem; letter-spacing: .02em; }
.tool-output-range { margin: 0; color: var(--ice-bright); font-size: clamp(2rem, 3.6vw, 2.7rem); font-weight: 400; line-height: 1.15; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.tool-output-range small { display: block; margin-top: 6px; color: #a9c0c8; font-size: .9rem; letter-spacing: 0; }
.tool-output-range.is-empty { color: #8fa9b3; font-size: 1.15rem; letter-spacing: 0; line-height: 1.6; }
.tool-output-hp { margin: 0; color: #d3e6ec; }
.tool-breakdown { display: grid; gap: 0; margin: 4px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.tool-breakdown li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); color: #b8cdd5; font-size: .9rem; }
.tool-breakdown li span:last-child { flex: none; color: #e5f8fd; font-variant-numeric: tabular-nums; }
.tool-output .tool-disclaimer { margin: 0; font-size: .86rem; }
.tool-output .button { width: 100%; }
.tool-output .button[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* On a phone the result sits below a long form, so the current range follows the visitor along the bottom edge. */
.tool-mini { display: none; }

.tool-rooms { margin-top: 34px; }
.tool-rooms ul { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.tool-room { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 14px; background: rgba(8, 19, 28, .5); }
.tool-room-name { margin: 0; font-size: 1.08rem; font-weight: 500; }
.tool-room-name small { display: block; color: #a5bfc8; font-size: .84rem; font-weight: 400; }
.tool-room-range { margin: 0; margin-inline-start: auto; color: var(--ice-bright); font-variant-numeric: tabular-nums; }
.tool-room button { min-height: 40px; padding: 0 14px; border: 1px solid #395966; border-radius: 10px; background: none; color: #c5dde6; font-size: .84rem; cursor: pointer; }
.tool-room button:hover { border-color: #ff9a9d; color: #ffd0d2; }
.tool-total { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; margin: 16px 0 0; padding: 16px 20px; border: 1px solid #9ddce8; border-radius: 14px; color: #e5f8fd; }
.tool-total strong { font-weight: 500; font-variant-numeric: tabular-nums; }

.tool-assumptions { margin-top: 30px; border: 1px solid var(--line); border-radius: 14px; }
.tool-assumptions summary { padding: 18px 22px; color: #d3e6ec; cursor: pointer; }
.tool-assumptions summary:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; border-radius: 14px; }
.tool-assumptions > div { padding: 0 22px 22px; }
.tool-assumptions p { margin: 0 0 16px; color: #a9c0c8; font-size: .92rem; line-height: 1.8; max-width: 52em; }
.tool-assumptions table { min-width: 620px; }
.tool-assumptions td a { color: var(--ice); text-decoration: underline; text-underline-offset: 4px; }
.tool-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; padding-bottom: 20px; }
.tool-next a { display: flex; flex-direction: column; gap: 6px; padding: 24px 26px; border: 1px solid var(--line); border-radius: 16px; background: #0d202b; transition: border-color .25s; }
.tool-next a:hover { border-color: #6aa6b8; }
.tool-next span { color: #a2bec7; font-size: .78rem; }
.tool-next strong { font-size: 1.2rem; font-weight: 400; letter-spacing: -.02em; }

@media (max-width: 900px) {
  .tool-top { padding-top: 104px; }
  .tool-size { grid-template-columns: minmax(0, 1fr); }
  .tool-output { position: static; }
  .tool-mini:not([hidden]) { position: sticky; z-index: 5; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0; padding: 13px 18px; border: 1px solid #9ddce8; border-radius: 14px; background: rgba(13, 32, 43, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 14px 34px rgba(0, 0, 0, .4); }
  .tool-mini span { color: #a2bec7; font-size: .82rem; }
  .tool-mini strong { color: var(--ice-bright); font-weight: 500; font-variant-numeric: tabular-nums; }
  .tool-nav .button { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 560px) {
  .tool-field-row { grid-template-columns: minmax(0, 1fr); }
  .tool-system { padding: 20px 18px; }
  .tool-actions .button { flex: 1 1 140px; }
  .tool-room-range { margin-inline-start: 0; flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .tool-progress span, .tool-option { transition: none; } }