/* Motion layer, 2026-10-04. Replaces motion-20261003a.css. Animation on the site was allowed by the owner's ruling of 2026-10-03.
   Loaded after site-20260928a.css; tokens come from its :root. Every animation is off under prefers-reduced-motion,
   and nothing is hidden unless motion-20261004a.js has run (it adds the .mo classes itself).
   Colour rule: teal frames a reading, gold frames the offer. */
.salary-pick{margin:4px 0 14px}
.salary-pick[hidden]{display:none}
.salary-pick label{display:flex;justify-content:space-between;gap:12px;font-size:.9rem;color:var(--muted);margin-bottom:8px}
.salary-pick label strong{color:var(--white);font-weight:700;font-variant-numeric:tabular-nums}
.salary-pick input[type=range]{width:100%;accent-color:var(--gold);height:28px;cursor:pointer}
.salary-pick input[type=range]:focus-visible{outline:3px solid var(--teal);outline-offset:5px}
.exposure-amount{font-variant-numeric:tabular-nums}

/* 1. Frames: four corner marks and a slow light along the top edge, the same shape as the calculator's result panel. */
.frame{position:relative;--fc:rgba(34,211,238,.78);--fg:rgba(34,211,238,.95);--fi:10px;--fa:20px}
.frame::after{content:"";position:absolute;top:var(--fi);right:var(--fi);bottom:var(--fi);left:var(--fi);pointer-events:none;background:
  linear-gradient(var(--fc),var(--fc)) left top/var(--fa) 2px no-repeat,
  linear-gradient(var(--fc),var(--fc)) left top/2px var(--fa) no-repeat,
  linear-gradient(var(--fc),var(--fc)) right top/var(--fa) 2px no-repeat,
  linear-gradient(var(--fc),var(--fc)) right top/2px var(--fa) no-repeat,
  linear-gradient(var(--fc),var(--fc)) left bottom/var(--fa) 2px no-repeat,
  linear-gradient(var(--fc),var(--fc)) left bottom/2px var(--fa) no-repeat,
  linear-gradient(var(--fc),var(--fc)) right bottom/var(--fa) 2px no-repeat,
  linear-gradient(var(--fc),var(--fc)) right bottom/2px var(--fa) no-repeat}
