/* Responsive composition layer for /forma/. Loaded last on purpose. */

html,
body {
  min-width: 0;
}

.resume-loader {
  display: none;
}

html.personal-entry body {
  margin: 0;
  min-height: 100dvh;
  background: #fff9f5;
}

html.personal-entry body > :not(#resume-loader) {
  display: none !important;
}

html.personal-entry #resume-loader {
  min-height: 100dvh;
  padding: 28px 20px;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  color: #30272c;
}

.resume-loader .studio-loader {
  width: min(300px, 78vw);
  margin: 0 auto 22px;
}

.resume-loader h1 {
  margin: 0 0 8px;
  font-size: clamp(24px, 7vw, 38px);
}

.resume-loader p {
  margin: 0;
  color: #756a70;
}

.closed-link {
  min-height: 100dvh;
  padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 209, 227, .9), transparent 35%),
    radial-gradient(circle at 92% 14%, rgba(226, 213, 255, .9), transparent 34%),
    #fff9f5;
}

.closed-link[hidden] {
  display: none !important;
}

.closed-link-card {
  width: min(540px, 100%);
  padding: clamp(30px, 7vw, 52px);
  border: 1px solid rgba(91, 61, 78, .1);
  border-radius: 30px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 24px 70px rgba(86, 54, 72, .12);
  text-align: center;
}

.closed-link-card > img {
  width: 116px;
  height: auto;
  margin-bottom: 30px;
}

.closed-link-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #ef4c7e, #7954e8);
  font-size: 28px;
  font-weight: 900;
}

.closed-link-card > span {
  color: #b52a67;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
}

.closed-link-card h1 {
  margin: 12px 0;
  color: #2b2228;
  font-family: Georgia, serif;
  font-size: clamp(30px, 8vw, 48px);
  line-height: 1.04;
}

.closed-link-card p {
  margin: 0;
  color: #6f636a;
  line-height: 1.55;
}

.closed-link-card .closed-link-hint {
  margin-top: 22px;
  padding: 18px;
  border-radius: 18px;
  background: #fff3f7;
  color: #554950;
}

.payment-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.payment-button {
  min-height: 54px;
  border: 1px solid rgba(74, 55, 65, .14);
  border-radius: 15px;
  background: #fff;
  color: #30272c;
  font: inherit;
  font-family: Manrope, Inter, system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: -.01em;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(75, 42, 60, .07);
}

.payment-button:hover,
.payment-button:focus-visible {
  border-color: #ef557e;
  transform: translateY(-1px);
}

.payment-button:disabled {
  cursor: wait;
  opacity: .55;
}

.production-state {
  margin: 18px 0;
  padding: 22px;
  border-radius: 20px;
  background: #fff5f7;
  text-align: center;
}

.production-state .studio-loader {
  width: min(270px, 72vw);
  margin: 0 auto 18px;
}

.result-link-list {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}

img,
video,
audio,
svg {
  max-width: 100%;
}

/* Small phones: keep the compact mobile rhythm and prevent clipped controls. */
@media (max-width: 699px) {
  .payment-buttons {
    grid-template-columns: 1fr 1fr;
  }
  #funnel {
    width: 100%;
    box-shadow: none;
  }

  .flow-screen {
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
  }

  .flow-header {
    padding-inline: 14px;
  }

  .flow-header > .interface-language {
    right: 14px;
  }

  .flow-brand {
    width: 76px;
  }

  .choice-grid,
  .big-choices,
  .language-list,
  .flow-nav {
    min-width: 0;
  }

  .choice-grid button,
  .big-choices button,
  .language-list button,
  .flow-nav button {
    min-width: 0;
  }

  .choice-grid b,
  .big-choices b,
  .language-list b {
    overflow-wrap: anywhere;
  }

  .photo-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Tablet: use the available canvas without turning the funnel into a desktop wall. */
