/* =========================================================
   Лендинг AI Solver: блоки на весь екран.
   Закріплення й рух умикаються класом .x-on (landing-motion.js);
   без JS або з reduced motion все просто стоїть у потоці й видиме.
   ========================================================= */
html { overflow-x: clip; }
.x-big { font-family: var(--font-display); font-weight: 400; line-height: 1.1; font-size: clamp(2.1rem, 1rem + 4.6vw, 5.4rem); text-wrap: balance; }
.x-h { font-family: var(--font-display); font-weight: 400; line-height: 1.16; font-size: clamp(1.45rem, 1rem + 1.9vw, 2.9rem); text-wrap: balance; }

/* ---------- Кроки ---------- */
.x-how { --panel-h: calc(100dvh - var(--header-h)); overflow-x: clip; background: var(--ink); }
.x-panel {
  --p: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  gap: clamp(16px, 4vw, 64px);
  min-height: var(--panel-h);
  padding: clamp(20px, 4vw, 56px) max(var(--gutter), calc((100vw - 1320px) / 2));
  border-top: var(--st-b-lg);
  transform-origin: 0 100%;
  will-change: transform;
}
.x-panel--blue { background: var(--blue); color: #fff; }
.x-panel--white { background: #fff; }
.x-panel--pink { background: var(--st-pink); }
.x-panel__text { display: grid; gap: 14px; min-width: 0; }
.x-panel__text p { font-size: clamp(1rem, 0.95rem + 0.35vw, 1.25rem); max-width: 34em; }
.x-num { font-family: var(--font-display); font-size: clamp(5rem, 3rem + 11vw, 13rem); line-height: 0.9; }
.x-gap { display: none; }
.x-on .x-panel { position: sticky; top: var(--header-h); height: var(--panel-h); }
.x-on .x-panel:nth-of-type(2) { z-index: 2; }
.x-on .x-panel:nth-of-type(3) { z-index: 3; }
.x-on .x-gap { display: block; height: 90dvh; }

.x-art { min-width: 0; display: grid; place-items: center; color: var(--ink); }
.x-in { --v: clamp(0, calc((var(--p) - var(--t)) * 6), 1); opacity: var(--v); transform: translateY(calc((1 - var(--v)) * 26px)) scale(calc(0.92 + var(--v) * 0.08)); }

.x-shot { position: relative; width: min(100%, 460px); padding: 40px; }
.x-note { display: grid; gap: 8px; padding: clamp(18px, 3vw, 32px); background: #fff; border: var(--st-b-lg); box-shadow: var(--shadow-float); transform: rotate(-3deg); }
.x-note b { font-family: var(--font-display); font-weight: 400; color: var(--danger); font-size: 1.5rem; }
.x-note strong { font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); font-weight: 800; }
/* Видошукач наїжджає на задачу зі скролом */
.x-frame {
  position: absolute; inset: 0; transform: scale(calc(1.45 - var(--p) * 0.45)); opacity: calc(0.25 + var(--p) * 0.75);
  background:
    linear-gradient(var(--st-yellow), var(--st-yellow)) 0 0 / 56px 8px, linear-gradient(var(--st-yellow), var(--st-yellow)) 0 0 / 8px 56px,
    linear-gradient(var(--st-yellow), var(--st-yellow)) 100% 0 / 56px 8px, linear-gradient(var(--st-yellow), var(--st-yellow)) 100% 0 / 8px 56px,
    linear-gradient(var(--st-yellow), var(--st-yellow)) 0 100% / 56px 8px, linear-gradient(var(--st-yellow), var(--st-yellow)) 0 100% / 8px 56px,
    linear-gradient(var(--st-yellow), var(--st-yellow)) 100% 100% / 56px 8px, linear-gradient(var(--st-yellow), var(--st-yellow)) 100% 100% / 8px 56px;
  background-repeat: no-repeat;
}
.x-stamp { position: absolute; right: 8px; bottom: 8px; padding: 6px 14px; background: var(--st-green); border: var(--st-b); font-weight: 800; }

.x-sheet { display: grid; gap: 12px; width: min(100%, 520px); padding: clamp(16px, 2.6vw, 28px); background: var(--st-yellow); border: var(--st-b-lg); box-shadow: var(--shadow-float); }
.x-sheet p { display: flex; gap: 12px; align-items: center; font-weight: 700; font-size: clamp(1rem, 0.9rem + 0.6vw, 1.35rem); }
.x-sheet b { flex: none; display: grid; place-items: center; width: 34px; height: 34px; background: var(--ink); color: #fff; }
.x-sheet .x-ans { padding: 12px 14px; background: var(--st-green); border: var(--st-b); box-shadow: var(--shadow-sticker); font-weight: 800; }

.x-chat { display: grid; gap: 12px; width: min(100%, 500px); }
.x-chat p { width: fit-content; max-width: 86%; padding: 12px 16px; border: var(--st-b); box-shadow: var(--shadow-sticker); font-weight: 700; font-size: clamp(1rem, 0.92rem + 0.5vw, 1.25rem); }
.x-q { justify-self: end; background: var(--st-yellow); }
.x-a { background: #fff; }

/* ---------- Стрічка ---------- */
.x-belt { background: var(--st-yellow); border-top: var(--st-b-lg); overflow-x: clip; position: relative; z-index: 4; }
.x-belt__pin { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.x-belt__pin::-webkit-scrollbar { display: none; }
.x-belt__track { display: flex; gap: clamp(16px, 2.4vw, 36px); width: max-content; padding: clamp(28px, 5vh, 56px) var(--gutter); }
.x-card {
  flex: none; scroll-snap-align: center; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
  width: min(82vw, 440px); min-height: min(62dvh, 520px); padding: clamp(18px, 2.4vw, 30px);
  background: #fff; border: var(--st-b-lg); box-shadow: var(--shadow-float);
}
.x-card:nth-child(even) { transform: rotate(-1.4deg); }
.x-card:nth-child(3n) { transform: rotate(1.2deg); }
.x-card--lead { width: min(86vw, 760px); background: none; border: 0; box-shadow: none; transform: none; justify-content: center; }
.x-card--wide { width: min(86vw, 640px); }
.x-card--blue { background: var(--blue); color: #fff; }
.x-card--pink { background: var(--st-pink); }
.x-card--green { background: var(--st-green); }
.x-card--ink { background: var(--ink); color: #fff; box-shadow: 8px 8px 0 #fff; }
.x-glyph { margin-bottom: auto; font-family: var(--font-display); font-size: clamp(3.4rem, 2rem + 5vw, 6.5rem); line-height: 1; }
.x-card .check-demo { margin-top: 10px; padding: 14px 16px; }
@media (min-width: 761px) {
  .x-on .x-belt { height: var(--belt-h, auto); }
  .x-on .x-belt__pin { position: sticky; top: var(--header-h); height: calc(100dvh - var(--header-h)); display: flex; align-items: center; overflow: visible; }
  .x-on .x-belt__track { will-change: transform; }
}

/* ---------- Стіна предметів ---------- */
.x-wall { position: relative; z-index: 4; min-height: 100dvh; padding: clamp(40px, 7vw, 88px) var(--gutter); background: var(--blue); color: #fff; border-top: var(--st-b-lg); overflow: hidden; }
.x-wall__text { position: relative; display: grid; gap: 16px; max-width: 760px; }
.x-wall__text p { font-size: 1.1rem; max-width: 36em; }
.x-wall__hint { display: none; font-weight: 800; color: var(--st-yellow); }
.x-wall__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px !important; }
.x-wall .subject-chip { color: var(--ink); }
.x-wall__chips > :nth-child(odd) .subject-chip, .x-wall__chips > .subject-chip:nth-child(odd) { transform: rotate(-2deg); }
.x-wall__chips > .subject-chip:nth-child(3n) { background: var(--st-yellow); }
.x-wall__chips > .subject-chip:nth-child(4n) { background: var(--st-pink); }
.x-wall.is-free .x-wall__hint { display: block; }
.x-wall.is-free .x-wall__chips { position: absolute; inset: 0; margin: 0 !important; display: block; }
.x-wall.is-free .subject-chip {
  position: absolute; left: var(--x); top: var(--y); transform: rotate(var(--r)); touch-action: none; cursor: grab; user-select: none;
  font-size: clamp(1.05rem, 0.55rem + 0.9vw, 1.8rem); padding: 0.7em 1em; transition: box-shadow 100ms ease, scale 100ms ease;
}
.x-wall.is-free .subject-chip.is-held { cursor: grabbing; scale: 1.08; box-shadow: 12px 12px 0 var(--ink); z-index: 5; }

/* ---------- Батьки ---------- */
.x-parents { position: relative; z-index: 4; display: grid; align-content: center; gap: clamp(28px, 5vh, 56px); min-height: 100dvh; padding: clamp(40px, 7vw, 88px) var(--gutter); background: var(--ink); color: #fff; overflow: hidden; }
.x-huge { font-family: var(--font-display); font-weight: 400; line-height: 1.04; font-size: clamp(1.8rem, 10.4vw, 11rem); }
.x-huge span { display: block; white-space: nowrap; }
.x-huge span:last-child { color: var(--st-yellow); text-align: right; }
.x-parents__row { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.x-parents__row p { max-width: 38em; font-size: 1.15rem; }
.x-parents .btn--marker { background: var(--st-yellow); color: var(--ink); box-shadow: 5px 5px 0 #fff; }

/* ---------- Ціни, питання, фінал на всю ширину ---------- */
.pricing, .faq, .final, .reviews { position: relative; z-index: 4; }
.pricing { background: var(--st-yellow); padding-bottom: 0; }
.pricing > .wrap { width: 100%; }
.pricing .section__head { padding-inline: var(--gutter); }
.pricing .eyebrow, .faq .eyebrow { display: none; }
.pricing .plans { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-block: var(--st-b-lg); }
.pricing .plan { border: 0; border-right: var(--st-b-lg); box-shadow: none; transform: none; transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out); }
.pricing .plan:last-child { border-right: 0; }
@media (hover: hover) { .pricing .plan:hover { transform: translate(-6px, -6px); box-shadow: 8px 8px 0 var(--ink); position: relative; z-index: 1; } }
.pricing__fine { padding: 20px var(--gutter); }
.faq { background: #fff; border-bottom: var(--st-b-lg); }
.faq__list details { box-shadow: none; border-width: 3px; }
.final { display: grid; place-items: center; min-height: 100dvh; padding: 0; background: var(--blue); }
.final__card { width: 100%; background: none; border: 0; box-shadow: none; display: grid; justify-items: center; gap: 28px; padding: 40px var(--gutter); text-align: center; }
.final .h2 { font-size: clamp(2.6rem, 8.6vw, 8.5rem); line-height: 1.06; color: #fff; }

.demo__tabs { flex-wrap: wrap; }
.demo .katex-display { scrollbar-width: none; }
.demo .katex-display::-webkit-scrollbar { display: none; }
.pricing .plan .btn { white-space: normal; padding-inline: 8px; text-align: center; }
@media (min-width: 961px) and (max-width: 1320px) {
  .hero__title { font-size: 4.3vw; }
  .demo .katex-display { font-size: 0.74em; }
}
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .pricing .plans { grid-template-columns: minmax(0, 1fr); }
  .pricing .plan { border-right: 0; border-bottom: var(--st-b-lg); }
  .pricing .plan:last-child { border-bottom: 0; }
}
@media (max-width: 760px) {
  .x-panel { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 14px; padding-block: 16px; }
  .x-num { font-size: clamp(2.6rem, 9dvh, 4.2rem); }
  .x-card { min-height: min(50dvh, 380px); }
  .x-panel__text { gap: 8px; }
  .x-chat { gap: 8px; }
  .x-chat p { padding: 8px 12px; }
  .x-shot { padding: 26px; width: min(100%, 340px); }
  .x-parents__row .btn { width: 100%; }
  .x-huge span:last-child { text-align: left; }
}

/* ---------- Перший екран: заголовок на всю ширину, стіл, клавіші предметів ---------- */
.z-hero { display: flex; flex-direction: column; min-height: calc(100dvh - var(--header-h)); background: var(--st-yellow); overflow: hidden; }
.z-title { padding: clamp(16px, 2.4vw, 32px) var(--gutter) 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.3rem, 6.8vw, 9.4rem); line-height: 1.1; }
.z-title span { display: block; }
.z-title__w { width: fit-content; margin-top: 0.06em; padding: 0 0.14em; background: #fff; box-shadow: 0.07em 0.07em 0 var(--ink); line-height: 1.16; }
.z-desk { flex: 1; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(16px, 3vw, 48px); align-items: center; padding: clamp(14px, 2vw, 28px) var(--gutter) clamp(18px, 2.4vw, 32px); }
.z-copy { display: grid; gap: 14px; min-width: 0; }
.z-copy > p:first-child { font-size: clamp(1rem, 0.92rem + 0.35vw, 1.25rem); max-width: 34em; }
.z-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.z-gift { width: fit-content; padding: 6px 14px; background: var(--st-pink); border: var(--st-b); box-shadow: 4px 4px 0 var(--ink); font-size: 1.05rem; rotate: -2deg; }
.z-gift b { font-family: var(--font-display); font-weight: 400; }

.z-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 0 clamp(10px, 1.6vw, 22px); align-items: center; min-width: 0; }
.z-task { position: relative; grid-row: span 2; display: grid; gap: 10px; align-content: center; min-height: clamp(190px, 25vw, 340px); padding: clamp(16px, 2vw, 28px); background: #fff; border: var(--st-b-lg); box-shadow: var(--shadow-float); rotate: -2.5deg; overflow: hidden; }
.z-task__tag { width: fit-content; padding: 2px 10px; background: var(--st-pink); border: var(--st-b); font-weight: 800; font-size: 0.9rem; }
.z-task__q { font-weight: 800; font-size: clamp(1.1rem, 0.9rem + 1vw, 1.8rem); line-height: 1.25; }
.z-scan { position: absolute; inset-inline: 0; top: 0; height: 12px; background: var(--blue); opacity: 0; }
.z-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: z; min-width: 0; }
.z-steps li { counter-increment: z; display: flex; gap: 10px; align-items: center; min-height: 48px; padding: 7px 12px 7px 7px; background: #fff; border: var(--st-b); box-shadow: 4px 4px 0 var(--ink); font-weight: 700; line-height: 1.25; }
.z-steps li::before { content: counter(z); flex: none; display: grid; place-items: center; width: 30px; height: 30px; background: var(--ink); color: #fff; font-weight: 800; }
.z-steps li { min-width: 0; overflow-wrap: anywhere; font-size: clamp(0.95rem, 0.72rem + 0.55vw, 1.5rem); }
.z-steps li:nth-child(2) { rotate: 0.8deg; }
.z-steps li:nth-child(3) { rotate: -0.6deg; }
.z-ans { margin-top: 12px; padding: 10px 14px; background: var(--st-green); border: var(--st-b-lg); box-shadow: var(--shadow-sticker); font-weight: 700; font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.4rem); rotate: 1.2deg; min-width: 0; }

/* Один рух на приклад: падає задача, проходить скан, кроки ляпаються, відповідь штампується */
@media (prefers-reduced-motion: no-preference) {
  [data-z-stage][data-run] .z-task { animation: z-drop 320ms var(--ease-out) both; }
  [data-z-stage][data-run] .z-scan { animation: z-scan 760ms 240ms ease-in-out both; }
  [data-z-stage][data-run] .z-steps li { animation: z-slap 240ms var(--ease-out) both; }
  [data-z-stage][data-run] .z-steps li:nth-child(1) { animation-delay: 960ms; }
  [data-z-stage][data-run] .z-steps li:nth-child(2) { animation-delay: 1180ms; }
  [data-z-stage][data-run] .z-steps li:nth-child(3) { animation-delay: 1400ms; }
  [data-z-stage][data-run] .z-ans { animation: z-stamp 280ms 1680ms var(--ease-out) both; }
}
@keyframes z-drop { from { opacity: 0; transform: translateY(-28px) rotate(4deg) scale(1.05); } }
@keyframes z-scan { 0% { opacity: 1; top: 0; } 92% { opacity: 1; } 100% { opacity: 0; top: calc(100% - 12px); } }
@keyframes z-slap { from { opacity: 0; transform: scale(1.22) rotate(-3deg); } }
@keyframes z-stamp { from { opacity: 0; transform: scale(1.5) rotate(-5deg); } }

/* Клавіші: натиск міняє приклад на столі */
.z-keys { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: var(--st-b-lg); background: var(--ink); gap: 3px; }
.z-keys button { min-height: clamp(46px, 6.2vh, 62px); padding: 6px; border: 0; background: var(--st-yellow); color: var(--ink); font-family: var(--font-display); font-size: clamp(0.72rem, 0.55rem + 0.55vw, 1.15rem); transition: background-color 120ms ease, translate 90ms var(--ease-out); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.z-keys button[aria-pressed="true"] { background: var(--st-pink); color: var(--ink); box-shadow: inset 0 0 0 4px var(--ink); }
.z-keys button:active { translate: 0 3px; }
.z-keys button:focus-visible { outline-offset: -5px; outline-color: var(--ink); }
@media (hover: hover) { .z-keys button:not([aria-pressed="true"]):hover { background: #fff; } }

@media (max-width: 960px) {
  .z-desk { grid-template-columns: minmax(0, 1fr); }
  .z-title { font-size: clamp(2.1rem, 10.4vw, 5.4rem); }
}
@media (max-width: 560px) {
  .z-stage { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .z-task { min-height: 130px; grid-row: auto; }
  .z-ans { margin-top: 2px; }
  .z-actions .btn { width: 100%; }
  .z-keys { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .z-keys button { font-size: 0.72rem; }
}

/* ---------- Тарифи ---------- */
.pricing { padding-top: 0; }
.pricing .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 0; }
.pricing .plan { display: flex; flex-direction: column; gap: 10px; min-height: min(78dvh, 620px); padding: clamp(20px, 2.6vw, 36px); }
.pricing .plan__name { font-size: clamp(2rem, 1.2rem + 2.6vw, 4rem); line-height: 1.05; }
.pricing .plan__amount { font-size: clamp(2.4rem, 1.4rem + 3vw, 4.6rem); }
.plan__list { display: grid; gap: 8px; margin: 8px 0 auto !important; padding: 12px 0 18px !important; border-top: var(--st-b); list-style: none; font-weight: 600; }
.plan__list b { font-size: 1.2rem; font-weight: 800; }
.plan__save { padding: 1px 7px; background: var(--ink); color: #fff; font-size: 0.82rem; font-weight: 800; }
.pricing .plan--popular .btn--marker { background: var(--blue); }
@media (max-width: 960px) {
  .pricing .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing .plan { min-height: 0; border-right: var(--st-b-lg); }
  .pricing .plan:nth-child(even) { border-right: 0; }
  .pricing .plan:nth-last-child(-n + 2) { border-bottom: 0; }
}
@media (max-width: 560px) {
  .pricing .plans { grid-template-columns: minmax(0, 1fr); }
  .pricing .plan, .pricing .plan:nth-last-child(-n + 2) { border-right: 0; border-bottom: var(--st-b-lg); }
  .pricing .plan:last-child { border-bottom: 0; }
}

/* ---------- Студентський тариф: смуга на всю ширину ---------- */
.student { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(16px, 3vw, 44px); align-items: center; padding: clamp(20px, 3vw, 40px) var(--gutter); background: var(--st-green); border-bottom: var(--st-b-lg); }
.student__save { padding: 0.08em 0.22em; background: var(--st-pink); border: var(--st-b-lg); box-shadow: var(--shadow-float); rotate: -5deg; font-family: var(--font-display); font-size: clamp(3rem, 1.6rem + 6vw, 8rem); line-height: 1.05; }
.student__text { display: grid; gap: 6px; }
.student__text h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 1.2rem + 2.6vw, 4rem); line-height: 1.05; }
.student__text p { font-size: clamp(1rem, 0.94rem + 0.4vw, 1.3rem); font-weight: 600; max-width: 34em; }
@media (max-width: 760px) {
  .student { grid-template-columns: minmax(0, 1fr); }
  .student__save { width: fit-content; }
  .student .btn { width: 100%; }
}

/* ---------- Поповнення поштучно: калькулятор на всю ширину ---------- */
.topup-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 64px); align-items: center; padding: clamp(28px, 4.5vw, 64px) var(--gutter); background: var(--blue); color: #fff; border-bottom: var(--st-b-lg); }
.topup-band__text { display: grid; gap: 12px; }
.topup-band__text h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 1.1rem + 2.8vw, 4rem); line-height: 1.08; text-wrap: balance; }
.topup-band__text p { font-size: clamp(1rem, 0.94rem + 0.4vw, 1.25rem); max-width: 32em; }
.topup-band__calc { display: grid; gap: 14px; padding: clamp(18px, 2.6vw, 32px); background: #fff; color: var(--ink); border: var(--st-b-lg); box-shadow: 8px 8px 0 var(--ink); rotate: 1deg; }
.topup-band__label { font-weight: 800; }
.topup-band__out { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25em; font-family: var(--font-display); font-size: clamp(2rem, 1.2rem + 3vw, 4.2rem); line-height: 1.05; font-variant-numeric: tabular-nums; }
.topup-band__out span { font-size: 0.55em; }
.topup-band__out [data-topup-tasks] { padding: 0 0.15em; background: var(--st-green); border: var(--st-b); }
.topup-band__range { width: 100%; height: 44px; margin: 0; background: none; accent-color: var(--blue); cursor: pointer; appearance: none; -webkit-appearance: none; }
.topup-band__range::-webkit-slider-runnable-track { height: 14px; background: linear-gradient(var(--st-pink), var(--st-pink)) 0 / var(--fill, 8%) 100% no-repeat, var(--st-yellow); border: var(--st-b); }
.topup-band__range::-moz-range-track { height: 14px; background: var(--st-yellow); border: var(--st-b); }
.topup-band__range::-moz-range-progress { height: 14px; background: var(--st-pink); }
.topup-band__range::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; margin-top: -13px; background: var(--blue); border: var(--st-b); box-shadow: 3px 3px 0 var(--ink); }
.topup-band__range::-moz-range-thumb { width: 30px; height: 30px; border-radius: 0; background: var(--blue); border: var(--st-b); box-shadow: 3px 3px 0 var(--ink); }
.topup-band__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.topup-band__chips button { min-height: 40px; padding: 4px 14px; background: #fff; border: var(--st-b); font-weight: 800; }
.topup-band__chips button[aria-pressed="true"] { background: var(--st-yellow); }
.topup-band__calc .btn { width: 100%; }
@media (max-width: 860px) {
  .topup-band { grid-template-columns: minmax(0, 1fr); }
  .topup-band__calc { rotate: none; }
}
.topup-band__rest { padding: 8px 12px; background: var(--st-yellow); border: var(--st-b); font-weight: 700; font-size: 0.92rem; }