/* HypeCut AI, direction B "Acid Brutal", RU (Oswald display + Inter body). Dark base rules forked from Sterzhen_1 (TEMPLATE_ORIGIN.json). */

body>main{color:var(--bf-text);--bf-progress-inactive:color-mix(in srgb,white 14%,transparent);--hc-display:"Oswald","Arial Narrow",sans-serif;--hc-glow:0 0 0 1px color-mix(in srgb,var(--bf-accent) 60%,transparent),0 10px 34px color-mix(in srgb,var(--bf-accent) 34%,transparent)}
body>main .bf-step-header{grid-template-columns:44px 1fr 44px;min-height:44px}
body>main .bf-back-button{width:44px;height:44px;color:var(--bf-muted)}
body>main .bf-step-header .bf-brand{font-family:var(--hc-display);font-weight:700;font-size:17px;letter-spacing:.08em;text-transform:uppercase;color:var(--bf-text)}

/* typography */
body>main [data-type="title"],body>main [data-type="rich_text"] h1,body>main .bf-success-title,body>main .bf-faq-title,body>main .bf-checkout-heading{font-family:var(--hc-display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;color:var(--bf-text)}
body>main [data-type="title"]{font-size:36px;line-height:1.02;margin-bottom:12px}
body>main [data-type="rich_text"] h1{font-size:32px;line-height:1.05}
body>main [data-type="subtitle"],body>main [data-type="paragraph"],body>main [data-type="rich_text"],body>main .bf-option-label,body>main .bf-legal-footer,body>main .bf-dt-heading{color:var(--bf-text)}
body>main [data-type="subtitle"][data-el$="-supporting-copy"]{color:var(--bf-muted);text-transform:none;letter-spacing:0;font-weight:500;font-size:15px;line-height:1.4}
body>main .bf-option-desc,body>main .bf-legal-footer,body>main .bf-faq-a{color:var(--bf-muted)}
body>main .bf-accent{color:var(--bf-accent)}

/* buttons */
body>main a[data-action="navigate"],body>main button[data-action="navigate"],body>main .bf-auth-form button,body>main .bf-pwh-cta,body>main .bf-cta-scroll,body>main .bf-success-cta{color:var(--bf-bg);font-family:var(--hc-display);font-weight:700;font-size:20px;letter-spacing:.04em;text-transform:uppercase;box-shadow:none}
body>main:not([data-step="offer"])>a[data-action="navigate"],body>main:not([data-step="offer"])>button[data-action="navigate"]{position:sticky;bottom:32px;z-index:3}
body>main [data-bf-incomplete]{opacity:.38;filter:saturate(.4)}
body>main .bf-pwh-cta{font-size:18px}
@keyframes hc-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
body>main[data-step="hook"]>a[data-action="navigate"],body>main .bf-cta-scroll{animation:hc-pulse 1.6s ease-in-out infinite}

/* cards, inputs (Sterzhen_1 dark base) */
body>main .bf-option-card,body>main .bf-hint-card,body>main .bf-faq{background:var(--bf-surface)}
body>main .bf-option-card{box-shadow:none}
body>main .bf-option-card.is-selected,body>main .bf-options[data-layout="list"] .bf-option-card.is-selected{background:color-mix(in srgb,var(--bf-surface) 72%,var(--bf-accent));box-shadow:inset 0 0 0 2px var(--bf-accent)}
body>main .bf-option-card.is-selected .bf-option-label{color:var(--bf-text)}
body>main .bf-option-check{color:var(--bf-bg)}
body>main .bf-auth-form .bf-email-control>input,body>main .bf-auth-form input{color:var(--bf-text);-webkit-text-fill-color:var(--bf-text);background:color-mix(in srgb,var(--bf-muted) 7%,var(--bf-surface));caret-color:var(--bf-accent)}
body>main .bf-auth-form .bf-email-control>input::placeholder{color:var(--bf-muted);-webkit-text-fill-color:var(--bf-muted);font-weight:400;opacity:.72}
body>main .bf-auth-form .bf-email-control>input[aria-invalid="true"],body>main .bf-auth-form input[aria-invalid="true"]{background:color-mix(in srgb,var(--bf-accent) 10%,var(--bf-surface));box-shadow:inset 0 0 0 1.5px var(--bf-accent)}
body>main .bf-auth-form .bf-email-control>input:focus{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bf-accent) 60%,transparent),0 0 0 3px color-mix(in srgb,var(--bf-accent) 22%,transparent)}
body>main .bf-auth-form input:-webkit-autofill,body>main .bf-auth-form input:-webkit-autofill:hover,body>main .bf-auth-form input:-webkit-autofill:focus,body>main .bf-auth-form input:-webkit-autofill:active{color:var(--bf-text) !important;-webkit-text-fill-color:var(--bf-text) !important;caret-color:var(--bf-accent);-webkit-box-shadow:0 0 0 1000px var(--bf-surface) inset !important;box-shadow:0 0 0 1000px var(--bf-surface) inset !important;transition:background-color 9999s ease-out 0s,color 9999s ease-out 0s}
body>main .bf-auth-form .bf-email-suggestions{background:var(--bf-surface)}

