/* 10-Day Product Intervention promo: animated mark, overlap card, A/B/C headline variants. */
/* ---- the animated 10-Day mark ---- */
.tdl{display:block;width:100%;height:auto;overflow:visible}
.tdl-hand{transform-box:view-box;transform-origin:115.08px 68.4px;animation:tdl-sweep 10s steps(60) infinite}
.tdl-speed{animation:tdl-streak 1.6s ease-in-out infinite}
.tdl-speed:nth-of-type(3n){animation-delay:-.4s}.tdl-speed:nth-of-type(3n+1){animation-delay:-.9s}
@keyframes tdl-sweep{to{transform:rotate(360deg)}}
@keyframes tdl-streak{0%,100%{opacity:1;transform:translateX(0)}50%{opacity:.35;transform:translateX(-10px)}}
@media (prefers-reduced-motion:reduce){.tdl-hand,.tdl-speed{animation:none}}

/* ---- the overlap card ---- */
:root{--ten-overlap:150px}
.ten{position:relative;z-index:2;display:grid;overflow:hidden;margin-bottom:calc(var(--ten-overlap) * -1);padding:clamp(36px,5vw,64px);color:var(--white);background:radial-gradient(120% 140% at 0% 0%,#14496b 0%,#0c2c42 60%,#0a2538 100%);border:1px solid rgba(88,166,200,.65);border-top:5px solid var(--water);box-shadow:0 40px 90px rgba(0,0,0,.4),0 0 70px rgba(88,166,200,.22);grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.ten-mark{max-width:440px;color:var(--white)}
.ten-mark .tdl-hand{color:var(--water)}
.ten h3{margin:30px 0 16px;font-family:var(--body);font-size:clamp(1.9rem,3vw,2.75rem);font-weight:900;letter-spacing:-.04em;line-height:1.02}
.ten h3 em{color:var(--water);font-style:normal}
.ten-lede{max-width:540px;margin:0 0 24px;color:rgba(255,255,255,.8);font-size:1rem;line-height:1.55}
.ten-uses{display:flex;margin:0;padding:0;flex-wrap:wrap;gap:8px;list-style:none}
.ten-uses li{padding:8px 12px;border:1px solid rgba(88,166,200,.45);color:var(--white);background:rgba(88,166,200,.1);font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.ten-stats{display:grid;margin:0 0 26px;padding:0;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;border-top:1px solid var(--rule-light)}
.ten-stats li{padding:18px 14px 18px 0;border-bottom:1px solid var(--rule-light)}
.ten-stats strong{display:block;font-family:var(--wf-font-display);font-size:clamp(2.6rem,4.4vw,3.8rem);line-height:.9;color:var(--water)}
.ten-stats span{display:block;margin-top:8px;color:rgba(255,255,255,.72);font-size:.78rem;line-height:1.35}
.ten-side>p{margin:0 0 26px;color:rgba(255,255,255,.78);font-size:.98rem;line-height:1.55}
.ten-side>p strong{color:var(--white)}
.ten-btn{display:flex;width:100%;min-height:60px;padding:16px 26px;color:var(--ink);background:var(--water);align-items:center;justify-content:space-between;gap:26px;font-size:.92rem;font-weight:850;text-decoration:none;transition:transform 160ms ease,background-color 160ms ease}
.ten-btn span{transition:transform 160ms ease}
.ten-btn:hover,.ten-btn:focus-visible{background:var(--white);transform:translateY(-3px)}
.ten-btn:hover span,.ten-btn:focus-visible span{transform:translateX(5px)}
.ten-assess{display:block;margin-top:16px;color:rgba(255,255,255,.75);font-size:.84rem}
.ten-assess a{color:var(--white);font-weight:800;text-underline-offset:4px}

/* ---- attention: orbiting border light, entrance flare, button sheen, staggered tags ---- */
@property --ten-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
.ten::before{content:"";position:absolute;z-index:3;inset:0;padding:3px;background:conic-gradient(from var(--ten-angle),transparent 0 52%,rgba(88,166,200,.55) 74%,#bfe9fa 86%,#fff 89%,transparent 93%);filter:drop-shadow(0 0 6px rgba(150,215,240,.9));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ten-orbit 5s linear infinite;pointer-events:none}
@keyframes ten-orbit{to{--ten-angle:360deg}}
.ten.in-view{animation:ten-flare 1.6s var(--motion-ease) .3s both}
@keyframes ten-flare{0%{box-shadow:0 40px 90px rgba(0,0,0,.4),0 0 0 rgba(88,166,200,0)}35%{box-shadow:0 40px 90px rgba(0,0,0,.4),0 0 140px rgba(88,166,200,.55)}100%{box-shadow:0 40px 90px rgba(0,0,0,.4),0 0 70px rgba(88,166,200,.22)}}
.ten-btn{position:relative;overflow:hidden}
.ten-btn::after{content:"";position:absolute;inset:0 auto 0 -60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);animation:ten-sheen 4.5s ease-in-out 1.5s infinite;pointer-events:none}
@keyframes ten-sheen{0%,70%{left:-60%}100%{left:130%}}
.js .ten .ten-uses li{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s var(--motion-ease)}
.js .ten.in-view .ten-uses li{opacity:1;transform:none}
.ten.in-view .ten-uses li:nth-child(1){transition-delay:.6s}.ten.in-view .ten-uses li:nth-child(2){transition-delay:.72s}.ten.in-view .ten-uses li:nth-child(3){transition-delay:.84s}.ten.in-view .ten-uses li:nth-child(4){transition-delay:.96s}
@media (prefers-reduced-motion:reduce){
  .ten::before,.ten-btn::after,.ten.in-view{animation:none}
  .js .ten .ten-uses li{opacity:1;transform:none;transition:none}
}

@media (max-width:900px){
  :root{--ten-overlap:90px}
  .ten{grid-template-columns:1fr}
  .ten-mark{max-width:340px}
}
@media (max-width:560px){
  .ten-stats{grid-template-columns:1fr}
  .ten-stats li{display:flex;align-items:baseline;gap:16px}
  .ten-stats span{margin-top:0}
}

/* Homepage placement: the card closes "How we help" and overlaps into "Why WhiteFish". */
.home-help.has-ten{padding-bottom:0}
.home-help.has-ten .ten{margin-top:56px}
.home-help.has-ten + .home-why{padding-top:calc(118px + var(--ten-overlap))}
.ten[hidden]{display:none}
@media (max-width:800px){
  .home-help.has-ten + .home-why{padding-top:calc(82px + var(--ten-overlap))}
}