.frame::before{content:"";position:absolute;left:18px;right:18px;top:0;height:2px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--fg),transparent) no-repeat;background-size:35% 100%;background-position:-60% 0}
.offer-frame{--fc:rgba(216,173,82,.9);--fg:rgba(225,188,106,.95)}
.light .product-offer.frame{--fc:#ae8129;--fg:rgba(174,129,41,.85);--fi:8px;--fa:14px;background:#fff;border:1px solid #cbd7df;border-radius:12px;padding:20px 22px}

/* 2. The example ring: one month without pay, split into its two parts. */
.exp-ring{position:relative;width:min(236px,100%);aspect-ratio:1/1;margin:8px auto 16px;container-type:inline-size}
.exp-ring svg{display:block;width:100%;height:100%;overflow:visible}
.exp-track{fill:none;stroke:#0d2636;stroke-width:9}
.exp-seg{fill:none;stroke-width:9}
.exp-pay{stroke:var(--gold)}
.exp-cover{stroke:var(--teal)}
.exp-core{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.toolkit-value .exp-ring .exposure-amount{font-size:2.5rem;font-size:min(2.9rem,18cqw);line-height:1;letter-spacing:-.045em;margin:0;overflow-wrap:normal;white-space:nowrap}
.exp-unit{display:block;margin-top:8px;font-size:.78rem;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.exp-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px}
.exp-dot.pay{background:var(--gold)}
.exp-dot.cover{background:var(--teal)}

/* 3. The eighteen checks as a pre-flight strip: marks switch on in order while a tally counts. */
.signs-strip{margin:18px 0 6px}
.signs-strip[hidden]{display:none}
.signs-strip .pips{display:flex;gap:5px;align-items:center}
.signs-strip .pip{flex:1 1 0;height:14px;min-width:6px;border-radius:3px;background:var(--teal);border:1px solid var(--teal)}
.signs-strip .pip.gap{margin-left:10px}
.signs-strip .tally{flex:0 0 auto;min-width:2.2rem;margin-left:8px;text-align:right;font-size:1.05rem;font-weight:750;line-height:1;color:var(--teal);font-variant-numeric:tabular-nums}
.signs-strip .labels{display:flex;justify-content:space-between;gap:12px;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;margin-top:8px;color:var(--muted);padding-right:calc(2.2rem + 8px)}
.signs-strip.run .pip{background:rgba(34,211,238,.10);border-color:rgba(34,211,238,.45)}
.signs-strip.run .pip.on{background:var(--teal);border-color:var(--teal)}
.signs-strip.run .labels span{opacity:.45}
.signs-strip.run .labels span.on{opacity:1}
.light .signs-strip .pip{background:#087489;border-color:#087489}
.light .signs-strip .tally{color:#087489}
.light .signs-strip .labels{color:#4b6072}
.light .signs-strip.run .pip{background:rgba(8,116,137,.08);border-color:rgba(8,116,137,.5)}
.light .signs-strip.run .pip.on{background:#087489;border-color:#087489}

/* 4. The loop: a short silent sequence in the style of the Shorts. With motion off it is one still frame. */
.loop{max-width:520px;margin:22px 0 6px}
.loop-stage{position:relative;overflow:hidden;border:1px solid #2a4152;border-radius:14px;background:radial-gradient(ellipse at 78% 18%,#0c3e4d70,transparent 60%),#06111c;padding:22px;container-type:inline-size}
.loop-beat{display:none;margin:0;font-weight:750;letter-spacing:-.04em;line-height:1.12;color:var(--white);font-size:1.6rem;font-size:clamp(1.35rem,7.4cqw,2.3rem)}
.loop-beat.b2{display:block}
.loop-beat p{margin:0}
.loop-beat b{color:var(--teal);font-weight:750}
.loop-beat strong{display:block;color:var(--gold);font-weight:750;font-size:2.4em;line-height:1;letter-spacing:-.06em}
.loop-beat small{display:block;margin-top:.5em;font-size:.44em;font-weight:500;letter-spacing:0;line-height:1.4;color:var(--muted)}
.loop-pips{display:flex;gap:4px;margin-top:.7em}
.loop-pips i{flex:1 1 0;height:.5em;min-width:4px;border-radius:2px;background:var(--teal);border:1px solid var(--teal)}
.loop-pips i:nth-child(7){margin-left:.4em}
.loop-progress{display:none}
.loop-pause{margin-top:8px;min-height:44px;padding:8px 14px;background:transparent;border:1px solid #3e5a6c;border-radius:6px;color:var(--muted);font:inherit;font-size:.86rem;cursor:pointer}
.loop-pause:hover{border-color:var(--teal);color:var(--white)}
.loop-pause[hidden]{display:none}

/* 5. Homepage hero: one slow light turning behind the headline. */
.toolkit-hero{position:relative;overflow:hidden}
.toolkit-hero>.wrap{position:relative;z-index:1}

/* 6. Fit: headings break into even lines, and the homepage headline holds three lines on wide screens. */
h1,h2{text-wrap:balance}
@media (min-width:1101px){.toolkit-hero .hero-grid h1{font-size:clamp(2.7rem,4.6vw,3.68rem)}}
/* The heading beside the calculator image holds two lines, one per break. */
@media (min-width:851px){.calculator .split h2{font-size:clamp(1.45rem,2.85vw,2.3rem)}}
@media (max-width:480px){html body .calculator .split h2{font-size:clamp(1.45rem,7vw,1.95rem)!important}}

@media (max-width:850px){
  .exp-ring{width:min(224px,100%)}
  .loop{margin-left:auto;margin-right:auto}
}
@media (max-width:480px){
  .light .product-offer.frame{padding:18px 16px}
  .mobile-buy .button{white-space:nowrap;padding:10px 12px;gap:8px;font-size:.86rem}
  .mobile-buy>span{font-size:.8rem;line-height:1.35}
}

@media (prefers-reduced-motion:no-preference){
  @keyframes moUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes moSheen{0%,72%{transform:translateX(-140%) skewX(-18deg)}100%{transform:translateX(260%) skewX(-18deg)}}
  @keyframes moEdge{0%,100%{border-color:#395361}50%{border-color:var(--gold)}}
  @keyframes moGlint{0%,55%{background-position:-60% 0}100%{background-position:160% 0}}
  @keyframes moSweep{to{transform:rotate(360deg)}}
  .hero h1{animation:moUp .7s ease both}
  .hero .lead{animation:moUp .7s ease .12s both}
  .hero .actions{animation:moUp .7s ease .24s both}
  .toolkit-value{animation:moUp .7s ease .3s both,moEdge 5s ease-in-out 1.2s infinite}
  .mo{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
  .mo.mo-in{opacity:1;transform:none}
  a.button:not(.secondary){position:relative;overflow:hidden}
  a.button:not(.secondary)::after{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:moSheen 5.5s ease-in-out infinite;pointer-events:none}
  .frame::before{animation:moGlint 6s ease-in-out infinite}
  .signs-strip .pip{transition:background-color .18s ease,border-color .18s ease}
  .signs-strip .labels span{transition:opacity .3s ease}
  .toolkit-hero::before{content:"";position:absolute;z-index:0;pointer-events:none;width:1400px;height:1400px;left:calc(74% - 700px);top:calc(54% - 700px);border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,transparent 236deg,rgba(34,211,238,.05) 268deg,rgba(34,211,238,.2) 328deg,rgba(34,211,238,.42) 358.4deg,rgba(125,235,250,.6) 359.5deg,transparent 360deg);-webkit-mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.8) 30%,rgba(0,0,0,.4) 52%,transparent 70%);mask-image:radial-gradient(circle,#000 0,rgba(0,0,0,.8) 30%,rgba(0,0,0,.4) 52%,transparent 70%);animation:moSweep 12s linear infinite;will-change:transform}

  /* The loop runs on one 14 second clock. Each beat owns a slice of it. */
  @keyframes lpB1{0%{opacity:0}2%,19%{opacity:1}21%,100%{opacity:0}}
  @keyframes lpB2{0%,21.9%{opacity:0}24%,50%{opacity:1}52%,100%{opacity:0}}
  @keyframes lpB3{0%,52.9%{opacity:0}55%,72%{opacity:1}74%,100%{opacity:0}}
  @keyframes lpB4{0%,74.9%{opacity:0}77%,97%{opacity:1}99.5%,100%{opacity:0}}
  @keyframes lpR1{0%{opacity:0;transform:translateY(.5em)}3.5%,100%{opacity:1;transform:none}}
  @keyframes lpR2{0%,22%{opacity:0;transform:translateY(.5em)}25.5%,100%{opacity:1;transform:none}}
  @keyframes lpR3{0%,53%{opacity:0;transform:translateY(.5em)}56.5%,100%{opacity:1;transform:none}}
  @keyframes lpR4{0%,75%{opacity:0;transform:scale(.82)}78%{opacity:1;transform:scale(1.06)}80%,100%{opacity:1;transform:none}}
  @keyframes lpPip{0%,27%{background:rgba(34,211,238,.10);border-color:rgba(34,211,238,.45)}28%,100%{background:var(--teal);border-color:var(--teal)}}
  @keyframes lpBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .loop-stage{aspect-ratio:16/9;padding:0}
  .loop-beat,.loop-beat.b2{display:flex;flex-direction:column;justify-content:center;position:absolute;top:0;right:0;bottom:0;left:0;padding:0 7.5cqw;opacity:0;animation:14s linear infinite both}
  .loop-beat.b1{animation-name:lpB1}
  .loop-beat.b2{animation-name:lpB2}
  .loop-beat.b3{animation-name:lpB3}
  .loop-beat.b4{animation-name:lpB4;align-items:flex-start}
  .loop-beat>span,.loop-beat>p,.loop-beat>strong,.loop-beat>small{display:block;animation:14s linear infinite both}
  .loop-beat.b1>*{animation-name:lpR1}
  .loop-beat.b2>*{animation-name:lpR2}
  .loop-beat.b3>*{animation-name:lpR3}
  .loop-beat.b4>*{animation-name:lpR4;transform-origin:left center}
  .loop-beat>:nth-child(2){animation-delay:.28s}
  .loop-beat>:nth-child(3){animation-delay:.56s}
  .loop-pips i{animation:lpPip 14s linear infinite both}
  .loop-pips i:nth-child(2){animation-delay:.1s}.loop-pips i:nth-child(3){animation-delay:.2s}.loop-pips i:nth-child(4){animation-delay:.3s}.loop-pips i:nth-child(5){animation-delay:.4s}.loop-pips i:nth-child(6){animation-delay:.5s}
  .loop-pips i:nth-child(7){animation-delay:.6s}.loop-pips i:nth-child(8){animation-delay:.7s}.loop-pips i:nth-child(9){animation-delay:.8s}.loop-pips i:nth-child(10){animation-delay:.9s}.loop-pips i:nth-child(11){animation-delay:1s}.loop-pips i:nth-child(12){animation-delay:1.1s}
  .loop-pips i:nth-child(13){animation-delay:1.2s}.loop-pips i:nth-child(14){animation-delay:1.3s}.loop-pips i:nth-child(15){animation-delay:1.4s}.loop-pips i:nth-child(16){animation-delay:1.5s}.loop-pips i:nth-child(17){animation-delay:1.6s}.loop-pips i:nth-child(18){animation-delay:1.7s}
  .loop-progress{display:block;position:absolute;left:0;right:0;bottom:0;height:3px;background:#12283a}
  .loop-progress i{display:block;height:100%;background:var(--teal);transform-origin:left center;animation:lpBar 14s linear infinite}
  .loop.paused .loop-stage *{animation-play-state:paused}
}
@media (prefers-reduced-motion:no-preference) and (max-width:850px){
  .toolkit-hero::before{width:900px;height:900px;left:calc(88% - 450px);top:calc(16% - 450px)}
}
@media print{
  .frame::before,.toolkit-hero::before,.loop{display:none}
}