/* 1. hook */
body>main[data-step="hook"]>figure:first-of-type{width:calc(100% + 2 * var(--bf-layout-page-padding,16px));max-width:none;margin:-6px calc(-1 * var(--bf-layout-page-padding,16px)) 6px}
body>main[data-step="hook"]>figure:first-of-type img{width:100%;max-height:min(31dvh,380px);object-fit:cover;object-position:center;border-radius:0;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
body>main[data-step="hook"] [data-type="title"]{font-size:44px;line-height:1;margin-bottom:14px}
body>main .hc-lead{margin:0 0 16px;font-size:17px;font-weight:600;line-height:1.4;text-align:center}
body>main .hc-ticks,body>main .hc-tips{display:flex;flex-direction:column;gap:10px;margin:0 0 20px;padding:0;list-style:none}
body>main .hc-ticks li,body>main .hc-tips li{position:relative;padding-left:30px;font-size:15px;font-weight:700;line-height:1.35}
body>main .hc-ticks li::before,body>main .hc-tips li::before{content:"";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:6px;background:var(--bf-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.5 3 3 6-7' fill='none' stroke='%23090b0c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* 2. template grid: three square trend frames */
body>main[data-step="template"] .bf-options[data-layout="image_grid"]{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
body>main[data-step="template"] .bf-options[data-layout="image_grid"] .bf-option-card{flex-direction:column;flex-wrap:nowrap;align-items:stretch;border-radius:16px;background:var(--bf-surface);box-shadow:none;overflow:hidden}
body>main[data-step="template"] .bf-options[data-layout="image_grid"] .bf-option-card.is-selected{background:var(--bf-surface);box-shadow:0 0 0 2.5px var(--bf-accent),0 0 24px color-mix(in srgb,var(--bf-accent) 45%,transparent)}
body>main[data-step="template"] .bf-options[data-layout="image_grid"] .bf-option-image{aspect-ratio:1/1;height:auto}
body>main[data-step="template"] .bf-options[data-layout="image_grid"]:not([data-multiple="true"]) .bf-option-body{padding:8px 4px 9px}
body>main[data-step="template"] .bf-options[data-layout="image_grid"] .bf-option-label{font-size:12px;font-weight:800;line-height:1.15;letter-spacing:.01em;text-transform:uppercase;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
body>main[data-step="template"] .bf-option-card::before{content:"";position:absolute;z-index:2;top:calc(50% - 22px);left:50%;width:34px;height:34px;border-radius:50%;transform:translate(-50%,-50%);background:color-mix(in srgb,var(--bf-bg) 55%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5z' fill='%23fff'/%3E%3C/svg%3E") center/18px no-repeat;backdrop-filter:blur(4px);pointer-events:none}
body>main[data-step="template"] .bf-options[data-layout="image_grid"] .bf-option-card:first-child .bf-option-body{position:static}
body>main[data-step="template"] .bf-option-card:first-child .bf-option-body::before{content:"ХИТ";position:absolute;z-index:3;top:7px;left:7px;padding:3px 7px;border-radius:6px;background:var(--bf-accent);color:var(--bf-bg);font:700 11px/1.2 var(--hc-display);letter-spacing:.06em;pointer-events:none}

/* 3. upload dropzone: state switches on the native required file input */
body>main .hc-drop{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;margin:4px 0 22px;padding:36px 20px 32px;border-radius:24px;background:color-mix(in srgb,var(--bf-accent) 7%,var(--bf-surface));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--bf-accent) 35%,transparent);text-align:center;cursor:pointer;transition:box-shadow .2s ease,background .2s ease}
body>main .hc-drop:active{transform:scale(.99)}
body>main .hc-drop-input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
body>main .hc-drop:focus-within{box-shadow:inset 0 0 0 1.5px var(--bf-accent),0 0 0 4px color-mix(in srgb,var(--bf-accent) 22%,transparent)}
body>main .hc-drop-icon{display:grid;place-items:center;width:64px;height:64px;margin-bottom:6px;border-radius:20px;background:var(--bf-accent);color:var(--bf-bg);box-shadow:var(--hc-glow)}
body>main .hc-drop-icon svg{width:30px;height:30px}
body>main .hc-drop-title{font:700 24px/1.1 var(--hc-display);letter-spacing:.02em;text-transform:uppercase;color:var(--bf-text)}
body>main .hc-drop-hint{font-size:13.5px;font-weight:600;color:var(--bf-muted)}
body>main .hc-drop-chips{display:flex;gap:8px;margin:6px 0 2px}
body>main .hc-drop-chip{padding:7px 14px;border-radius:999px;background:color-mix(in srgb,var(--bf-accent) 14%,var(--bf-surface));color:var(--bf-text);font-size:14px;font-weight:700;line-height:1.2}
body>main .hc-drop:is(:has(.hc-drop-input:required:valid),[data-filled]) .hc-drop-chips{display:none}
body>main .hc-drop .hc-drop-done,body>main .hc-drop .hc-drop-icon-done{display:none}
body>main .hc-drop:is(:has(.hc-drop-input:required:valid),[data-filled]){background:color-mix(in srgb,var(--bf-accent) 16%,var(--bf-surface));box-shadow:inset 0 0 0 2px var(--bf-accent),0 0 30px color-mix(in srgb,var(--bf-accent) 25%,transparent)}
body>main .hc-drop:is(:has(.hc-drop-input:required:valid),[data-filled]) .hc-drop-idle,body>main .hc-drop:is(:has(.hc-drop-input:required:valid),[data-filled]) .hc-drop-icon-idle{display:none}
body>main .hc-drop:is(:has(.hc-drop-input:required:valid),[data-filled]) .hc-drop-done{display:block}
body>main .hc-drop:is(:has(.hc-drop-input:required:valid),[data-filled]) .hc-drop-icon-done{display:grid}
body>main .hc-tips li{font-weight:600;color:var(--bf-muted)}

/* 4. generating */
body>main[data-step="generating"][data-variant="loader_compact"]>[data-type="rich_text"]{margin-top:12px;margin-bottom:28px !important}

/* 6. offer */
body>main[data-step="offer"] figure[data-type="image"]{position:relative;overflow:hidden;margin:0 0 0;border-radius:24px;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--bf-accent) 45%,transparent)}
body>main[data-step="offer"] figure[data-type="image"] img{width:100%;height:min(52dvh,460px);max-height:none;object-fit:cover;object-position:center 30%;border-radius:0;filter:blur(6px) brightness(.62) saturate(1.2);transform:scale(1.08)}
body>main[data-step="offer"] [data-el$="-queue"]{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;margin-top:8px;pointer-events:none}
body>main[data-step="offer"]:has(figure[data-type="image"]:not([hidden])) [data-el$="-queue"]{margin-top:calc(-1 * min(52dvh,460px));height:min(52dvh,460px)}
body>main .hc-queue{display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 24px;text-align:center}
body>main .hc-queue::before{content:"";display:block;width:76px;height:76px;margin-bottom:6px;border-radius:50%;background:var(--bf-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.5' fill='%23090b0c'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5' fill='none' stroke='%23090b0c' stroke-width='2.4'/%3E%3C/svg%3E") center/38px no-repeat;box-shadow:var(--hc-glow)}
body>main .hc-queue-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;background:color-mix(in srgb,var(--bf-bg) 70%,transparent);font:700 13px/1.2 var(--hc-display);letter-spacing:.1em;color:var(--bf-text)}
body>main .hc-queue-pill i{width:9px;height:9px;border-radius:50%;background:#ff3b30;animation:hc-blink 1s steps(2,start) infinite}
@keyframes hc-blink{to{visibility:hidden}}
body>main .hc-queue-title{font:700 30px/1.05 var(--hc-display);text-transform:uppercase;letter-spacing:.01em;color:var(--bf-text);text-shadow:0 2px 18px #000}
body>main .hc-queue-sub{font-size:15px;font-weight:700;color:var(--bf-text);text-shadow:0 1px 10px #000}
body>main[data-step="offer"] [data-el$="-offer-title"]{margin-top:26px}
body>main .hc-offer-title{font-size:60px !important;line-height:.92 !important;margin-bottom:12px !important}
body>main .hc-offer-lead{margin:0;font-size:16px;font-weight:600;line-height:1.4;text-align:center;color:var(--bf-muted)}
body>main .hc-summary{display:flex;flex-direction:column;margin:18px 0 6px;padding:6px 18px;border-radius:20px;background:var(--bf-surface)}
body>main .hc-summary-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;font-size:15px}
body>main .hc-summary-row+.hc-summary-row{box-shadow:inset 0 1px 0 color-mix(in srgb,white 8%,transparent)}
body>main .hc-summary-row span{color:var(--bf-muted);font-weight:600}
body>main .hc-summary-row b{font-weight:800;text-align:right}
body>main .hc-summary-row:has(b[data-visible-if]:not([hidden])) .hc-fallback{display:none}

/* discount timer, header (Sterzhen_1 dark base) */
body>main .bf-dt-heading{color:var(--bf-text)}
body>main .bf-dt-label,body>main .bf-dt-old{fill:var(--bf-muted)}
body>main .bf-dt-plate{fill:color-mix(in srgb,var(--bf-accent) 22%,var(--bf-surface))}
body>main .bf-dt-num{fill:var(--bf-bg)}
body>main .bf-pwh-colon{color:var(--bf-muted)}
body>main [data-type="paywall_header"]{box-shadow:0 6px 16px -10px #000}

/* benefits */
body>main .bf-benefit-media{width:64px;height:64px;border-radius:16px;background:var(--bf-surface);box-shadow:0 0 0 1px color-mix(in srgb,var(--bf-accent) 30%,transparent)}
body>main .bf-benefit-title{color:var(--bf-text);font-size:16px}
body>main .bf-benefit-sub{color:var(--bf-muted);font-weight:600}
body>main [data-el$="-guarantee"] .bf-benefit-media{background:transparent;box-shadow:none}
body>main [data-el$="-guarantee"] .bf-benefit-media img{object-fit:contain}
body>main [data-el$="-guarantee"] .bf-benefit-title{color:var(--bf-accent);font:700 22px/1.1 var(--hc-display);text-transform:uppercase;letter-spacing:.02em}

/* checkout on dark */
body>main .bf-checkout{border-radius:var(--bf-radius);padding-inline:0;background:transparent}
body>main .bf-checkout-heading{color:var(--bf-text);font-size:24px}
body>main .bf-checkout-toggle{color:var(--bf-text)}
body>main .bf-checkout-item{border-color:color-mix(in srgb,white 12%,transparent)}
body>main .bf-checkout-radio{background:var(--bf-surface);border-color:var(--bf-muted);box-shadow:inset 0 0 0 5px var(--bf-surface)}
body>main .bf-checkout-panel[data-open=true] .bf-checkout-panel-inner{border-top-color:color-mix(in srgb,white 8%,transparent)}
body>main .bf-checkout-field{color:var(--bf-muted)}
body>main .bf-checkout [data-checkout-card-submit]{background:var(--bf-accent);color:var(--bf-bg);font-family:var(--hc-display);font-weight:700;font-size:20px;letter-spacing:.04em;box-shadow:none}
body>main .bf-checkout .bf-checkout-security,body>main .bf-checkout-native-note{color:var(--bf-muted)}
body>main [data-checkout-status]{background:var(--bf-surface) !important;color:var(--bf-muted) !important}

/* faq, legal */
body>main .bf-faq,body>main .bf-faq[data-variant="pilates"]{background:var(--bf-surface);font-family:var(--bf-font-family);border-radius:0;margin-left:calc(-1 * var(--bf-layout-page-padding,16px));margin-right:calc(-1 * var(--bf-layout-page-padding,16px));width:calc(100% + 2 * var(--bf-layout-page-padding,16px));box-sizing:border-box;color:var(--bf-text)}
body>main .bf-faq-title{font-size:28px}
body>main .bf-faq-q,body>main .bf-faq[data-variant="pilates"] .bf-faq-q,body>main .bf-faq[data-variant="pilates"] .bf-faq-title{color:var(--bf-text)}
body>main .bf-faq[data-variant="pilates"] .bf-faq-a{color:var(--bf-muted);font-family:var(--bf-font-family)}
body>main .bf-faq[data-variant="pilates"] .bf-faq-item[data-open="true"] .bf-faq-question-text,body>main .bf-faq[data-variant="pilates"] .bf-faq-item[data-open="true"] .bf-faq-chevron{color:var(--bf-accent)}
body>main .bf-faq-chevron{color:var(--bf-muted)}
body>main .bf-legal-footer a:focus-visible,body>main .bf-option-input:focus-visible + .bf-option-body{outline-color:var(--bf-accent)}

/* 7. success */
body>main [data-variant=success] .bf-success-badge{background:color-mix(in srgb,var(--bf-accent) 14%,var(--bf-surface));color:var(--bf-accent);box-shadow:var(--hc-glow)}
body>main [data-variant=success] .bf-success-title{font-family:var(--hc-display);font-weight:700;text-transform:uppercase;font-size:44px;line-height:1}
body>main [data-variant=success] .bf-success-message{color:var(--bf-muted);margin-bottom:12px}

@media (max-width:380px){body>main{padding-inline:14px}body>main[data-step="template"] .bf-options[data-layout="image_grid"]{gap:8px}body>main[data-step="template"] .bf-options[data-layout="image_grid"] .bf-option-label{font-size:11.5px}}
@media (prefers-reduced-motion:reduce){body>main *,body>main *::before,body>main *::after{animation:none !important;transition:none !important}}
body>main:has(>[data-variant=success])>.bf-success-cta{box-shadow:none}
body>main:has(>[data-variant=success])>.bf-success-cta:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--bf-accent) 22%,transparent)}
body>main[data-step^="upload"] [data-type="image"]{width:72px;height:72px;margin:0 0 -72px;border-radius:16px;overflow:hidden;box-shadow:0 0 0 2px var(--bf-accent)}
body>main[data-step^="upload"] [data-type="image"] img{display:block;width:100%;height:100%;object-fit:cover}
body>main .hc-trend{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:72px;margin:-13px 0 16px;padding-left:86px}
body>main .hc-trend-label{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--bf-muted)}
body>main .hc-trend b{font:700 22px/1.1 var(--hc-display);text-transform:uppercase;color:var(--bf-text)}
body>main .hc-trend:has(b[data-visible-if]:not([hidden])) .hc-fallback,body>main .hc-drop-title:has(b[data-visible-if]:not([hidden])) .hc-fallback{display:none}
body>main[data-step^="upload"]:not(:has([data-type="image"]:not([hidden]))) .hc-trend{display:none}
body>main .hc-drop-title b{font:inherit}
body>main .hc-duo-lead{margin:0 0 14px;font-size:15px;font-weight:600;line-height:1.4;color:var(--bf-muted)}
body>main .hc-drop-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 22px}
body>main .hc-drop-pair .hc-drop{margin:0;padding:24px 10px 20px;text-align:center}
body>main .hc-drop-pair .hc-drop-icon{width:52px;height:52px;border-radius:16px}
body>main .hc-drop-pair .hc-drop-icon svg{width:24px;height:24px}
body>main .hc-drop-pair .hc-drop-title{font-size:19px}

/* one-click upsell (scripts/quiz/add-upsell.py) */
main[data-step^="upsell-offer"] .bf-upsell-paid {
  display: block;
  margin: 0;
  padding: 10px 14px;
  overflow: hidden;
  border-radius: 12px;
  background: color-mix(in srgb, #2e9e5b 12%, var(--bf-bg, #fff));
  color: #4ade80;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

main[data-step^="upsell-offer"] .bf-upsell-paid::before {
  content: "\2713";
  margin-inline-end: 8px;
}

main[data-step^="upsell-offer"] [data-el$="-paid_notice"] + [data-type="rich_text"] {
  margin-top: 18px;
  margin-bottom: 30px;
}

main[data-step^="upsell-offer"] [data-type="rich_text"] h1 {
  color: var(--bf-accent);
  font-size: 26px;
  margin-bottom: 8px;
}

main[data-step^="upsell-offer"] .bf-dt-heading {
  font-size: 19.5px;
}

main[data-step^="upsell-offer"] button[data-action="purchase"] {
  position: static !important;
}

main[data-step^="upsell-offer"] [data-el$="-decline"][data-type="button"]:not(#bf-upsell) {
  position: static !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 4px !important;
  padding: 10px 16px;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: #8a8a8f !important;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
}

/* HypeCut coin packs: radio cards pick which purchase button is shown. */
main[data-step="upsell-offer"] .hc-packs {
  display: grid;
  gap: 12px;
  margin: 4px 0 6px;
}

main[data-step="upsell-offer"] .hc-pack-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

main[data-step="upsell-offer"] .hc-pack {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--bf-text) 6%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bf-text) 12%, transparent);
  cursor: pointer;
  transition: box-shadow .18s ease, background .18s ease, transform .18s ease;
  -webkit-tap-highlight-color: transparent;
}

main[data-step="upsell-offer"] .hc-pack-radio:checked + .hc-pack {
  background: color-mix(in srgb, var(--bf-accent) 12%, transparent);
  box-shadow: inset 0 0 0 2px var(--bf-accent), 0 10px 28px color-mix(in srgb, var(--bf-accent) 22%, transparent);
}

main[data-step="upsell-offer"] .hc-pack-radio:focus-visible + .hc-pack {
  outline: 2px solid var(--bf-accent);
  outline-offset: 3px;
}

main[data-step="upsell-offer"] .hc-pack:active {
  transform: scale(.99);
}

main[data-step="upsell-offer"] :is(.hc-pack-2, .hc-pack-3) {
  margin-top: 10px;
}

main[data-step="upsell-offer"] .hc-pack-badge {
  position: absolute;
  top: -11px;
  left: 16px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bf-accent);
  color: var(--theme-btn-text, #0b0b0c);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.2;
}

main[data-step="upsell-offer"] .hc-pack-3 .hc-pack-badge {
  background: color-mix(in srgb, var(--bf-text) 88%, transparent);
}

main[data-step="upsell-offer"] .hc-pack-check {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bf-text) 35%, transparent);
}

