/* TrustHours Tools: shared design, "the instrument".
   One panel: the question as a sentence = the answer, a time ruler, then three ruled columns (Breakdown / How it is worked out / The rule).
   Iris #5B5BD6 / Ink #14172B / Manrope + Figtree. Radius 10/8/6. Hairlines, no shadows, no glow, no gradients. Motion plays once. */
.thx{--iris:#5B5BD6;--soft-iris:#B9BBF0;--line-iris:#C9CBF3;--ink:#14172B;--slate:#5D6480;--mut:#9CA2BA;--hair:#E8E9F0;--hair2:#EEF0F5;--canvas:#F6F6F9;--tint:#FBFBFD;--soft:#F6F6FF;--ok:#15A36F;--warn:#D98E04;--bad:#C83A54;
  font-family:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--slate);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}
.thx *,.thx *::before,.thx *::after{box-sizing:border-box}
.thx a{color:var(--iris)}
.thx-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.thx-lab{display:block;font:600 10.5px Figtree,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--slate)}

/* ---------- header ---------- */
.thx-hero{background:#fff;padding:clamp(26px,3.4vw,42px) 0 clamp(26px,3vw,36px)}
.thx-crumb{margin:0;font:600 14px Figtree,sans-serif;color:var(--mut)}
.thx-crumb a{color:var(--slate);text-decoration:none}.thx-crumb a:hover{color:var(--iris)}
.thx-crumb span{margin:0 8px}
.thx-h1{margin:16px 0 0;font:800 clamp(34px,4.6vw,56px)/1.04 Manrope,sans-serif;letter-spacing:-.045em;color:var(--ink);text-wrap:balance;max-width:960px}
.thx-sub{margin:12px 0 0;max-width:680px;font:400 clamp(16px,1.4vw,18.5px)/1.6 Figtree,sans-serif;color:var(--slate);text-wrap:pretty}
.thx-facts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin:18px 0 0;padding:0;list-style:none;font:600 13.5px Figtree,sans-serif;color:var(--slate)}
.thx-facts li{display:inline-flex;align-items:center;gap:6px}
.thx-facts li+li::before{content:"";width:3px;height:3px;border-radius:50%;background:#C3C7D7;margin:0 12px}
.thx-fact-ok svg{color:var(--ok)}

/* ---------- the bench + panel ---------- */
.thx-bench{background:var(--canvas);border-top:1px solid var(--hair);padding:clamp(24px,3.4vw,44px) 0 clamp(36px,4.4vw,60px)}
.thx-panel{background:#fff;border:1px solid var(--hair);border-radius:10px;overflow:hidden}
.thx-printhead{display:none}
.thx-board{display:grid;grid-template-columns:minmax(0,1.08fr) 1px minmax(0,1fr);grid-template-areas:"in eq ans" "wk wk wk" "cols cols cols"}
.thx-out{display:contents}

/* question side */
.thx-in{grid-area:in;display:flex;flex-direction:column;gap:18px;padding:clamp(24px,3vw,40px) clamp(20px,3.2vw,44px)}
.thx-sent{margin:0;font:500 clamp(21px,2vw,26px)/2.15 Figtree,sans-serif;color:var(--slate);letter-spacing:-.01em}
.thx-inl{display:inline-flex;align-items:center;vertical-align:middle;position:relative;margin:0 3px}
.thx-inl input,.thx-inl select{height:54px;min-width:64px;width:var(--w,96px);padding:0 14px;border:0;border-bottom:2px solid var(--line-iris);border-radius:8px 8px 3px 3px;background:var(--soft);color:var(--ink);font:800 26px Manrope,sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-align:center;-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s,background .15s}
.thx-inl select{font-size:20px;padding-right:32px;text-align:left;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235B5BD6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.thx-inl input::placeholder{color:#B4B9CE;font-weight:600}
.thx-inl input:hover,.thx-inl select:hover{border-bottom-color:#A9ACEB}
.thx-inl input:focus,.thx-inl select:focus{outline:0;background:#fff;border-bottom-color:var(--iris);box-shadow:0 0 0 3px rgba(91,91,214,.14)}
.thx-inl .u{position:absolute;pointer-events:none;font:600 15px Figtree,sans-serif;color:var(--mut)}
.thx-inl.pre input{padding-left:28px}.thx-inl.pre .u{left:12px}
.thx-inl.suf input{padding-right:40px}.thx-inl.suf .u{right:12px}
.thx-inl input.is-bad{border-bottom-color:var(--bad)}
.thx-quick{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.thx-quick>span{font:600 13px Figtree,sans-serif;color:var(--mut);margin-right:2px}
.thx-quick button{height:32px;padding:0 11px;border:1px solid var(--hair);border-radius:6px;background:#fff;color:var(--slate);font:600 13.5px Figtree,sans-serif;cursor:pointer;transition:border-color .15s,color .15s}
.thx-quick button:hover{border-color:var(--iris);color:var(--iris)}
.thx-quick button:focus-visible{outline:2px solid var(--iris);outline-offset:2px}
.thx-field{display:flex;flex-direction:column;gap:7px}
.thx-field>label{font:600 10.5px Figtree,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--slate)}
.thx-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;background:var(--canvas);border:1px solid var(--hair);border-radius:8px}
.thx-seg label{position:relative}
.thx-seg input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.thx-seg span{display:flex;align-items:center;justify-content:center;height:38px;border-radius:6px;font:600 14px Figtree,sans-serif;color:var(--slate);transition:background .15s,color .15s}
.thx-seg input:checked+span{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--hair)}
.thx-seg input:focus-visible+span{outline:2px solid var(--iris);outline-offset:1px}
.thx-hint{margin:0;font:400 13px/1.5 Figtree,sans-serif;color:var(--mut)}
.thx-err{margin:0;font:500 13.5px/1.4 Figtree,sans-serif;color:var(--bad)}
.thx-err:empty{display:none}

/* the equals line between question and answer */
.thx-eq{grid-area:eq;position:relative;background:var(--hair)}
.thx-eq span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--hair);font:800 22px/1 Manrope,sans-serif;color:var(--iris)}

/* answer side */
.thx-ans{grid-area:ans;align-self:center;padding:clamp(24px,3vw,40px) clamp(20px,3.2vw,44px) clamp(24px,3vw,40px) clamp(28px,3.8vw,52px)}
.thx-ans-l{display:block;font:600 10.5px Figtree,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--iris)}
.thx-ans-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-top:8px}
.thx-ans-v{font:800 clamp(52px,6.2vw,88px)/.95 Manrope,sans-serif;letter-spacing:-.05em;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.thx-ans-u{font:700 clamp(17px,1.6vw,21px) Manrope,sans-serif;letter-spacing:-.02em;color:var(--iris)}
.thx-ans-n{display:block;margin-top:14px;font:500 16px/1.55 Figtree,sans-serif;color:var(--slate);max-width:46ch}

/* time ruler */
.thx-wk{grid-area:wk;border-top:1px solid var(--hair);background:var(--tint);padding:40px clamp(20px,3.2vw,44px) 24px}
.thx-track{position:relative;display:flex;height:40px;background:#fff;border:1px solid var(--hair);border-radius:8px}
.thx-track i{display:block;height:100%;transition:width .6s cubic-bezier(.2,.7,.2,1)}
.thx-track i:first-child{border-radius:7px 0 0 7px}
.thx-track i+i{box-shadow:inset 2px 0 0 #fff}
.thx-track .c1{background:var(--iris)}.thx-track .c2{background:var(--soft-iris)}.thx-track .c3{background:var(--ink)}.thx-track .c4{background:var(--mut)}
.thx-mark{position:absolute;top:-9px;bottom:-9px;width:0;border-left:2px solid var(--ink);transition:left .6s cubic-bezier(.2,.7,.2,1)}
.thx-mark em{position:absolute;top:-24px;left:0;transform:translateX(-50%);white-space:nowrap;font:700 12px Figtree,sans-serif;font-style:normal;color:var(--ink)}
.thx-ticks{position:relative;height:26px;margin-top:2px}
.thx-ticks span{position:absolute;top:0;padding-top:9px;transform:translateX(-50%);font:600 12px Figtree,sans-serif;color:var(--mut);font-variant-numeric:tabular-nums;white-space:nowrap}
.thx-ticks span::before{content:"";position:absolute;top:0;left:50%;width:1px;height:6px;background:#C9CDDD}
.thx-ticks span:first-child{transform:none}.thx-ticks span:first-child::before{left:0}
.thx-ticks span:last-child{transform:translateX(-100%)}.thx-ticks span:last-child::before{left:auto;right:0}
.thx-legend{display:flex;flex-wrap:wrap;gap:6px 22px;margin:12px 0 0;padding:0;list-style:none;font:500 14px Figtree,sans-serif;color:var(--slate)}
.thx-legend li{display:flex;align-items:center;gap:8px}
.thx-legend li::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--iris)}
.thx-legend .c2::before{background:var(--soft-iris)}.thx-legend .c3::before{background:var(--ink)}.thx-legend .c4::before{background:var(--mut)}
.thx-legend b{color:var(--ink);font-variant-numeric:tabular-nums}

/* three ruled columns */
.thx-cols{grid-area:cols;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border-top:1px solid var(--hair)}
.thx-col{padding:26px clamp(20px,2.6vw,34px) 30px}
.thx-col:first-child{padding-left:clamp(20px,3.2vw,44px)}
.thx-col+.thx-col{border-left:1px solid var(--hair)}
.thx-ledger{list-style:none;margin:10px 0 0;padding:0}
.thx-ledger li{display:flex;align-items:baseline;gap:10px;padding:8px 0;font:500 15px/1.4 Figtree,sans-serif;color:var(--ink)}
.thx-k small{display:block;margin-top:1px;font:400 13px Figtree,sans-serif;color:var(--mut)}
.thx-lead{flex:1;align-self:flex-end;margin-bottom:6px;border-bottom:1.5px dotted #D3D6E4;min-width:16px}
.thx-v{font:700 15.5px Manrope,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.thx-ledger .thx-total{margin-top:6px;padding-top:12px;border-top:2px solid var(--ink)}
.thx-ledger .thx-total .thx-k{font:800 15.5px Manrope,sans-serif}
.thx-ledger .thx-total .thx-lead{border-bottom-color:transparent}
.thx-ledger .thx-total .thx-v{font:800 20px Manrope,sans-serif;letter-spacing:-.02em}
.thx-work{display:block;margin-top:12px;font:600 14.5px/1.75 ui-monospace,Menlo,Consolas,monospace;color:var(--ink);white-space:pre-wrap;word-break:break-word;font-variant-numeric:tabular-nums}
.thx-rule{margin:12px 0 0;font:500 15px/1.55 Figtree,sans-serif;color:var(--ink)}
.thx-src{margin:8px 0 0;font:500 13px/1.5 Figtree,sans-serif;color:var(--mut)}
.thx-src a{color:var(--slate)}

/* panel footer */
.thx-pfoot{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;border-top:1px solid var(--hair);background:var(--tint);padding:12px clamp(14px,2vw,22px) 12px clamp(20px,3.2vw,44px)}
.thx-priv{display:flex;align-items:center;gap:8px;margin:0;font:500 13.5px Figtree,sans-serif;color:var(--slate)}
.thx-priv svg{flex:none;color:var(--ok)}
.thx-actions{display:flex;gap:4px;flex-wrap:wrap}
.thx-act{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 12px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--ink);font:600 14px Figtree,sans-serif;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.thx-act svg{color:var(--iris)}
.thx-act:hover{background:#fff;border-color:var(--hair)}
.thx-act:focus-visible{outline:2px solid var(--iris);outline-offset:1px}
.thx-act.done,.thx-act.done svg{color:var(--ok)}
.thx-btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 14px;border:1px solid var(--hair);border-radius:8px;background:#fff;color:var(--ink);font:600 14px Figtree,sans-serif;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s}
.thx .thx-btn-primary{background:var(--ink);border-color:var(--ink);color:#fff;height:46px;padding:0 20px;font-size:15px}
.thx .thx-btn-primary:hover{background:#000;border-color:#000}
.thx-btn:focus-visible{outline:2px solid var(--iris);outline-offset:2px}
.thx-empty{padding:40px 0;text-align:center;color:var(--slate)}

/* ---------- next step (quiet sign-up line) ---------- */
.thx-cta{display:flex;align-items:center;gap:18px 22px;flex-wrap:wrap;margin-top:18px;padding:16px 16px 16px 22px;border:1px solid var(--hair);border-radius:10px;background:#fff}
.thx-cta p{flex:1 1 320px;margin:0;font:700 clamp(16px,1.6vw,18.5px)/1.4 Manrope,sans-serif;letter-spacing:-.02em;color:var(--ink)}
.thx-cta-bars{display:inline-flex;align-items:flex-end;gap:3px;height:26px}
.thx-cta-bars i{width:4px;border-radius:1px;background:var(--iris)}
.thx-cta-bars i:nth-child(1){height:60%}.thx-cta-bars i:nth-child(2){height:85%}.thx-cta-bars i:nth-child(3){height:45%}.thx-cta-bars i:nth-child(4){height:100%}
.thx-cta-bars i:nth-child(5){height:70%}.thx-cta-bars i:nth-child(6){height:20%;opacity:.35}.thx-cta-bars i:nth-child(7){height:20%;opacity:.35}.thx-cta-bars i:nth-child(8){height:90%}
.thx-cta-bars i:nth-child(9){height:65%}.thx-cta-bars i:nth-child(10){height:100%}.thx-cta-bars i:nth-child(11){height:50%}.thx-cta-bars i:nth-child(12){height:80%}

/* ---------- hub ---------- */
.thx-hub .thx-bench{padding:36px 0 56px}
.thx-hubgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.thx-hubcard{display:flex;flex-direction:column;gap:8px;padding:22px;background:#fff;border:1px solid var(--hair);border-radius:10px;text-decoration:none;color:var(--slate);transition:border-color .15s}
.thx-hubcard:hover{border-color:var(--iris)}
.thx-hubcard b{font:800 21px/1.2 Manrope,sans-serif;letter-spacing:-.03em;color:var(--ink)}
.thx-hubcat{font:600 10.5px Figtree,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
.thx-hubsum{font:400 15px/1.5 Figtree,sans-serif}
.thx-hubtease{font:600 13.5px Figtree,sans-serif;color:var(--ink);background:var(--soft);border-radius:6px;padding:7px 10px}
.thx-hubopen{margin-top:auto;padding-top:6px;font:600 14.5px Figtree,sans-serif;color:var(--iris)}

/* ---------- guide text under a tool (page content) ---------- */
.thx-guide{max-width:860px;margin:0 auto;padding:clamp(28px,4vw,52px) 24px;font:400 17px/1.75 Figtree,sans-serif;color:var(--slate)}
.thx-guide h2{margin:2.2em 0 .5em;font:800 clamp(26px,3vw,34px)/1.12 Manrope,sans-serif;letter-spacing:-.04em;color:var(--ink)}
.thx-guide h3{margin:1.6em 0 .4em;font:700 20px/1.25 Manrope,sans-serif;letter-spacing:-.025em;color:var(--ink)}
.thx-guide p{margin:0 0 1em}
.thx-guide a{color:var(--iris)}
.thx-guide table{width:100%;border-collapse:collapse;margin:1.2em 0;font:500 15px Figtree,sans-serif;border:1px solid var(--hair);border-radius:10px;display:block;overflow-x:auto}
.thx-guide th{background:var(--canvas);text-align:left;padding:10px 14px;font:600 10.5px Figtree,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--slate);border-bottom:1px solid var(--hair)}
.thx-guide td{padding:11px 14px;border-top:1px solid var(--hair2);color:var(--ink)}
.thx-guide .thx-short{background:var(--soft);border:1px solid var(--hair);border-radius:10px;padding:18px 20px;color:var(--ink);font-weight:500}
.thx-guide .thx-note{font-size:14px;color:var(--mut)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .thx-board{grid-template-columns:minmax(0,1fr);grid-template-areas:"in" "eq" "ans" "wk" "cols"}
  .thx-eq{height:1px}
  .thx-ans{padding-top:34px}
  .thx-cols{grid-auto-flow:row}
  .thx-col,.thx-col:first-child{padding:22px 20px 24px}
  .thx-col+.thx-col{border-left:0;border-top:1px solid var(--hair)}
}
@media (max-width:600px){
  .thx-wrap{padding:0 16px}
  .thx-in,.thx-ans{padding-left:20px;padding-right:20px}
  .thx-wk{padding:38px 20px 20px}
  .thx-inl input{height:50px;font-size:23px;width:calc(var(--w,96px)*.72);min-width:54px;padding:0 10px}
  .thx-inl.suf input{padding-right:34px}.thx-inl.suf .u{right:9px}
  .thx-sent{font-size:19px}
  .thx-facts li+li::before{display:none}.thx-facts{gap:6px 14px}
  .thx-ticks span:nth-child(even):not(:last-child){color:transparent}
  .thx-pfoot{padding:14px 16px}
  .thx-actions{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .thx-act{justify-content:center;padding:0 6px;border-color:var(--hair);background:#fff;font-size:13px;gap:5px}
  .thx-cta{padding:18px}.thx-cta .thx-btn{width:100%}
  .thx-mark em{font-size:11px}
}
@media (prefers-reduced-motion:reduce){.thx *{transition:none!important;animation:none!important}}

/* ---------- print: the panel only, one page ---------- */
@media print{
  body *{visibility:hidden}
  .thx-printarea,.thx-printarea *{visibility:visible}
  .thx-printarea{position:absolute;left:0;top:0;width:100%;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .thx-printhead{display:flex;align-items:center;gap:14px;padding:16px 24px;border-bottom:1px solid var(--hair);font:600 12px Figtree,sans-serif;color:var(--slate)}
  .thx-printhead img{height:22px;width:auto;margin-right:auto}
  .thx-actions,.thx-quick{display:none}
}