@media (min-width: 700px) and (max-width: 1099px) {
  .site-header {
    padding-inline: 28px;
    gap: 24px;
  }

  .site-header nav {
    gap: 15px;
  }

  .hero {
    min-height: auto;
    padding: 46px 36px 62px;
    gap: 34px;
    grid-template-columns: minmax(0, 1fr) minmax(310px, .9fr);
  }

  .hero h1 {
    font-size: clamp(46px, 6.2vw, 64px);
  }

  .hero-copy > p {
    font-size: 16px;
  }

  .section {
    padding: 66px 34px;
  }

  .how-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .how-grid article {
    min-height: 180px;
  }

  .receive-grid {
    gap: 10px;
  }

  .feature {
    min-height: 300px;
    padding: 18px;
  }

  .distribution {
    margin-inline: 34px;
  }

  #funnel {
    width: 100%;
    max-width: 920px;
  }

  .flow-header {
    padding-inline: 28px;
  }

  .flow-header > .interface-language {
    right: 28px;
  }

  .flow-screen {
    width: 100%;
    max-width: 860px;
    margin-inline: auto;
    padding: 38px 34px 48px;
  }

  .flow-screen > h2,
  .demo-step h2 {
    max-width: 720px;
    font-size: clamp(38px, 5.4vw, 52px);
  }

  .choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .choice-grid button {
    min-height: 98px;
  }

  .big-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .big-choices button {
    min-height: 150px;
  }

  .language-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .story-step,
  .photos-step,
  .checkout-step,
  .demo-step {
    max-width: 760px;
  }

  .wow-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* The 768px breakpoint uses the existing mobile landing composition, but a tablet funnel. */
@media (min-width: 700px) and (max-width: 800px) {
  .hero {
    padding: 34px 28px 54px;
    display: flex;
  }

  .section {
    padding-inline: 28px;
  }

  .distribution {
    margin-inline: 28px;
  }

  .occasion-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Compact desktop and landscape tablet. */
@media (min-width: 900px) and (max-width: 1099px) {
  .choice-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Desktop: let each funnel step use the layout best suited to its content. */
@media (min-width: 1100px) {
  #funnel {
    width: 100%;
    max-width: none;
    box-shadow: none;
  }

  .flow-header {
    height: 74px;
    padding-inline: max(34px, calc((100vw - 1180px) / 2));
  }

  .flow-progress {
    top: 74px;
  }

  .flow-header > .interface-language {
    right: max(34px, calc((100vw - 1180px) / 2));
  }

  .flow-header > button {
    width: 42px;
    height: 42px;
  }

  .flow-brand {
    width: 92px;
  }

  .flow-screen {
    width: min(1120px, calc(100% - 64px));
    margin-inline: auto;
    padding: 54px 0 64px;
  }

  .flow-screen > h2,
  .demo-step h2 {
    max-width: 920px;
    margin-top: 14px;
    font-size: clamp(44px, 4.3vw, 64px);
  }

  .flow-screen > p {
    max-width: 760px;
    font-size: 17px;
  }

  .flow-screen[data-step="genre"] .choice-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
  }

  .flow-screen[data-step="genre"] .choice-grid button {
    min-height: 128px;
    padding: 18px;
    font-size: 30px;
  }

  .flow-screen[data-step="genre"] .choice-grid b {
    font-size: 16px;
  }

  .flow-screen[data-step="genre"] .flow-nav,
  .flow-screen[data-step="mood"] .flow-nav,
  .flow-screen[data-step="voice"] .flow-nav,
  .language-step .flow-nav {
    max-width: 560px;
    margin-left: auto;
  }

  .flow-screen[data-step="mood"],
  .flow-screen[data-step="voice"] {
    max-width: 1000px;
  }

  .big-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .big-choices button {
    min-height: 190px;
    padding: 28px;
    grid-template-columns: 72px 1fr;
  }

  .big-choices i {
    width: 60px;
    height: 60px;
    font-size: 32px;
  }

  .big-choices small {
    font-size: 14px;
    line-height: 1.5;
  }

  .language-step {
    max-width: 1000px;
  }

  .language-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
  }

  .language-list button {
    min-height: 58px;
  }

  .story-step {
    max-width: 860px;
  }

  .story-step textarea {
    min-height: 280px;
  }

  .demo-step {
    max-width: 1040px;
  }

  #generating {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    grid-template-areas:
      "loader title"
      "loader status"
      "loader progress"
      "loader list"
      "loader note";
    column-gap: 66px;
    align-items: center;
    text-align: left;
  }

  #generating .studio-loader {
    grid-area: loader;
    width: 340px;
    margin: 0;
  }

  #generating h2 {
    grid-area: title;
    margin-bottom: 6px;
  }

  #generation-status {
    grid-area: status;
    margin: 0;
  }

  #generating .generation-line {
    grid-area: progress;
    width: 100%;
  }

  #generating ul {
    grid-area: list;
    margin: 0;
    font-size: 15px;
  }

  #generating .wait-note {
    grid-area: note;
    font-size: 13px;
  }

  #demo-ready {
    max-width: 760px;
    margin-inline: auto;
  }

  .upsell-step.active {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(380px, .94fr);
    grid-template-areas:
      "kicker kicker"
      "video title"
      "video intro"
      "video how"
      "video benefits"
      "video price"
      "video yes"
      "video no";
    column-gap: 54px;
    align-items: start;
  }

  .upsell-step > .flow-kicker { grid-area: kicker; margin-bottom: 24px; }
  .upsell-step > .cartoon-video { grid-area: video; position: sticky; top: 116px; margin: 0; }
  .upsell-step > h2 { grid-area: title; margin-top: 0; }
  .upsell-step > h2 + p { grid-area: intro; }
  .upsell-step > .cartoon-how { grid-area: how; }
  .upsell-step > .wow-list { grid-area: benefits; }
  .upsell-step > .addon-price { grid-area: price; }
  .upsell-step > .addon-yes { grid-area: yes; }
  .upsell-step > .addon-no { grid-area: no; }

  .wow-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .photos-step {
    max-width: 940px;
  }

  .photos-step .photo-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
  }

  .photos-step .flow-nav {
    max-width: 620px;
    margin-left: auto;
  }

  .checkout-step {
    max-width: 760px;
  }
}

