/* Income tax calculator page. Design plan: _work/design-plan.md (tool row: the calculator is the opener).
   The opener is a sentence you fill in, and the result is a payslip with a tear-off net pay strip. */

/* ---------- Opener: a sentence to fill in on security-printed paper ---------- */
.it-open { --c-pen: #C9A13B; --c-pa: #A9BCD0; --c-20: #E58A9E; --c-40: var(--crimson); --c-45: var(--claret); position: relative; overflow: clip; background: #fff; padding: calc(var(--head-h) + clamp(20px, 2.8vh, 38px)) 0 clamp(46px, 6vh, 80px); }
.it-open__guilloche { position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='60' viewBox='0 0 240 60'%3E%3Cg fill='none' stroke='%23751523' stroke-opacity='.09' stroke-width='1'%3E%3Cpath d='M0 30 C 30 0, 90 0, 120 30 S 210 60, 240 30'/%3E%3Cpath d='M0 30 C 30 60, 90 60, 120 30 S 210 0, 240 30'/%3E%3Cpath d='M0 20 C 40 0, 80 40, 120 20 S 200 0, 240 20'/%3E%3Cpath d='M0 40 C 40 60, 80 20, 120 40 S 200 60, 240 40'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 240px 60px; animation: it-guil 26s linear infinite;
  -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0,0,0,.6) 40%, transparent 92%); mask-image: linear-gradient(180deg, #000 0, rgba(0,0,0,.6) 40%, transparent 92%); }
@keyframes it-guil { to { background-position: 240px 0; } }
.rm .it-open__guilloche { animation: none; }
.it-open__head { position: relative; margin-bottom: clamp(10px, 1.6vh, 18px); }
.it-open h1 { font-size: clamp(2.4rem, 4.3vw, 4.1rem); margin-bottom: 8px; }
.it-open__head .lede { margin: 0; max-width: 120ch; }
.motion:not(.motion-fail) [data-it-in], .motion:not(.motion-fail) [data-it-in-slip] { opacity: 0; }

/* The sentence */
.it-say { position: relative; margin-bottom: clamp(16px, 2.4vh, 26px); }
.it-say__line { margin: 0; font-family: var(--serif); font-size: clamp(1.45rem, 2.2vw, 2.15rem); line-height: 1.75; color: var(--ink); }
.it-say__w { white-space: normal; }
.it-say__pen[hidden] { display: none; }
.it-blank { position: relative; display: inline-flex; align-items: baseline; gap: 2px; padding: 0 4px; border-bottom: 2px solid var(--ink); background: linear-gradient(rgba(242,214,75,.55), rgba(242,214,75,.55)) no-repeat 0 100% / 0 100%; transition: background-size .45s var(--ease); vertical-align: baseline; }
.it-blank:focus-within { background-size: 100% 100%; }
.it-blank > span { font-family: var(--serif); color: var(--crimson); }
.it-blank input { width: 6.4ch; border: 0; background: transparent; padding: 0; font: 700 1em/1.2 var(--sans); letter-spacing: -.02em; color: var(--crimson); font-variant-numeric: tabular-nums; }
.it-blank--sm input { width: 5ch; }
.it-blank input { min-height: 44px; margin-block: min(0px, calc((1.2em - 44px) / 2)); } /* a full tap target, the sentence keeps its line height */
.it-blank input:focus { outline: none; }
.it-blank:has(input:focus-visible) { outline: 3px solid var(--highlight); outline-offset: 3px; }

/* Inline toggles: real radios, a claret ink block slides between them */
.it-tog { position: relative; display: inline-flex; vertical-align: baseline; padding: 3px; background: var(--blush); border: 1px solid var(--rule); line-height: 1; }
.it-tog label { position: relative; z-index: 1; cursor: pointer; }
.it-tog input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.it-tog span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .55em; border-radius: var(--btn-r); font: 700 .78em/1 var(--sans); letter-spacing: -.01em; color: var(--ink-soft); white-space: nowrap; transition: color .3s var(--ease); }
.it-tog label:hover span { color: var(--crimson); }
.it-tog input:checked + span { color: #fff; background-color: var(--claret); transition: color .3s var(--ease), background-color .15s .3s; }
.it-tog input:not(:checked) + span { transition: color .3s var(--ease), background-color 0s; }
.it-tog input:focus-visible + span { outline: 3px solid var(--highlight); outline-offset: 2px; }
.it-tog__ink { position: absolute; z-index: 0; left: 0; top: 3px; bottom: 3px; width: 0; border-radius: var(--btn-r); background: var(--claret); box-shadow: 0 6px 14px rgba(117,21,35,.28); }
.no-js .it-tog__ink, .motion-fail .it-tog__ink { display: none; }
.no-js .it-tog input:checked + span, .motion-fail .it-tog input:checked + span { background: var(--claret); }
.it-tog--sm span, .it-tog--per span { font-size: .95rem; min-height: 40px; }

/* Row under the sentence: the pay scale and the pension method */
.it-say__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px clamp(20px, 3vw, 44px); margin-top: 4px; }
.it-msg { grid-column: 1 / -1; margin: 0; font-size: .95rem; font-weight: 600; color: var(--crimson); }
.it-msg:empty { display: none; }
.js .it-say__go { display: none; }
.it-say__go { justify-self: start; }
.it-pm { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; align-items: center; gap: 12px; }
.it-pm[hidden] { display: none; }
.it-pm legend { float: left; margin-right: 12px; padding: 0; font-size: .875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--claret); white-space: nowrap; }

