/* V23 / A visible, illustrated starting point for social account services. */
#accounts.accounts-showcase {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 30px;
  margin-top: 35px;
  padding: 42px;
  border: 1px solid #CAD8EF;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 20px 60px -45px #2457E64D;
}
#accounts.accounts-showcase::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 35px;
  right: 35px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #DCE7FF, #2457E6 42%, #8BACFF 77%, #DCE7FF);
}
#accounts.accounts-showcase .accounts-service-icon { display: none; }
#accounts.accounts-showcase .accounts-showcase-heading { grid-column: 1; }
#accounts.accounts-showcase .accounts-service-copy { grid-column: 1; min-width: 0; }
#accounts.accounts-showcase .accounts-service-copy > .eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 3px 9px;
  border-radius: 4px;
  background: #EEF3FF;
  color: #2457E6;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .065em;
}
#accounts.accounts-showcase .accounts-service-copy h3 {
  margin: 15px 0 14px;
  color: #14171D;
  font-size: clamp(30px, 3.1vw, 42px);
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -.04em;
  text-wrap: balance;
}
#accounts.accounts-showcase .accounts-service-copy h3 .accent-word { color: #2457E6; }
#accounts.accounts-showcase .accounts-service-copy > p {
  max-width: 650px;
  margin: 0;
  color: #526176;
  font-size: 16px;
  line-height: 1.85;
}
#accounts.accounts-showcase .accounts-service-tags { margin-top: 18px; gap: 8px; }
#accounts.accounts-showcase .accounts-service-tags > span {
  padding: 5px 9px;
  border-color: #E0E7F1;
  background: #F8FAFD;
  color: #526176;
  font-size: 12px;
}
#accounts.accounts-showcase .accounts-showcase-footer {
  grid-column: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  align-items: center;
  gap: 30px;
  padding-top: 26px;
  border-top: 1px solid #E0E7F1;
}
#accounts.accounts-showcase .accounts-showcase-footer .accounts-service-tags { margin-top: 0; }
#accounts.accounts-showcase .accounts-service-actions {
  grid-column: 2;
  align-self: center;
  width: 100%;
  max-width: none;
  min-width: 0;
}
#accounts.accounts-showcase .accounts-service-actions > .button {
  width: 100%;
  min-height: 56px;
  gap: 15px;
  padding: 17px 19px;
  border: 1px solid #2457E6;
  border-radius: 8px;
  background: #2457E6;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.5;
  white-space: normal;
  box-shadow: 0 8px 20px -14px #2457E6B3;
}
#accounts.accounts-showcase .accounts-service-actions > .button > span { min-width: 0; white-space: normal; }
#accounts.accounts-showcase .accounts-service-actions > .button > .icon { flex: none; }
#accounts.accounts-showcase .accounts-service-actions > .button:hover { background: #1C48C8; border-color: #1C48C8; }
#accounts.accounts-showcase .accounts-service-actions > p { margin-top: 12px; color: #526176; font-size: 12px; line-height: 1.75; }