/* Large desktop polish for the landing page. */
@media (min-width: 1440px) {
  .hero,
  .site-header,
  .section:not(.distribution) {
    padding-inline: max(76px, calc((100vw - 1440px) / 2 + 76px));
  }

  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(520px, .92fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .upsell-step > .cartoon-video {
    position: static;
  }
}
/* Web-funnel cartoon output format selector. */
.format-choice{margin:20px 0;padding:0;border:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}.format-choice legend{grid-column:1/-1;margin-bottom:8px;font-weight:900}.format-choice label{cursor:pointer}.format-choice input{position:absolute;opacity:0}.format-choice span{min-height:82px;padding:14px;display:flex;flex-direction:column;justify-content:center;border:1px solid var(--line);border-radius:17px;background:#fff}.format-choice b{font-size:20px}.format-choice small{color:var(--muted)}.format-choice input:checked+span{border:2px solid var(--pink);background:#fff4f7;box-shadow:0 0 0 4px #ee2d8212}

/* Paid orders become a calm, single-purpose status page. */
.checkout-status-only #funnel{min-height:100dvh;background:#f8f4f2}
.checkout-status-only .flow-header{position:static;justify-content:center;border-bottom:0;background:transparent;box-shadow:none}
.checkout-status-only .flow-header #flow-back,
.checkout-status-only .flow-progress,
.checkout-status-only .checkout-step>.flow-kicker,
.checkout-status-only .checkout-step #email-label,
.checkout-status-only .checkout-step .order-summary,
.checkout-status-only .checkout-step .payment-buttons,
.checkout-status-only .checkout-step .payment-help,
.checkout-status-only .checkout-step .support,
.checkout-status-only .checkout-step #pay,
.checkout-status-only .checkout-step .secure,
.checkout-status-only .checkout-step .flow-prev{display:none!important}
.checkout-status-only .checkout-step{max-width:680px;min-height:calc(100dvh - 92px);margin:0 auto;padding:34px 22px 72px;text-align:center;background:transparent;border:0;box-shadow:none}
.checkout-status-only .checkout-step>h2{margin:8px 0 8px;font-size:clamp(30px,7vw,46px)}
.checkout-status-only .checkout-step>#checkout-copy{margin:0;color:var(--muted);font-weight:800;font-size:18px}
.checkout-status-only .production-state{margin:28px auto 0;padding:28px 22px;border:1px solid var(--line);border-radius:28px;background:#fff;box-shadow:0 18px 50px rgba(52,32,41,.08)}
.checkout-status-only .production-state .studio-loader{margin-inline:auto}
.checkout-status-only .production-state h3{margin:18px 0 10px;font-size:26px}
.checkout-status-only .production-state p{max-width:520px;margin:0 auto;color:var(--muted);line-height:1.6}

/* Once demo generation starts, the original intake is intentionally irreversible. */
#funnel,#funnel button,#funnel input,#funnel textarea,#funnel em,#funnel small,#funnel strong{font-family:Manrope,Inter,system-ui,sans-serif}
.post-demo-flow .flow-header{justify-content:center}
.post-demo-flow .flow-header #flow-back,.post-demo-flow .flow-progress,.post-demo-flow .flow-prev{display:none!important}
.post-demo-flow .flow-header .flow-brand{margin-inline:auto}
#generating .generation-line{display:none!important}
#generating .generation-checklist{margin-block:24px}
.demo-step li.active{color:var(--ink);font-weight:900}
.demo-step li.active::before{content:"●";color:var(--pink);animation:checklist-pulse 1.2s ease-in-out infinite}
.wait-note{display:block;padding:17px 18px;border:1px solid rgba(238,45,130,.14);border-radius:18px;background:linear-gradient(135deg,rgba(255,238,246,.94),rgba(244,237,255,.94));color:#5d5158;font-size:14px;line-height:1.55}
.wait-note strong{display:block;margin-bottom:3px;color:var(--ink);font-size:15px}
.payment-button{min-height:58px;padding:10px 12px;display:flex;align-items:center;justify-content:flex-start;gap:9px;text-align:left}
.payment-mark{width:54px;min-width:54px;height:34px;padding:5px 6px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(25,20,27,.055);border-radius:10px;background:linear-gradient(145deg,#fff,#f7f3f5);box-shadow:0 4px 12px rgba(45,25,35,.06)}
.payment-mark img{display:block;width:100%;height:100%;object-fit:contain}
.payment-mark.apple img{max-width:45px}.payment-mark.google img{max-width:46px}.payment-mark.paypal img{max-width:44px}.payment-mark.mastercard img{max-width:38px}.payment-mark.visa img{max-width:43px}.payment-mark.upi img{max-width:46px}.payment-mark.mir img{max-width:45px}.payment-mark.sbp img{max-width:38px}.payment-mark.crypto img{max-width:24px}
@keyframes checklist-pulse{50%{opacity:.35;transform:scale(.75)}}
@media(max-width:420px){.payment-buttons{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.payment-button{min-width:0;min-height:56px;padding:8px 7px;gap:7px;font-size:11px}.payment-mark{width:44px;min-width:44px;height:31px;padding:5px}}
@media(prefers-reduced-motion:reduce){.demo-step li.active::before{animation:none}}

/* Interface language picker: independent from country, price and checkout currency. */
.flow-header{position:relative}
.flow-header>.interface-language{position:absolute;right:18px;width:40px;height:40px;padding:0;display:grid;place-items:center;border:1px solid rgba(40,30,36,.11);border-radius:50%;background:#fff;box-shadow:0 7px 20px rgba(58,35,46,.08);font-size:21px;line-height:1}
.flow-header>.interface-language:active{transform:scale(.96)}
.site-header>.landing-interface-language{width:40px;height:40px;padding:0;display:grid;place-items:center;flex:0 0 auto;border:1px solid rgba(40,30,36,.11);border-radius:50%;background:#fff;box-shadow:0 7px 20px rgba(58,35,46,.08);font-size:21px;line-height:1}
.site-header>.landing-interface-language:active{transform:scale(.96)}
.language-modal[hidden]{display:none!important}.language-modal{position:fixed;inset:0;z-index:90;display:grid;align-items:end}.language-modal-backdrop{position:absolute;inset:0;background:rgba(26,18,23,.48);backdrop-filter:blur(4px)}.language-modal-card{position:relative;width:min(100%,560px);max-height:min(82dvh,720px);margin:0 auto;padding:24px 18px max(22px,env(safe-area-inset-bottom));overflow:auto;border-radius:28px 28px 0 0;background:#fffaf6;box-shadow:0 -20px 70px rgba(35,20,29,.22)}.language-modal-card>span{color:#dc2f76;font-size:10px;font-weight:950;letter-spacing:.15em}.language-modal-card h2{margin:8px 44px 4px 0;font-size:28px;line-height:1.05}.language-modal-card>p{margin:0 40px 18px 0;color:#756a70;font-size:13px}.language-modal-close{position:absolute;top:16px;right:16px;width:38px;height:38px;border:1px solid #eaded9;border-radius:50%;background:#fff;font-size:24px}.language-modal-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.language-option{min-width:0;min-height:54px;padding:9px 11px;display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:9px;border:1px solid #eaded9;border-radius:14px;background:#fff;text-align:left}.language-option.selected{border-color:#ef397e;background:#fff5f8;box-shadow:0 0 0 2px rgba(239,57,126,.08)}.language-option .flag{font-size:23px}.language-option b{overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.language-option small{display:block;margin-top:2px;color:#887c81;font-size:9px;font-weight:700;text-transform:uppercase}.language-modal-open{overflow:hidden}
@media(min-width:700px){.language-modal{place-items:center}.language-modal-card{width:min(620px,calc(100% - 40px));border-radius:28px}.language-modal-options{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:699px){.flow-header>.interface-language{right:14px;width:36px;height:36px;font-size:19px}.post-demo-flow .flow-header>.interface-language{display:grid!important}.site-header>.landing-interface-language{width:36px;height:36px;margin-left:auto;font-size:19px}.site-header>.landing-interface-language~.account-entry,.site-header>.landing-interface-language~.mini-cta{display:none!important}}

/* The checkout and funnel must stay readable on every device: no decorative handwriting. */
#funnel,#funnel button,#funnel input,#funnel textarea,#funnel select,#funnel .payment-help{font-family:Manrope,Inter,system-ui,sans-serif!important}

/* Mobile containment and stable post-demo actions. */
html,body{width:100%;max-width:100%;overflow-x:hidden;overscroll-behavior-x:none}
#funnel,.flow-screen,.flow-screen>*{min-width:0;max-width:100%}
#funnel img,#funnel video,#funnel audio,#funnel input,#funnel textarea,#funnel button{max-width:100%}
.offer-price s,.offer-price b,.addon-price s,.addon-price b,.total-prices s,.total-prices b{white-space:nowrap}
.personal-funnel.post-demo-flow .flow-nav,.post-demo-flow .flow-nav{position:static;display:block;width:100%;margin-top:18px;padding-top:0;padding-bottom:max(12px,env(safe-area-inset-bottom));background:none}
.personal-funnel.post-demo-flow .flow-nav .primary,.post-demo-flow .flow-nav .primary{display:flex;width:100%;min-width:0;align-items:center;justify-content:center}
.personal-funnel.post-demo-flow .photos-step .flow-nav{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);gap:9px}
.personal-funnel.post-demo-flow .photos-step .flow-prev{display:flex!important;min-width:0;align-items:center;justify-content:center}
.personal-funnel.post-demo-flow:not(.checkout-status-only) .checkout-step .payment-back .flow-prev{display:flex!important;min-width:0;align-items:center;justify-content:center}
.addon-price{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:end;gap:6px 12px}
.addon-price span{min-width:0;line-height:1.3}
.order-summary .total{align-items:center;flex-wrap:wrap}
.total-prices{min-width:0;margin-left:auto;flex-wrap:nowrap;white-space:nowrap}
.change-currency{display:flex;width:100%;min-height:44px;margin:12px 0 0;padding:10px 12px;align-items:center;justify-content:center;border:1px solid rgba(238,45,130,.2);border-radius:12px;background:#fff7fa;color:#d82970;text-decoration:none;font:850 13px/1.25 Manrope,Inter,system-ui,sans-serif}
.change-currency:active{background:#ffedf4}
.special-price{width:100%;margin-top:10px;padding:8px 12px;display:block;border-radius:11px;background:linear-gradient(100deg,#ff743d 0%,#f12a7d 48%,#a92bdd 100%);box-shadow:0 8px 22px rgba(229,41,113,.2);color:#fff!important;text-align:center;font-size:11px!important;font-weight:950!important;letter-spacing:.035em}
.modal-open{overflow:hidden}
.currency-modal[hidden]{display:none}
.currency-modal{position:fixed;inset:0;z-index:1200;display:grid;place-items:end center;padding:18px}
.currency-modal-backdrop{position:absolute;inset:0;background:rgba(25,18,22,.56);backdrop-filter:blur(7px)}
.currency-modal-card{position:relative;width:min(100%,520px);max-height:min(82dvh,720px);overflow:auto;padding:26px 20px calc(24px + env(safe-area-inset-bottom));border:1px solid rgba(238,45,130,.16);border-radius:28px;background:#fffaf7;box-shadow:0 28px 80px rgba(43,24,33,.28);font-family:Manrope,Inter,system-ui,sans-serif}
.currency-modal-card>span{display:block;margin-bottom:8px;color:var(--pink);font-size:11px;font-weight:950;letter-spacing:.16em}
.currency-modal-card h2{max-width:420px;margin:0;color:var(--ink);font-size:clamp(24px,7vw,34px);line-height:1.05;letter-spacing:-.045em}
.currency-modal-card>p{margin:10px 38px 18px 0;color:var(--muted);font-size:14px;font-weight:700;line-height:1.45}
.currency-modal-close{position:absolute;top:14px;right:14px;width:40px;height:40px;border:0;border-radius:50%;background:#f4edef;color:var(--ink);font:500 28px/1 Manrope,Inter,system-ui,sans-serif}
.currency-modal-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.checkout-currency-option{min-width:0;min-height:54px;padding:10px 8px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #eadfe4;border-radius:15px;background:#fff;color:var(--ink);font:900 14px/1 Manrope,Inter,system-ui,sans-serif}
.checkout-currency-option>span{font-size:20px}.checkout-currency-option.selected{border-color:var(--pink);background:#fff0f6;box-shadow:0 0 0 2px rgba(238,45,130,.09)}
.checkout-currency-option:disabled{opacity:.42}.currency-modal.busy .currency-modal-options{opacity:.45;pointer-events:none}
.currency-modal-status{min-height:48px;margin-top:14px;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:14px;background:#fff0f6;color:#b51f61;font-size:13px;font-weight:900}
.currency-modal-status[hidden]{display:none}.currency-modal-status i{width:18px;height:18px;border:2px solid rgba(238,45,130,.2);border-top-color:var(--pink);border-radius:50%;animation:currency-spin .7s linear infinite}
@keyframes currency-spin{to{transform:rotate(360deg)}}

@media(max-width:420px){
  .flow-screen{width:100%;padding-inline:14px}
  .offer-price{display:grid;grid-template-columns:auto auto;justify-content:start;gap:4px 8px}
  .offer-price em{grid-column:1/-1}
  .addon-price{grid-template-columns:auto auto;justify-content:start;gap:4px 10px}
  .addon-price span{grid-column:1/-1;font-size:11px!important}
  .order-summary .total{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px}
  .total-prices{justify-self:end;gap:7px}
  .total-prices b{font-size:clamp(20px,6.5vw,25px)}
  .change-currency{font-size:12px}
  .currency-modal{padding:10px;place-items:end center}
  .currency-modal-card{width:100%;padding:24px 14px calc(18px + env(safe-area-inset-bottom));border-radius:24px}
  .currency-modal-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .checkout-currency-option{min-height:50px;padding:8px 5px;gap:5px;font-size:12px}.checkout-currency-option>span{font-size:18px}
}

@media(max-width:340px){
  .total-prices{grid-column:1/-1;justify-self:start;margin-left:0}
  .payment-button{font-size:10px}
  .payment-mark{width:39px;min-width:39px}
}