/* Jamie's interactive tools (pension costs compared, 60% tax trap) in the site's look. Loaded on those pages only. */
.jt, .jt-article { --o-dark:#C4541F; --o-soft:#FDEBE1; --good:#1E7A4C; --good-soft:#E3F3EA; --bad:#B3261E; --bad-soft:#FBE7E5; }

/* the tool card */
.jt { margin:28px 0 56px; }
.jt-tool { background:#fff; border-radius:28px; box-shadow:0 1px 2px rgba(20,33,61,.04), 0 12px 32px rgba(20,33,61,.07); padding:36px; }
.jt-tool > h2 { font-family:var(--display); font-size:28px; letter-spacing:-.02em; margin:0 0 22px; }
.jt-tool h3 { font-family:var(--display); font-size:22px; letter-spacing:-.01em; margin:0 0 14px; }
.jt .label { display:block; font:600 15px var(--body); color:var(--ink); margin-bottom:8px; letter-spacing:0; text-transform:none; }
.jt .control label { display:block; font:600 15px var(--body); color:var(--ink); margin-bottom:8px; }
.jt .control + .control { margin-top:20px; }
.jt .hint { font-size:13px; color:var(--grey); margin:6px 0 0; }

/* money inputs */
.jt .money { position:relative; }
.jt .money span { position:absolute; left:14px; top:50%; transform:translateY(-50%); font:700 22px var(--display); color:var(--ink); }
.jt .money input { width:100%; box-sizing:border-box; font:700 22px var(--display); color:var(--ink); padding:12px 14px 12px 34px; border:1.5px solid var(--line); border-radius:12px; background:#fff; -webkit-appearance:none; appearance:none; }
.jt .money.sm span { font-size:17px; }
.jt .money.sm input { font-size:17px; padding:11px 12px 11px 30px; }
.jt .money input:focus, .jt .pname:focus { outline:none; border-color:var(--ink); }
.jt input[type=range] { width:100%; margin:16px 0 4px; accent-color:var(--orange); height:28px; }
.jt .range-ends { display:flex; justify-content:space-between; font-size:13px; color:var(--grey); }

/* chips and segmented buttons */
.jt .chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.jt .chip { font:600 15px var(--body); padding:8px 16px; border-radius:999px; border:0; background:var(--mist); color:var(--ink); cursor:pointer; box-shadow:none; }
.jt .chip:hover { background:var(--pale); }
.jt .chip[aria-pressed="true"] { background:var(--ink); color:#fff; }
.jt .seg { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); grid-template-columns:none; gap:4px; background:var(--mist); border-radius:14px; padding:4px; border:0; }
.jt .seg button, .jt .yn button { font:700 15px var(--body); color:var(--ink); background:transparent; border:0; border-radius:10px; padding:11px 8px; cursor:pointer; line-height:1.25; transition:background .2s, color .2s; }
.jt .seg button small { display:block; font:500 12.5px var(--body); color:var(--grey); margin-top:2px; }
.jt .seg button[aria-pressed="true"], .jt .yn button[aria-pressed="true"] { background:var(--ink); color:#fff; }
.jt .seg button[aria-pressed="true"] small { color:var(--soft); }
.jt button:focus-visible, .jt input:focus-visible { outline:3px solid var(--orange); outline-offset:2px; }
.jt .btn-ghost { font:700 15px var(--body); padding:10px 18px; border-radius:999px; border:1.5px solid var(--ink); background:#fff; color:var(--ink); cursor:pointer; margin-top:12px; }
.jt .btn-ghost:hover { background:var(--mist); }
.jt .btn-ghost:disabled { opacity:.5; cursor:default; }

/* pension costs: controls and ranked list */
.jt .controls { display:grid; grid-template-columns:1.3fr 1fr; gap:36px; align-items:start; }
.jt .amount-row .money { max-width:240px; }
.jt .headline { margin:30px 0 14px; font-size:19px; line-height:1.55; color:var(--ink); }
.jt .headline strong { font-weight:700; }
.jt .headline .save { display:inline-block; margin-top:6px; background:var(--good-soft); color:var(--good); font-weight:700; padding:3px 12px; border-radius:999px; font-size:15px; }
.jt .list-head, .jt .row-main { display:grid; grid-template-columns:52px minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) 40px; align-items:center; gap:14px; }
.jt .list-head { font:700 11px var(--body); text-transform:uppercase; letter-spacing:.08em; color:var(--grey); padding:0 16px 10px; border-bottom:1.5px solid var(--ink); }
.jt .list-head .sortable { background:none; border:0; font:inherit; color:inherit; text-transform:inherit; letter-spacing:inherit; cursor:pointer; padding:0; text-align:left; }
.jt .list-head .sortable[aria-pressed="true"] { color:var(--ink); }
.jt .rows { list-style:none; margin:0; padding:0; position:relative; }
.jt .row { border-bottom:1px solid var(--line); background:#fff; position:relative; }
.jt .row.top { background:linear-gradient(90deg, var(--good-soft), #fff 65%); }
.jt .row.na { background:var(--mist); color:var(--grey); }
.jt .row-main { padding:16px; cursor:pointer; }
.jt .rank { font:800 22px var(--display); color:var(--ink); text-align:center; white-space:nowrap; }
.jt .row.top .rank { color:var(--good); }
.jt .row.na .rank { font-size:15px; color:var(--soft); }
.jt .prov-name { font:700 18px var(--display); color:var(--ink); line-height:1.25; letter-spacing:-.01em; }
.jt .prov-sub { font-size:13px; color:var(--grey); }
.jt .badge { display:inline-block; font:700 11px var(--body); letter-spacing:.04em; text-transform:uppercase; padding:3px 8px; border-radius:999px; background:var(--good); color:#fff; margin-left:8px; vertical-align:3px; }
.jt .cost { font-variant-numeric:tabular-nums; }
.jt .cost .big { font:800 21px var(--display); color:var(--ink); line-height:1.2; white-space:nowrap; }
.jt .cost .small { font-size:13px; color:var(--grey); }
.jt .bar { display:block; max-width:160px; height:6px; border-radius:3px; background:var(--mist); margin-top:7px; overflow:hidden; }
.jt .bar i { display:block; height:100%; background:var(--orange); border-radius:3px; transition:width .35s ease; }
.jt .row.top .bar i { background:var(--good); }
.jt .na-text { grid-column:3 / 5; font-size:14px; }
.jt .toggle { width:34px; height:34px; border-radius:50%; border:0; background:var(--mist); color:var(--ink); font-size:15px; cursor:pointer; display:grid; place-items:center; transition:transform .25s; }
.jt .row[aria-expanded="true"] .toggle { transform:rotate(180deg); }
.jt .detail { display:none; padding:0 16px 18px 82px; font-size:15px; color:var(--grey); }
.jt .row[aria-expanded="true"] .detail { display:block; }
.jt .detail dl { display:grid; grid-template-columns:auto auto; justify-content:start; gap:3px 22px; margin:0 0 8px; font-variant-numeric:tabular-nums; }
.jt .detail dd { margin:0; color:var(--ink); font-weight:600; text-align:right; }
.jt .detail .total dt, .jt .detail .total dd { border-top:1px solid var(--line); padding-top:5px; font-weight:700; color:var(--ink); }
.jt .detail p { margin:6px 0; }
.jt .review-link { font-weight:700; color:var(--ink); }
.jt .soon { font-style:italic; }
.jt .table-foot { font-size:13px; color:var(--grey); margin:16px 0 0; }

/* 60% tax trap: form, people, results */
.jt .topbar { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:end; margin-bottom:24px; }
.jt .check { display:flex; gap:10px; align-items:flex-start; font-size:15px; line-height:1.45; cursor:pointer; }
.jt .check input { width:20px; height:20px; margin-top:1px; accent-color:var(--orange); flex:0 0 auto; }
.jt .grid2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:start; }
.jt .person { background:var(--mist); border-radius:20px; padding:20px; margin-bottom:14px; }
.jt .person-head { display:flex; align-items:center; gap:10px; margin:0 0 14px; }
.jt .pnum { flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--ink); color:#fff; font:800 14px var(--display); display:grid; place-items:center; }
.jt .pname { flex:1; font:700 17px var(--display); color:var(--ink); border:0; border-bottom:1.5px dashed var(--soft); background:transparent; padding:4px 2px; min-width:0; border-radius:0; }
.jt .remove { font:600 14px var(--body); background:none; border:0; color:var(--ink); cursor:pointer; text-decoration:underline; }
.jt .fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px 14px; }
.jt .fields .full { grid-column:1 / -1; }
.jt .fields label, .jt .fields .label { display:block; font:600 14px var(--body); color:var(--ink); margin-bottom:6px; line-height:1.3; }
.jt .fields .hint { margin-top:4px; }
.jt .yn { display:grid; grid-template-columns:1fr 1fr; gap:4px; background:#fff; border-radius:12px; padding:4px; max-width:220px; }
.jt .yn button { padding:8px; }
.jt fieldset.benefits { border:0; border-radius:14px; padding:12px 14px; margin:0; background:#fff; }
.jt fieldset.benefits legend { font:600 14px var(--body); color:var(--ink); padding:0; float:left; width:100%; margin-bottom:6px; }
.jt fieldset.benefits label { display:flex; gap:8px; font:500 14px var(--body); color:var(--ink); margin:6px 0; align-items:flex-start; clear:both; }
.jt fieldset.benefits input { width:18px; height:18px; margin-top:1px; accent-color:var(--orange); flex:0 0 auto; }
.jt details.adv { margin-top:14px; font-size:15px; }
.jt details.adv summary { cursor:pointer; font-weight:700; color:var(--ink); }
.jt details.adv .fields { margin-top:12px; }
.jt .calc-btn { display:block; width:100%; border:0; font:700 16px var(--body); cursor:pointer; text-align:center; padding:16px 18px; margin-top:6px; height:auto; }
.jt .results { position:sticky; top:110px; display:grid; gap:14px; }
.jt .result { background:var(--mist); border-radius:20px; padding:22px; }
.jt .who { margin:0 0 6px; font:700 11px var(--body); text-transform:uppercase; letter-spacing:.08em; color:var(--grey); }
.jt .verdict { font-size:18px; line-height:1.5; margin:0 0 14px; color:var(--ink); }
.jt .result.compact .verdict { font-size:16px; }
.jt .pill { display:inline-block; font:700 11px var(--body); letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:999px; margin-bottom:10px; }
.jt .pill.bad { background:var(--bad-soft); color:var(--bad); }
.jt .pill.ok { background:var(--good-soft); color:var(--good); }
.jt .pill.warn { background:var(--o-soft); color:var(--o-dark); }
.jt .meter { margin:6px 0 16px; }
.jt .meter .lbls { display:flex; justify-content:space-between; font-size:13px; color:var(--grey); }
.jt .meter .lbls strong { color:var(--ink); font-family:var(--display); }
.jt .meter .track { height:12px; background:var(--bad-soft); border-radius:6px; overflow:hidden; margin:5px 0; }
.jt .meter .fill { height:100%; background:var(--good); border-radius:6px; transition:width .3s ease; }
.jt .tiles { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin:0 0 16px; }
.jt .tile { background:#fff; border-radius:14px; padding:12px 14px; }
.jt .tile .k { font-size:12.5px; color:var(--grey); line-height:1.3; }
.jt .tile .v { font:800 22px var(--display); color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.2; margin-top:4px; white-space:nowrap; }
.jt .tile.hot .v { color:var(--bad); }
.jt dl.sums { display:grid; grid-template-columns:1fr auto; gap:5px 16px; margin:0; font-variant-numeric:tabular-nums; font-size:15px; }
.jt dl.sums dt { color:var(--grey); }
.jt dl.sums dd { margin:0; text-align:right; font-weight:600; color:var(--ink); white-space:nowrap; }
.jt dl.sums .total { border-top:1.5px solid var(--ink); padding-top:7px; font-weight:800; color:var(--ink); }
.jt .childcare-box h4 { margin:0 0 8px; color:var(--ink); font:700 18px var(--display); }
.jt .childcare-box p { margin:0 0 8px; font-size:15px; }
.jt .fix { margin-top:32px; border-top:1px solid var(--line); padding-top:28px; }
.jt .fix .grid2 { margin-top:18px; }
.jt table.ba { width:100%; border-collapse:separate; border-spacing:0; font-variant-numeric:tabular-nums; font-size:15px; background:#fff; border:1px solid var(--rule); border-radius:14px; overflow:hidden; }
.jt table.ba th, .jt table.ba td { padding:10px 14px; border-bottom:1px solid var(--rule); text-align:right; white-space:nowrap; }
.jt table.ba tbody tr:last-child td { border-bottom:0; }
.jt table.ba th:first-child, .jt table.ba td:first-child { text-align:left; white-space:normal; }
.jt table.ba thead th { background:var(--mist); color:var(--ink); font-size:12px; font-weight:700; }
.jt table.ba td.up { color:var(--good); font-weight:700; }
.jt .callout { background:var(--good-soft); border:0; border-radius:14px; padding:16px 18px; margin:14px 0 0; font-size:16px; line-height:1.5; }
.jt .callout strong { color:var(--good); }
.jt ul.notes { margin:18px 0 0; padding:0; list-style:none; }
.jt ul.notes li { background:var(--mist); border-left:3px solid var(--orange); border-radius:0 12px 12px 0; padding:11px 16px; margin:0 0 8px; font-size:14px; line-height:1.5; color:var(--grey); }
.jt ul.notes li.bad { border-left-color:var(--bad); }
.jt ul.notes li strong { color:var(--ink); }
.jt .chart-wrap { margin-top:32px; border-top:1px solid var(--line); padding-top:28px; }
.jt .chart-wrap svg { width:100%; height:auto; display:block; font-family:var(--body); }
.jt .chart-cap { font-size:13px; color:var(--grey); margin:8px 0 0; }

/* adviser card (navy, like the site's questionnaire cards) */
a.adviser { display:grid; grid-template-columns:150px 1fr; gap:26px; align-items:center; margin:32px 0 0; padding:28px; border-radius:24px; background:var(--ink); color:#fff; text-decoration:none; }
a.adviser:hover { background:#1E2D4F; color:#fff; }
a.adviser svg { width:100%; height:auto; display:block; }
a.adviser h3 { color:#fff; margin:0 0 8px; font:700 23px var(--display); letter-spacing:-.01em; }
a.adviser p { margin:0 0 16px; color:var(--soft); font-size:16px; line-height:1.55; }
a.adviser .go { display:inline-block; background:var(--orange); color:#fff; font-weight:700; padding:12px 22px; border-radius:999px; }
a.adviser small { display:block; margin-top:10px; color:var(--soft); font-size:13px; opacity:.8; }
.prose a.adviser { margin:36px 0; }
.prose a.adviser h3 { margin-top:0; }

/* article extras */
.jt-key { margin-top:28px; }
.jt-article .tbl-wrap { margin:18px 0 8px; }
.jt-article table caption { caption-side:top; text-align:left; font:700 15px var(--display); color:var(--ink); padding:0 0 10px; }
.jt-article .tbl-wrap > table { table-layout:auto; font-variant-numeric:tabular-nums; }
.jt-article td.num, .jt-article th.num { text-align:right; white-space:nowrap; }
.jt-article td small { color:var(--grey); }
.jt-split tbody tr:first-child td { background:var(--good-soft); }
.jt-article tr.na td { color:var(--grey); background:var(--mist); }
.jt-article tr.hl td { background:#FFF6DA; }
.jt-article .src { font-size:13px; color:var(--grey); }
.jt-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; margin:18px 0 8px; }
.jt-split .tbl-wrap { margin:0; }
.jt-cards { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin:20px 0; }
.jt-card { background:var(--mist); border-radius:20px; padding:22px; }
.jt-card h3 { margin:0 0 8px !important; font-size:19px; }
.jt-card p { margin:0; font-size:15px; line-height:1.55; }
.jt-more { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin:40px 0; }
.jt-more .cta-card { display:flex; flex-direction:column; text-decoration:none; color:var(--ink); padding:24px; }
.jt-more .cta-card h3 { font:700 19px var(--display); margin:0 0 8px; }
.jt-more .cta-card p { flex:1; margin:0 0 14px; font-size:15px; color:var(--grey); }
.jt-more .cta-card span { font-weight:700; color:var(--orange); }

@media (max-width:1000px) {
  .jt .controls, .jt .grid2, .jt .topbar { grid-template-columns:1fr; }
  .jt .results { position:static; }
  .jt-more, .jt-cards { grid-template-columns:1fr; }
}
@media (max-width:820px) {
  .jt-split { grid-template-columns:1fr; }
  a.adviser { grid-template-columns:1fr; }
  a.adviser svg { max-width:160px; }
}
@media (max-width:640px) {
  .jt-tool { padding:20px 16px; border-radius:22px; }
  .jt-tool > h2 { font-size:23px; }
  .jt .amount-row .money { max-width:none; }
  .jt .list-head { display:none; }
  .jt .row-main { grid-template-columns:36px minmax(0,1fr) 34px; grid-template-areas:"rank name tog" "rank yr tog" "rank first tog"; row-gap:6px; gap:6px 10px; padding:14px 10px; }
  .jt .rank { grid-area:rank; align-self:start; padding-top:2px; font-size:19px; }
  .jt .prov { grid-area:name; }
  .jt .cost.yr { grid-area:yr; }
  .jt .cost.first { grid-area:first; }
  .jt .toggle { grid-area:tog; align-self:start; }
  .jt .na-text { grid-area:yr; }
  .jt .cost .lbl { display:inline; font-size:12px; color:var(--grey); font-weight:600; margin-right:6px; }
  .jt .cost .big { font-size:18px; display:inline; }
  .jt .cost .bar { display:none; }
  .jt .detail { padding-left:10px; }
  .jt .fields { grid-template-columns:1fr; }
  .jt .seg button { font-size:14px; padding:10px 4px; }
  .jt .tiles { grid-template-columns:1fr 1fr; }
  .jt .tiles .tile:last-child { grid-column:1 / -1; }
  .jt .person, .jt .result { padding:16px; }
}
@media (min-width:641px) { .jt .cost .lbl { display:none; } }
@media (prefers-reduced-motion:reduce) { .jt .bar i, .jt .meter .fill, .jt .toggle { transition:none; } }
.jt .row-main br { display:none; }
.jt .prov-name, .jt .prov-sub, .jt .cost .small { display:block; }
.jt .cost .big { display:block; }
.jt .row-main { line-height:1.35; }
@media (max-width:640px) { .jt .cost .big { display:inline; } .jt .cost .small { display:inline; margin-left:6px; } }
/* undo site styles that share these class names */
.jt .verdict { background:none; color:var(--ink); border-radius:0; padding:0; margin:0 0 14px; }
.jt .results { margin-top:0; gap:14px; }
.jt .bar { display:block; grid-template-columns:none; }
.jt .bar i::after { content:none; }
.jt .badge { background:var(--good); color:#fff; }
/* byline inside the navy page head */
.page-head .byline { border-color:rgba(255,255,255,.14); color:var(--soft); margin:26px 0 0; }
.page-head .byline b, .page-head .byline a { color:#fff; text-decoration:none; }
/* "in 30 seconds" sits on white so it doesn't merge with the navy header */
.in-short.jt-key { background:#fff; color:var(--ink); border-radius:28px; padding:30px 36px; margin:28px 0 0; box-shadow:0 1px 2px rgba(20,33,61,.04), 0 12px 32px rgba(20,33,61,.07); }
.in-short.jt-key .label { color:var(--orange); }
.in-short.jt-key li { color:var(--ink); }
.in-short.jt-key li::before { background:var(--orange); }
.jt .grid2 > *, .jt .results > *, .jt .fields > * { min-width:0; }
@media (max-width:640px) { .in-short.jt-key { padding:22px 20px; border-radius:22px; } }
/* the article column is too narrow for two tables side by side, so they stack */
.jt-split { grid-template-columns:1fr; gap:28px; }
.jt-article .tbl-wrap > table { table-layout:auto !important; width:100%; }
.jt-split th:first-child, .jt-split td:first-child { width:52px; }
.jt-split td.num, .jt-split th.num { width:1%; }
.jt-article table.assume-table td:first-child { width:24%; }
.jt-article .tbl-wrap > table th { white-space:normal; letter-spacing:.04em; }
.jt-article .tbl-wrap > table th, .jt-article .tbl-wrap > table td { padding:11px 12px; }