/* Corporation tax calculator page. Design plan: _work/design-plan.md (tool row: the calculator is the opener). */

/* ---------- Opener: the calculator on ledger paper ---------- */
.ct-open { --rule-c: rgba(117,21,35,.1); position: relative; overflow: clip; background-color: var(--paper); padding: calc(var(--head-h) + clamp(22px, 3vh, 40px)) 0 clamp(48px, 6vh, 80px); animation: rule-drift-32 9s linear infinite; }
@keyframes rule-drift-32 { to { background-position: 0 32px; } }
.ct-open__margin { position: absolute; top: 0; bottom: 0; left: clamp(14px, 3.2vw, 52px); width: 1px; background: rgba(163,24,62,.45); }
.ct-open__margin::after { content: ''; position: absolute; top: 0; left: 4px; bottom: 0; width: 1px; background: rgba(163,24,62,.22); }
.ct-open__head { margin-bottom: clamp(18px, 2.6vh, 30px); }
.ct-open h1 { font-size: clamp(2.4rem, 4.3vw, 4.1rem); margin-bottom: 10px; }
.ct-open__head .lede { margin: 0; max-width: 120ch; }
.motion:not(.motion-fail) [data-ct-in], .motion:not(.motion-fail) [data-ct-in-slip] { opacity: 0; }

.ct-calc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: 'form printer' 'form cta'; grid-template-rows: auto 1fr; gap: 0 clamp(22px, 3vw, 52px); align-items: start; }
.ct-form { grid-area: form; }
.printer { grid-area: printer; }
.printer__cta { grid-area: cta; }

/* Inputs: a ruled form card */
.ct-form[hidden] { display: none; }
.ct-form { grid-template-columns: minmax(0, 1fr); position: relative; background: #fff; border: 1px solid var(--rule); border-left: 4px solid var(--crimson); padding: clamp(18px, 2vw, 26px) clamp(18px, 2vw, 28px) clamp(18px, 2vw, 24px); box-shadow: 18px 18px 0 rgba(117,21,35,.07); display: grid; gap: clamp(12px, 1.7vh, 18px); }
.ct-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.ct-form legend, .fld__label { display: block; padding: 0; margin-bottom: 7px; font-size: .9rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--claret); }
.fld__hint { margin: 6px 0 0; font-size: .92rem; line-height: 1.4; color: var(--ink-soft); }
.ct-form__pair { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.js .ct-form__go { display: none; }
.ct-form__go { justify-self: start; }

/* Segmented control: real radios, an ink block slides between them */
.seg { position: relative; display: flex; padding: 4px; background: var(--blush); border: 1px solid var(--rule); }
.seg__opt { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; cursor: pointer; }
.seg__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg__opt span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 6px; border-radius: var(--btn-r); font-weight: 700; font-size: 1rem; line-height: 1; color: var(--ink); white-space: nowrap; transition: color .3s var(--ease); }
.seg__opt span small { font-size: .78em; font-weight: 600; margin-left: 1px; opacity: .8; }
.seg__opt:hover span { color: var(--crimson); }
.seg__opt input:checked + span { color: #fff; }
.seg__opt input:focus-visible + span { outline: 3px solid var(--highlight); outline-offset: 2px; }
.seg__ink { position: absolute; z-index: 0; left: 0; top: 4px; bottom: 4px; width: 0; border-radius: var(--btn-r); background: var(--claret); box-shadow: 0 6px 14px rgba(117,21,35,.28); }
.no-js .seg__ink, .motion-fail .seg__ink { display: none; }
.no-js .seg__opt input:checked + span, .motion-fail .seg__opt input:checked + span { background: var(--claret); }

/* Profit: big figure in a ruled box, slider with the limits marked */
.money { position: relative; display: flex; align-items: center; border-bottom: 2px solid var(--ink); background: linear-gradient(var(--blush), var(--blush)) no-repeat 0 100% / 0 100%; transition: background-size .5s var(--ease); }
.money:focus-within { background-size: 100% 100%; }
.money__sign { font-family: var(--serif); font-size: clamp(1.7rem, 2.3vw, 2.2rem); color: var(--crimson); padding: 0 6px 0 4px; }
.money__input { flex: 1; min-width: 0; height: 58px; border: 0; background: transparent; font: 600 clamp(1.7rem, 2.3vw, 2.2rem)/1 var(--sans); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; padding: 0; }
.money__input:focus { outline: none; }
.money:has(.money__input:focus-visible) { outline: 3px solid var(--highlight); outline-offset: 3px; }
.fld__msg { margin: 6px 0 0; min-height: 0; font-size: .95rem; font-weight: 600; color: var(--crimson); }
.fld__msg:empty { display: none; }
.date { width: 100%; height: 54px; padding: 0 12px; border: 1px solid var(--rule); border-bottom: 2px solid var(--ink); border-radius: 0; background: #fff; font: 600 1.02rem/1 'Hanken Fallback', Arial, sans-serif; color: var(--ink); } /* metric-matched fallback: never swaps, so the field's text can't shift */
.date:focus-visible { outline: 3px solid var(--highlight); outline-offset: 2px; }

.range { position: relative; margin-top: 14px; padding-bottom: 22px; }
.range__hint { position: absolute; top: calc(var(--rh) / 2); left: calc(13px + (100% - 26px) * var(--f, .3)); width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: var(--btn-r); pointer-events: none; animation: thumb-call 1.8s ease-out infinite; }
@keyframes thumb-call { 0% { box-shadow: 0 0 0 0 rgba(163,24,62,.45); } 80%, 100% { box-shadow: 0 0 0 16px rgba(163,24,62,0); } }
.range.is-used .range__hint, .rm .range__hint { display: none; }
.range { --rh: 30px; }
@media (pointer: coarse) { .range { --rh: 44px; } }
.range__input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: var(--rh); margin: 0; background: transparent; cursor: pointer; --fill: 30%; }
.range__input { position: relative; z-index: 1; }
.range__input::-webkit-slider-runnable-track { height: 6px; background: transparent; }
.range__input::-moz-range-track { height: 6px; background: transparent; }
.range__input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: var(--btn-r); background: var(--claret); border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--claret), 0 6px 14px rgba(117,21,35,.35); transition: transform .25s var(--ease); }
.range__input::-moz-range-thumb { width: 20px; height: 20px; border-radius: var(--btn-r); background: var(--claret); border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--claret), 0 6px 14px rgba(117,21,35,.35); }
.range__input:active::-webkit-slider-thumb { transform: scale(1.15); }
.range__input:focus-visible { outline: 3px solid var(--highlight); outline-offset: 4px; }
.range__ticks { position: absolute; left: 13px; right: 13px; top: 0; height: var(--rh); pointer-events: none; }
.range__tick { position: absolute; top: 0; bottom: 0; left: calc(var(--p, 0) * 100%); width: 0; }
.range__tick i { position: absolute; left: -1px; top: calc(var(--rh) / 2 - 11px); width: 2px; height: 22px; background: var(--ink); opacity: .55; }
.range__tick b { position: absolute; left: -3rem; width: 6rem; text-align: center; top: var(--rh); font-size: .875rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }

