/* What’s Left: the mock-up’s design system (light only), plus the live pieces and the phone layout */
html{color-scheme:light;background:#F1E6CF}
body{margin:0;background:#F1E6CF;color:#0D1C36;font-family:"Barlow","Helvetica Neue",sans-serif;font-size:16px;line-height:1.5}
a{color:#1F5AA6}a:hover{color:#174785}
*{box-sizing:border-box}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.mast{border-top:5px solid #A8452B;border-bottom:1px solid #0D1C36}
.mastin{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;padding-top:18px;padding-bottom:14px}
.logo{font-family:"Barlow Semi Condensed","Arial Narrow",sans-serif;font-weight:700;font-size:28px;letter-spacing:-.01em;color:#0D1C36;text-decoration:none}
.logo span{color:#A8452B}
.nav{display:flex;flex-wrap:wrap;gap:4px 22px;font-size:14px;font-weight:500}
.nav a{color:#0D1C36;text-decoration:none;padding:10px 0}
.nav a:hover{color:#A8452B}
.kicker{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#A8452B;margin:0 0 10px}
h1{font-family:"Barlow Semi Condensed","Arial Narrow",sans-serif;font-weight:700;font-size:52px;line-height:1.06;letter-spacing:-.015em;margin:0 0 18px;text-wrap:balance}
.stand{font-family:"Barlow Semi Condensed","Arial Narrow",sans-serif;font-size:21px;line-height:1.45;color:#45362A;margin:0;max-width:34em}
.panel{background:#FAF4E6;border:1px solid #CDB892}
.fs{border:0;padding:0;margin:0 0 26px}
.legend{font-family:"Barlow Semi Condensed","Arial Narrow",sans-serif;font-size:22px;font-weight:600;padding:0;margin:0 0 4px}
.hint{font-size:14px;color:#6B5640;margin:0 0 16px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label,.lab{font-size:13px;font-weight:600;letter-spacing:.02em;color:#45362A}
select,.input{font:500 16px "Barlow",sans-serif;color:#0D1C36;background:#FAF4E6;border:1px solid #8A6E4E;border-radius:2px;height:48px;padding:0 12px;width:100%}
.seg{display:flex;flex-wrap:wrap;gap:0}
.seg label{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border:1px solid #8A6E4E;margin-left:-1px;font-size:15px;font-weight:500;cursor:pointer;background:#FAF4E6}
.seg label.on{background:#0D1C36;color:#FAF4E6;border-color:#0D1C36}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.rng{-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;background:transparent;cursor:pointer}
.rng::-webkit-slider-runnable-track{height:4px;background:linear-gradient(90deg,#0D1C36 0 var(--p,50%),#CDB892 var(--p,50%) 100%)}
.rng::-moz-range-track{height:4px;background:#CDB892}
.rng::-moz-range-progress{height:4px;background:#0D1C36}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-8px;border-radius:50%;background:#FAF4E6;border:2px solid #0D1C36}
.rng::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#FAF4E6;border:2px solid #0D1C36}
.rngscale{font-size:13px!important;display:flex;justify-content:space-between;font-size:12px;color:#6B5640;margin-top:-4px}
.lnk{display:block;font-size:12px;font-weight:600;color:#45362A;margin-top:2px}
.lnk::before{content:"↳ ";color:#6B5640}
.emflow{font-size:14px;line-height:1.5;color:#45362A;padding:12px 14px;background:#F1E6CF;border-left:3px solid #0D1C36}
.payout{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:10px 12px;background:#F1E6CF;border:1px solid #E2D3B3;font-size:13px;color:#6B5640}
.payout b{font-family:"Barlow Semi Condensed","Arial Narrow",sans-serif;font-size:20px;color:#0D1C36}
.opt{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid #CDB892;cursor:pointer;background:#FAF4E6}
.opt.on{border-color:#0D1C36;box-shadow:inset 0 0 0 1px #0D1C36}
.opt input{margin:3px 0 0;width:18px;height:18px;accent-color:#0D1C36}
.opt b{display:block;font-size:15px;font-weight:600}
.opt span{display:block;font-size:13px;color:#6B5640}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;background:#A8452B;color:#FAF4E6;border:0;font:600 17px "Barlow",sans-serif;cursor:pointer;text-decoration:none}
.btn:hover{background:#86331E;color:#FAF4E6}
.rule{height:1px;background:#CDB892;border:0;margin:0}
.eq{display:flex;flex-direction:column;gap:0}
.eqrow{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid #E2D3B3;font-size:15px}
.eqrow>span,.eqrow>b{white-space:nowrap}
.eqrow i{font-style:normal;font-weight:700;width:18px;display:inline-block;color:#6B5640}
.eqrow small{font-size:13px;color:#6B5640;text-align:right}
.bars{display:flex;flex-direction:column;gap:7px}
.bar{display:grid;grid-template-columns:150px minmax(0,1fr) 64px;align-items:center;gap:10px;font-size:14px}
.bar .tr{height:16px;position:relative}
.bar .f{height:16px;background:#C9B79C;border-radius:0 2px 2px 0}
.bar.me .f{background:#1F5AA6}
.bar.me{font-weight:700}
.bar .v{font-variant-numeric:tabular-nums;text-align:right}
.src{font-size:12px;color:#6B5640;margin:12px 0 0}
.ttl{font-family:"Barlow Semi Condensed","Arial Narrow",sans-serif;font-size:22px;font-weight:700;margin:0 0 2px;line-height:1.2}
.sub{font-size:14px;color:#6B5640;margin:0 0 14px}
.tag{width:44px;height:4px;background:#A8452B;margin:0 0 12px}
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:24px}
.trust h3{font-family:"Barlow Semi Condensed","Arial Narrow",sans-serif;font-size:19px;margin:0 0 6px}
.trust p{margin:0;font-size:15px;color:#45362A}
.tl{display:grid;grid-template-columns:minmax(0,1.4fr) 82px 82px minmax(60px,1fr);gap:10px;align-items:baseline;padding:11px 0;border-bottom:1px solid #E2D3B3;font-size:14px}
.tl b{font-family:"Barlow Semi Condensed","Arial Narrow",sans-serif;font-size:21px;font-weight:700;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tl em{font-style:normal;font-size:13px;font-weight:600;text-align:right}
.tl em span{white-space:nowrap}
.tl .up{color:#45362A}.tl .dn{color:#86331E}
.tlh{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid #0D1C36;padding-top:0}
.tlh span{text-align:right}.tlh span:first-child{text-align:left}
.tlt{border-bottom:0;border-top:2px solid #0D1C36;font-weight:700}
.tlt b{font-size:24px}
.snav{position:sticky;top:0;z-index:5;background:#F1E6CF;border-top:1px solid #0D1C36;border-bottom:1px solid #CDB892;display:flex;flex-wrap:wrap;align-items:center;gap:0 28px;padding:0 2px;margin:-24px 0}
.snav b{font-family:"Barlow Semi Condensed","Arial Narrow",sans-serif;font-size:17px;margin-right:6px}
.snav a{color:#0D1C36;text-decoration:none;font-size:14px;font-weight:600;padding:16px 0 13px;border-bottom:3px solid transparent}
.snav a.on{border-bottom-color:#A8452B}
.snav a:hover{color:#A8452B}
.dive{display:flex;flex-wrap:wrap;gap:28px 40px;align-items:flex-start;scroll-margin-top:60px}
.divetxt{flex:1 1 320px;min-width:0;max-width:420px;padding-top:6px}
.divechart{flex:999 1 620px;min-width:0;padding:28px}
.num{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#A8452B;margin:0 0 10px}
.h2{font-family:"Barlow Semi Condensed","Arial Narrow",sans-serif;font-weight:700;font-size:34px;line-height:1.12;letter-spacing:-.01em;margin:0 0 14px;text-wrap:balance}
.body{font-family:"Barlow Semi Condensed","Arial Narrow",sans-serif;font-size:18px;line-height:1.5;color:#45362A;margin:0 0 22px}
.duo{display:flex;flex-direction:column;border-top:2px solid #0D1C36}
.duo>div{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:18px;align-items:baseline;padding:12px 0;border-bottom:1px solid #E2D3B3}
.duo b{font-family:"Barlow Semi Condensed","Arial Narrow",sans-serif;font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;min-width:84px}
.duo.sm{margin-top:12px}.duo.sm b{font-size:22px;min-width:64px}
.key{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#45362A;margin:14px 0 0}
.key i{display:inline-block;width:18px;height:3px}
.tabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid #CDB892;margin:0 0 18px}
.tabs button{font:600 14px "Barlow",sans-serif;color:#6B5640;background:none;border:0;border-bottom:3px solid transparent;padding:10px 0 9px;margin:0 22px -1px 0;min-height:44px;cursor:pointer}
.tabs button.on{color:#0D1C36;border-bottom-color:#0D1C36}
.tabset>input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.tabs label{font:600 14px "Barlow",sans-serif;color:#6B5640;border-bottom:3px solid transparent;padding:10px 0 9px;margin:0 22px -1px 0;min-height:44px;cursor:pointer;display:inline-flex;align-items:center;box-sizing:border-box}
.pane{display:none}
.tabset>input:nth-of-type(1):checked~.panes>.pane:nth-of-type(1),.tabset>input:nth-of-type(2):checked~.panes>.pane:nth-of-type(2),.tabset>input:nth-of-type(3):checked~.panes>.pane:nth-of-type(3){display:block}
.tabset>input:nth-of-type(1):checked~.tabs>label:nth-of-type(1),.tabset>input:nth-of-type(2):checked~.tabs>label:nth-of-type(2),.tabset>input:nth-of-type(3):checked~.tabs>label:nth-of-type(3){color:#0D1C36;border-bottom-color:#0D1C36}
.tabset>input:focus-visible~.tabs{outline:2px solid #1F5AA6;outline-offset:2px}
.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px}
.mini{padding:24px;display:flex;flex-direction:column;scroll-margin-top:60px}
.mini .ttl{font-size:20px}
.morerow{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:16px 0 0;padding-top:14px;border-top:1px solid #E2D3B3}
.morerow .more{margin:0;padding:0;font-size:15px}
.moredesc{font-size:13px;color:#6B5640}
.more{font-size:14px;font-weight:600;margin-top:auto;padding-top:14px}
.infer{margin:-4px 0 0;padding:10px 12px;background:#F1E6CF;border-left:3px solid #CDB892;font-size:13px;line-height:1.45;color:#45362A}
.kids{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;align-items:center}
.kids .kid{font-size:14px;font-weight:600}
.find{font-family:"Barlow Semi Condensed","Arial Narrow",sans-serif;font-size:19px;line-height:1.4;color:#0D1C36;margin:2px 0 6px}
.find b.b{color:#174785}.find b.o{color:#AD3F1D}
.foot{border-top:1px solid #0D1C36;padding-top:20px;padding-bottom:40px;font-size:13px;color:#6B5640;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
@media (max-width:640px){h1{font-size:36px}.stand{font-size:18px}.bar{grid-template-columns:110px minmax(0,1fr) 56px}}

/* the full breakdown */
.topnav{position:sticky;top:0;z-index:5;background:#F1E6CF;border-bottom:1px solid #CDB892;display:flex;flex-wrap:nowrap;overflow-x:auto;gap:0 28px;scrollbar-width:none}
.topnav::-webkit-scrollbar{display:none}
.topnav a{flex:none;color:#6B5640;text-decoration:none;font-size:15px;font-weight:600;padding:16px 0 13px;border-bottom:3px solid transparent}
.topnav a:hover{color:#0D1C36}
.topnav a.on{color:#0D1C36;border-bottom-color:#A8452B}
.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));gap:24px;margin-top:24px;align-items:start}
.grid2>.wide{grid-column:1/-1}
.grid2>.wide svg{max-width:none;width:100%}
.inh{font:700 26px "Barlow Semi Condensed","Arial Narrow",sans-serif;margin:48px 0 4px;padding-top:24px;border-top:1px solid #0D1C36}
.inh2{font:700 22px "Barlow Semi Condensed","Arial Narrow",sans-serif;margin:40px 0 4px}
.insub{max-width:46em;margin:0;color:#6B5640;font-size:15px}
.narr{max-width:46em}.narr p{font:18px/1.55 "Barlow Semi Condensed","Arial Narrow",sans-serif;color:#0D1C36;margin:12px 0 0}
.grid2>.panel:not(.wide) .cd svg{max-width:560px}
.cm{display:none}
.bdnote{margin:48px 0 -32px;font-size:13px;color:#6B5640}

/* live pieces */
.chart{min-height:200px;position:relative}
.pbars{display:flex;flex-direction:column;gap:14px}
.pbrow{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:4px 14px;align-items:center;font-size:14px}
.pbl{grid-row:span 2;font-weight:600;color:#45362A}
.pbb{display:flex;align-items:center;gap:8px;min-width:0}
.pbb i{display:block;height:14px;border-radius:0 2px 2px 0;min-width:1px;flex:none}
.pbb b{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pbs{display:flex;min-width:1px;flex:none}.pbs i{display:block;height:14px;border-radius:0;min-width:0}
.pbk{margin:8px 0 0;font-size:12px;gap:4px 14px;flex-wrap:wrap}.pbk span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.pbk i{width:14px;height:9px}
.mlegend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;font-size:13px;color:#45362A;margin:12px 0 0;padding:0;list-style:none}
.mlegend i{display:inline-block;width:10px;height:10px;margin-right:7px;vertical-align:-1px}
.busy{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:20;background:#0D1C36;color:#FAF4E6;font-size:13px;font-weight:600;padding:9px 14px;border-radius:2px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.err{background:#FAF4E6;border:1px solid #A8452B;color:#86331E;padding:14px 16px;font-size:14px}
select:disabled,.rng:disabled{background:#EEE1C4;color:#8A6E4E;cursor:default}
.rng:disabled{opacity:.45;background:transparent}
.seg label.dis{color:#8A6E4E;cursor:default;background:#EEE1C4}
.seg label.on.dis{background:#8A6E4E;color:#FAF4E6;border-color:#8A6E4E}
.seg input:focus-visible+span,.seg label:focus-within{outline:2px solid #1F5AA6;outline-offset:1px}
details>summary::-webkit-details-marker{display:none}
details:not([open])>summary svg{transform:rotate(180deg)}
.note12{font-size:12px;color:#6B5640}
.view[hidden]{display:none!important}
.nav a.on{color:#A8452B}
.hidden-dup{display:none}

/* phone layout */
@media (max-width:640px){
.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.mastin{padding-top:10px;padding-bottom:10px;gap:4px 16px}
.logo{font-size:23px}
.nav{gap:0 16px;font-size:13px}
h1{font-size:34px;line-height:1.08;margin-bottom:14px}
.stand{font-size:18px}
.panel{border-left:0;border-right:0;margin-left:-16px;margin-right:-16px}
.ttl{font-size:21px}
.find{font-size:17px}
.sub{font-size:13px}
details summary{padding:16px!important}
details summary>span>span{display:block;margin:2px 0 0!important}
.pad{padding-left:16px!important;padding-right:16px!important}
.snav{flex-wrap:nowrap;overflow-x:auto;gap:0 22px;margin:-16px -16px;padding:0 16px;scrollbar-width:none;white-space:nowrap}
.snav::-webkit-scrollbar{display:none}
.snav b{display:none}
.snav a{flex:none;padding:14px 0 11px}
.divechart{padding:20px 16px}
.h2{font-size:28px}
.body{font-size:17px}
.duo>div{gap:12px}.duo b{font-size:24px;min-width:72px}
.tl{grid-template-columns:minmax(0,1fr) 86px 86px;gap:4px 10px;padding:10px 0}
.tl span:first-child{grid-column:1/-1;font-weight:600}
.tl b{font-size:21px;grid-column:2}
.tl b+b{grid-column:3}
.tl em{grid-column:1;grid-row:2;text-align:left;align-self:center}
.tlh{grid-template-columns:minmax(0,1fr) 78px 78px}
.tlh span:first-child{display:none}
.tlh span:nth-child(2){grid-column:2}.tlh span:nth-child(3){grid-column:3}
.tlt b{font-size:23px}
.foot{flex-direction:column}
.payout b{white-space:nowrap;font-size:18px}
.cd{display:none}.cm{display:block}
.grid2>.panel{padding:20px 16px!important}
.topnav{margin:0 -16px;padding:0 16px}
.pbrow{grid-template-columns:minmax(0,1fr)}
.pbl{grid-row:auto}
main.wrap{padding-top:28px!important;gap:44px!important}
}

/* hover readout on charts */
.tip{position:absolute;z-index:3;pointer-events:none;background:#FAF4E6;border:1px solid #CDB892;box-shadow:0 2px 10px rgba(28,27,25,.14);padding:8px 10px;font-size:13px;line-height:1.4;color:#0D1C36;min-width:170px;white-space:nowrap}
.tip b.t{display:block;font-weight:700;margin:0 0 4px}
.tip div{display:flex;justify-content:space-between;gap:16px}
.tip div.tot{border-top:1px solid #E2D3B3;margin-top:3px;padding-top:3px;font-weight:700}
.tip i{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;vertical-align:0}
.tip .v{font-variant-numeric:tabular-nums;font-weight:600}

/* where every £1 goes */
.pp{display:flex;flex-direction:column;gap:18px;margin-top:4px}
.pwho{display:flex;justify-content:space-between;gap:12px;margin:0 0 6px;font-size:15px;font-weight:700}
.pwho span+span{font-weight:400;color:#6B5640;font-variant-numeric:tabular-nums}
.pbar{position:relative;display:flex;height:58px}
.pseg{display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden;white-space:nowrap;font-weight:700;font-size:15px;color:#FAF4E6;text-decoration:none;border-right:1px solid #FAF4E6;font-variant-numeric:tabular-nums}
.pseg.lt{color:#0D1C36}
a.pseg:hover,a.pseg:focus-visible{filter:brightness(.9);color:#FAF4E6}
a.pseg.lt:hover,a.pseg.lt:focus-visible{color:#0D1C36}
.phatch{position:absolute;top:100%;height:10px;margin-top:3px;background:repeating-linear-gradient(135deg,#A8452B 0 3px,transparent 3px 6px);border:1px solid #A8452B;box-sizing:border-box;pointer-events:none}
.pone{position:absolute;top:-6px;bottom:-16px;width:0;border-left:2px solid #0D1C36}
.pshort{position:absolute;top:100%;margin-top:16px;font-style:normal;font-weight:700;font-size:14px;color:#A8452B;white-space:nowrap;transform:translateX(-100%);padding-right:6px}
.prow:has(.pshort){padding-bottom:34px}
.plegend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:#45362A}
.plegend a,.plegend span{color:#45362A;text-decoration:none;display:inline-flex;align-items:center}
.plegend a:hover{color:#A8452B;text-decoration:underline}
.plegend i{display:inline-block;width:10px;height:10px;margin-right:6px}
.plegend i.ishort{background:repeating-linear-gradient(135deg,#A8452B 0 2px,transparent 2px 4px);border:1px solid #A8452B;box-sizing:border-box}
.pnotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px 24px;margin-top:18px;border-top:1px solid #E2D3B3;padding-top:14px;font-size:14px;color:#45362A}
.pnotes b{display:block;font-family:"Barlow Semi Condensed","Arial Narrow",sans-serif;font-size:22px;color:#0D1C36}

/* the three biggest changes */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px}
.card{padding:24px;display:flex;flex-direction:column;min-width:0;scroll-margin-top:60px}
.card .h3{font-family:"Barlow Semi Condensed","Arial Narrow",sans-serif;font-weight:700;font-size:24px;line-height:1.15;margin:0 0 10px;text-wrap:balance}
.card .body{font-size:16px;margin:0 0 14px}
.card .sub{margin:0 0 6px}
.card .key{margin:8px 0 0}
.card .cta{margin-top:auto;padding-top:16px}
.card .cta a{display:block;padding-top:14px;border-top:1px solid #E2D3B3;font-weight:700;font-size:16px}
.fullbd{padding:28px;display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;justify-content:space-between}

/* under the first chart: the two-income line and the Share button */
.two{font-family:"Barlow Semi Condensed","Arial Narrow",sans-serif;font-size:17px;line-height:1.45;color:#45362A;margin:12px 0 0;max-width:46em}
.two a{font-family:"Barlow",sans-serif;font-size:15px;font-weight:600;white-space:nowrap}
.sharerow{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:16px;padding-top:16px;border-top:1px solid #E2D3B3}
.btn.sm{min-height:44px;padding:0 20px;font-size:15px}
.sharemsg{font-size:14px;color:#45362A;min-width:0;flex:1 1 260px}
.sharemsg input{display:block;width:100%;margin-top:6px;font:14px "Barlow",sans-serif;padding:8px;border:1px solid #CDB892;background:#F5EDDB;color:#0D1C36}

@media (max-width:640px){
.pbar{height:48px}.pseg{font-size:13px}
.card{padding:20px 16px}
.card .h3{font-size:22px}
.fullbd{padding:22px 16px}
.fullbd .btn{width:100%;justify-content:center}
}
.find b,.two b,.body b{white-space:nowrap}

/* hover on where every £1 goes */
.pp.hl .pseg{opacity:.28;transition:opacity .12s}
.pp.hl .pseg.on{opacity:1}
@media (prefers-reduced-motion:reduce){.pp.hl .pseg{transition:none}}
.ptip{min-width:220px;max-width:300px;z-index:4}
.ptip i{border-radius:0}
.ptip .v em{font-style:normal;font-weight:400;color:#6B5640}
.pparts{width:100%;border-collapse:collapse;margin-top:6px;border-top:1px solid #E2D3B3;font-size:12px}
.pparts th{font-weight:700;text-align:right;padding:4px 0 2px 10px}
.pparts td{padding:1px 0;color:#45362A}
.pparts td+td{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;padding-left:10px;color:#0D1C36}
.pdesc{margin:6px 0 0;padding-top:6px;border-top:1px solid #E2D3B3;font-size:12px;color:#45362A}
.pgo{margin:6px 0 0;font-size:12px;font-weight:700;color:#A8452B}
.pkey{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pbh{margin:6px 0 -4px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#6B5640}
.pbh:first-child{margin-top:0}

/* A year in the life */
.yrwho{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.yrcard{background:#FAF4E6;border:1px solid #CDB892;border-top:4px solid var(--c);padding:22px 24px;min-width:0}
.yrcard h2{font-family:"Barlow Semi Condensed","Arial Narrow",sans-serif;font-size:22px;margin:0;color:var(--c)}
.yrcard .yy{font-size:14px;color:#6B5640;margin:2px 0 14px}
.yrleft{margin:0;display:flex;flex-direction:column}
.yrleft span{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#45362A}
.yrleft b{font-family:"Barlow Semi Condensed","Arial Narrow",sans-serif;font-size:48px;line-height:1.05;font-weight:700;color:var(--c);font-variant-numeric:tabular-nums}
.yrleft.neg b,.yrt b.neg{color:#86331E}
.yrleft em{font-style:normal;font-size:14px;font-weight:600;color:#86331E;margin-top:2px}
.yrvs{margin:4px 0 0;font-size:15px;font-weight:600;color:#45362A}
.yrvs.dn,.dn{color:#86331E}.yrvs.gd,.gd{color:#2F6E5A}
.yrcard ul{min-height:12.4em;margin:16px 0 0;padding:14px 0 0;border-top:1px solid #E2D3B3;list-style:none;display:flex;flex-direction:column;gap:7px;font-size:15px;color:#45362A}
.yrcard li{padding-left:16px;position:relative}
.yrcard li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;background:var(--c)}
.yrshort{display:none;margin:8px 0 0;font-size:13px;color:#45362A}
.yrctl{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:#F1E6CF;border-top:1px solid #0D1C36;border-bottom:1px solid #0D1C36;padding:10px 0;display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;justify-content:space-between}
.yrage{display:flex;align-items:center;gap:12px;flex:1 1 420px;min-width:0}
.yrage .lab{white-space:nowrap;min-width:72px}
.yrbig{font-family:"Barlow Semi Condensed","Arial Narrow",sans-serif;font-size:28px;font-weight:700;font-variant-numeric:tabular-nums}
.yrtrack{flex:1;min-width:0;position:relative;padding-bottom:16px}
.yrticks{position:absolute;left:10px;right:10px;bottom:0;height:14px}
.yrticks i{position:absolute;width:9px;height:9px;margin-left:-4px;border-radius:50%;border:2px solid #F1E6CF;cursor:pointer;padding:0}
.yrticks i:hover{transform:scale(1.3)}
.yrhint{margin:-14px 0 0;font-size:12px;color:#6B5640}
.yrstep{flex:none;width:40px;height:40px;border:1px solid #8A6E4E;background:#FAF4E6;color:#0D1C36;font:600 22px/1 "Barlow",sans-serif;cursor:pointer;border-radius:2px}
.yrstep:hover{border-color:#0D1C36}
.yrstep:disabled{opacity:.4;cursor:default}
.yrctlr{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.yrmini{display:flex;gap:16px;font-size:13px;font-weight:600;width:300px;white-space:nowrap}
.yrmini>span{flex:1 1 0;min-width:0}
.yrmini b{font-family:"Barlow Semi Condensed","Arial Narrow",sans-serif;font-size:18px;font-variant-numeric:tabular-nums}
.yrctl .seg label{min-height:40px;padding:0 14px;font-size:14px}
.yrleg{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:#45362A;margin:0 0 16px}
.yrleg span{display:inline-flex;align-items:center;gap:6px}
.yrleg i{width:12px;height:12px;display:inline-block}
.yrleg i.sh,.yrsh{background:repeating-linear-gradient(135deg,#A8452B 0 3px,#F0D2C6 3px 7px)}
.yrbar{margin:0 0 18px}
.yrbl{margin:0 0 6px;font-size:14px;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.yrbl b{font-family:"Barlow Semi Condensed","Arial Narrow",sans-serif;font-size:18px}
.yrbl em{font-style:normal;font-weight:600}
.yrbt{position:relative;display:flex;height:40px;background:#EEE1C4}
.yrbt span{height:100%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#0D1C36;overflow:hidden;white-space:nowrap;box-shadow:inset -1px 0 0 #FAF4E6}
.yrbt span.lt{color:#FAF4E6}
.yrin{position:absolute;top:-6px;bottom:-6px;width:2px;margin-left:-1px;background:#0D1C36}
.yrsh{position:absolute;top:0;bottom:0;opacity:.85}
.yrtab{max-width:780px}
.yrt{display:grid;grid-template-columns:minmax(0,1fr) 110px 110px 140px;gap:2px 16px;align-items:baseline;padding:9px 0;border-bottom:1px solid #E2D3B3;font-size:15px;width:100%;text-align:left;background:none;border-left:0;border-right:0;border-top:0;font-family:inherit;color:inherit}
.yrt b{font-family:"Barlow Semi Condensed","Arial Narrow",sans-serif;font-size:19px;font-weight:600;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.yrt em{font-style:normal;font-size:13px;font-weight:600;text-align:right;white-space:nowrap;color:#6B5640}
.yrt em.dn{color:#86331E}.yrt em.gd{color:#2F6E5A}
.yrt small{display:block;font-size:12px;color:#6B5640;margin-top:1px}
.yrh{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid #0D1C36;padding-top:20px}
.yrh span{text-align:right}.yrh span:first-child{text-align:left}
.yrg{cursor:pointer;font-weight:600}
.yrg:hover{background:#F5EDDB}
.yrg span i{display:inline-block;width:10px;height:10px;margin-right:8px}
.yrg u{text-decoration:none;display:inline-block;margin-left:8px;width:18px;height:18px;line-height:16px;text-align:center;border:1px solid #8A6E4E;font-size:13px;color:#45362A}
.yrc>span{padding-left:18px}
.yrc{font-size:14px}.yrc b{font-size:17px;font-weight:500}
.yrs{border-bottom:1px solid #0D1C36;font-weight:700}
.yrs b{font-weight:700}
.yrs em,.yrl em{font-weight:700;color:#0D1C36}
.yrs em{font-size:14px}.yrl em{font-size:18px}
.yrl{border:0;margin-top:10px;padding:14px 12px;background:#EEE1C4;font-weight:700;width:calc(100% + 24px);margin-left:-12px}
.yrl b{font-size:26px;font-weight:700}
@media (max-width:640px){
.yrwho{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.yrcard{padding:14px 12px}
.yrcard h2{font-size:17px}
.yrcard .yy{font-size:12px;margin-bottom:8px}
.yrleft span{font-size:10px}
.yrleft b{font-size:30px}
.yrvs{font-size:12px}
.yrcard ul{display:none}
.yrshort{display:block}
.yrctl{margin:0 -16px;padding:8px 16px;gap:6px 12px}
.yrage{flex-basis:100%;gap:8px}
.yrage .lab{min-width:58px}
.yrbig{font-size:22px}
.yrmini{flex-direction:column;gap:0;font-size:11px;width:auto;flex:1 1 auto;min-width:0;line-height:1.25}.yrmini b{font-size:14px}
.yrhint{margin:-8px 0 0}
.yrctlr{width:100%;justify-content:space-between;gap:8px;flex-wrap:nowrap}
.yrctl .seg label{min-height:34px;padding:0 12px;font-size:13px}
.yrt{grid-template-columns:minmax(0,1fr) 84px 84px;gap:2px 10px;font-size:14px}
.yrt>span:first-child{grid-column:1/-1}
.yrt b{font-size:17px;grid-column:2}
.yrt b+b{grid-column:3}
.yrt em{grid-column:1;grid-row:2;text-align:left;align-self:center}
.yrh{grid-template-columns:minmax(0,1fr) 84px 84px}
.yrh span:first-child{grid-column:1/-1}
.yrh span:nth-child(2){grid-column:2}.yrh span:nth-child(3){grid-column:3}
.yrh span:nth-child(4){display:none}
.yrl b{font-size:21px}
.yrbt{height:32px}
}

/* What if? */
.wiopts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
#wi-opts{display:flex;flex-direction:column;gap:24px;margin-top:18px}
.wigrp{border-left:4px solid #A8452B;padding-left:16px;min-width:0}
.wigrp.good{border-left-color:#2E7D4F}
.wigh{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin-bottom:4px}
.wigh h3{margin:0;font-size:17px;color:#0D1C36}
.wigh p{margin:0;font-size:14px;color:#6B5640;flex:1 1 14em}
.wiall{font:inherit;font-size:13px;font-weight:600;color:#A8452B;background:none;border:1px solid #E2D3B3;border-radius:999px;padding:3px 12px;cursor:pointer}
.wigrp.good .wiall{color:#2E7D4F}
.wigrp.good .wiopt input{accent-color:#2E7D4F}
.wigrp.pol{border-left-color:#C98A12}
.wigrp.pol .wiall{color:#9A6408}
.wigrp.pol .wiopt input{accent-color:#C98A12}
.wiopt{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid #E2D3B3;cursor:pointer;min-width:0}
.wiopt input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:#A8452B;cursor:pointer}
.wiopt b{display:block;font-size:16px;color:#0D1C36}
.wiopt small{display:block;font-size:14px;line-height:1.45;color:#6B5640;margin-top:2px}
.wiclr{margin:14px 0 0;font-size:14px;font-weight:600}
.wirows{margin:14px 0 0;padding:14px 0 0;border-top:1px solid #E2D3B3;display:flex;flex-direction:column;gap:8px;font-size:15px;color:#45362A}
.wirows div{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px 14px;align-items:baseline}
.wirows span{min-width:0}
.wirows b{font-variant-numeric:tabular-nums;color:#0D1C36;text-align:right}
.wirows em{font-style:normal;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;min-width:5.5em}
.wirows .h{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6B5640}
.wieach{width:100%;border-collapse:collapse;margin-top:14px;font-size:15px}
.wieach th{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:right;padding:0 0 8px 12px;border-bottom:1px solid #0D1C36}
.wieach th:first-child{text-align:left;padding-left:0}
.wieach td{padding:10px 0 10px 12px;border-bottom:1px solid #E2D3B3;text-align:right;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.wieach td:first-child{text-align:left;padding-left:0;font-weight:400;color:#45362A;white-space:normal}
.wieach tr.tot td{border-bottom:2px solid #0D1C36;font-weight:700}
.wieach tr.tot td:first-child{font-weight:700;color:#0D1C36}
.wieach tr.sum td{color:#6B5640;font-weight:600}
.winote{margin:14px 0 0;font-size:14px;color:#45362A;max-width:52em}
@media (max-width:700px){.wiopts{grid-template-columns:minmax(0,1fr)}.wirows em{min-width:0}#wi-who{grid-template-columns:minmax(0,1fr);gap:14px}}

.src:empty{display:none}

/* How it works: tabs and the What if? sources table */
.mtabs{position:static}
.srct{width:100%;border-collapse:collapse;font-size:15px;min-width:640px}
.srct th{text-align:left;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6B5640;padding:0 16px 8px 0;border-bottom:1px solid #0D1C36}
.srct td{padding:10px 16px 10px 0;border-bottom:1px solid #E2D3B3;vertical-align:top;color:#45362A;line-height:1.45}
.srct td:first-child{font-weight:600;color:#0D1C36;width:22%}
.srct td:last-child{color:#6B5640;font-size:14px;width:30%}
.srct tr.g td{font-family:"Barlow Semi Condensed","Arial Narrow",sans-serif;font-size:17px;font-weight:700;color:#0D1C36;padding-top:22px;border-bottom:1px solid #0D1C36}
.trust.fut{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:28px 24px}
.trust.fut>div{border-top:2px solid #0D1C36;padding-top:12px}

/* who the numbers are about */
.who{margin:6px 0 4px;font-size:15px;color:#45362A;display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline}
.who span{font-weight:600}
.whochg{font-weight:600;padding:6px 0;display:inline-block}
.chload{margin:0;padding:80px 0;text-align:center;color:#6B5640;font-size:15px}
/* small parts of the £1 bars, named under them */
.ptiny{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0 0;font-size:13px;color:#45362A}
.ptiny span{display:inline-flex;align-items:center;gap:6px}
.ptiny i{width:10px;height:10px;display:inline-block}
/* What if? result bar, kept in view while ticking */
.wibar{position:sticky;bottom:calc(10px + env(safe-area-inset-bottom, 0px));z-index:20;display:flex;flex-wrap:wrap;gap:6px 22px;align-items:baseline;background:#FAF4E6;border:1px solid #0D1C36;box-shadow:0 4px 16px rgba(28,27,25,.18);padding:12px 18px;font-size:15px}
.wibar b{font-family:"Barlow Semi Condensed","Arial Narrow",sans-serif;font-size:18px}
.wibar em{font-style:normal;font-weight:700;font-size:14px}
.wibar em.gd{color:#2F6E5A}.wibar em.dn{color:#86331E}
.wibar .wibarlink{margin-left:auto;font-weight:600;font-size:14px}
.wibar.flash{animation:wiflash .6s ease-out}
@keyframes wiflash{from{background:#FFF1C7}to{background:#FAF4E6}}
@media (prefers-reduced-motion:reduce){.wibar.flash{animation:none}}

.topnav,.snav{-webkit-mask-image:linear-gradient(to right,#000 88%,transparent);mask-image:linear-gradient(to right,#000 88%,transparent)}
.topnav.end,.snav.end{-webkit-mask-image:none;mask-image:none}
section[id],article[id],h2[id],h3[id]{scroll-margin-top:64px}
.wikey{margin:0 0 14px;font-size:14px;color:#45362A}.wikey .r{font-weight:700;color:#A8452B}.wikey .g{font-weight:700;color:#2E7D4F}
#two-link,#wi-clear,.wiopts+.wiclr a,footer a,.sub a{display:inline-block;padding:10px 0;margin:-10px 0}
:focus-visible{outline:3px solid #1F5AA6;outline-offset:2px}
a.pseg:focus-visible{filter:none;outline:3px solid #0D1C36;outline-offset:-3px}
[hidden]{display:none!important}


/* ===== Fixing the Machine drawing sheet (Nov 2026): parchment, drafting grid, navy ink, red chalk ===== */
html{background:#F1E6CF}
body{background-color:#F1E6CF;background-image:linear-gradient(rgba(13,28,54,.085) 1px,transparent 1px),linear-gradient(90deg,rgba(13,28,54,.085) 1px,transparent 1px),linear-gradient(rgba(13,28,54,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(13,28,54,.04) 1px,transparent 1px);background-size:40px 40px,40px 40px,8px 8px,8px 8px;background-position:-1px -1px;color:#2B2016;font-family:"Barlow","Helvetica Neue",sans-serif;font-size:17px}
a{color:#35577F}a:hover{color:#26405F}

/* sheet border, zone markers, registration marks */
.sheet{position:relative;margin:10px;border:1px solid rgba(13,28,54,.3);padding:16px 16px 14px}
.zx{position:absolute;left:0;right:0;display:flex;pointer-events:none}
.zx span{position:relative;flex:1;text-align:center;font:500 10px/14px "Barlow Condensed",sans-serif;color:rgba(13,28,54,.42)}
.zx span+span::before{content:"";position:absolute;left:0;width:1px;height:6px;background:rgba(13,28,54,.3)}
.zx.t{top:2px}.zx.t span+span::before{top:-2px}
.zx.b{bottom:2px}.zx.b span+span::before{bottom:-2px}
.zy{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;pointer-events:none}
.zy span{position:relative;flex:1;display:flex;align-items:center;justify-content:center;width:14px;font:500 10px/1 "Barlow Condensed",sans-serif;color:rgba(13,28,54,.42)}
.zy span+span::before{content:"";position:absolute;top:0;width:6px;height:1px;background:rgba(13,28,54,.3)}
.zy.l{left:2px}.zy.l span+span::before{left:-2px}
.zy.r{right:2px}.zy.r span+span::before{right:-2px}
.reg{position:absolute;width:14px;height:14px;pointer-events:none;opacity:.35}
.reg svg{display:block;width:14px;height:14px}
.reg.tl{left:-7px;top:-7px}.reg.tr{right:-7px;top:-7px}.reg.bl{left:-7px;bottom:-7px}.reg.br{right:-7px;bottom:-7px}

/* masthead */
.mast{border-top:5px solid #A8452B;border-bottom:1.5px solid #0D1C36}
.logo{font:700 30px/1 "Barlow Semi Condensed","Arial Narrow",sans-serif;letter-spacing:.005em;color:#2B2016}
.logo:hover{color:#2B2016}
.logo .logo-k{display:block;font:500 11px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:#A8452B;margin:0 0 7px}
.nav{font:500 15.5px "Barlow",sans-serif;gap:4px 24px}
.nav a{color:#2B2016}
.nav a:hover,.nav a.on{color:#A8452B}
.nav a.on{box-shadow:inset 0 -2px 0 #A8452B}

/* type */
h1{font-family:"Barlow Semi Condensed","Arial Narrow",sans-serif;font-weight:600;font-size:58px;line-height:1.02;letter-spacing:-.005em;color:#2B2016}
.stand{font-family:"Barlow","Helvetica Neue",sans-serif;font-weight:400;color:#45362A}
.kicker,.num{font:600 12px/1.4 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.09em;text-transform:uppercase;color:#A8452B}
.h2,.ttl,.legend,.inh,.inh2,.trust h3,.snav b{font-family:"Barlow Semi Condensed","Arial Narrow",sans-serif;font-weight:600;letter-spacing:0;color:#2B2016}
.ttl{font-size:24px}
.body,.narr p,.find{font-family:"Barlow","Helvetica Neue",sans-serif}
.body{font-size:18px;color:#45362A}
.narr p{font-size:18px;line-height:1.6;color:#2B2016}
.find{font-size:19px;color:#2B2016}
.find b.b{color:#174785}.find b.o{color:#AD3F1D}
.src{font:500 11.5px/1.5 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.02em;color:#6B5640;padding-top:10px;border-top:1px solid #CDB892}
.sub{color:#6B5640}
.inh{border-top:1.5px solid #0D1C36;font-size:28px}

/* panels become figures: navy outline and a numbered figure label in the corner */
.view{counter-reset:fig}
.panel{position:relative;background:#FAF4E6;border:1.5px solid #0D1C36}
.tag{counter-increment:fig;position:absolute;top:-1px;right:-1px;width:auto;height:auto;margin:0;background:#0D1C36;color:#F1E6CF;font:500 11px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;padding:7px 10px}
.tag::before{content:"Fig. " counter(fig)}
#settings{border-top:0}
.fullbd{border-style:dashed}

/* controls */
.field label,.lab{font:500 11px/1.3 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:#45362A}
select,.input{font:500 17px "Barlow",sans-serif;color:#2B2016;background:#F1E6CF;border:1.5px solid #0D1C36;border-radius:0}
#s-b1{border:2.5px solid #1F5AA6!important;color:#174785!important}
#s-b2{border:2.5px solid #C8502A!important;color:#AD3F1D!important}
.seg label{border:1.5px solid #0D1C36;margin-left:-1.5px;background:#FAF4E6;font:500 15px "Barlow",sans-serif}
.seg label.on{background:#0D1C36;color:#F1E6CF;border-color:#0D1C36}
.rng::-webkit-slider-runnable-track{background:linear-gradient(90deg,#0D1C36 0 var(--p,50%),#CDB892 var(--p,50%) 100%)}
.rng::-moz-range-progress{background:#0D1C36}
.rng::-webkit-slider-thumb{background:#F1E6CF;border:2px solid #0D1C36;border-radius:0;transform:rotate(45deg);width:16px;height:16px;margin-top:-6px}
.rng::-moz-range-thumb{background:#F1E6CF;border:2px solid #0D1C36;border-radius:0;transform:rotate(45deg)}
.rngscale{font-family:"IBM Plex Mono",monospace;font-size:11px!important}
.payout{background:#F1E6CF;border:1px solid #CDB892}
.emflow,.infer{background:#F1E6CF;border-left-color:#0D1C36}
details>summary{background:#F5EDDB!important}
.opt{background:#FAF4E6;border-color:#CDB892}
.opt.on{border-color:#0D1C36;box-shadow:inset 0 0 0 1px #0D1C36}
.opt input{accent-color:#0D1C36}
.btn{background:#A8452B;color:#FAF4E6;font-family:"Barlow",sans-serif;border-radius:0}
.btn:hover{background:#86331E;color:#FAF4E6}
.tabs button,.tabs label{font-family:"Barlow",sans-serif}
.tabs button.on,.tabset>input:checked~.tabs>label{border-bottom-color:#A8452B!important}

/* sticky section bars */
.snav,.topnav{background:#F1E6CF;border-top:1.5px solid #0D1C36;border-bottom:1px solid #0D1C36}
.snav a,.topnav a{color:#2B2016;font-family:"Barlow",sans-serif}
.snav a.on,.topnav a.on{border-bottom-color:#A8452B}
.snav a:hover,.topnav a:hover{color:#A8452B}

/* tables of figures */
.tlh{font:500 10.5px/1.3 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.1em;border-bottom:1.5px solid #0D1C36}
.tlt,.duo{border-top:1.5px solid #0D1C36}
.tl .dn{color:#A8452B}

/* footer with title block */
.foot{border-top:1.5px solid #0D1C36;padding-top:24px;padding-bottom:28px;align-items:flex-end;gap:18px 40px}
.footl{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:#6B5640;max-width:46em}
.tblock{display:grid;grid-template-columns:repeat(4,minmax(0,auto));border:1.5px solid #0D1C36;background:#F1E6CF;min-width:0}
.tblock>div{border-left:.75px solid #0D1C36;border-top:.75px solid #0D1C36;padding:6px 12px 7px;min-width:0}
.tblock small{display:block;font:500 9.5px/1.3 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:#4A5B78}
.tblock strong{display:block;font:600 16px/1.2 "Barlow Condensed",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#0D1C36}
.tblock .wide{grid-column:span 4;border-top:0;border-left:0}
.tblock .c1{border-left:0}

.busy{background:#0D1C36;color:#F1E6CF;font-family:"IBM Plex Mono",monospace;font-weight:500;letter-spacing:.04em;border-radius:0}
.err{background:#FAF4E6;border:1.5px solid #A8452B;color:#86331E}

/* ruler scrollbar */
::-webkit-scrollbar{width:14px;height:14px}
::-webkit-scrollbar-track{background:repeating-linear-gradient(180deg,rgba(13,28,54,.5) 0 1px,transparent 1px 40px) left top/7px 100% no-repeat,repeating-linear-gradient(180deg,rgba(13,28,54,.3) 0 1px,transparent 1px 8px) left top/4px 100% no-repeat,#E9DDC2;border-left:1px solid rgba(13,28,54,.28)}
::-webkit-scrollbar-track:horizontal{background:repeating-linear-gradient(90deg,rgba(13,28,54,.5) 0 1px,transparent 1px 40px) left top/100% 7px no-repeat,repeating-linear-gradient(90deg,rgba(13,28,54,.3) 0 1px,transparent 1px 8px) left top/100% 4px no-repeat,#E9DDC2;border-left:0;border-top:1px solid rgba(13,28,54,.28)}
::-webkit-scrollbar-thumb{background:repeating-linear-gradient(180deg,#F1E6CF 0 1px,transparent 1px 3px) center/3px 9px no-repeat,#0D1C36;background-clip:padding-box;border:solid transparent;border-width:3px 2px 3px 7px;min-height:44px}
::-webkit-scrollbar-thumb:horizontal{background:repeating-linear-gradient(90deg,#F1E6CF 0 1px,transparent 1px 3px) center/9px 3px no-repeat,#0D1C36;background-clip:padding-box;border-width:7px 3px 2px 3px;min-width:44px}
::-webkit-scrollbar-thumb:hover{background-color:#A8452B}
::-webkit-scrollbar-corner{background:#E9DDC2}
::-webkit-scrollbar-button{display:none}
@supports not selector(::-webkit-scrollbar){html{scrollbar-width:thin;scrollbar-color:#0D1C36 #E9DDC2}}
.snav::-webkit-scrollbar,.topnav::-webkit-scrollbar{display:none}

@media (max-width:900px){.sheet{margin:0;padding:0;border:0}.zx,.zy,.reg{display:none}.tblock{grid-template-columns:repeat(2,minmax(0,1fr))}.tblock .wide{grid-column:span 2}.tblock>div:nth-child(odd){border-left:0}.tblock>div:nth-child(even){border-left:.75px solid #0D1C36}.tblock .wide{border-left:0}}
@media (max-width:640px){h1{font-size:38px}.logo{font-size:25px}.panel{border-left:0;border-right:0}.tag{right:0}.foot{align-items:stretch}}
.fullbd .tag{display:none}

/* "Why it changed" links read as buttons: drawing-style tabs with an arrow */
.snav{gap:8px;padding:12px 16px;align-items:center}
.snav b{font:600 13px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:#0D1C36;margin-right:12px}
.snav a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1.5px solid #0D1C36;background:#FAF4E6;color:#0D1C36;font:600 15px "Barlow",sans-serif;text-decoration:none}
.snav a::after{content:"→";font-weight:500;transition:transform .15s}
.snav a:hover,.snav a:focus-visible,.snav a.on{background:#0D1C36;color:#F1E6CF;border-color:#0D1C36}
.snav a:hover::after{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.snav a::after{transition:none}}
@media (max-width:640px){.snav{gap:8px;padding:10px 16px}.snav a{padding:0 12px;flex:none}}

/* even rhythm (Lloyd 8 Nov): sub-headings get the same 48px as main ones */
.inh2{margin-top:48px}
@media (max-width:640px){main.wrap{gap:24px!important}#v-home{gap:48px!important}.snav{margin:-24px -16px}}
/* footer rule the same length as the panels and rules above it (Lloyd 8 Nov) */
footer.foot.wrap{width:calc(100% - 48px);max-width:1152px;padding-left:0;padding-right:0}
@media (max-width:640px){footer.foot.wrap{width:calc(100% - 32px)}}

/* "£X worse off" beside the Share button (Lloyd 8 Nov) */
.sharegap{margin:0;font:600 21px/1.25 "Barlow Semi Condensed","Arial Narrow",sans-serif;color:#2B2016}
.sharegap b{font-weight:700}
.sharegap:empty{display:none}
.sharegap b.o{color:#AD3F1D}.sharegap b.b{color:#174785}

/* ---------- sharing (share buttons, image shapes, the box for someone arriving from a shared link, sign-up) ---------- */
.btn.ghost{background:transparent;color:#0D1C36;box-shadow:inset 0 0 0 1.5px #0D1C36}
.btn.ghost:hover{background:#0D1C36;color:#F1E6CF}
.btn.ghost[aria-expanded="true"]{background:#0D1C36;color:#F1E6CF}
.sharefmt{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.sharefmt p{margin:0;font-size:14px;color:#45362A;flex:1 1 260px}
.sharefmt div{display:flex;gap:8px;flex-wrap:wrap}
.chipb{font:500 12px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:#0D1C36;background:#F1E6CF;border:1.5px solid #0D1C36;padding:10px 14px;cursor:pointer;min-height:40px}
.chipb:hover,.chipb:focus-visible{background:#0D1C36;color:#F1E6CF}
.chipb[disabled]{opacity:.5;cursor:progress}
.sharenets{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;font-size:15px}
.sharenets>span{font:500 11px/1.3 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:#45362A}
.sharenets a{font-weight:600;color:#0D1C36;text-decoration:underline;text-decoration-color:#A8452B;text-underline-offset:3px;padding:6px 0}
.sharenets a:hover{color:#A8452B}
.arrive{border:1.5px solid #A8452B;background:#FAF4E6;padding:20px 24px;display:flex;flex-direction:column;gap:12px}
.arrive .kicker{margin:0}
.arrive-t{margin:0;font:600 22px/1.3 "Barlow Semi Condensed","Arial Narrow",sans-serif;color:#2B2016;max-width:44em}
.arrive-f{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center}
.arrive-f label{font:500 11px/1.3 "IBM Plex Mono",ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:#45362A;flex:1 1 100%}
.arrive-f select{width:auto;min-width:130px;height:44px}
.subbox{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:flex-end;padding:28px}
.subbox .kicker{margin:0 0 6px}
.subf{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:8px}
.subf>div{display:flex;flex-wrap:wrap;gap:10px}
.subf .input{flex:1 1 200px;width:auto;height:52px}
.subnote{margin:0;font-size:13px;color:#6B5640}
@media (max-width:640px){.sharerow .btn.sm{flex:1 1 100%;justify-content:center}.subbox{padding:22px 16px}}
.sharerow .sharegap{flex:1 1 100%}
/* the Share your result box */
.sharedlg{width:min(720px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;box-sizing:border-box;padding:28px;background:#FAF4E6;color:#0D1C36;border:1.5px solid #0D1C36;box-shadow:0 18px 50px rgba(13,28,54,.25)}
.sharedlg::backdrop{background:rgba(13,28,54,.55)}
.sharedlg[open]{display:flex;flex-direction:column;gap:14px}
.sharedlg .kicker{margin:0}
.sharedlg .ttl{margin:-8px 0 0;font-size:26px}
.sharedlg-x{position:absolute;top:10px;right:10px;margin:0}
.sharedlg-x button{width:40px;height:40px;border:0;background:transparent;font:400 30px/1 "Barlow",sans-serif;color:#0D1C36;cursor:pointer}
.sharedlg-x button:hover{color:#A8452B}
.sharepv{margin:0}
.sharepv img{display:block;width:100%;height:auto;aspect-ratio:1200/630;background:#F1E6CF;border:1px solid #CDB892}
.sharepv figcaption{margin-top:6px;font-size:13px;color:#6B5640}
.sharedlg textarea.input{height:auto;min-height:84px;padding:10px 12px;font:500 16px/1.4 "Barlow",sans-serif;resize:vertical}
.sharedlg .sharenets{gap:8px}
.netb{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;font:600 15px "Barlow",sans-serif;color:#FAF4E6;background:#0D1C36;border:0;text-decoration:none;cursor:pointer}
.netb:hover{background:#A8452B;color:#FAF4E6}
#share-copy,#share-more{background:transparent;color:#0D1C36;box-shadow:inset 0 0 0 1.5px #0D1C36}
#share-copy:hover,#share-more:hover{background:#0D1C36;color:#F1E6CF}
.sharedlg .sharemsg:empty{display:none}
.sharedlg .sharefmt{border-top:1px solid #E2D3B3;padding-top:14px}
.sharedlg .sharefmt .lab{flex:1 1 240px}
@media (max-width:640px){.sharedlg{padding:22px 16px}.netb{flex:1 1 calc(50% - 8px);justify-content:center}}
.sharenets a.netb{color:#FAF4E6;text-decoration:none;padding:0 16px}.sharenets a.netb:hover{color:#FAF4E6}

/* breakdown topic tabs: stronger, as buttons (Lloyd 8 Nov) */
.topnav{gap:8px;padding:12px 0;background:#F5EDDB}
.topnav a{font:600 16px/1 "Barlow",sans-serif;padding:11px 16px;border:1.5px solid #0D1C36;background:#FAF4E6;color:#0D1C36}
.topnav a:hover{background:#0D1C36;color:#F1E6CF}
.topnav a.on{background:#0D1C36;color:#F1E6CF;border-color:#0D1C36;box-shadow:inset 0 -4px 0 #A8452B}
@media (max-width:640px){.topnav{padding:10px 16px}}
.logo a.logo-t{color:inherit;text-decoration:none}
.logo .logo-k a.home{color:#A8452B;text-decoration:none;border-bottom:1px solid rgba(168,69,43,.5);padding-bottom:2px}
.logo .logo-k a.home:hover{color:#0D1C36;border-bottom-color:#0D1C36}
/* Full source list on How it works (Lloyd 8 Nov) */
.srcl{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:36px 40px;align-items:start}
.srcg{border-top:2px solid #0D1C36;padding-top:12px;min-width:0}
.srcg h3{font:600 19px/1.2 "Barlow Semi Condensed","Arial Narrow",sans-serif;color:#2B2016;margin:0 0 12px}
.srcg ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.srcg li{font:400 15px/1.45 "Barlow",sans-serif;color:#45362A;overflow-wrap:anywhere}
.srcg .srcw{font-weight:600;color:#2B2016}
.srcg cite{font-style:italic}
.srcg li a{font-weight:500;white-space:nowrap}