/* TaxReck Tax Desk: its own rules on top of the shared blocks (blocks.css) and the split screen (split.css).
   Page classes start with k- (the desk); the calculators themselves keep the td- names used by desk.js.
   Revised 23 Sep 2026: photographs in full colour, no card boxes around the choices or the figures, and the
   result of each calculator runs off the right edge of the page instead of sitting in a second box. */

.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- 01 the desk: a readout that answers each calculator on its own figures ---------- */
.k-desk{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr minmax(280px,43%);grid-template-areas:"read keys" "hint keys";gap:6px clamp(22px,2.8vw,44px);padding:clamp(24px,2.8vw,38px);border-radius:30px;background:linear-gradient(145deg,#16203B,#0B1020 58%);color:#fff}
.k-desk::before{content:"";position:absolute;inset:0;background:radial-gradient(58% 80% at 84% 6%,rgba(var(--acc-rgb),.18),transparent 68%);pointer-events:none}
.k-desk::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 40px);-webkit-mask-image:linear-gradient(180deg,#000,transparent 72%);mask-image:linear-gradient(180deg,#000,transparent 72%);pointer-events:none}
.k-desk > *{position:relative;z-index:1}
.k-read{grid-area:read;transition:opacity .26s var(--ease),transform .26s var(--ease)}
.k-read.out{opacity:0;transform:translateY(7px)}
.k-label{color:var(--on-dark-2);font-size:13px;font-weight:700;letter-spacing:.01em}
.k-value{margin-top:12px!important;color:var(--acc);font-size:clamp(42px,5.6vw,68px);font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.k-unit{margin-top:10px!important;max-width:30ch;color:#fff;font-size:16px;line-height:1.5}
.k-hint{grid-area:hint;align-self:end;margin-top:22px!important;color:var(--on-dark-2);font-size:13px}
.k-keys{grid-area:keys;display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));grid-auto-rows:1fr;gap:9px;margin:0;padding:0;list-style:none}
.tdc-key{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ph name" "ph sub";align-items:center;column-gap:11px;width:100%;padding:9px 12px 9px 9px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(255,255,255,.04);color:#fff;font:inherit;text-align:left;cursor:pointer;transition:border-color .3s,background .3s,transform .3s var(--ease)}
.tdc-key i{grid-area:ph;width:40px;height:40px;border-radius:50%;overflow:hidden;background:#1B2440}
.tdc-key i img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:opacity .35s,transform .5s var(--ease)}
.tdc-key b{grid-area:name;font-size:13.5px;font-weight:700;letter-spacing:-.015em}
.tdc-key small{grid-area:sub;color:var(--on-dark-2);font-size:11.5px}
.tdc-key:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.32)}
.tdc-key:hover i img{transform:scale(1.06)}
.tdc-key.lit{border-color:var(--acc);background:rgba(var(--acc-rgb),.12)}
.tdc-key.lit i img{opacity:1}
.tdc-key.lit small{color:var(--acc)}

/* ---------- 02 the calculators: a rail of six, then the open workbench ---------- */
.k-rail{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(6px,1vw,18px);margin:2px 0 clamp(26px,3vw,40px);padding:0 2px 1px;border-bottom:1px solid var(--line);scrollbar-width:none}
.k-rail::-webkit-scrollbar{display:none}
.td-pick{position:relative;display:block;padding:2px 4px 18px;border:0;background:none;color:var(--muted);font:inherit;text-align:center;cursor:pointer}
.k-ph{display:block;width:clamp(54px,5.4vw,64px);height:clamp(54px,5.4vw,64px);margin:0 auto 11px;border-radius:50%;overflow:hidden;background:var(--soft)}
.k-ph img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:opacity .35s,transform .5s var(--ease)}
.td-pick b{display:block;min-height:2.4em;color:var(--ink);font-size:14px;font-weight:700;letter-spacing:-.02em;line-height:1.2;opacity:.6;transition:opacity .3s}
.td-pick > span{display:block;margin-top:5px;font-size:11.5px;letter-spacing:.01em;transition:color .3s}
.td-pick::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2.5px;border-radius:2px;background:var(--acc);transform:scaleX(0);transform-origin:center;transition:transform .35s var(--ease)}
.td-pick:hover b{opacity:.85}
.td-pick:hover .k-ph img{opacity:.95;transform:scale(1.05)}
.td-pick[aria-selected="true"]::after{transform:scaleX(1)}
.td-pick[aria-selected="true"] b{opacity:1}
.td-pick[aria-selected="true"] > span{color:var(--acc-text);font-weight:700}
.td-pick[aria-selected="true"] .k-ph img{opacity:1}
.td-pick[aria-selected="true"] .k-ph{box-shadow:0 0 0 2px var(--acc)}