/* Three distinct illustrations remain visible together on every screen. */
#accounts.accounts-showcase .accounts-visuals {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  min-width: 0;
  margin-top: 2px;
}
#accounts.accounts-showcase .account-visual-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 17px 17px 21px;
  border: 1px solid #E0E7F1;
  border-radius: 13px;
  background: linear-gradient(155deg, #FFFFFF, #F4F7FC);
  text-align: center;
  transition: transform .35s ease, border-color .35s ease;
  --account-delay: calc(var(--account-order, 0) * .1s);
}
#accounts.accounts-showcase .account-visual-card:nth-child(2) { background: linear-gradient(155deg, #F8FBFF, #EEF4FF); }
#accounts.accounts-showcase .account-image-shell { position: relative; min-width: 0; height: 225px; }
#accounts.accounts-showcase .account-image-float {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  animation: account-object-float 7s ease-in-out infinite;
  animation-delay: calc(var(--account-order, 0) * -1.5s);
}
#accounts.accounts-showcase .account-service-image { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
#accounts.accounts-showcase .account-step-number { position: absolute; top: 2px; left: 2px; padding: 4px 7px; border: 1px solid #DDE6F3; border-radius: 5px; background: #FFFFFFE6; color: #526D98; font-size: 11px; line-height: 1.5; }
#accounts.accounts-showcase .account-platform-badges { position: absolute; right: 3px; bottom: 2px; display: flex; align-items: center; gap: 6px; padding: 5px; border: 1px solid #E0E7F3; border-radius: 8px; background: #FFFFFFEB; }
#accounts.accounts-showcase .account-platform-badges > span { display: block; flex: none; line-height: 0; }
#accounts.accounts-showcase .account-platform-badges img { display: block; width: 23px; height: 23px; object-fit: contain; }
#accounts.accounts-showcase .account-visual-card figcaption { margin-top: 12px; }
#accounts.accounts-showcase .account-visual-card figcaption > strong {
  display: block;
  margin: 0;
  color: #18273D;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.5;
  letter-spacing: -.015em;
}
#accounts.accounts-showcase .account-visual-card figcaption > p {
  margin: 6px 0 0;
  color: #526176;
  font-size: 12px;
  line-height: 1.65;
}
#accounts.accounts-showcase.is-visible .account-visual-card { animation: account-card-arrive .8s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--account-delay); }
@keyframes account-card-arrive { from { opacity: .55; transform: translateY(28px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes account-object-float { 0%, 100% { transform: translateY(3px) rotate(-.5deg); } 50% { transform: translateY(-5px) rotate(.5deg); } }
@keyframes account-object-float-compact { 0%, 100% { transform: translateY(1px) scale(1.06); } 50% { transform: translateY(-2px) scale(1.06); } }
@media (hover: hover) and (pointer: fine) {
  #accounts.accounts-showcase .account-visual-card:hover { border-color: #ADC6F1; }
}
@media (max-width: 1100px) {
  #accounts.accounts-showcase { gap: 25px; padding: 34px; }
  #accounts.accounts-showcase .accounts-service-copy h3 { font-size: 34px; }
  #accounts.accounts-showcase .account-image-shell { height: 185px; }
  #accounts.accounts-showcase .accounts-showcase-footer { grid-template-columns: minmax(0, 1fr) 285px; gap: 25px; }
}
@media (max-width: 700px) {
  #accounts.accounts-showcase { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 29px; padding: 29px 23px 26px; border-radius: 16px; }
  #accounts.accounts-showcase::before { left: 23px; right: 23px; }
  #accounts.accounts-showcase .accounts-showcase-heading { grid-column: 1; grid-row: 1; }
  #accounts.accounts-showcase .accounts-service-copy h3 { margin: 14px 0 13px; font-size: 30px; line-height: 1.35; }
  #accounts.accounts-showcase .accounts-service-copy > p { font-size: 15px; }
  #accounts.accounts-showcase .accounts-service-tags { gap: 6px; margin-top: 15px; }
  #accounts.accounts-showcase .accounts-service-tags > span { padding: 4px 7px; font-size: 11px; }
  #accounts.accounts-showcase .accounts-visuals { grid-column: 1; grid-row: 2; gap: 8px; margin-top: 0; }
  #accounts.accounts-showcase .account-visual-card { padding: 0 0 12px; border-radius: 8px; }
  #accounts.accounts-showcase .account-image-shell { width: 100%; height: auto; aspect-ratio: 1; overflow: hidden; border-radius: 7px 7px 0 0; }
  #accounts.accounts-showcase .account-image-float { animation-name: account-object-float-compact; }
  #accounts.accounts-showcase .account-step-number { top: 6px; left: 5px; padding: 2px 4px; }
  #accounts.accounts-showcase .account-platform-badges { right: 3px; bottom: 4px; padding: 3px; gap: 4px; border-radius: 5px; }
  #accounts.accounts-showcase .account-platform-badges img { width: 15px; height: 15px; }
  #accounts.accounts-showcase .account-visual-card figcaption { margin-top: 10px; padding-inline: 4px; }
  #accounts.accounts-showcase .account-visual-card figcaption > strong { font-size: 13px; line-height: 1.5; }
  #accounts.accounts-showcase .account-visual-card figcaption > p { display: none; }
  #accounts.accounts-showcase .accounts-showcase-footer { grid-column: 1; grid-row: 3; grid-template-columns: minmax(0, 1fr); gap: 19px; padding-top: 21px; }
  #accounts.accounts-showcase .accounts-service-actions { grid-column: 1; grid-row: auto; max-width: none; }
  #accounts.accounts-showcase .accounts-service-actions > .button { min-height: 55px; padding: 16px 18px; font-size: 15px; }
  #accounts.accounts-showcase .accounts-service-actions > p { font-size: 12px; }
}
@media (max-width: 380px) {
  #accounts.accounts-showcase { padding: 26px 18px 23px; gap: 22px; }
  #accounts.accounts-showcase .accounts-service-copy h3 { font-size: 28px; }
  #accounts.accounts-showcase .accounts-visuals { gap: 6px; }
  #accounts.accounts-showcase .account-visual-card figcaption > strong { font-size: 12px; }
}

/* Every new animation follows the shared visibility and pause controller. */
#accounts.accounts-showcase .account-visual-card,
#accounts.accounts-showcase.is-visible .account-visual-card,
#accounts.accounts-showcase .account-image-float { animation-play-state: var(--motion-play-state, paused); }
html.motion-paused #accounts.accounts-showcase .account-visual-card { animation: none; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  #accounts.accounts-showcase .account-visual-card,
  #accounts.accounts-showcase .account-image-float { animation: none !important; opacity: 1; transform: none; transition: none; }
}