/* Working from home calculator page. Design plan: _work/design-plan.md (tool row: the calculator is the opener).
   The opener is a filing folder with a tab for each kind of claimant and a monthly claim card; below, the flat rate
   and the actual-costs method race each other. */

/* Show the inputs that belong to the chosen tab (works without JS from the server's data-who) */
.wfh-open[data-who="self"] [data-show]:not([data-show~="self"]),
.wfh-open[data-who="paid"] [data-show]:not([data-show~="paid"]),
.wfh-open[data-who="claim"] [data-show]:not([data-show~="claim"]) { display: none; }

/* ---------- Opener: dotted notebook paper and a filing folder ---------- */
.wfh-open { --c-flat: #E58A9E; --c-act: var(--claret); position: relative; overflow: clip; background: var(--blush); padding: calc(var(--head-h) + clamp(18px, 2.6vh, 34px)) 0 clamp(44px, 6vh, 80px); }
.wfh-open__dots { position: absolute; inset: -30px; pointer-events: none; background-image: radial-gradient(circle, rgba(117,21,35,.18) 1.2px, transparent 1.6px); background-size: 26px 26px; animation: wfh-dots 9s linear infinite; -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0,0,0,.7) 50%, rgba(0,0,0,.25)); mask-image: linear-gradient(180deg, #000 0, rgba(0,0,0,.7) 50%, rgba(0,0,0,.25)); }
@keyframes wfh-dots { to { transform: translate(26px, 26px); } }
.rm .wfh-open__dots { animation: none; }
.wfh-open__head { position: relative; margin-bottom: clamp(14px, 2.2vh, 26px); }
.wfh-open h1 { font-size: clamp(2.3rem, 4vw, 3.9rem); margin-bottom: 6px; }
.wfh-open__head .lede { margin: 0; max-width: 120ch; }
.motion:not(.motion-fail) [data-wfh-in], .motion:not(.motion-fail) [data-wfh-in-body] { opacity: 0; }

.folder { position: relative; }
.folder__tabs { display: flex; gap: 6px; margin: 0; padding: 0 0 0 18px; border: 0; min-width: 0; }
.ftab { position: relative; cursor: pointer; flex: 0 1 auto; }
.ftab input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ftab > span { display: flex; flex-direction: column; justify-content: center; min-height: 58px; padding: 8px 22px 10px; background: #EAD5DA; color: var(--ink); clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%); transition: background .3s, color .3s, transform .35s var(--ease); transform: translateY(6px); line-height: 1.2; }
.ftab b { font-size: 1.05rem; }
.ftab small { font-size: .875rem; font-weight: 600; color: var(--ink-soft); }
.ftab:hover > span { background: #F3E3E7; transform: translateY(2px); }
.ftab input:checked + span { background: #fff; transform: none; box-shadow: inset 0 4px 0 var(--crimson); }
.ftab input:checked + span small { color: var(--claret); }
.ftab input:focus-visible + span { outline: 3px solid var(--highlight); outline-offset: -3px; }
.folder__body { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 48px); padding: clamp(18px, 2vw, 28px); background: #fff; box-shadow: 0 30px 50px -30px rgba(34,9,15,.3), 16px 16px 0 rgba(117,21,35,.07); }
.folder__inputs { display: grid; align-content: start; gap: 14px; min-width: 0; }
.frow { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.wseg-f { margin: 0; padding: 0; border: 0; min-width: 0; }
.wseg-f legend, .flab { display: block; padding: 0; margin-bottom: 6px; font-size: .875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--claret); }
.flab small { display: block; font-weight: 500; letter-spacing: 0; text-transform: none; font-size: .9rem; color: var(--ink-soft); }
.wseg { position: relative; display: flex; padding: 3px; background: var(--blush); border: 1px solid var(--rule); }
.wseg label { position: relative; z-index: 1; cursor: pointer; }
.wseg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wseg span { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 14px; border-radius: var(--btn-r); font-weight: 700; white-space: nowrap; transition: color .3s; }
.wseg label:hover span { color: var(--crimson); }
.wseg input:checked + span { color: #fff; }
.wseg input:focus-visible + span { outline: 3px solid var(--highlight); outline-offset: 2px; }
.wseg__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 .wseg__ink, .motion-fail .wseg__ink { display: none; }
.no-js .wseg input:checked + span, .motion-fail .wseg input:checked + span { background: var(--claret); }
.fset { display: grid; gap: 14px; }
.fhours__row { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); align-items: center; gap: 16px; }
.fhours__out { font: 600 2.4rem/1 var(--sans); letter-spacing: -.03em; color: var(--crimson); text-align: right; }
.wrange { --rh: 32px; position: relative; padding-bottom: 20px; }
@media (pointer: coarse) { .wrange { --rh: 44px; } }
.wrange__bands { position: absolute; left: 13px; right: 13px; top: calc(var(--rh) / 2 - 5px); height: 10px; background: #EFE3E6; overflow: hidden; pointer-events: none; }
.wrange__bands i { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%); }
.wrange__bands i:nth-child(1) { background: #EFE3E6; }
.wrange__bands i:nth-child(2) { background: #F2C2CD; }
.wrange__bands i:nth-child(3) { background: #E58A9E; }
.wrange__bands i:nth-child(4) { background: var(--crimson); }
.wrange__bands::after { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--f, .5) * 100%); right: 0; background: rgba(255,255,255,.7); }
.wrange__bands--flat { background: linear-gradient(90deg, #E58A9E, var(--crimson)); }
.wrange__in { position: relative; z-index: 1; -webkit-appearance: none; appearance: none; display: block; width: 100%; height: var(--rh); margin: 0; background: transparent; cursor: pointer; }
.wrange__in::-webkit-slider-runnable-track { height: 6px; background: transparent; }
.wrange__in::-moz-range-track { height: 6px; background: transparent; }
.wrange__in::-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); }
.wrange__in::-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); }
.wrange__in:focus-visible { outline: 3px solid var(--highlight); outline-offset: 4px; }
.wrange__marks { position: absolute; left: 13px; right: 13px; top: var(--rh); height: 18px; pointer-events: none; }
.wrange__marks b { position: absolute; left: calc(var(--p) * 100%); transform: translateX(-50%); font-size: .875rem; font-weight: 700; color: var(--ink-soft); }
.fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; }
.ffld { margin: 0; min-width: 0; }
.ffld .flab { font-size: .875rem; letter-spacing: .05em; line-height: 1.25; min-height: 2.5em; display: flex; flex-direction: column; justify-content: flex-end; }
.ffld--wide .flab { min-height: 0; }
.w-money { display: flex; align-items: center; gap: 4px; height: 48px; padding: 0 10px; background: #fff; border: 1px solid var(--rule); border-bottom: 2px solid var(--ink); }
.w-money > span { color: var(--crimson); font-weight: 700; }
.w-money input { flex: 1; min-width: 0; width: 100%; height: 100%; border: 0; background: transparent; padding: 0; font: 600 1.1rem/1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.w-money input:focus { outline: none; }
.w-money:focus-within { background: #FFFBE6; }
.w-money:has(input:focus-visible) { outline: 3px solid var(--highlight); outline-offset: 2px; }
.ffld--wide { display: grid; grid-template-columns: minmax(0, 1fr) 11rem; align-items: center; gap: 16px; }
.ffld--wide .flab { margin: 0; }
.fnote { margin: 0; padding: 10px 14px; background: rgba(242,214,75,.32); font-size: .95rem; font-weight: 600; }
.fmsg { margin: 0; font-size: .92rem; font-weight: 600; color: var(--crimson); }
.fmsg:empty { display: none; }
.wfh-go { justify-self: start; }
.js .wfh-go { display: none; }

/* The claim card: a ruled index card with a red header line */
.claim { position: relative; align-self: start; display: grid; gap: 4px; padding: 20px 22px 18px; background: #FFFCF2; background-image: linear-gradient(transparent 52px, rgba(163,24,62,.55) 52px, rgba(163,24,62,.55) 54px, transparent 54px), repeating-linear-gradient(to bottom, transparent 0, transparent 29px, rgba(19,32,47,.1) 29px, rgba(19,32,47,.1) 30px); background-position: 0 0, 0 54px; border: 1px solid #E8DCC4; box-shadow: 0 20px 34px -18px rgba(34,9,15,.35); transform-origin: 50% 0; }
.claim p { margin: 0; }
.claim__k { font-family: var(--serif); font-size: 1.35rem; line-height: 1.2; padding-bottom: 14px; }
.claim__month { display: flex; align-items: baseline; gap: 10px; margin-top: 6px !important; }
.claim__month b { font: 600 clamp(2.6rem, 4vw, 3.6rem)/1 var(--sans); letter-spacing: -.04em; color: var(--crimson); }
.claim__month span { font-weight: 700; color: var(--ink-soft); }
.claim__dl { margin: 10px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; padding-top: 10px; border-top: 2px solid var(--ink); }
.claim__dl dt { font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--claret); }
.claim__dl dd { margin: 0; font: 600 1.35rem/1.2 var(--sans); letter-spacing: -.01em; }
.claim__m { grid-column: 1 / -1; }
.claim__none { margin-top: 10px !important; padding: 10px 12px; background: rgba(242,214,75,.4); font-size: .95rem; font-weight: 600; }
.claim__none[hidden] { display: none; }
.claim__stamp { position: absolute; right: 14px; top: 64px; width: 120px; height: 76px; 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,252,242,.8); pointer-events: none; }
.claim__stamp span { font-family: var(--serif); font-size: 1.3rem; line-height: 1; text-transform: uppercase; letter-spacing: .04em; }
.claim__stamp small { font-weight: 700; font-size: .66rem; text-transform: uppercase; letter-spacing: .14em; margin-top: 2px; }
.claim__cta { margin-top: 14px !important; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.claim__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; min-height: 44px; align-items: center; }

@media (max-width: 1099px) {
  .folder__body { grid-template-columns: minmax(0, 1fr); }
  .claim { max-width: 560px; }
}
@media (max-width: 760px) {
  .folder__tabs { padding-left: 0; gap: 4px; }
  .ftab { flex: 1 1 0; min-width: 0; }
  .ftab > span { padding: 8px 10px 10px; clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 100%, 0 100%); }
  .ftab b { font-size: .95rem; }
  .ftab small { font-size: .875rem; line-height: 1.2; }
  .fgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ffld--wide { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .fhours__row { grid-template-columns: 3.4rem minmax(0, 1fr); gap: 10px; }
  .fhours__out { font-size: 1.9rem; }
}
@media (max-width: 600px) {
  .wfh-open { padding-top: calc(var(--head-h) + 18px); }
  .wfh-open h1 { font-size: clamp(2rem, 8.8vw, 2.5rem); }
  .wfh-open__head .lede { font-size: 1.02rem; }
  .folder__body { padding: 16px 14px; }
  .wseg span { padding: 0 10px; }
  .claim { padding: 18px 16px 16px; }
  .claim__stamp { width: 96px; height: 60px; top: 60px; right: 8px; }
  .claim__stamp span { font-size: 1.05rem; }
}
@media (min-width: 1100px) and (max-height: 860px) {
  .wfh-open { padding: calc(var(--head-h) + 10px) 0 20px; }
  .wfh-open h1 { font-size: clamp(2rem, 3vw, 2.6rem); margin-bottom: 0; }
  .wfh-open__head { margin-bottom: 10px; }
  .ftab > span { min-height: 50px; padding-top: 6px; padding-bottom: 6px; }
  .folder__body { padding: 14px 20px; }
  .folder__inputs, .fset { gap: 10px; }
  .w-money { height: 40px; }
  .wseg span { min-height: 36px; }
}

/* ---------- The race (ink-blue) ---------- */
.wfh-race { overflow: clip; padding-block: clamp(64px, 7vw, 104px); }
.wfh-race::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: wfh-rule 22s linear infinite; pointer-events: none; }
@keyframes wfh-rule { to { background-position: 0 36px; } }
.rm .wfh-race::before { animation: none; }
.wfh-race__rule { position: absolute; top: 0; bottom: 0; left: clamp(14px, 3.2vw, 52px); width: 1px; background: rgba(163,24,62,.6); }
.wfh-race h2 { color: #fff; }
.wfh-race .sec-head { margin-bottom: clamp(24px, 3vw, 40px); }
.race { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(22px, 3.4vw, 56px); align-items: center; }
.race__chart { margin: 0; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); padding: 14px 14px 10px; }
.race__chart svg { width: 100%; height: auto; max-height: min(52vh, 440px); overflow: visible; font-family: var(--sans); touch-action: pan-y; }
.race__grid line { stroke: rgba(255,255,255,.1); }
.race__grid text { fill: var(--on-dark-soft); font-size: 15px; font-weight: 600; }
.race__xname { fill: #fff !important; font-weight: 700 !important; }
.race__flat { fill: none; stroke: #E58A9E; stroke-width: 4; stroke-linejoin: round; stroke-dasharray: 1 1; }
.race__act { fill: none; stroke: var(--highlight); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 1; }
.race__you line { stroke: #fff; stroke-width: 1.5; stroke-dasharray: 4 4; }
.race__dF { fill: #E58A9E; stroke: var(--ink-blue); stroke-width: 3; }
.race__dA { fill: var(--highlight); stroke: var(--ink-blue); stroke-width: 3; }
.race__handle rect { fill: #fff; }
.race__handle path { stroke: var(--ink-blue); stroke-width: 2; }
.race__you { cursor: ew-resize; }
.race__hit { cursor: ew-resize; }
.race__key { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 6px; font-size: .95rem; font-weight: 600; color: var(--on-dark-soft); }
.rk { display: inline-flex; align-items: center; gap: 8px; }
.rk i { width: 26px; height: 0; border-top: 4px solid #E58A9E; }
.rk--act i { border-color: var(--highlight); }
.stacks { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; align-items: end; }
.stack { display: grid; justify-items: center; gap: 6px; }
.stack p { margin: 0; }
.stack__col { display: flex; flex-direction: column-reverse; justify-content: flex-start; width: min(100%, 150px); height: clamp(220px, 34vh, 320px); border-bottom: 3px solid rgba(255,255,255,.75); }
.stack__col i { display: block; flex: none; height: calc(var(--h, 0) * 1px); margin-top: 2px; background: #E58A9E; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); transform-origin: 50% 100%; }
.stack--act .stack__col i { background: var(--highlight); }
.stack__v { font: 600 clamp(1.8rem, 2.6vw, 2.5rem)/1 var(--sans); letter-spacing: -.03em; color: #fff; }
.stack__n { font-weight: 700; color: var(--on-dark-soft); }
.stack.is-win .stack__n { color: var(--highlight); }
.stacks__win { grid-column: 1 / -1; justify-self: center; display: grid; place-content: center; text-align: center; width: 190px; height: 104px; border: 3px solid var(--highlight); outline: 1.5px solid var(--highlight); outline-offset: -9px; border-radius: 50%; color: var(--highlight); transform: rotate(-8deg); }
.stacks__win span { font-family: var(--serif); font-size: 1.45rem; line-height: 1.05; text-transform: uppercase; letter-spacing: .03em; }
.stacks__win small { font-weight: 700; font-size: .875rem; letter-spacing: .1em; text-transform: uppercase; margin-top: 3px; }
@media (max-width: 1099px) { .race { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .race__chart { padding: 8px 6px 8px; }
  .race__grid text { font-size: 22px; }
  .stack__col { height: 200px; }
}

/* ---------- Who can claim (white) ---------- */
.wfh-who { overflow: clip; }
.wfh-who__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.wfh-who__copy .lede { margin: 16px 0 22px; }
.rules3 { display: grid; border-top: 2px solid var(--ink); }
.r3 { position: relative; padding: 14px 0 14px 22px; border-bottom: 1px solid var(--rule); }
.r3::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; background: var(--crimson); transform: scaleY(var(--tick, 1)); transform-origin: 50% 0; }
.r3--warn::before { background: var(--highlight); }
.r3 p { margin: 0; }
.r3__h { font-weight: 700; font-size: 1.1rem; margin-bottom: 4px !important; }
.r3 p:last-child { color: var(--ink-soft); font-size: 1rem; }
.wfh-who__media { position: relative; }
.wfh-who__frame { position: relative; height: min(62vh, 560px); box-shadow: -24px 24px 0 rgba(117,21,35,.1); }
.wfh-who__frame img { position: absolute; inset: -6% 0 auto; height: 112%; }
.wfh-who__tag { position: absolute; z-index: 3; right: -16px; top: 28px; margin: 0; padding: 12px 18px 14px; background: #FFFCF2; border-top: 5px solid var(--crimson); box-shadow: 0 18px 34px rgba(34,9,15,.22); display: grid; line-height: 1.25; }
.wfh-who__tag span { font-size: .875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--claret); }
.wfh-who__tag b { font: 600 1.9rem/1.1 var(--sans); letter-spacing: -.02em; }
@media (max-width: 900px) {
  .wfh-who__grid { grid-template-columns: minmax(0, 1fr); }
  .wfh-who__frame { height: min(48vh, 380px); }
  .wfh-who__tag { right: -4px; }
}

/* ---------- Records (blush) ---------- */
.wfh-keep { overflow: clip; padding-block: clamp(64px, 7vw, 104px); }
.wfh-keep__bg { position: absolute; inset: -30px; pointer-events: none; background-image: radial-gradient(circle, rgba(117,21,35,.14) 1.2px, transparent 1.6px); background-size: 26px 26px; animation: wfh-dots 40s linear infinite reverse; -webkit-mask-image: radial-gradient(ellipse at 30% 60%, #000 15%, transparent 70%); mask-image: radial-gradient(ellipse at 30% 60%, #000 15%, transparent 70%); }
.rm .wfh-keep__bg { animation: none; }
.wfh-keep .sec-head { position: relative; }
.keep { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.keep__c { position: relative; background: #fff; padding: 20px 20px 20px; border: 1px solid var(--rule); box-shadow: 12px 12px 0 rgba(117,21,35,.06); }
.keep__c p { margin: 0; }
.keep__n { font-family: var(--serif); font-size: clamp(1.6rem, 2.2vw, 2rem); color: var(--crimson); line-height: 1.1; padding-bottom: 10px; margin-bottom: 12px !important; border-bottom: 1px dashed #D9CACE; }
.keep__h { font-weight: 700; font-size: 1.08rem; margin-bottom: 6px !important; }
.keep__c p:last-child { color: var(--ink-soft); font-size: .98rem; line-height: 1.5; }
.keep__c--warn { background: var(--wine); color: #fff; border-color: var(--wine); }
.keep__c--warn .keep__n { color: var(--highlight); border-color: rgba(255,255,255,.25); }
.keep__c--warn p:last-child { color: var(--on-dark-soft); }
@media (max-width: 1099px) { .keep { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .keep { grid-template-columns: minmax(0, 1fr); } }

/* ---------- CTA (crimson) ---------- */
.wfh-cta { overflow: clip; padding-block: clamp(64px, 7vw, 100px); }
.wfh-cta__dots { position: absolute; inset: -30px; pointer-events: none; background-image: radial-gradient(circle, rgba(255,255,255,.12) 1.2px, transparent 1.6px); background-size: 26px 26px; animation: wfh-dots 34s linear infinite; }
.rm .wfh-cta__dots { animation: none; }
.wfh-cta__top { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.wfh-cta h2 { color: #fff; margin-bottom: 16px; }
.wfh-cta .lede { margin-bottom: 26px; max-width: 120ch; }
.wfh-cta__card { position: relative; justify-self: end; width: min(100%, 340px); padding: 22px 24px 22px; background: #FFFCF2; color: var(--ink); background-image: linear-gradient(transparent 44px, rgba(163,24,62,.55) 44px, rgba(163,24,62,.55) 46px, transparent 46px), repeating-linear-gradient(to bottom, transparent 0, transparent 29px, rgba(19,32,47,.1) 29px, rgba(19,32,47,.1) 30px); background-position: 0 0, 0 46px; box-shadow: 0 30px 40px -12px rgba(34,9,15,.45); transform: rotate(-2.5deg); }
.wfh-cta__card p { margin: 0; }
.cc__k { font-size: .875rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--claret); padding-bottom: 14px; }
.cc__v { font: 600 clamp(2.3rem, 3.4vw, 3rem)/1.1 var(--sans); letter-spacing: -.035em; color: var(--crimson); margin-top: 4px !important; }
.cc__s { font-size: .98rem; color: var(--ink-soft); }
.wfh-next { position: relative; margin-top: clamp(36px, 4.4vw, 60px); }
.wfh-next__h { color: #fff; font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 1.8vw, 1.7rem); margin-bottom: 14px; }
.wfh-next__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wfh-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; }
.wfh-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; }
.wfh-next__list a:hover { background: rgba(255,255,255,.14); }
.wfh-next__list a:hover::after { opacity: 1; }
.wfh-next__t { font-weight: 700; font-size: 1.08rem; }
.wfh-next__s { grid-column: 1 / -1; font-size: .95rem; color: #FBE3E8; }
.wfh-next__go { grid-column: 2; grid-row: 1; align-self: center; width: 22px; height: 22px; color: var(--highlight); transition: transform .35s var(--ease); }
.wfh-next__list a:hover .wfh-next__go { transform: translateX(4px); }
@media (max-width: 1099px) { .wfh-next__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .wfh-cta__top { grid-template-columns: minmax(0, 1fr); } .wfh-cta__card { justify-self: start; } }
@media (max-width: 600px) { .wfh-next__list { grid-template-columns: minmax(0, 1fr); } }

/* Ambient highlights that walk through the items */
.keep__c { transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.keep__c.is-lit { transform: translateY(-8px); box-shadow: 12px 20px 0 rgba(117,21,35,.12); }
.r3 { 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%; }
.r3.is-lit { background-size: 100% 100%; }
@media (max-width: 600px) {
  .ftab b { white-space: nowrap; font-size: .9rem; }
  .ftab small { font-size: .875rem; }
  .ftab > span { padding: 7px 8px 9px; }
}

/* Ambient: a wave of light runs up the winning stack; the hours slider calls for a touch until used */
.stack.is-win .stack__col i { animation: wfh-slab 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * .12s); }
@keyframes wfh-slab { 0%, 60%, 100% { filter: none; } 20% { filter: brightness(1.35) saturate(1.2); } }
.rm .stack.is-win .stack__col i { animation: none; }
.wrange::before { content: ''; position: absolute; z-index: 0; top: calc(var(--rh) / 2); left: calc(13px + (100% - 26px) * var(--f, .5)); width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: var(--btn-r); pointer-events: none; animation: wfh-call 1.8s ease-out infinite; }
@keyframes wfh-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); } }
.wrange.is-used::before, .rm .wrange::before { display: none; }
/* Ambient: the chosen tab catches the light, the top flat-rate band keeps moving */
.ftab > span { position: relative; overflow: hidden; }
.ftab input:checked + span::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(100deg, transparent, rgba(242,214,75,.35), transparent); transform: translateX(-120%); animation: wfh-sheen 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes wfh-sheen { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(260%); } }
.wrange__bands i:nth-child(4) { background: repeating-linear-gradient(-45deg, var(--crimson) 0 5px, #B8264E 5px 10px) 0 0 / 14.14px 14.14px; animation: wfh-stripe 1.2s linear infinite; }
.wrange__bands i:nth-child(3) { background: repeating-linear-gradient(-45deg, #E58A9E 0 5px, #EC9FB0 5px 10px) 0 0 / 14.14px 14.14px; animation: wfh-stripe 1.6s linear infinite; }
@keyframes wfh-stripe { to { background-position: 14.14px 0; } }
.wrange__bands--flat { background: repeating-linear-gradient(-45deg, var(--crimson) 0 5px, #B8264E 5px 10px) 0 0 / 14.14px 14.14px; animation: wfh-stripe 1.2s linear infinite; }
.rm .ftab input:checked + span::after, .rm .wrange__bands i, .rm .wrange__bands--flat { animation: none; }