.cs-extras{background:#fff;border-top:1px solid var(--panel)}
.cs-bonus{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);column-gap:64px;row-gap:var(--sp-6);align-items:center}
.cs-bonus--ai{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.cs-bonus--ai .cs-bonus-fig{grid-column:1;grid-row:1}
.cs-bonus--ai .cs-bonus-text{grid-column:2;grid-row:1}
.cs-bonus+.cs-bonus{margin-top:64px}
.cs-bonus-text{max-width:56ch}

.cs-bonus-head{margin-bottom:var(--sp-6)}
.cs-bonus-head h3{margin:0;font-size:var(--fs-h3);font-weight:var(--fw-bold);line-height:var(--lh-card);color:var(--dark)}

.cs-bonus-when{display:inline-block;margin-bottom:var(--sp-3);padding:var(--sp-1) var(--sp-3);border-radius:var(--r-md);
   background:#D9FDD3;color:#075E54;box-shadow:var(--sh-chip);
   font-size:var(--fs-eyebrow);font-weight:var(--fw-body);line-height:var(--lh-body);white-space:nowrap}
.cs-bonus-fig{position:relative;background:var(--cream);border-radius:var(--r-card)}
.cs-bonus-fig img{display:block;width:100%;height:auto;border-radius:var(--r-card);mix-blend-mode:multiply}

.cs-bonus-ui{position:absolute;top:var(--sp-4);left:var(--sp-4);background:#fff;border:1px solid var(--panel);border-radius:var(--r-md);box-shadow:var(--sh-rest);padding:var(--sp-3) var(--sp-4)}
.cs-bonus-ui--tools{left:auto;right:var(--sp-4)}
.cs-bonus-ui-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.cs-bonus-ui-list li{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-btn);font-weight:var(--fw-bold);line-height:var(--lh-body);color:var(--dark);white-space:nowrap}
.cs-bonus-check{flex:none;width:20px;height:20px}
.cs-bonus-check rect{fill:var(--blue)}
.cs-bonus-check path{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cs-bonus-tool{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cs-bonus-tool-fill{fill:currentColor;stroke:none}
.cs-bonus-ui--tools li:last-child{color:var(--blue)}
.cs-bonus-ui--tools li:last-child::after{content:'';width:var(--sp-2);height:var(--sp-2);border-radius:var(--r-pill);background:var(--blue);margin-inline-start:var(--sp-1)}

.cs-extras.is-in .cs-bonus-ui{animation:cs-bonus-rise var(--dur-slow) var(--ease-out) .25s both}
.cs-extras.is-in .cs-bonus-ui li{animation:cs-bonus-on var(--dur-base) var(--ease-out) both}
.cs-extras.is-in .cs-bonus-ui li:nth-child(1){animation-delay:.55s}
.cs-extras.is-in .cs-bonus-ui li:nth-child(2){animation-delay:.7s}
.cs-extras.is-in .cs-bonus-ui li:nth-child(3){animation-delay:.85s}
@keyframes cs-bonus-rise{from{opacity:0;translate:0 var(--sp-2)}to{opacity:1;translate:0 0}}
@keyframes cs-bonus-on{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.cs-extras.is-in .cs-bonus-ui,.cs-extras.is-in .cs-bonus-ui li{animation:none}}

@media(max-width:1000px){
  .cs-bonus,.cs-bonus--ai{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--sp-8)}
  .cs-bonus-fig{padding-bottom:var(--sp-12)}
  .cs-bonus-ui,.cs-bonus-ui--tools{top:auto;right:auto;bottom:var(--sp-3);left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - var(--sp-6));padding:var(--sp-2) var(--sp-3)}
  .cs-bonus-ui-list{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:var(--sp-2) var(--sp-3)}
  .cs-bonus-ui-list li{gap:var(--sp-2);font-size:var(--fs-eyebrow)}
  .cs-bonus-check{width:var(--sp-4);height:var(--sp-4)}
  .cs-bonus-tool{display:none}
}

@media(max-width:700px){
  .cs-bonus,.cs-bonus--ai{grid-template-columns:1fr}
  .cs-bonus--ai .cs-bonus-fig,.cs-bonus--ai .cs-bonus-text{grid-column:auto;grid-row:auto}
  .cs-bonus+.cs-bonus{margin-top:var(--sp-12)}
  .cs-bonus-fig{order:-1;margin-inline:calc(-1*var(--sp-6))}
  .cs-bonus-ui--tools li:last-child::after{display:none}
  .cs-bonus-text{max-width:none}
}