/* ---------- The printer and the tax slip ---------- */
.printer { position: relative; }
.printer__slot { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; height: 34px; margin: 0 -14px; padding: 0 18px; background: linear-gradient(180deg, #3A1820 0%, var(--wine) 60%, #12040A 100%); color: var(--on-dark-soft); box-shadow: 0 12px 24px rgba(34,9,15,.25); }
.printer__slot::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 3px; background: #050102; box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.printer__name { font-family: var(--serif); font-size: .95rem; color: #fff; margin-right: auto; letter-spacing: .02em; }
.printer__led { width: 9px; height: 9px; border-radius: 50%; background: #7BD88F; box-shadow: 0 0 8px rgba(123,216,143,.9); animation: led-idle 2.6s ease-in-out infinite; }
.printer__led.is-busy { background: var(--highlight); box-shadow: 0 0 10px rgba(242,214,75,.95); animation: led-busy .22s steps(2) infinite; }
@keyframes led-idle { 50% { opacity: .35; } }
@keyframes led-busy { 50% { opacity: .2; } }
.printer__state { font-size: .875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; min-width: 6.4em; }
.printer { perspective: 1600px; }
.printer__window { position: relative; z-index: 2; margin-top: -6px; clip-path: inset(0 -60px -80px -60px); transform-origin: 50% 0; }

.slip { --paper-c: #FFFDF6; --holes: 26px; position: relative; background-color: var(--paper-c); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, #F2E6E8 27px, #F2E6E8 28px); background-position: 0 14px; color: #2A2023; padding: 22px calc(var(--holes) + clamp(12px, 1.6vw, 22px)) 18px; margin-bottom: 12px; filter: drop-shadow(0 2px 1px rgba(34,9,15,.08)) drop-shadow(0 24px 28px rgba(34,9,15,.2)); transform-origin: 50% 0; will-change: transform; }
.slip::after { content: ''; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px; background: linear-gradient(-45deg, transparent 6px, var(--paper-c) 0) 0 0 / 12px 10px repeat-x, linear-gradient(45deg, transparent 6px, var(--paper-c) 0) 0 0 / 12px 10px repeat-x; }
.slip p { margin: 0; }
.slip__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 3px double #2A2023; }
.slip__title { font-family: var(--serif); font-size: clamp(1.3rem, 1.7vw, 1.6rem); line-height: 1.1; letter-spacing: 0; }
.slip__meta { display: flex; gap: 10px; align-items: baseline; font-size: .95rem; white-space: nowrap; }
.slip__meta > span { padding: 2px 7px; background: #F1E6E8; color: var(--claret); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }
.slip__meta b { color: var(--claret); }
.slip__label { font-size: .9rem; font-weight: 700; color: #5A4C50; margin: 12px 0 8px !important; }

/* Band bar: three stacked bars scaled from the left, limits as ticks */
.bandbar { position: relative; height: 26px; background: repeating-linear-gradient(90deg, #EFE3E6 0 1px, transparent 1px 10%), #F7EFF1; overflow: hidden; }
.bandbar__seg { position: absolute; inset: 0; clip-path: inset(0 calc((1 - var(--s, 0)) * 100%) 0 0); }
.bandbar__seg--small { background: #E58A9E; }
.bandbar__seg--mid { background: repeating-linear-gradient(-45deg, var(--crimson) 0 7px, #B8264E 7px 14px) 0 0 / 19.8px 19.8px; animation: stripe-run 1.4s linear infinite; }
@keyframes stripe-run { to { background-position: 19.8px 0; } }
.rm .bandbar__seg--mid { animation: none; }
.bandbar__seg--main { background: var(--claret); }
.bandbar__mk { position: absolute; inset: 0; transform: translateX(calc(var(--p, 0) * 100%)); pointer-events: none; }
.bandbar__mk i { position: absolute; left: -1px; top: -2px; bottom: -2px; width: 2px; background: #2A2023; }
.bandbar__shine { position: absolute; top: 0; bottom: 0; left: 0; width: 18%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transform: translateX(-120%); animation: bar-shine 4.5s var(--ease) infinite; mix-blend-mode: soft-light; }
@keyframes bar-shine { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(620%); } }
.bandbar__key { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font-size: .92rem; color: #5A4C50; }
.bandbar__key li { display: flex; align-items: center; gap: 7px; }
.bandbar__key i { width: 14px; height: 10px; flex: none; }
.bandbar__key b { display: inline-block; min-width: 4.6rem; color: #2A2023; font-weight: 700; }
.k-small i { background: #E58A9E; }
.k-mid i { background: repeating-linear-gradient(-45deg, var(--crimson) 0 3px, #B8264E 3px 6px); }
.k-main i { background: var(--claret); }

.slip__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(18px, 2.4vw, 34px); margin-top: 14px; padding-top: 10px; border-top: 1px dashed #C9BBBF; }
.sl { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 4px 0; font-size: .98rem; line-height: 20px; }
.sl > span:first-child { color: #5A4C50; }
.sl > span:last-child { font-weight: 600; text-align: right; white-space: nowrap; }
.sl { flex-wrap: nowrap; }
.sl [data-o="profit"], .sl [data-o="gross"] { display: inline-block; min-width: 4.8rem; text-align: right; }
.sl--gross { margin-top: 6px !important; padding-top: 8px; border-top: 1px solid #E2D6D9; }
.sl[data-off] { opacity: .35; }
.sl[data-off] > span:last-child { text-decoration: line-through; }
.slip__sum { position: relative; }
.slip__total { display: flex; flex-direction: column; padding: 2px 0 8px; border-bottom: 2px solid #2A2023; }
.slip__total span { font-size: .92rem; font-weight: 700; color: var(--claret); text-transform: uppercase; letter-spacing: .07em; }
.slip__total b { font: 600 clamp(2.2rem, 3.4vw, 3.1rem)/1.05 var(--sans); letter-spacing: -.035em; color: var(--crimson); }
.slip__pair, .slip__dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px dashed #C9BBBF; }
.slip__pair p, .slip__dates p { display: flex; flex-direction: column; font-size: .9rem; color: #5A4C50; line-height: 1.3; }
.slip__pair b { font-size: 1.3rem; color: #2A2023; letter-spacing: -.01em; }
.slip__dates b { font-size: 1.04rem; color: #2A2023; }
.slip__dates { border-bottom: 0; }
.slip__stamp { position: absolute; right: -12px; top: -44px; width: 128px; height: 80px; 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(-11deg); background: rgba(255,254,251,.72); pointer-events: none; }
.slip__stamp.is-long span { font-size: 1.02rem; letter-spacing: .02em; }
.slip__stamp span { font-family: var(--serif); font-size: 1.32rem; line-height: 1; text-transform: uppercase; letter-spacing: .03em; }
.slip__stamp small { font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; margin-top: 2px; }
.slip__large { margin-top: 10px !important; padding: 8px 10px; background: rgba(242,214,75,.35); font-size: .95rem; font-weight: 600; }
.slip__large[data-off] { display: none; }
.slip__foot { margin-top: 10px !important; padding-top: 8px; border-top: 1px dashed #C9BBBF; font-size: .9rem; line-height: 1.4; color: #5A4C50; }

@media (max-width: 1099px) {
  .ct-calc { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'form' 'printer' 'cta'; grid-template-rows: auto; row-gap: 22px; }
  .printer { max-width: 760px; }
}
@media (max-width: 600px) {
  .ct-open { padding-top: calc(var(--head-h) + 18px); }
  .ct-open h1 { font-size: clamp(2.1rem, 9.4vw, 2.6rem); }
  .ct-open__head .lede { font-size: 1.02rem; }
  .ct-form { padding: 16px 14px 16px; box-shadow: 10px 10px 0 rgba(117,21,35,.07); }
  .ct-form__pair { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 10px; }
  .date { padding: 0 8px; font-size: .98rem; }
  .ct-form legend, .fld__label { font-size: .875rem; letter-spacing: .04em; white-space: nowrap; }
  .printer__slot { margin: 0 -6px; }
  .slip { padding: 18px 14px 16px; }
  .slip__cols { grid-template-columns: 1fr; }
  .slip__sum { margin-top: 10px; }
  .slip__stamp { width: 100px; height: 62px; right: -2px; top: -6px; }
  .slip__stamp span { font-size: 1.1rem; }
  .slip__meta > span { display: none; }
}

/* ---------- How it's worked out: the effective-rate chart ---------- */
.ct-how { overflow: clip; padding-block: clamp(64px, 7vw, 100px); }
.ct-how__grid-bg { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(117,21,35,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(117,21,35,.05) 1px, transparent 1px); background-size: 48px 48px; animation: grid-drift 30s linear infinite; -webkit-mask-image: radial-gradient(ellipse at 30% 60%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 30% 60%, #000 20%, transparent 75%); }
@keyframes grid-drift { to { background-position: 48px 48px; } }
.ct-how .sec-head { margin-bottom: clamp(24px, 3vw, 40px); }
.ct-how__grid { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(22px, 3vw, 48px); align-items: stretch; }
.chart { position: relative; margin: 0; background: #fff; border: 1px solid var(--rule); padding: clamp(14px, 1.6vw, 22px) clamp(14px, 1.6vw, 22px) 14px; box-shadow: 18px 18px 0 rgba(117,21,35,.07); }
.chart__svg { width: 100%; height: auto; max-height: min(50vh, 430px); overflow: visible; font-family: var(--sans); }
.chart__grid line { stroke: #EADCDF; stroke-width: 1; }
.chart__grid .axis { stroke: var(--ink); stroke-width: 1.5; }
.chart__grid text { font-size: 14px; font-weight: 600; fill: var(--ink-soft); }
.chart__grid .lab-hi { fill: var(--claret); font-weight: 700; }
.chart__line { fill: none; stroke: var(--crimson); stroke-width: 4.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1 1; }
.chart__step { fill: none; stroke: var(--claret); stroke-width: 2; stroke-dasharray: 7 7; opacity: .7; animation: march 1.2s linear infinite; }
@keyframes march { to { stroke-dashoffset: -14; } }
.chart__limits line { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 5; opacity: .5; }
.chart__limits text { font-size: 13px; font-weight: 700; fill: var(--ink); }
.chart__drop { stroke: var(--crimson); stroke-width: 1.5; stroke-dasharray: 4 4; }
.chart__dot { fill: var(--crimson); stroke: #fff; stroke-width: 3; }
.chart__halo { fill: rgba(163,24,62,.18); transform-box: fill-box; transform-origin: center; animation: halo 2.2s ease-out infinite; }
@keyframes halo { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.chart__tag { position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 18px)); background: var(--ink); color: #fff; padding: 6px 10px; white-space: nowrap; pointer-events: none; line-height: 1.25; }
.chart__tag::after { content: ''; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--ink); }
.chart__tag span { display: block; font-size: .8rem; font-weight: 600; color: var(--on-dark-soft); }
.chart__tag b { font-size: .98rem; }
.chart__key { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 8px; font-size: .95rem; font-weight: 600; color: var(--ink-soft); }
.ck { display: inline-flex; align-items: center; gap: 8px; }
.ck i { width: 26px; height: 0; border-top: 4px solid var(--crimson); }
.ck--step i { border-top: 2px dashed var(--claret); }

.ct-how__bands { display: grid; gap: 12px; align-content: stretch; }
.bandcard { position: relative; background: #fff; padding: 18px 20px 16px 24px; border: 1px solid var(--rule); overflow: hidden; }
.bandcard::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; }
.bandcard--small::before { background: #E58A9E; }
.bandcard--mid::before { background: repeating-linear-gradient(-45deg, var(--crimson) 0 4px, #B8264E 4px 8px); }
.bandcard--main::before { background: var(--claret); }
.bandcard h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.25rem, 1.6vw, 1.5rem); margin-bottom: 6px; }
.bandcard p { margin: 0; font-size: 1rem; color: var(--ink-soft); line-height: 1.5; }
.bandcard.is-you { border-color: var(--crimson); box-shadow: 8px 8px 0 rgba(163,24,62,.12); }
.bandcard.is-you h3::after { content: 'Your band'; display: inline-block; vertical-align: middle; margin-left: 10px; padding: 3px 8px; background: var(--highlight); color: var(--ink); font-family: var(--sans); font-weight: 700; font-size: .8rem; letter-spacing: .02em; }

.ct-how__notes { position: relative; display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px clamp(20px, 2.6vw, 40px); margin-top: clamp(22px, 3vw, 36px); padding-top: 18px; border-top: 2px solid var(--ink); }
.ct-how__notes p { margin: 0; font-size: 1rem; color: var(--ink-soft); }
.ct-how__notes b { color: var(--ink); }
.formula { display: grid; gap: 2px; }
.formula__k { font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--claret); }
.formula__v { font-family: var(--serif); font-size: clamp(1.25rem, 1.6vw, 1.5rem); color: var(--ink); line-height: 1.3; }
.formula__eg { font-size: .98rem; }
@media (max-width: 1099px) {
  .ct-how__grid { grid-template-columns: 1fr; }
  .ct-how__bands { grid-template-columns: repeat(3, 1fr); }
  .ct-how__notes { grid-template-columns: 1fr 1fr; }
  .formula { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .ct-how__bands { grid-template-columns: 1fr; }
  .ct-how__notes { grid-template-columns: 1fr; }
  .chart__grid text { font-size: 28px; }
  .chart__grid text.x-odd { display: none; }
  .chart__limits text { font-size: 25px; }
  .chart__ghost text { font-size: 26px; }
}

/* ---------- Dates and rules (ink-blue) ---------- */
.ct-dates { overflow: clip; }
.ct-dates::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: rule-drift-36 22s linear infinite; pointer-events: none; }
@keyframes rule-drift-36 { to { background-position: 0 36px; } }
.ct-dates__rule { position: absolute; top: 0; bottom: 0; left: clamp(14px, 3.2vw, 52px); width: 1px; background: rgba(163,24,62,.6); }
.ct-dates h2 { color: #fff; }
.ct-dates .sec-head { margin-bottom: clamp(26px, 3vw, 40px); }

.tl { position: relative; height: 112px; margin: 0 clamp(40px, 6vw, 90px) clamp(26px, 3.4vw, 46px) clamp(6px, 1vw, 12px); }
.tl__svg { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 60px; overflow: visible; }
.tl__base { stroke: rgba(255,255,255,.18); stroke-width: 2; vector-effect: non-scaling-stroke; }
.tl__draw { stroke: var(--highlight); stroke-width: 3; stroke-dasharray: 1 1; vector-effect: non-scaling-stroke; }
.tl__runner { position: absolute; left: 0; top: 30px; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--highlight); box-shadow: 0 0 0 6px rgba(242,214,75,.18), 0 0 18px rgba(242,214,75,.7); }
.no-js .tl__runner, .rm .tl__runner { display: none; }
.tl__stops { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.tl__stop { position: absolute; left: calc(var(--x) * 100%); top: 0; display: flex; flex-direction: column; align-items: flex-start; padding-top: 52px; white-space: nowrap; }
.tl__stop--end { align-items: flex-end; transform: translateX(-100%); }
.tl__stop:nth-child(2) { align-items: center; transform: translateX(-50%); }
.tl__pin { position: absolute; top: 30px; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--ink-blue); border: 3px solid #fff; left: -11px; }
.tl__stop:nth-child(2) .tl__pin { left: 50%; margin-left: -11px; }
.tl__stop--end .tl__pin { left: auto; right: -11px; background: var(--crimson); }
.tl__k { font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--on-dark-soft); }
.tl__stop b { font-family: var(--serif); font-weight: 400; font-size: clamp(1.2rem, 1.7vw, 1.6rem); color: #fff; line-height: 1.2; }

.ct-dates__grid { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(22px, 3vw, 48px); align-items: start; }
.rules { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rule-card { position: relative; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-top: 3px solid var(--crimson); padding: 18px 20px 18px; overflow: hidden; transition: background .35s var(--ease), transform .45s var(--ease); }
.rule-card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(300px circle at var(--lx, 50%) var(--ly, 50%), rgba(242,214,75,.12), transparent 60%); opacity: 0; transition: opacity .35s; pointer-events: none; }
.rule-card:hover { background: rgba(255,255,255,.08); }
.rule-card:hover::after { opacity: 1; }
.rule-card__v { margin: 0 0 6px; font: 600 clamp(1.9rem, 2.6vw, 2.5rem)/1.05 var(--sans); letter-spacing: -.03em; color: var(--highlight); }
.rule-card__v small { font-size: .5em; font-weight: 700; letter-spacing: 0; color: #fff; }
.rule-card h3 { color: #fff; font-size: 1.12rem; margin-bottom: 6px; }
.rule-card p:last-child { margin: 0; font-size: .98rem; color: var(--on-dark-soft); line-height: 1.5; }

.rates { position: relative; background: #fff; color: var(--ink); padding: 20px 22px 18px; border-left: 4px solid var(--crimson); box-shadow: 18px 18px 0 rgba(0,0,0,.22); }
.rates__table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.rates__table caption { text-align: left; font-family: var(--serif); font-size: 1.35rem; line-height: 1.2; padding-bottom: 10px; color: var(--ink); }
.rates__table th, .rates__table td { text-align: left; padding: 10px 8px 10px 0; vertical-align: top; border-bottom: 1px solid var(--rule); }
.rates__table thead th { font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--claret); border-bottom: 2px solid var(--ink); }
.rates__table tbody th { font-weight: 700; white-space: nowrap; }
.rates__table td small { display: block; font-size: .88rem; color: var(--ink-soft); }
.rates__table tr { background: linear-gradient(90deg, rgba(242,214,75,.55), rgba(242,214,75,.55)) no-repeat 0 0 / 0 100%; transition: background-size .6s var(--ease); }
.rates__table tr.is-on { background-size: 100% 100%; }
.rates__note { margin: 12px 0 0; font-size: .95rem; color: var(--ink-soft); }
@media (max-width: 1099px) { .ct-dates__grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .tl { height: auto; margin: 0 0 30px; padding-left: 26px; }
  .tl__svg { left: 0; top: 0; bottom: 0; width: 22px; height: 100%; display: none; }
  .tl::before { content: ''; position: absolute; left: 10px; top: 8px; bottom: 8px; width: 2px; background: rgba(255,255,255,.2); }
  .tl__runner { left: 11px; top: 0; }
  .tl__stops { position: relative; display: grid; gap: 18px; }
  .tl__stop, .tl__stop--end, .tl__stop:nth-child(2) { position: relative; left: auto; transform: none; align-items: flex-start; padding-top: 0; white-space: normal; }
  .tl__pin, .tl__stop:nth-child(2) .tl__pin, .tl__stop--end .tl__pin { left: -26px; right: auto; top: 12px; margin-left: 0; }
  .rules { grid-template-columns: 1fr; }
  .rates { padding: 16px 14px; }
  .rates__table { font-size: .95rem; }
}

/* ---------- How we help (white) ---------- */
.ct-help { overflow: clip; }
.ct-help__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.ct-help__media { position: relative; padding: 22px 0 0 22px; }
.ct-help__oval { position: absolute; left: -7%; top: -10%; width: 66%; z-index: 0; overflow: visible; }
.ct-help__oval ellipse { fill: none; stroke: var(--crimson); stroke-width: 1.6; stroke-dasharray: 6 10; animation: dash-turn 30s linear infinite; }
.ct-help__frame { position: relative; z-index: 1; height: min(62vh, 560px); box-shadow: 24px 24px 0 rgba(117,21,35,.12); }
.ct-help__frame img { position: absolute; inset: -6% 0 auto; height: 112%; }
.motion .ct-help__frame { animation: none; }
.ct-help__stamp { position: absolute; z-index: 3; right: -18px; top: 6%; width: 146px; height: 92px; border: 4px solid var(--crimson); outline: 1.5px solid var(--crimson); outline-offset: -10px; border-radius: 50%; display: grid; place-content: center; text-align: center; color: var(--crimson); background: rgba(255,255,255,.9); transform: rotate(-12deg); box-shadow: 0 14px 30px rgba(34,9,15,.18); }
.ct-help__stamp span { font-family: var(--serif); font-size: 1.7rem; line-height: 1; text-transform: uppercase; letter-spacing: .05em; }
.ct-help__stamp small { font-weight: 700; font-size: .78rem; letter-spacing: .16em; }
.ct-help__slip { position: absolute; z-index: 3; left: 0; bottom: -26px; margin: 0; padding: 12px 18px 16px; background: #FFFEFB; border-left: 3px solid var(--crimson); box-shadow: 0 16px 30px rgba(34,9,15,.18); display: flex; flex-direction: column; line-height: 1.25; }
.ct-help__slip span { font-size: .92rem; color: var(--ink-soft); font-weight: 600; }
.ct-help__slip b { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; color: var(--claret); }
.ct-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 h3 { 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) {
  .ct-help__grid { grid-template-columns: 1fr; }
  .ct-help__frame { height: min(48vh, 380px); }
  .ct-help__media { margin-bottom: 40px; }
  .ct-help__stamp { width: 112px; height: 72px; right: -4px; }
  .ct-help__stamp span { font-size: 1.3rem; }
}

/* ---------- CTA (crimson) ---------- */
.ct-cta { overflow: clip; padding-bottom: clamp(28px, 3vw, 44px); }
.ct-cta__oval { position: absolute; right: -8vw; top: 50%; width: min(980px, 82vw); transform: translateY(-58%); overflow: visible; pointer-events: none; }
.ct-cta__oval .o-draw { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 2; stroke-dasharray: 1 1; }
.ct-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; }
.ct-cta__inner { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.ct-cta h2 { color: #fff; margin-bottom: 18px; }
.ct-cta .lede { margin-bottom: 28px; max-width: 120ch; }
.tape { position: relative; margin-top: clamp(48px, 6vw, 84px); padding: 18px 0 0; transform: rotate(-1.2deg); transform-origin: 50% 50%; }
.tape__track { display: flex; width: max-content; background: #FFFEFB; color: var(--ink); animation: marquee 46s linear infinite; position: relative; }
.tape__track::before, .tape__track::after { content: ''; position: absolute; left: 0; right: 0; height: 9px; }
.tape__track::before { top: -8px; background: linear-gradient(135deg, transparent 6px, #FFFEFB 0) 0 0 / 12px 9px repeat-x, linear-gradient(-135deg, transparent 6px, #FFFEFB 0) 0 0 / 12px 9px repeat-x; }
.tape__track::after { bottom: -8px; background: linear-gradient(-45deg, transparent 6px, #FFFEFB 0) 0 0 / 12px 9px repeat-x, linear-gradient(45deg, transparent 6px, #FFFEFB 0) 0 0 / 12px 9px repeat-x; }
.tape__item { flex: none; padding: 16px 30px; font-weight: 700; font-size: 1.05rem; white-space: nowrap; border-right: 1px dashed #C9BBBF; }
.tape__item:nth-child(odd) { color: var(--claret); }
@keyframes marquee { to { transform: translateX(-50%); } }
.rm .tape__track { animation: none; }
@media (max-width: 760px) { .ct-cta__oval { right: -40vw; width: 130vw; top: 30%; } }
.chart__tag::after { left: calc(50% + var(--ax, 0px)); }
.no-js .chart__tag { display: none; }

/* Continuous stationery: sprocket holes down both edges, a perforation inside them */
.slip__holes { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(circle at 13px 14px, #E9DDE0 0 4.5px, rgba(0,0,0,.08) 5px, transparent 5.6px) 0 0 / var(--holes) 28px repeat-y,
  radial-gradient(circle at 13px 14px, #E9DDE0 0 4.5px, rgba(0,0,0,.08) 5px, transparent 5.6px) 100% 0 / var(--holes) 28px repeat-y,
  linear-gradient(#D8C8CC 50%, transparent 0) var(--holes) 0 / 1px 8px repeat-y,
  linear-gradient(#D8C8CC 50%, transparent 0) calc(100% - var(--holes)) 0 / 1px 8px repeat-y; }

/* Phones: a chip with the total while the slip is below */
.ct-peek { display: none; }
@media (max-width: 1099px) {
  .ct-peek { position: fixed; z-index: 50; right: 16px; bottom: 14px; 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; }
  .ct-peek.is-on { transform: none; opacity: 1; }
  .ct-peek span { font-size: .9rem; font-weight: 600; color: var(--on-dark-soft); }
  .ct-peek { width: 13.5rem; justify-content: space-between; }
  .ct-peek b { display: inline-block; width: 6.5rem; text-align: right; font-size: 1.15rem; }
  .ct-peek svg { width: 18px; height: 18px; color: var(--highlight); animation: peek-bob 1.6s ease-in-out infinite; }
  @keyframes peek-bob { 50% { transform: translateY(3px); } }
}
@media (max-width: 600px) { .slip { --holes: 18px; } .slip__holes { background-size: var(--holes) 28px, var(--holes) 28px, 1px 8px, 1px 8px; background-image: radial-gradient(circle at 9px 14px, #E9DDE0 0 3.5px, rgba(0,0,0,.08) 4px, transparent 4.6px), radial-gradient(circle at 9px 14px, #E9DDE0 0 3.5px, rgba(0,0,0,.08) 4px, transparent 4.6px), linear-gradient(#D8C8CC 50%, transparent 0), linear-gradient(#D8C8CC 50%, transparent 0); } }

/* Fixed-size grid so nothing moves sideways when the web font arrives */
.printer__cta { position: relative; z-index: 2; display: grid; grid-template-columns: 17.5rem 9rem max-content; grid-template-areas: 'text btn tel'; align-items: center; gap: 8px 14px; margin: 26px 0 0; align-self: start; font-weight: 600; color: var(--ink); }
.printer__cta > span { grid-area: text; white-space: nowrap; }
.printer__cta .btn { grid-area: btn; width: 100%; padding-inline: 0; }
.printer__tel { grid-area: tel; justify-self: start; white-space: nowrap; }
@media (max-width: 760px), (min-width: 1100px) and (max-height: 860px) {
  .printer__cta { grid-template-columns: 9rem max-content; grid-template-areas: 'text text' 'btn tel'; }
}
.printer__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; }
.printer__tel:hover { background-size: 0 1.5px; background-position: 100% 100%; }
@media (max-width: 1099px), (pointer: coarse) { .printer__tel { display: inline-flex; align-items: center; min-height: 44px; } }

.bandcard .bandcard__rate { position: absolute; right: 18px; top: 14px; margin: 0; font: 600 clamp(1.6rem, 2.2vw, 2.1rem)/1 var(--sans); letter-spacing: -.03em; color: var(--claret); opacity: .9; }
.bandcard .bandcard__rate small { font-size: .45em; font-weight: 700; letter-spacing: 0; margin: 0 4px; vertical-align: .35em; color: var(--ink-soft); }
.bandcard h3 { padding-right: 90px; }
.bandcard--mid h3 { padding-right: 120px; }
.bandcard--mid::before { background-size: 11.3px 11.3px; animation: stripe-run-sm 1.2s linear infinite; }
@keyframes stripe-run-sm { to { background-position: 0 11.3px; } }
.bandcard { transition: border-color .4s, box-shadow .5s var(--ease), transform .5s var(--ease); }
.bandcard.is-you { transform: translateX(-6px); }
.chart__ghost { opacity: 0; transition: opacity .25s; pointer-events: none; }
.chart.is-hover .chart__ghost { opacity: 1; }
.chart__ghost circle { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.chart__ghost-line { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 4; }
.chart__ghost text { font-size: 15px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; }
.chart__hit { cursor: crosshair; }
.ck--try { font-weight: 500; color: var(--ink-soft); margin-left: auto; }
@media (hover: none) { .ck--try { display: none; } }

.chart__pulse { fill: none; stroke: var(--highlight); stroke-width: 16; stroke-linecap: round; opacity: .75; stroke-dasharray: .1 .9; stroke-dashoffset: 1; animation: pulse-run 5s linear infinite; }
@keyframes pulse-run { to { stroke-dashoffset: 0; } }
.rm .chart__pulse, .no-js .chart__pulse { display: none; }
.ct-dates__oval { position: absolute; right: -18vw; top: -20%; width: 72vw; height: 120%; border-radius: 50%; border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 0 0 46px rgba(255,255,255,.02), inset 0 0 0 92px rgba(255,255,255,.015); animation: wobble 20s ease-in-out infinite alternate; pointer-events: none; }
.tl__months { position: absolute; left: 0; right: 0; top: 24px; height: 12px; display: flex; justify-content: space-evenly; pointer-events: none; }
.tl__months i { width: 1px; height: 100%; background: rgba(255,255,255,.35); }
.tl__months i:nth-child(9) { height: 0; }
@media (max-width: 760px) { .tl__months { display: none; } }

.ct-cta__stub { position: relative; justify-self: start; width: min(100%, 360px); margin-top: 8px; padding: 22px 24px 26px; background: #FFFDF6; color: var(--ink); transform: rotate(3deg); filter: drop-shadow(0 26px 30px rgba(34,9,15,.35)); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, #F2E6E8 27px, #F2E6E8 28px); }
.ct-cta__stub::after { content: ''; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px; background: linear-gradient(-45deg, transparent 6px, #FFFDF6 0) 0 0 / 12px 10px repeat-x, linear-gradient(45deg, transparent 6px, #FFFDF6 0) 0 0 / 12px 10px repeat-x; }
.ct-cta__stub p { margin: 0; }
.stub__k { font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--claret); }
.stub__v { font: 600 clamp(2.3rem, 3.4vw, 3rem)/1.1 var(--sans); letter-spacing: -.035em; color: var(--crimson); padding-bottom: 8px; border-bottom: 2px solid var(--ink); margin-bottom: 8px !important; }
.stub__l { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: .98rem; }
.stub__l span { color: var(--ink-soft); }
.stub__q { margin-top: 12px !important; padding-top: 10px; border-top: 1px dashed #C9BBBF; font-weight: 600; font-size: .98rem; }
.stub__stamp { position: absolute; right: -26px; top: -30px; width: 112px; height: 70px; 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); background: rgba(255,253,246,.9); transform: rotate(-14deg); }
.stub__stamp span { font-family: var(--serif); font-size: 1.4rem; line-height: 1; text-transform: uppercase; letter-spacing: .05em; }
.stub__stamp small { font-weight: 700; font-size: .62rem; text-transform: uppercase; letter-spacing: .14em; }
@media (max-width: 900px) { .ct-cta__inner { grid-template-columns: 1fr; } .ct-cta__stub { justify-self: start; margin: 10px 0 0 6px; } }

/* The slider track is a map of the bands: 19%, the marginal band, 25%; lit up to the thumb */
.range__zones { position: absolute; left: 13px; right: 13px; top: calc(var(--rh) / 2 - 4px); height: 8px; pointer-events: none; overflow: hidden; }
.range__zones i { position: absolute; top: 0; bottom: 0; }
.range__zones .z1 { left: 0; width: calc(var(--l) * 100%); background: #E58A9E; }
.range__zones .z2 { left: calc(var(--l) * 100%); width: calc((var(--u) - var(--l)) * 100%); background: repeating-linear-gradient(-45deg, var(--crimson) 0 5px, #B8264E 5px 10px) 0 0 / 14.14px 14.14px; animation: stripe-run-z 1.2s linear infinite; }
@keyframes stripe-run-z { to { background-position: 14.14px 0; } }
.range__zones .z3 { left: calc(var(--u) * 100%); right: 0; background: var(--claret); }
.range__zones .zdim { left: calc(var(--f, .3) * 100%); right: 0; background: rgba(255,255,255,.72); }
.rm .range__zones .z2 { animation: none; }

/* Shorter desktop screens (1366x768, 1280x720): the whole calculator on the first screen.
   The form and the call to action share the left column; the slip takes the right. */
@media (min-width: 1100px) and (max-height: 860px) {
  .ct-open { padding: calc(var(--head-h) + 10px) 0 12px; }
  .ct-open__head { margin-bottom: 10px; }
  .ct-open h1 { font-size: clamp(2.1rem, 3.1vw, 2.7rem); margin-bottom: 4px; }
  .ct-open__head .lede { font-size: 1rem; }
  .ct-calc { grid-template-areas: 'form printer' 'cta printer'; grid-template-rows: auto 1fr; }
  .printer__cta { margin-top: 10px; }
  .ct-form { gap: 8px; padding: 14px 18px 14px; }
  .ct-form legend, .fld__label { margin-bottom: 5px; }
  .seg-field:first-child .fld__hint { display: none; }
  .seg__opt span { min-height: 38px; font-size: .95rem; }
  .money__input { height: 44px; font-size: 1.75rem; }
  .money__sign { font-size: 1.75rem; }
  .range { margin-top: 6px; padding-bottom: 18px; }
  .date { height: 44px; }
  .fld__hint { margin-top: 4px; font-size: .9rem; }
  .printer__slot { height: 30px; }
  .slip { padding-top: 14px; padding-bottom: 12px; }
  .slip__head { padding-bottom: 6px; }
  .slip__title { font-size: 1.3rem; }
  .slip__label { margin: 8px 0 6px !important; }
  .bandbar { height: 20px; }
  .bandbar__key { margin-top: 6px; }
  .slip__cols { margin-top: 10px; padding-top: 6px; }
  .sl { padding: 2px 0; font-size: .95rem; }
  .slip__total b { font-size: 2.3rem; }
  .slip__pair, .slip__dates { padding: 6px 0; }
  .slip__pair b { font-size: 1.15rem; }
  .slip__foot { margin-top: 6px !important; padding-top: 6px; font-size: .875rem; }
  .slip__stamp { top: -70px; right: -14px; width: 108px; height: 68px; }
  .slip__stamp span { font-size: 1.15rem; }
  .slip__stamp.is-long span { font-size: .9rem; }
}