/*
 * Version control
 * 2026-10-26 : Add the staged next stylesheet for the standalone how-to-buy content flow.
 */

.ic-delivery-flow {
  position: relative;
  isolation: isolate;
  margin: 0 0 2.5em 0;
  padding: 4.5em 0 4em !important;
  border-top: 0 !important;
  color: #fff;
  overflow: visible;
}
.ic-delivery-flow *,
.ic-delivery-flow *:before,
.ic-delivery-flow *:after {
  box-sizing: border-box;
}
.ic-delivery-flow:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -2;
  width: 100vw;
  background:
    radial-gradient(circle at 12% 18%, rgba(0, 171, 255, 0.52), transparent 28%),
    radial-gradient(circle at 88% 34%, rgba(255, 139, 48, 0.58), transparent 31%),
    radial-gradient(circle at 52% 62%, rgba(168, 87, 255, 0.46), transparent 30%),
    linear-gradient(120deg, #075fc7 0%, #25207c 47%, #ff8c31 100%);
  transform: translateX(-50%);
}
.ic-delivery-flow:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent 20%, transparent 80%, rgba(255, 255, 255, 0.14)),
    radial-gradient(circle at 18% 82%, rgba(255, 255, 255, 0.28), transparent 18%),
    radial-gradient(circle at 78% 78%, rgba(255, 255, 255, 0.26), transparent 20%);
  opacity: 0.8;
  pointer-events: none;
  transform: translateX(-50%);
}
.ic-delivery-flow__sparkles {
  position: absolute;
  inset: 0 auto 0 50%;
  z-index: 0;
  width: 100vw;
  overflow: hidden;
  pointer-events: none;
  transform: translateX(-50%);
}
.ic-delivery-flow__sparkles:before,
.ic-delivery-flow__sparkles:after {
  content: "";
  position: absolute;
  width: max(50vw, 420px);
  height: max(50vw, 420px);
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.45), transparent 18%),
    radial-gradient(circle, rgba(255, 116, 80, 0.64), rgba(139, 83, 255, 0.34) 42%, transparent 70%);
  filter: blur(2px) hue-rotate(0deg);
  mix-blend-mode: screen;
  opacity: 0.62;
  animation: icDeliveryCircleFloat 4s ease-in-out infinite;
}
.ic-delivery-flow__sparkles:before {
  top: -20vw;
  left: -18vw;
}
.ic-delivery-flow__sparkles:after {
  right: -22vw;
  bottom: -24vw;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.5), transparent 17%),
    radial-gradient(circle, rgba(0, 198, 255, 0.6), rgba(255, 139, 48, 0.34) 45%, transparent 72%);
  animation-duration: 4.75s;
  animation-delay: -7s;
}
.ic-delivery-flow__inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
}
.ic-delivery-flow__header {
  max-width: 760px;
  margin: 0 auto 2.4em auto;
}
.ic-delivery-flow__eyebrow {
  display: inline-flex;
  margin: 0 0 1em 0;
  padding: 0.45em 1em;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9em;
  font-weight: 700;
}
.ic-delivery-flow h2 {
  margin: 0 0 0.35em 0;
  color: #fff;
  font-size: clamp(2em, 5vw, 3.45em);
  line-height: 1.06;
  letter-spacing: -0.04em;
  text-shadow: 0 8px 26px rgba(33, 24, 83, 0.38);
}
.ic-delivery-flow__header p:last-child {
  max-width: 38em;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.05em;
  line-height: 1.8;
}
.ic-delivery-flow__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1em;
  align-items: start;
  min-height: 20.5em;
}
.ic-delivery-step {
  position: relative;
  min-width: 0;
  border-radius: 1.05em;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 42px rgba(23, 27, 77, 0.22);
  color: #273047;
  transform-origin: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, filter 0.25s ease;
}
.ic-delivery-step:nth-child(1) { --step-accent: #1e63df; }
.ic-delivery-step:nth-child(2) { --step-accent: #09a9dd; }
.ic-delivery-step:nth-child(3) { --step-accent: #8955df; }
.ic-delivery-step:nth-child(4) { --step-accent: #b45fdc; }
.ic-delivery-step:nth-child(5) { --step-accent: #f26f2f; }
.ic-delivery-step:nth-child(6) { --step-accent: #f08b28; }
.ic-delivery-step:hover,
.ic-delivery-step[open] {
  background: #fff;
  box-shadow: 0 24px 56px rgba(23, 27, 77, 0.28);
  filter: saturate(1.05);
  transform: translateY(-8px);
}
.ic-delivery-step summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 20.5em;
  padding: 1.3em 1em 1em;
  text-align: center;
  cursor: pointer;
  list-style: none;
}
.ic-delivery-step summary::-webkit-details-marker {
  display: none;
}
.ic-delivery-step summary:focus-visible,
.ic-delivery-flow__panel-close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
.ic-delivery-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.5em;
  margin: -2.35em auto 1em;
  padding: 0.45em 0.75em;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--step-accent), rgba(255, 255, 255, 0.22));
  box-shadow: 0 12px 30px rgba(30, 99, 223, 0.24);
  color: #fff;
  font-size: 1.15em;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.ic-delivery-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.6em;
  height: 4.6em;
  margin: 0 0 1.2em 0;
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.72), transparent 35%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), var(--step-accent));
  color: #fff;
  font-size: 1.45em;
  font-weight: 800;
  line-height: 1;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ic-delivery-step__icon svg {
  display: block;
  width: 2.75em;
  height: 2.75em;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic-delivery-step__icon text {
  fill: currentColor;
  stroke: none;
  font-family: Arial, sans-serif;
}
.ic-delivery-step:not(:nth-of-type(6)):after {
  content: "›";
  position: absolute;
  top: 45%;
  right: -1.05em;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9em;
  height: 1.9em;
  border: 3px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  background: linear-gradient(135deg, #ffffff, var(--step-accent));
  box-shadow: 0 10px 24px rgba(23, 27, 77, 0.2);
  color: #fff;
  font-size: 1.3em;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: none;
}
.ic-delivery-step__title {
  display: block;
  margin: 0 0 0.45em 0;
  color: var(--step-accent);
  font-size: 1.65em;
  font-weight: 800;
  line-height: 1.2;
}
.ic-delivery-step__intro {
  display: block;
  margin: 0;
  color: #344058;
  font-size: 0.93em;
  line-height: 1.7;
}
.ic-delivery-step__detail {
  display: block;
  max-height: 0;
  overflow: hidden;
  padding: 0 1.05em;
  opacity: 0;
  transform: translateY(-0.35em);
  transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.25s ease, transform 0.25s ease;
}
.ic-delivery-step:hover > .ic-delivery-step__detail,
.ic-delivery-step[open] > .ic-delivery-step__detail {
  max-height: 18em;
  padding: 0 1.05em 1.2em;
  opacity: 1;
  transform: translateY(0);
}
.ic-delivery-step__detail p {
  margin: 0;
  padding-top: 1em;
  border-top: 1px solid rgba(39, 48, 71, 0.12);
  color: #4d5870;
  font-size: 0.88em;
  line-height: 1.75;
}
.ic-delivery-flow__trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 2.4em auto 0;
  padding: 1.3em 1em;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 1.1em;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 42px rgba(23, 27, 77, 0.16);
  color: #333b55;
}
.ic-delivery-flow__trust span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25em;
  padding: 0.2em 1em;
  text-align: center;
  border-left: 1px solid rgba(39, 48, 71, 0.12);
}
.ic-delivery-flow__trust span:first-child {
  border-left: 0;
}
.ic-delivery-flow__trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.35em;
  height: 3.35em;
  margin-bottom: 0.7em;
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.82), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(239, 245, 255, 0.92));
  box-shadow: 0 12px 28px rgba(23, 59, 145, 0.16);
  color: #173b91;
}
.ic-delivery-flow__trust span:nth-child(2) .ic-delivery-flow__trust-icon {
  color: #8a49c9;
}
.ic-delivery-flow__trust span:nth-child(3) .ic-delivery-flow__trust-icon {
  color: #f08b28;
}
.ic-delivery-flow__trust span:nth-child(4) .ic-delivery-flow__trust-icon {
  color: #1e63df;
}
.ic-delivery-flow__trust-icon svg {
  display: block;
  width: 2em;
  height: 2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic-delivery-flow__trust strong {
  color: #173b91;
  font-size: 1.12em;
}
@keyframes icDeliveryCircleFloat {
  0%, 100% {
    opacity: 0.48;
    filter: blur(2px) hue-rotate(0deg);
    transform: translate3d(0, 0, 0) scale(0.92);
  }
  33% {
    opacity: 0.72;
    filter: blur(3px) hue-rotate(95deg);
    transform: translate3d(8vw, 5vh, 0) scale(1.08);
  }
  66% {
    opacity: 0.58;
    filter: blur(2px) hue-rotate(210deg);
    transform: translate3d(-5vw, 9vh, 0) scale(1);
  }
}
@keyframes icDeliveryIconPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}
@media screen and (max-width: 1280px) {
  .ic-delivery-step:after {
    display: none !important;
  }
  .ic-delivery-flow__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6em 1em;
    min-height: 37.6em;
  }
  .ic-delivery-step summary {
    min-height: 18em;
  }
}
@media screen and (max-width: 736px) {
  .ic-delivery-flow {
    padding: 3.2em 0 2.6em !important;
  }
  .ic-delivery-flow__header {
    margin-bottom: 2em;
  }
  .ic-delivery-flow__steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75em;
    min-height: 0;
  }
  .ic-delivery-step:hover {
    transform: none;
  }
  .ic-delivery-step summary {
    min-height: 0;
    padding: 0.75em 0.35em;
  }
  .ic-delivery-step__number {
    margin-top: 0;
    min-width: 2.7em;
    margin-bottom: 0.65em;
    padding: 0.35em 0.55em;
    font-size: 0.85em;
  }
  .ic-delivery-step__icon {
    width: 3.15em;
    height: 3.15em;
    margin-bottom: 0.7em;
    font-size: 1em;
  }
  .ic-delivery-step__icon svg {
    width: 1.9em;
    height: 1.9em;
  }
  .ic-delivery-step__title {
    font-size: 1.05em;
  }
  .ic-delivery-step__intro {
    font-size: 0.72em;
    line-height: 1.45;
  }
  .ic-delivery-flow__trust {
    grid-template-columns: 1fr 1fr;
    gap: 1em 0;
  }
  .ic-delivery-flow__trust span:nth-child(odd) {
    border-left: 0;
  }
}
@media (hover: none) {
  .ic-delivery-step:not([open]):hover > .ic-delivery-step__detail {
    max-height: 0;
    padding: 0 1.05em;
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ic-delivery-flow__sparkles:before,
  .ic-delivery-flow__sparkles:after,
  .ic-delivery-step,
  .ic-delivery-step summary,
  .ic-delivery-step__detail,
  .ic-delivery-step__icon,
  .ic-delivery-flow__panel {
    animation: none !important;
    transition: none !important;
  }
}

.ic-delivery-step:hover,
.ic-delivery-step.is-active,
.ic-delivery-step[open] {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 42px rgba(23, 27, 77, 0.22);
  filter: none;
  transform: none;
}
.ic-delivery-step.is-active {
  outline: 3px solid rgba(255, 255, 255, 0.86);
  outline-offset: 3px;
}
.ic-delivery-step.is-active .ic-delivery-step__icon {
  animation: icDeliveryIconPulse 1.8s ease-in-out infinite;
}
.ic-delivery-step__detail,
.ic-delivery-step:hover > .ic-delivery-step__detail,
.ic-delivery-step[open] > .ic-delivery-step__detail {
  display: none;
  max-height: 0;
  padding: 0;
  opacity: 0;
}
.ic-delivery-flow__panel {
  position: absolute;
  left: calc(50% + 0.5em);
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  min-height: 50%;
  padding: 1.2em 1.4em;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 1.05em;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 240, 0.96)),
    radial-gradient(circle at 92% 18%, rgba(242, 111, 47, 0.2), transparent 30%);
  box-shadow: 0 28px 70px rgba(23, 27, 77, 0.32);
  color: #273047;
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px) scale(0.98);
  transition: opacity 0.24s ease, transform 0.28s cubic-bezier(0.2, 0.85, 0.24, 1);
}
.ic-delivery-flow__panel.is-over-first {
  left: 0;
  right: calc(50% + 0.5em);
}
@media screen and (min-width: 737px) and (max-width: 1280px) {
  .ic-delivery-flow__panel {
    left: 0;
    top: calc(50% + 0.8em);
    min-height: 0;
  }
  .ic-delivery-flow__panel.is-over-first {
    right: 0;
    top: 0;
    bottom: calc(50% + 0.8em);
  }
}
.ic-delivery-flow__panel.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.ic-delivery-flow__panel-content {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.4em;
  width: 100%;
}
.ic-delivery-flow__panel-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.4em;
  height: 4.4em;
  border-radius: 999px;
  background: linear-gradient(135deg, #173b91, #f08b28);
  box-shadow: 0 18px 36px rgba(23, 59, 145, 0.24);
  color: #fff;
  font-weight: 800;
}
.ic-delivery-flow__panel h3 {
  margin: 0 0 0.35em 0;
  color: #173b91;
  font-size: clamp(1.35em, 2.6vw, 2em);
  line-height: 1.2;
}
.ic-delivery-flow__panel p {
  margin: 0;
  color: #4d5870;
  font-size: 1.05em;
  line-height: 1.8;
}
.ic-delivery-flow__panel-close {
  position: absolute;
  top: 0.65em;
  right: 0.75em;
  width: 2.1em;
  height: 2.1em;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(23, 59, 145, 0.08);
  box-shadow: none;
  color: #173b91;
  font-size: 1.15em;
  line-height: 2.1em;
  cursor: pointer;
}
.ic-delivery-flow__panel-close:hover {
  background: rgba(242, 111, 47, 0.14);
}
@media screen and (min-width: 737px) {
  .ic-delivery-step[open] {
    position: relative;
    inset: auto;
    z-index: auto;
    display: block;
    overflow: visible;
    animation: none;
  }
  .ic-delivery-step[open] summary {
    align-items: center;
    justify-content: flex-start;
    min-height: 20.5em;
    padding: 1.3em 1em 1em;
    text-align: center;
    animation: none;
  }
  .ic-delivery-step[open] .ic-delivery-step__number {
    margin: -2.35em auto 1em;
  }
  .ic-delivery-step[open] .ic-delivery-step__icon {
    width: 4.6em;
    height: 4.6em;
    box-shadow: none;
  }
  .ic-delivery-step[open] .ic-delivery-step__title {
    font-size: 1.65em;
  }
  .ic-delivery-step[open] .ic-delivery-step__intro {
    max-width: none;
    font-size: 0.93em;
  }
}
@media screen and (max-width: 736px) {
  .ic-delivery-flow__panel,
  .ic-delivery-flow__panel.is-over-first {
    position: relative;
    grid-column: 1 / -1;
    left: 0;
    right: 0;
    top: auto;
    bottom: auto;
    margin-top: -0.4em;
    padding: 1em;
  }
  .ic-delivery-flow__panel-content {
    grid-template-columns: 1fr;
    gap: 0.75em;
  }
  .ic-delivery-flow__panel-number {
    width: 3.2em;
    height: 3.2em;
  }
  .ic-delivery-flow__panel p {
    font-size: 0.95em;
  }
}