.solo-checkout-page {
  max-width: 1260px;
  padding-inline: clamp(12px, 3.5vw, 44px);
}

.checkout.solo-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr);
  grid-template-areas: "intro card" "flow card";
  gap: 36px clamp(24px, 4.5vw, 64px);
  max-width: none;
  margin: clamp(24px, 4vw, 56px) auto 56px;
  padding: clamp(24px, 5vw, 64px);
  border: 1px solid #243d46;
  border-radius: 28px;
  background:
    radial-gradient(ellipse at 0% 100%, #21486e 0%, transparent 59%),
    radial-gradient(ellipse at 76% 0%, #225748 0%, transparent 60%),
    repeating-linear-gradient(0deg, #c1faef0c 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, #c1faef0c 0 1px, transparent 1px 40px),
    #111f2b;
  color: #eaf8f4;
}

.solo-checkout-intro { grid-area: intro; min-width: 0; }
.solo-checkout-back { display: inline-block; margin-bottom: 24px; color: #afc9c9; font-size: 13px; }
.solo-checkout-back:hover { color: #fff; }
.solo-checkout-tag, .solo-card-tag { margin: 0 0 9px; font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.solo-checkout-tag { color: #9be9ce; }
.solo-checkout-tag span { margin-inline: 4px; color: #6e9d9b; }
.solo-checkout h1 { margin: 0; font-size: clamp(34px, 5.4vw, 72px); font-weight: 760; line-height: 1.06; letter-spacing: -.045em; }
.solo-checkout h1 span { display: block; margin-top: 7px; color: #a7eed7; }
.solo-checkout-lead { max-width: 34em; margin: 17px 0 0; color: #c2d9dd; font-size: clamp(14px, 1.35vw, 17px); line-height: 1.8; }

.solo-checkout-card {
  grid-area: card;
  align-self: center;
  min-width: 0;
  padding: clamp(22px, 3.2vw, 38px);
  border: 1px solid #ffffffde;
  border-radius: 21px;
  background: linear-gradient(145deg, #fff, #edf9f4);
  color: #153029;
  box-shadow: 0 22px 54px #07131c55;
}
.solo-card-tag { color: #38695f; }
.solo-checkout-card h2 { margin: 0; font-size: clamp(20px, 2vw, 26px); line-height: 1.4; }
.solo-card-price { margin: 12px 0 16px; color: #145547; font-size: clamp(38px, 4.2vw, 62px); font-weight: 760; line-height: 1.15; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.solo-card-benefits { display: grid; gap: 8px; margin: 0; padding: 14px 0; border-block: 1px solid #d8e8e2; list-style: none; font-size: 14px; }
.solo-card-benefits li::before { content: "✓"; display: inline-block; width: 21px; color: #1e705f; font-weight: 700; }
.solo-checkout-state { min-height: 1.7em; margin: 15px 0 11px; color: #49665e; font-size: 13px; overflow-wrap: anywhere; }
.solo-checkout-actions { display: grid; gap: 8px; }
.solo-checkout-actions .primary, .solo-checkout-actions .secondary { display: grid; place-items: center; min-height: 46px; margin: 0; font-size: 14px; font-weight: 650; }
.solo-checkout-actions .primary { background: linear-gradient(100deg, #124f43, #216a64); }
.solo-checkout-actions .primary:hover:not(:disabled) { background: #103f37; }
.solo-checkout-actions .secondary { background: #dceee7; color: #254d44; }
.solo-checkout-actions button:disabled { opacity: .65; cursor: wait; }
.solo-checkout-actions > img { display: block; width: min(100%, 220px); height: auto; min-height: 0; margin: 4px auto 0; border-radius: 8px; }

.solo-checkout-flow { grid-area: flow; min-width: 0; }
.solo-flow-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 12px; margin-bottom: 11px; }
.solo-flow-top h2 { margin: 0; font-size: 16px; font-weight: 690; }
.solo-flow-top > span { color: #b4d3d4; font-size: 12px; }
.solo-flow-top i { display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; background: #a1e9ce; box-shadow: 0 0 10px #83dfb9; }
.solo-flow-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.solo-flow-steps li { position: relative; padding: 10px; border: 1px solid #b4f8e733; border-radius: 10px; background: #182d3ee6; }
.solo-flow-steps li:nth-child(2) { border-color: #93edcc86; background: #214c49; box-shadow: 0 0 26px #79f1c926; }
.solo-flow-steps li + li::before { content: ""; position: absolute; top: 50%; right: 100%; width: 13px; height: 2px; background: #88ddc6; transform-origin: left; animation: solo-flow-connect .65s ease-out both; }
.solo-flow-steps li:last-child::before { animation-delay: .32s; }
.solo-flow-steps small { display: block; color: #a3c9cd; font-size: 11px; }
.solo-flow-steps strong { display: block; margin-top: 2px; font-size: clamp(12px, 1.3vw, 15px); line-height: 1.4; }
.solo-flow-tools { display: flex; flex-wrap: wrap; gap: 7px; margin: 13px 0 0; padding: 0; list-style: none; }
.solo-flow-tools li { display: flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid #c5f8ed24; border-radius: 6px; background: #142838; color: #d6e9ec; font-size: 11px; }
.solo-flow-tools img, .solo-flow-crop { display: block; width: 18px; height: 18px; object-fit: contain; border-radius: 3px; }
.solo-flow-tools img[src$="chatgpt.svg"], .solo-flow-tools img[src$="claude.svg"] { background: #fff; padding: 2px; }
.solo-flow-crop { overflow: hidden; }
.solo-flow-crop img { width: auto; max-width: none; }
@keyframes solo-flow-connect { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .solo-flow-steps li + li::before { animation: none; } }

@media (max-width: 800px) {
  .checkout.solo-checkout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "card" "flow";
    gap: 25px;
    max-width: 580px;
  }
  .solo-checkout-back { margin-bottom: 17px; }
}
@media (max-width: 400px) {
  .checkout.solo-checkout { padding: 16px; border-radius: 19px; }
  .solo-checkout-card { padding: 18px; }
  .solo-flow-steps li { padding: 7px; }
}