.it-scale { --rh: 30px; position: relative; padding-bottom: 22px; }
@media (pointer: coarse) { .it-scale { --rh: 44px; } }
.it-scale__track { position: absolute; left: 13px; right: 13px; top: calc(var(--rh) / 2 - 4px); height: 8px; overflow: hidden; pointer-events: none; }
.it-scale__track i { position: absolute; top: 0; bottom: 0; }
.it-scale__track .s-pa { left: 0; width: 8.38%; background: var(--c-pa); }
.it-scale__track .s-20 { left: 8.38%; width: 25.13%; background: var(--c-20); }
.it-scale__track .s-40 { left: 33.51%; width: 33.16%; background: var(--c-40); }
.it-scale__track .s-taper { left: 66.67%; width: 16.76%; background: repeating-linear-gradient(-45deg, var(--claret) 0 4px, var(--crimson) 4px 8px) 0 0 / 11.3px 11.3px; animation: it-stripe 1.2s linear infinite; }
.it-scale__track .s-45 { left: 83.43%; right: 0; background: var(--c-45); }
.it-scale__track .s-dim { left: calc(var(--f, .27) * 100%); right: 0; background: rgba(255,255,255,.74); }
@keyframes it-stripe { to { background-position: 11.3px 0; } }
.rm .it-scale__track .s-taper { animation: none; }
.it-scale__input { position: relative; z-index: 1; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: var(--rh); margin: 0; background: transparent; cursor: pointer; }
.it-scale__input::-webkit-slider-runnable-track { height: 6px; background: transparent; }
.it-scale__input::-moz-range-track { height: 6px; background: transparent; }
.it-scale__input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: var(--crimson); border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--crimson), 0 6px 14px rgba(117,21,35,.35); transition: transform .25s var(--ease); }
.it-scale__input::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--crimson); border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--crimson), 0 6px 14px rgba(117,21,35,.35); }
.it-scale__input:active::-webkit-slider-thumb { transform: scale(1.15); }
.it-scale__input:focus-visible { outline: 3px solid var(--highlight); outline-offset: 4px; }
.it-scale__marks { position: absolute; left: 13px; right: 13px; top: var(--rh); height: 20px; pointer-events: none; }
.it-scale__marks b { position: absolute; left: calc(var(--p) * 100%); transform: translateX(-50%); font-size: .875rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.it-scale__marks b::before { content: ''; position: absolute; left: 50%; top: -18px; width: 2px; height: 14px; margin-left: -1px; background: var(--ink); opacity: .45; }

/* ---------- The payslip ---------- */
.slipx { --paper-c: #FFFDF8; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 21vw, 290px); background: var(--paper-c); border: 1px solid #E3D5C9; box-shadow: 18px 18px 0 rgba(117,21,35,.07), 0 30px 50px -30px rgba(34,9,15,.3); transform-origin: 50% 0; }
.slipx::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(90deg, var(--claret) 0 22px, var(--crimson) 22px 44px); }
.slipx p { margin: 0; }
.slipx__main { padding: clamp(18px, 1.8vw, 26px) clamp(18px, 2vw, 30px) 16px; min-width: 0; }
.slipx__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 10px 24px; padding-bottom: 12px; border-bottom: 3px double var(--ink); }
.slipx__title { font-family: var(--serif); font-size: clamp(1.4rem, 1.9vw, 1.8rem); line-height: 1.05; }
.slipx__boxes { display: grid; grid-template-columns: repeat(3, minmax(0, auto)) minmax(0, 1fr); margin: 0; border: 1px solid #DCCFC4; justify-self: end; }
.slipx__boxes > div { padding: 5px 12px 6px; border-left: 1px solid #DCCFC4; min-width: 0; }
.slipx__boxes > div:first-child { border-left: 0; }
.slipx__boxes dt { font-size: .875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--claret); }
.slipx__boxes dd { margin: 0; font-weight: 700; font-size: 1rem; white-space: nowrap; }
.slipx__per { padding-top: 3px !important; padding-bottom: 3px !important; }
.slipx__per dt { display: none; }
.it-tog--per { background: #F6EFE6; }

.split { padding: 12px 0 4px; }
.split__label { font-size: .92rem; font-weight: 700; color: #5A4C50; margin-bottom: 8px !important; }
.split__label span { font-weight: 500; }
.split__bar { position: relative; display: flex; height: 34px; border-radius: 999px; overflow: hidden; background: #F1E9E3; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.split__seg { position: relative; flex: none; width: calc(var(--w, 0) * 100%); height: 100%; }
.split__seg + .split__seg { box-shadow: inset 2px 0 0 var(--paper-c); }
.split__seg--pen { background: var(--c-pen); }
.split__seg--pa { background: var(--c-pa); }
.split__seg--b20 { background: var(--c-20); }
.split__seg--b40 { background: var(--c-40); }
.split__seg--b45 { background: var(--c-45); }
.split__tax, .split__ni { position: absolute; top: 0; bottom: 0; }
.split__ni { right: 0; width: calc(var(--n, 0) * 100%); background: repeating-linear-gradient(-45deg, rgba(19,32,47,.85) 0 4px, rgba(19,32,47,.6) 4px 8px) 0 0 / 11.3px 11.3px; animation: it-stripe 1.4s linear infinite; }
.split__tax { right: calc(var(--n, 0) * 100%); width: calc(var(--t, 0) * 100%); background: rgba(34,9,15,.58); }
.rm .split__ni { animation: none; }
.split__shine { position: absolute; top: 0; bottom: 0; left: 0; width: 16%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); transform: translateX(-120%); animation: it-shine 5s var(--ease) infinite; mix-blend-mode: soft-light; pointer-events: none; }
@keyframes it-shine { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(720%); } }
.split__key { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 10px; font-size: .9rem; line-height: 1.3; color: #5A4C50; }
.split__key li { display: flex; align-items: flex-start; gap: 8px; min-width: 7.8rem; transition: opacity .4s; }
.split__key li[data-off] { display: none; }
.split__key i { flex: none; width: 12px; height: 12px; margin-top: 3px; border-radius: 50%; }
.split__key b { color: var(--ink); font-weight: 700; }
.split__key .k-n { color: var(--ink); }
.split__key small { font-size: .875rem; }
.split__key em { font-style: normal; color: var(--claret); font-weight: 600; }
.k-pen i { background: var(--c-pen); } .k-pa i { background: var(--c-pa); } .k-b20 i { background: var(--c-20); } .k-b40 i { background: var(--c-40); } .k-b45 i { background: var(--c-45); }

.slipx__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 0 clamp(16px, 2vw, 28px); margin-top: 12px; }
.slipx__col { border: 1px solid #DCCFC4; align-self: start; }
.slipx__colh { padding: 5px 12px; background: #F6EFE6; border-bottom: 1px solid #DCCFC4; font-size: .875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--claret); }
.pl { display: flex; justify-content: space-between; gap: 10px; padding: 4px 12px; font-size: .97rem; line-height: 20px; border-bottom: 1px dotted #E1D4CB; }
.pl:last-child { border-bottom: 0; }
.pl > span:last-child { font-weight: 600; white-space: nowrap; }
.pl--dim > span:first-child { color: #5A4C50; }
.pl[data-off] { display: none; }
.pl--tot { background: #FBF4EE; font-weight: 700; border-top: 1px solid #DCCFC4; }
.slipx__foot { margin-top: 10px !important; font-size: .9rem; color: #5A4C50; }
.slipx__foot a { color: var(--claret); font-weight: 700; }

/* Tear-off net pay strip */
.slipx__tear { position: relative; display: flex; flex-direction: column; padding: clamp(18px, 2vw, 28px) clamp(16px, 1.8vw, 26px) 18px clamp(22px, 2.2vw, 32px); background: #FAF3EA; }
.slipx__tear::before { content: ''; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 12px; background: radial-gradient(circle at 0 50%, #fff 0 3.2px, #D8C8BC 3.6px, transparent 4.4px) 0 0 / 12px 14px repeat-y; }
.slipx__tk { font-size: .9rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--claret); }
.slipx__net { font: 600 clamp(2.1rem, 3vw, 2.9rem)/1.05 var(--sans); letter-spacing: -.035em; color: var(--crimson); margin: 4px 0 2px !important; }
.slipx__per2 { font-weight: 600; color: #5A4C50; }
.slipx__alt { margin: 14px 0 0; padding-top: 10px; border-top: 1px dashed #D8C8BC; display: grid; gap: 2px; font-size: .95rem; color: #5A4C50; }
.slipx__alt b { color: var(--ink); font-weight: 700; }
.slipx__stamp { position: relative; align-self: flex-start; margin: 18px 0 18px 4px; width: 116px; height: 72px; border: 3px solid var(--crimson); outline: 1.5px solid var(--crimson); outline-offset: -8px; border-radius: 50%; display: grid; place-content: center; text-align: center; color: var(--crimson); transform: rotate(-10deg); pointer-events: none; }
.slipx__stamp span { font-family: var(--serif); font-size: 1.35rem; line-height: 1; text-transform: uppercase; letter-spacing: .05em; }
.slipx__stamp small { font-weight: 700; font-size: .66rem; text-transform: uppercase; letter-spacing: .16em; }
.slipx__cta { margin-top: auto !important; display: grid; gap: 8px; justify-items: start; }
.slipx__tel { font-weight: 700; color: var(--claret); text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1.5px; padding-bottom: 2px; display: inline-flex; align-items: center; min-height: 44px; }
.slipx__tel:hover { background-size: 0 1.5px; background-position: 100% 100%; }
.it-perform { margin-top: 12px; }
.js .it-perform { display: none; }

/* Phones: a chip with the net pay while the payslip is out of sight */
.it-peek { display: none; }
@media (max-width: 1099px) {
  .it-peek { position: fixed; z-index: 50; right: 16px; bottom: 14px; width: 14rem; justify-content: space-between; white-space: nowrap; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--wine); color: #fff; text-decoration: none; border-radius: var(--btn-r); box-shadow: 0 14px 30px rgba(34,9,15,.35); transform: translateY(140%); opacity: 0; transition: transform .45s var(--ease), opacity .3s; }
  .it-peek.is-on { transform: none; opacity: 1; }
  .it-peek span { font-size: .9rem; font-weight: 600; color: var(--on-dark-soft); }
  .it-peek b { font-size: 1.1rem; }
  .it-peek svg { width: 18px; height: 18px; color: var(--highlight); animation: it-bob 1.6s ease-in-out infinite; }
  @keyframes it-bob { 50% { transform: translateY(3px); } }
}

@media (max-width: 1099px) {
  .slipx { grid-template-columns: minmax(0, 1fr); }
  .slipx__tear { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; }
  .slipx__tear::before { left: 10px; right: 10px; top: -1px; bottom: auto; width: auto; height: 12px; background: radial-gradient(circle at 50% 0, #fff 0 3.2px, #D8C8BC 3.6px, transparent 4.4px) 0 0 / 14px 12px repeat-x; }
  .slipx__stamp { grid-column: 2; grid-row: 1 / 4; margin: 0; }
  .slipx__cta { grid-column: 1 / -1; margin-top: 14px !important; grid-auto-flow: column; justify-content: start; align-items: center; gap: 14px; }
  .slipx__head { grid-template-columns: minmax(0, 1fr); }
  .slipx__boxes { justify-self: stretch; }
}
@media (max-width: 760px) {
  .it-say__row { grid-template-columns: minmax(0, 1fr); }
  .it-pm { flex-wrap: wrap; }
  .it-pm legend { float: none; margin: 0 0 4px; }
  .slipx__boxes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .slipx__boxes > div:nth-child(4) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid #DCCFC4; }
  .slipx__per dt { display: none; }
  .slipx__cols { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .split__key { gap: 6px 16px; }
  .split__key li { min-width: 0; width: calc(50% - 8px); }
  .slipx__cta { grid-auto-flow: row; }
}
@media (max-width: 600px) {
  .it-open { padding-top: calc(var(--head-h) + 18px); }
  .it-open h1 { font-size: clamp(2.1rem, 9.4vw, 2.6rem); }
  .it-open__head .lede { font-size: 1.02rem; }
  .it-say__line { font-size: 1.4rem; line-height: 1.85; }
  .it-tog span { font-size: .72em; padding: 0 .45em; }
  .it-tog--sm span, .it-tog--per span { font-size: .9rem; padding: 0 .5em; }
  .slipx__main { padding: 16px 14px 14px; }
  .slipx__boxes > div { padding: 5px 8px; }
  .slipx__boxes dd { font-size: .95rem; }
  .it-scale__marks b:nth-child(3) { display: none; }
  .slipx__stamp { width: 96px; height: 60px; }
  .slipx__stamp span { font-size: 1.1rem; }
}

/* Shorter desktop screens: keep the whole tool on the first screen */
@media (min-width: 1100px) and (max-height: 860px) {
  .it-open { padding: calc(var(--head-h) + 10px) 0 16px; }
  .it-open h1 { font-size: clamp(2.1rem, 3.1vw, 2.7rem); margin-bottom: 2px; }
  .it-open__head .lede { font-size: 1rem; }
  .it-say { margin-bottom: 10px; }
  .it-say__line { font-size: clamp(1.3rem, 1.8vw, 1.75rem); line-height: 1.6; }
  .it-tog span { min-height: 38px; }
  .slipx__main { padding-top: 14px; padding-bottom: 10px; }
  .split { padding-top: 8px; }
  .split__bar { height: 26px; }
  .pl { padding-top: 2px; padding-bottom: 2px; font-size: .94rem; }
  .slipx__foot { margin-top: 6px !important; }
}

/* ---------- Where each £100 goes (ink-blue): 100 coins ---------- */
.it-where { overflow: clip; padding-block: clamp(64px, 7vw, 104px); }
.it-where::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 35px, rgba(255,255,255,.04) 35px, rgba(255,255,255,.04) 36px); animation: it-rule 22s linear infinite; pointer-events: none; }
@keyframes it-rule { to { background-position: 0 36px; } }
.rm .it-where::before { animation: none; }
.it-where__rule { position: absolute; top: 0; bottom: 0; left: clamp(14px, 3.2vw, 52px); width: 1px; background: rgba(163,24,62,.6); }
.it-where h2 { color: #fff; }
.it-where .sec-head { margin-bottom: clamp(26px, 3.4vw, 46px); }
.it-where__grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 90px); align-items: center; }
.coins { --c-keep: #F7EEF0; --c-tax: #E58A9E; --c-ni: #7F95AE; --c-pen: #D4AE48; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: clamp(5px, .7vw, 10px); width: min(100%, 470px); }
.coin { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.55), rgba(255,255,255,0) 46%), var(--cc, var(--c-keep)); box-shadow: inset 0 0 0 2px rgba(0,0,0,.12), inset 0 0 0 5px rgba(255,255,255,.18), inset 0 -4px 0 rgba(0,0,0,.14), 0 3px 0 rgba(0,0,0,.28); transition: transform .35s var(--ease), opacity .35s; font-style: normal; }
.coin::after { content: '£'; font-family: var(--serif); font-size: clamp(.8rem, 1.1vw, 1.05rem); line-height: 1; color: rgba(0,0,0,.28); text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.coin--keep { --cc: var(--c-keep); } .coin--tax { --cc: var(--c-tax); } .coin--ni { --cc: var(--c-ni); } .coin--pen { --cc: var(--c-pen); }
.coins.is-focus .coin { opacity: .22; }
.coins.is-focus .coin.is-on { opacity: 1; transform: translateY(-4px); }
.hund { display: grid; gap: 4px; border-top: 2px solid rgba(255,255,255,.7); }
.hund__i { display: grid; grid-template-columns: 22px 9.5rem minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px 6px; border-bottom: 1px solid rgba(255,255,255,.14); cursor: default; transition: background .3s; }
.hund__i:hover, .hund__i.is-on { background: rgba(255,255,255,.06); }
.hund__i[data-off] { display: none; }
.hund__i i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(0,0,0,.14); }
.hund__i--keep i { background: #F7EEF0; } .hund__i--tax i { background: #E58A9E; } .hund__i--ni i { background: #7F95AE; } .hund__i--pen i { background: #D4AE48; }
.hund__i b { font: 600 clamp(1.7rem, 2.4vw, 2.3rem)/1 var(--sans); letter-spacing: -.03em; color: #fff; }
.hund__i span { font-size: 1.05rem; color: var(--on-dark-soft); }
.next100 { margin-top: clamp(20px, 2.6vw, 32px); padding: 18px 22px 18px; background: #fff; color: var(--ink); border-left: 4px solid var(--highlight); box-shadow: 16px 16px 0 rgba(0,0,0,.22); }
.next100 p { margin: 0; }
.next100__k { font-weight: 700; color: var(--claret); }
.next100__v { font: 600 clamp(2rem, 3vw, 2.8rem)/1.1 var(--sans); letter-spacing: -.035em; color: var(--crimson); }
.next100__s { font-size: .98rem; color: var(--ink-soft); margin-top: 4px !important; }
@media (max-width: 900px) {
  .it-where__grid { grid-template-columns: minmax(0, 1fr); }
  .coins { justify-self: center; }
  .hund__i { grid-template-columns: 22px 7.6rem minmax(0, 1fr); gap: 10px; }
}

/* ---------- How it's worked out (blush): bands on a ruler ---------- */
.it-how { overflow: clip; padding-block: clamp(64px, 7vw, 104px); }
.it-how__bg { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(90deg, rgba(117,21,35,.06) 1px, transparent 1px); background-size: 64px 100%; animation: it-cols 34s linear infinite; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
@keyframes it-cols { to { background-position: 64px 0; } }
.rm .it-how__bg { animation: none; }
.it-how .sec-head { margin-bottom: clamp(22px, 3vw, 40px); }
.ruler { position: relative; padding: 46px 0 6px; margin-bottom: clamp(28px, 3.4vw, 46px); }
.ruler__bands { position: relative; height: 58px; background: #fff; border: 1px solid var(--rule); box-shadow: 14px 14px 0 rgba(117,21,35,.07); }
.rb { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%); display: flex; align-items: center; justify-content: center; transform-origin: 0 50%; }
.rb b { font: 600 clamp(1rem, 1.5vw, 1.35rem)/1 var(--sans); letter-spacing: -.02em; }
.rb--pa { background: #A9BCD0; color: var(--ink); }
.rb--20 { background: #E58A9E; color: var(--ink); }
.rb--40 { background: var(--crimson); color: #fff; }
.rb--60 { background: repeating-linear-gradient(-45deg, var(--claret) 0 6px, #5E0F1B 6px 12px); color: var(--highlight); }
.rb--45 { background: var(--claret); color: #fff; }
.ruler__ticks { position: relative; height: 30px; }
.ruler__ticks i { position: absolute; left: calc(var(--p) * 100%); top: 0; width: 1px; height: 8px; background: var(--ink); opacity: .5; font-style: normal; }
.ruler__ticks i.maj { height: 13px; opacity: .8; }
.ruler__ticks b { position: absolute; top: 14px; left: 0; transform: translateX(-50%); font-size: .875rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.ruler__ticks i:first-child b { transform: none; }
.ruler__ticks i:last-child b { transform: translateX(-100%); }
.ruler__you { position: absolute; top: 0; bottom: 30px; left: calc(var(--you, .25) * 100%); width: 0; pointer-events: none; }
.ruler__you::after { content: ''; position: absolute; left: -1.5px; top: 36px; bottom: 0; width: 3px; background: var(--ink); }
.ruler__you span { position: absolute; left: 0; top: 0; transform: translateX(-50%); padding: 5px 10px; background: var(--ink); color: #fff; font-size: .92rem; font-weight: 600; white-space: nowrap; }
.ruler__you span::after { content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--ink); }
.ruler__note { margin: 6px 0 0; font-size: .95rem; color: var(--ink-soft); }
.it-how__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.steps { counter-reset: st; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.steps li { counter-increment: st; position: relative; padding: 16px 0 16px 64px; border-bottom: 1px solid var(--rule); }
.steps li::before { content: counter(st); position: absolute; left: 0; top: 14px; width: 44px; height: 44px; display: grid; place-items: center; border: 2px solid var(--crimson); border-radius: 50%; font-family: var(--serif); font-size: 1.3rem; color: var(--crimson); background: #fff; }
.steps p { margin: 0; color: var(--ink-soft); }
.steps .steps__h { font-weight: 700; font-size: 1.15rem; color: var(--ink); margin-bottom: 2px; }
.steps b { color: var(--ink); }
.rtab { background: #fff; padding: 20px 22px 18px; border-left: 4px solid var(--crimson); box-shadow: 18px 18px 0 rgba(117,21,35,.07); }
.rtab__t { width: 100%; border-collapse: collapse; font-size: 1rem; }
.rtab__t caption { text-align: left; font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; padding-bottom: 10px; }
.rtab__t th, .rtab__t td { text-align: left; padding: 9px 8px 9px 0; border-bottom: 1px solid var(--rule); }
.rtab__t thead th { font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--claret); border-bottom: 2px solid var(--ink); }
.rtab__t tbody th { font-weight: 700; }
.rtab__t td:last-child { font-weight: 700; color: var(--claret); }
.rtab__t tr { background: linear-gradient(90deg, rgba(242,214,75,.5), rgba(242,214,75,.5)) no-repeat 0 0 / 0 100%; transition: background-size .6s var(--ease); }
.rtab__t tr.is-on { background-size: 100% 100%; }
.rtab__note { margin: 10px 0 0; font-size: .95rem; color: var(--ink-soft); }
.it-how__notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px clamp(20px, 2.6vw, 40px); margin-top: clamp(24px, 3vw, 40px); padding-top: 18px; border-top: 2px solid var(--ink); }
.it-how__notes p { margin: 0; font-size: 1rem; color: var(--ink-soft); }
.it-how__notes b { color: var(--ink); }
#scotland { scroll-margin-top: calc(var(--head-h) + 30px); }
@media (max-width: 1099px) { .it-how__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .it-how__notes { grid-template-columns: minmax(0, 1fr); }
  .ruler__ticks i:not(.maj) { display: none; }
  .ruler__ticks i.maj:nth-child(4n+3) b { display: none; }
  .rb b { font-size: .875rem; }
  .rb--pa b { display: none; }
  .steps li { padding-left: 56px; }
}

/* ---------- How we help (white) ---------- */
.it-help { overflow: clip; }
.it-help__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.it-help__media { position: relative; }
.it-help__frame { position: relative; height: min(62vh, 560px); box-shadow: -24px 24px 0 rgba(163,24,62,.12); }
.it-help__frame img { position: absolute; inset: -6% 0 auto; height: 112%; }
.it-help__code { position: absolute; z-index: 3; right: -18px; bottom: 34px; margin: 0; padding: 12px 18px 14px; background: #FFFDF8; border-top: 5px solid var(--claret); box-shadow: 0 18px 34px rgba(34,9,15,.22); display: grid; line-height: 1.2; }
.it-help__code span { font-size: .875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--claret); }
.it-help__code b { font: 600 2.2rem/1.1 var(--sans); letter-spacing: -.02em; }
.it-help__code small { font-size: .9rem; color: var(--ink-soft); }
.it-help__copy .lede { margin: 16px 0 22px; }
.helps { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin-bottom: 26px; border-top: 2px solid var(--ink); }
.helps li { position: relative; padding: 16px 0 14px 34px; border-bottom: 1px solid var(--rule); }
.helps li::before { content: ''; position: absolute; left: 2px; top: 1.45em; width: 16px; height: 9px; border-left: 2.5px solid var(--crimson); border-bottom: 2.5px solid var(--crimson); transform: rotate(-45deg) scale(var(--tick, 1)); transform-origin: 30% 70%; }
.helps .helps__h { font-weight: 700; font-size: 1.08rem; margin-bottom: 4px; }
.helps p { margin: 0; font-size: .98rem; color: var(--ink-soft); line-height: 1.5; }
@media (max-width: 1099px) { .helps { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .it-help__grid { grid-template-columns: minmax(0, 1fr); }
  .it-help__frame { height: min(48vh, 380px); }
  .it-help__code { right: -4px; bottom: -24px; }
  .it-help__media { margin-bottom: 30px; }
}

/* ---------- CTA and onward links (crimson) ---------- */
.it-cta { overflow: clip; padding-block: clamp(64px, 7vw, 100px); }
.it-cta__oval { position: absolute; left: -10vw; top: 50%; width: min(980px, 82vw); transform: translateY(-62%); overflow: visible; pointer-events: none; }
.it-cta__oval .o-draw { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 2; stroke-dasharray: 1 1; }
.it-cta__oval .o-dash { fill: rgba(255,255,255,.035); stroke: rgba(242,214,75,.55); stroke-width: 1.5; stroke-dasharray: 4 12; animation: dash-turn 40s linear infinite; }
.it-cta__top { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.it-cta h2 { color: #fff; margin-bottom: 16px; }
.it-cta .lede { margin-bottom: 26px; max-width: 120ch; }
.it-cta__env { position: relative; justify-self: end; width: min(100%, 360px); padding: 54px 26px 24px; background: #F3E6CF; color: var(--ink); box-shadow: 0 30px 40px -12px rgba(34,9,15,.45); transform: rotate(-3deg); }
.it-cta__env p { margin: 0; position: relative; z-index: 1; }
.env__flap { position: absolute; left: 0; right: 0; top: 0; height: 64px; background: #E9D7B8; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.env__k { font-size: .875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--claret); }
.env__v { font: 600 clamp(2.3rem, 3.4vw, 3rem)/1.1 var(--sans); letter-spacing: -.035em; color: var(--crimson); }
.env__s { font-size: .98rem; color: var(--ink-soft); }
.it-next { position: relative; margin-top: clamp(36px, 4.4vw, 60px); }
.it-next__h { color: #fff; font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 1.8vw, 1.7rem); margin-bottom: 14px; }
.it-next__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.it-next__list a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding: 16px 18px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); color: #fff; text-decoration: none; height: 100%; transition: background .35s var(--ease); overflow: hidden; }
.it-next__list a::after { content: ''; position: absolute; inset: 0; background: radial-gradient(300px circle at var(--lx, 50%) var(--ly, 50%), rgba(242,214,75,.16), transparent 60%); opacity: 0; transition: opacity .35s; pointer-events: none; }
.it-next__list a:hover { background: rgba(255,255,255,.14); }
.it-next__list a:hover::after { opacity: 1; }
.it-next__t { font-weight: 700; font-size: 1.08rem; }
.it-next__s { grid-column: 1 / -1; font-size: .95rem; color: #FBE3E8; }
.it-next__go { grid-column: 2; grid-row: 1; align-self: center; width: 22px; height: 22px; color: var(--highlight); transition: transform .35s var(--ease); }
.it-next__list a:hover .it-next__go { transform: translateX(4px); }
@media (max-width: 1099px) { .it-next__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .it-cta__top { grid-template-columns: minmax(0, 1fr); } .it-cta__env { justify-self: start; margin-left: 6px; } }
@media (max-width: 600px) { .it-next__list { grid-template-columns: minmax(0, 1fr); } .it-cta__oval { left: -40vw; width: 130vw; top: 26%; } }

/* Ambient highlights that walk through the items */
.steps li { transition: background .6s var(--ease); background: linear-gradient(90deg, rgba(242,214,75,.35), rgba(242,214,75,.35)) no-repeat 0 0 / 0 100%; }
.steps li.is-lit { background-size: 100% 100%; }
.steps li.is-lit::before { background: var(--crimson); color: #fff; }
.steps li::before { transition: background .4s, color .4s; }
.helps li { transition: background .6s var(--ease); background: linear-gradient(90deg, rgba(242,214,75,.3), rgba(242,214,75,.3)) no-repeat 0 0 / 0 100%; }
.helps li.is-lit { background-size: 100% 100%; }
/* Very short desktop screens (1280x720): drop the extras so the whole tool, call link included, fits */
@media (min-width: 1100px) and (max-height: 760px) {
  .it-open__head .lede { display: none; }
  .it-say__line { font-size: 1.5rem; line-height: 1.5; }
  .slipx__alt { display: none; }
  .slipx__stamp { width: 96px; height: 60px; margin: 10px 0 10px 4px; }
  .slipx__stamp span { font-size: 1.1rem; }
  .slipx__tear { padding-top: 14px; padding-bottom: 12px; }
  .split__label span { display: none; }
}