.td-tool{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(22px,3vw,48px);align-items:start;animation:kIn .42s var(--ease) both}
.td-tool[hidden]{display:none}
@keyframes kIn{from{opacity:0;transform:translateY(12px)}}

/* what you put in: no card, underlined fields */
.td-in{padding:2px clamp(4px,1.4vw,22px) 4px 0}
.td-in h3{margin:0 0 9px;font-size:21px;font-weight:800;letter-spacing:-.03em}
.td-note{margin:0 0 22px!important;max-width:54ch;color:var(--muted);font-size:13.5px;line-height:1.6}
.td-field{display:block;margin-bottom:20px;color:var(--graphite);font-size:13.5px;font-weight:600;line-height:1.45}
.td-field > label{display:block;color:var(--graphite);font-size:13.5px;font-weight:600;line-height:1.45}
.td-field input,.td-field select{display:block;width:100%;height:46px;margin-top:4px;padding:0 2px;border:0;border-bottom:1.5px solid #CBD2DE;border-radius:0;background:transparent;color:var(--ink);font:inherit;font-size:19px;font-weight:700;letter-spacing:-.02em}
.td-field select{appearance:none;padding-right:26px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%230B1020' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 2px center/18px no-repeat}
.td-field input:focus,.td-field select:focus{outline:none;border-bottom-color:var(--acc-text);box-shadow:0 2px 0 0 rgba(var(--acc-rgb),.55)}
.td-field small{display:block;margin-top:8px;color:var(--muted);font-size:12px;font-weight:500;line-height:1.5}
.td-two{display:grid;grid-template-columns:1fr 1fr;gap:12px clamp(16px,2vw,26px)}
.td-check{display:flex;align-items:center;gap:10px;margin:-6px 0 20px;color:var(--ink);font-size:13.5px;font-weight:600}
.td-check input{flex:none;width:18px;height:18px;accent-color:var(--acc-text)}
.td-block{margin-bottom:20px}
.td-lbl{display:block;margin-bottom:10px;color:var(--graphite);font-size:13.5px;font-weight:600}
.td-seg{display:inline-flex;flex-wrap:wrap;gap:6px}
.td-seg button{height:38px;padding:0 16px;border:1.5px solid var(--line);border-radius:999px;background:none;color:var(--muted);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.td-seg button:hover{border-color:#C2CAD8;color:var(--ink)}
.td-seg button.on,.td-seg button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.td-stepper{align-items:center;gap:8px}
.td-stepper button{width:38px;padding:0;font-size:17px}
.td-segv{min-width:34px;color:var(--ink);font-size:17px;font-weight:800;text-align:center}
.td-ded{margin-top:12px!important;max-width:48ch;color:var(--muted);font-size:12.5px;line-height:1.55}
.td-ded b{color:var(--ink);font-weight:700}

/* what comes out: one dark slab, running off the right edge of the page */
.td-out{position:relative;overflow:hidden;margin-right:calc(var(--pad) * -1);padding:clamp(22px,2.4vw,30px) var(--pad) clamp(24px,2.6vw,32px) clamp(22px,2.4vw,30px);border-radius:28px 0 0 28px;background:linear-gradient(150deg,#16203B,#0B1020 62%);color:#fff}
.td-big{padding-bottom:17px;border-bottom:1px solid rgba(255,255,255,.12)}
.td-big span{display:block;color:var(--on-dark-2);font-size:12.5px;font-weight:700}
.td-big b{display:block;margin-top:9px;color:var(--acc);font-size:clamp(32px,3.6vw,46px);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.td-big em{display:block;margin-top:7px;max-width:40ch;color:#fff;font-size:13.5px;font-style:normal;line-height:1.5}
.td-table{width:100%;border-collapse:collapse;font-size:14.5px}
.td-table th{padding:11px 0;color:var(--on-dark-2);font-weight:600;text-align:left}
.td-table td{padding:11px 0;color:#fff;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.td-table tr+tr th,.td-table tr+tr td{border-top:1px solid rgba(255,255,255,.08)}
.td-table .tot th{color:#fff;font-weight:800}
.td-table .tot td{color:var(--acc)}
.td-table .tot th,.td-table .tot td{padding-top:13px;border-top:1.5px solid rgba(var(--acc-rgb),.45);font-size:16px}
.td-loan{display:none}
.td-loan.show{display:table-row}
.td-employer{margin-top:17px;padding:14px 16px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(255,255,255,.04)}
.td-employer span{display:block;color:var(--on-dark-2);font-size:12.5px;font-weight:700}
.td-employer b{display:block;margin:5px 0 7px;font-size:22px;font-weight:800;letter-spacing:-.035em}
.td-employer small{display:block;color:var(--on-dark-2);font-size:12px;line-height:1.55}
.td-employer i{color:#fff;font-style:normal;font-weight:700}
.td-poa{margin-top:17px;padding:13px 16px;border-left:3px solid var(--acc);border-radius:0 14px 14px 0;background:rgba(255,255,255,.05);font-size:13.5px;line-height:1.6}
.td-poa.none{border-left-color:rgba(255,255,255,.2);color:var(--on-dark-2)}
.td-poa b{color:var(--acc);font-weight:800}
.td-small{margin-top:14px!important;max-width:60ch;color:var(--on-dark-2);font-size:12.5px;line-height:1.6}
.td-small a,.td-poa a,.td-verdict a{color:var(--acc);text-decoration:underline;text-underline-offset:2px}
.td-scroll{margin-top:2px;overflow-x:auto}
.td-cmp th,.td-cmp td{padding-left:10px;padding-right:10px}
.td-cmp thead th{color:#fff;font-size:13px;font-weight:800;text-align:right;vertical-align:bottom;white-space:nowrap}
.td-cmp thead th:first-child{color:var(--on-dark-2);font-weight:600;text-align:left}
.td-cmp thead th small{display:block;min-height:14px;margin-top:5px;color:var(--acc);font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.td-cmp tbody td{width:26%;white-space:nowrap}
.td-cmp.sal-best th:nth-child(2),.td-cmp.sal-best td:nth-child(2),.td-cmp.div-best th:nth-child(3),.td-cmp.div-best td:nth-child(3){background:rgba(var(--acc-rgb),.09)}
.td-steps{display:grid;gap:8px;margin:17px 0 0;padding:0;list-style:none}
.td-steps li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 14px;border:1px solid rgba(255,255,255,.12);border-radius:14px;color:var(--on-dark-2);font-size:13px;transition:border-color .3s,background .3s}
.td-steps li b{color:#fff;font-size:14px;font-weight:700}
.td-steps li.hit{border-color:var(--acc);background:rgba(var(--acc-rgb),.12)}
.td-steps li.hit b{color:var(--acc)}
.td-verdict{margin-top:15px!important;max-width:46ch;font-size:15.5px;font-weight:700;line-height:1.5}
.td-go{margin-top:20px;height:48px}

/* ---------- 03 the figures behind the answers ---------- */
.k-lede{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,3vw,52px);align-items:center}
.k-lede .lead{margin-bottom:0!important}
.k-coin{margin:0}
.k-coin img{display:block;width:clamp(148px,16vw,206px);height:clamp(148px,16vw,206px);object-fit:cover;object-position:54% 44%;-webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent 99%);mask-image:radial-gradient(closest-side,#000 70%,transparent 99%);animation:bSettle 1.8s var(--ease) both}
.k-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:0 clamp(28px,4vw,66px);margin:clamp(24px,3vw,38px) 0 0}
.k-figs > div{padding:18px 0;border-top:1px solid var(--line)}
.k-figs dt{color:var(--ink);font-size:24px;font-weight:800;letter-spacing:-.035em;line-height:1.1}
.k-figs dd{max-width:34ch;margin:7px 0 0;color:var(--muted);font-size:13.5px;line-height:1.45}

/* ---------- 04 what we need to give you the real figure ---------- */
.k-real-lead{max-width:68ch;color:var(--graphite);font-size:17.5px;line-height:1.65}
.k-real-lead b{color:var(--ink);font-weight:700}
.k-need{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:clamp(24px,3.4vw,50px);align-items:center;margin-top:clamp(26px,3vw,40px)}
.k-steps{margin:0;padding:0;list-style:none}
.k-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(14px,1.6vw,22px);padding:22px 0;border-top:1px solid var(--line)}
.k-steps li:last-child{border-bottom:1px solid var(--line)}
.k-steps li b{grid-column:1;grid-row:1 / span 2;color:var(--acc-text);font-size:19px;font-weight:800;letter-spacing:-.02em}
.k-steps h3{grid-column:2;margin:0 0 6px;color:var(--ink);font-size:17.5px;font-weight:800;letter-spacing:-.025em}
.k-steps p{grid-column:2;max-width:56ch;color:var(--muted);font-size:14.5px;line-height:1.6}
.k-need-ph{margin:0}
.k-need-ph img{display:block;width:100%;height:clamp(280px,31vw,380px);object-fit:cover;object-position:62% 52%;-webkit-mask-image:radial-gradient(70% 76% at 52% 50%,#000 30%,transparent 82%);mask-image:radial-gradient(70% 76% at 52% 50%,#000 30%,transparent 82%);animation:bSettle 1.8s var(--ease) both}
.k-back{margin-top:clamp(26px,3vw,38px);padding-left:clamp(18px,2vw,24px);border-left:3px solid var(--acc)}
.k-back p{max-width:64ch;color:var(--graphite);font-size:16.5px;line-height:1.65}
.k-back b{color:var(--ink);font-weight:800}
.k-real-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}

/* ---------- narrower screens ---------- */
@media (max-width:1099px){
  .k-desk{grid-template-columns:1fr;grid-template-areas:"read" "hint" "keys"}
  .k-hint{margin-top:16px!important;margin-bottom:6px}
}
@media (max-width:1099px){
  .k-rail{display:flex;gap:16px;overflow-x:auto}
  .td-pick{flex:0 0 132px}
}
@media (max-width:900px){
  .td-tool{grid-template-columns:1fr;gap:26px}
  .td-in{padding-right:0}
  .td-out{margin-left:calc(var(--pad) * -1);padding-left:var(--pad);border-radius:0}
  .k-need{grid-template-columns:1fr}
  .k-need-ph{order:-1}
  .k-need-ph img{height:clamp(230px,42vw,320px)}
}
@media (max-width:760px){
  .k-desk{border-radius:24px}
  .k-lede{grid-template-columns:1fr;justify-items:center;text-align:left}
  .td-two{grid-template-columns:1fr}
  .k-figs dd{text-align:left}
}
@media (max-width:520px){
  .k-keys{grid-template-columns:1fr}
  .td-seg{width:100%}
  .td-seg button{flex:1}
  .td-table{font-size:13.5px}
  .k-steps li{grid-template-columns:1fr;row-gap:4px}
  .k-steps li b{grid-row:auto;grid-column:1}
  .k-steps h3,.k-steps p{grid-column:1}
}
@media (prefers-reduced-motion:reduce){
  .td-tool,.k-coin img,.k-need-ph img{animation:none}
  .k-read,.tdc-key,.td-pick,.k-ph img,.td-pick::after{transition:none}
}

/* A link to one calculator (for example tax-calculators.html#cis) lands with its heading clear of the top edge, and on smaller
   screens clear of the fixed top bar */
.td-tool h3[id]{scroll-margin-top:28px}
@media (max-width:1099px){ .td-tool h3[id]{scroll-margin-top:96px} }