main[data-step="upsell-offer"] .hc-pack-radio:checked + .hc-pack .hc-pack-check {
  background: radial-gradient(circle, var(--bf-accent) 0 6px, transparent 6.5px);
  box-shadow: inset 0 0 0 2px var(--bf-accent);
}

main[data-step="upsell-offer"] .hc-pack-main,
main[data-step="upsell-offer"] .hc-pack-side {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

main[data-step="upsell-offer"] .hc-pack-main {
  flex: 1;
  min-width: 0;
}

main[data-step="upsell-offer"] .hc-pack-side {
  align-items: flex-end;
  text-align: right;
}

main[data-step="upsell-offer"] .hc-pack-name {
  color: color-mix(in srgb, var(--bf-text) 60%, transparent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

main[data-step="upsell-offer"] .hc-pack-coins {
  color: var(--bf-text);
  font-size: 17px;
  font-weight: 700;
}

main[data-step="upsell-offer"] .hc-pack-coins b {
  font-size: 26px;
  font-weight: 900;
}

main[data-step="upsell-offer"] .hc-pack-meta,
main[data-step="upsell-offer"] .hc-pack-unit {
  color: color-mix(in srgb, var(--bf-text) 55%, transparent);
  font-size: 13px;
  font-weight: 600;
}

main[data-step="upsell-offer"] .hc-pack-price {
  color: var(--bf-text);
  font-size: 22px;
  font-weight: 900;
}

main[data-step="upsell-offer"] .hc-pack-radio:checked + .hc-pack .hc-pack-price {
  color: var(--bf-accent);
}

main[data-step="upsell-offer"] .hc-special-tag {
  display: flex;
  justify-content: center;
  margin: 0 0 10px;
}

main[data-step="upsell-offer"] .hc-special-tag span {
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bf-accent) 16%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--bf-accent);
  color: var(--bf-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.2;
}

main[data-step="upsell-offer"] .hc-pack-was {
  display: flex;
  align-items: center;
  gap: 6px;
}

main[data-step="upsell-offer"] .hc-pack-was s {
  color: color-mix(in srgb, var(--bf-text) 50%, transparent);
  font-size: 13px;
  font-weight: 600;
}

main[data-step="upsell-offer"] .hc-pack-off {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--bf-accent);
  color: var(--theme-btn-text, #0b0b0c);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.3;
}

main[data-step="upsell-offer"] button[data-action="purchase"] {
  margin-top: 14px !important;
}

main[data-step="upsell-offer"] [data-el$="-purchase_1"][data-action="purchase"],
main[data-step="upsell-offer"] [data-el$="-purchase_3"][data-action="purchase"],
main[data-step="upsell-offer"]:has(#hc-pack-1:checked) [data-el$="-purchase_2"][data-action="purchase"],
main[data-step="upsell-offer"]:has(#hc-pack-1:checked) [data-el$="-purchase_3"][data-action="purchase"],
main[data-step="upsell-offer"]:has(#hc-pack-2:checked) [data-el$="-purchase_1"][data-action="purchase"],
main[data-step="upsell-offer"]:has(#hc-pack-2:checked) [data-el$="-purchase_3"][data-action="purchase"],
main[data-step="upsell-offer"]:has(#hc-pack-3:checked) [data-el$="-purchase_1"][data-action="purchase"],
main[data-step="upsell-offer"]:has(#hc-pack-3:checked) [data-el$="-purchase_2"][data-action="purchase"] {
  position: absolute !important;
  visibility: hidden;
  pointer-events: none;
}

main[data-step="upsell-offer"]:has(#hc-pack-1:checked) [data-el$="-purchase_1"][data-action="purchase"],
main[data-step="upsell-offer"]:has(#hc-pack-2:checked) [data-el$="-purchase_2"][data-action="purchase"],
main[data-step="upsell-offer"]:has(#hc-pack-3:checked) [data-el$="-purchase_3"][data-action="purchase"] {
  position: static !important;
  visibility: visible;
  pointer-events: auto;
}