:root {
  --ink: #111114; --mute: #6b6b76; --line: #e7e5df; --paper: #faf9f6; --card: #ffffff;
  --acc: #ff6a3d; --acc2: #7b5cff; --ok: #1f9d57; --r: 18px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* шапка */
.top { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; gap: 10px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; text-decoration: none; letter-spacing: -.01em; }
.brand i { width: 28px; height: 20px; border-radius: 5px; background: linear-gradient(180deg, #ff9f0a 0 33%, #34c759 33% 66%, #0a84ff 66%); display: inline-block; box-shadow: 0 2px 6px #0002; }
.link { background: none; border: 0; cursor: pointer; font-weight: 600; color: var(--ink); text-decoration: none; padding: 8px 12px; border-radius: 10px; }
.link:hover { background: #0000000a; }
.link[disabled] { opacity: .5; cursor: default; background: none; }

/* герой */
.hero { padding: 48px 0 24px; text-align: center; }
.hero h1 { font-size: clamp(34px, 6vw, 62px); line-height: 1.02; letter-spacing: -.035em; margin: 0 auto 16px; max-width: 820px; font-weight: 800; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--acc), var(--acc2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.sub { font-size: clamp(16px, 2vw, 19px); color: var(--mute); max-width: 600px; margin: 0 auto 30px; line-height: 1.45; }

.ask { max-width: 720px; margin: 0 auto; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 10px; box-shadow: 0 10px 40px -20px #0003; text-align: left; transition: box-shadow .2s; }
.ask:focus-within { box-shadow: 0 10px 50px -16px #7b5cff55; border-color: #d8d0ff; }
.ask textarea { width: 100%; border: 0; outline: 0; resize: none; min-height: 84px; padding: 10px 12px; font-size: 17px; line-height: 1.4; background: transparent; }
.ask .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 4px 0 8px; }
.ask .hint { color: var(--mute); font-size: 13px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; border-radius: 14px; padding: 13px 20px; font-weight: 650; font-size: 16px; background: var(--ink); color: #fff; text-decoration: none; transition: transform .12s, opacity .2s, background .2s; white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .6; pointer-events: none; }
.btn.ghost { background: #0000000a; color: var(--ink); }
.btn.ghost:hover { background: #00000012; }
.btn.sm { padding: 9px 14px; font-size: 14px; border-radius: 11px; }
.btn.big { padding: 16px 24px; font-size: 17px; }
.btn.light { background: #fff; color: var(--ink); }
.btn.wallet { background: #000; color: #fff; border-radius: 12px; padding: 12px 22px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 18px auto 0; max-width: 760px; }
.chip { border: 1px solid var(--line); background: var(--card); border-radius: 99px; padding: 8px 14px; font-size: 14px; cursor: pointer; transition: border-color .15s, transform .12s; }
.chip:hover { border-color: #bbb; }
.chip:active { transform: scale(.97); }

/* превью и шаги */
.result { display: none; padding: 40px 0 10px; }
.result.on { display: block; animation: rise .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.res-grid { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 48px; align-items: start; justify-content: center; }
.stage { position: sticky; top: 16px; display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: 13px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 22px; }
.panel h2, .panel h3 { margin: 0 0 6px; letter-spacing: -.02em; }
.panel h2 { font-size: 26px; }
.panel p.mute, .mute { color: var(--mute); }
.panel > p.mute { margin: 0 0 14px; line-height: 1.45; }
.step { display: none; }
.step.on { display: block; animation: rise .45s cubic-bezier(.2, .8, .2, 1); }
.panel.dark { background: linear-gradient(160deg, #15131c, #2a2140); color: #fff; border: 0; }
.panel.dark p.mute, .panel.dark .mute { color: #c9c3dd; }
.panel.dark label { color: #c9c3dd; }
.panel.dark input { background: #ffffff12; border-color: #ffffff22; color: #fff; }
.panel.dark input::placeholder { color: #ffffff55; }
.panel.dark input:focus { border-color: #b9a9ff; box-shadow: 0 0 0 3px #7b5cff44; }
.panel.dark .link { color: #fff; }
.panel.dark .link:hover { background: #ffffff14; }
.back { margin: -8px 0 8px -12px; font-size: 14px; color: var(--mute); }
.again { margin-top: 10px; font-size: 14px; color: var(--mute); }

label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--mute); font-weight: 550; }
.full { grid-column: 1 / -1; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-top: 6px; }
input[type=text], input[type=email], input[type=password], input[type=number], select, .field {
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; background: #fff; font-size: 16px; color: var(--ink); outline: 0; width: 100%; font-weight: 400; }
input:focus, select:focus, .field:focus { border-color: #b9a9ff; box-shadow: 0 0 0 3px #7b5cff22; }
input[disabled] { opacity: .55; }
input[type=color] { width: 100%; height: 44px; border: 1px solid var(--line); border-radius: 12px; padding: 4px; background: #fff; cursor: pointer; }
input[type=range] { width: 100%; accent-color: var(--ink); }
.colors { display: flex; gap: 10px; }
.colors label { flex: 1; }
.seg { display: flex; background: #0000000a; border-radius: 12px; padding: 3px; }
.seg button { flex: 1; border: 0; background: none; padding: 9px 6px; border-radius: 9px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--mute); }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px #0002; }
.err { color: #d64545; font-size: 14px; min-height: 20px; margin-top: 8px; }

/* настройки карты */
.ed { display: flex; flex-direction: column; }
.ed-sec { padding: 16px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.ed-sec:first-child { border-top: 0; padding-top: 0; }
.ed-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); }
.ed-note { margin: 0; font-size: 12.5px; color: var(--mute); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.rng b { color: var(--ink); }
.check { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--ink); }
.logo-row { display: flex; gap: 14px; align-items: center; }
.logo-prev { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 1px #0000001a; overflow: hidden; }
.logo-prev img { max-width: 52px; max-height: 52px; }
.logo-prev span { font-size: 32px; }
.logo-ctl { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.upl { cursor: pointer; flex-direction: row; color: var(--ink); font-weight: 650; }
.emoji { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; }
.emoji input { width: 64px; text-align: center; font-size: 20px; padding: 6px; }
.levels { display: flex; flex-direction: column; gap: 8px; }
.lv-head, .lv { display: grid; grid-template-columns: 1.1fr 1.3fr 80px 28px; gap: 8px; align-items: center; }
.lv-head span { font-size: 12px; color: var(--mute); }
.lv input { padding: 9px 10px; font-size: 15px; }
.lv .pct { display: flex; align-items: center; gap: 4px; color: var(--mute); }
.lv .pct input { text-align: right; padding-right: 6px; }
.lv-x { border: 0; background: #0000000a; border-radius: 9px; width: 28px; height: 28px; cursor: pointer; font-size: 18px; color: var(--mute); }
.levels .btn { align-self: flex-start; }

/* короткий настройщик до регистрации */
.ed.simple { gap: 16px; }
.themes { display: flex; flex-wrap: wrap; gap: 10px; }
.sw { width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; background: linear-gradient(135deg, var(--a) 55%, var(--b) 55%); box-shadow: 0 0 0 1px #0000001a; transition: transform .15s, box-shadow .15s; }
.sw:hover { transform: scale(1.08); }
.sw.on { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.later { margin: 2px 0 0; font-size: 13.5px; color: var(--mute); background: #0000000a; border-radius: 12px; padding: 10px 12px; line-height: 1.4; }

/* кнопка «Создать»: спокойная, но с мягким свечением */
.cta-box { margin-top: 18px; padding: 18px 18px 18px 20px; border-radius: 18px; background: linear-gradient(135deg, #fff3ec, #f1edff); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cta-box b { display: block; font-size: 17px; margin-bottom: 2px; }
.cta-box .mute { font-size: 14px; line-height: 1.35; }
.cta-wrap { position: relative; flex: none; }
.cta-wrap::before { content: ""; position: absolute; inset: -4px; border-radius: 18px; background: linear-gradient(90deg, var(--acc), var(--acc2), var(--acc)); background-size: 200% 100%; filter: blur(12px); opacity: .35; animation: glow 3.6s ease-in-out infinite; }
@keyframes glow { 0%, 100% { opacity: .25; background-position: 0 0; } 50% { opacity: .6; background-position: 100% 0; } }
.cta { position: relative; padding: 15px 30px; font-size: 17px; border-radius: 14px; background: var(--ink); }
.cta .arr { display: inline-block; transition: transform .2s; }
.cta:hover .arr { transform: translateX(4px); }

.rules { list-style: none; padding: 0; margin: -2px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rules:empty { display: none; }
.rules li { font-size: 12.5px; padding: 5px 10px; border-radius: 99px; background: #0000000a; color: var(--mute); transition: .2s; }
.rules li::before { content: "○ "; }
.rules li.ok { background: #1f9d5718; color: #137a42; }
.rules li.ok::before { content: "✓ "; }
.rules li.bad { background: #d6454514; color: #b8322f; }
.rules li.bad::before { content: "✕ "; }
.code-in { font-size: 30px !important; letter-spacing: .5em; text-align: center; padding: 14px !important; margin: 4px 0 14px; font-variant-numeric: tabular-nums; }
.resend { margin-top: 6px; font-size: 14px; }

/* загрузка */
.think { display: none; font-size: 15px; font-weight: 600; text-align: center; }
.loading .think { display: block; animation: blink 1.8s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .45; } }
.bar { display: none; width: 240px; height: 4px; border-radius: 4px; background: #0000000f; overflow: hidden; }
.loading .bar { display: block; }
.bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--acc), var(--acc2)); transition: width 12s cubic-bezier(.1, .7, .3, 1); }
.wcard.skcard { background: #2a2a2e; box-shadow: 0 .4em 1.4em #0003; }
.sk { display: inline-block; border-radius: .45em; background: linear-gradient(90deg, #36363b 0, #4c4c52 40%, #36363b 80%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.skstrip { aspect-ratio: 375 / 123; display: grid; place-items: center; background: #303035; }
.skdots { display: grid; grid-template-columns: repeat(4, 2.3em); gap: .5em .7em; }
.skdots i { width: 2.3em; height: 2.3em; border-radius: 50%; border: .14em solid #55555b; animation: pop 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * .14s); }
@keyframes pop { 0%, 100% { transform: scale(.82); background: transparent; } 45% { transform: scale(1); background: linear-gradient(135deg, var(--acc), var(--acc2)); border-color: transparent; } }
.result.busy .side { opacity: .4; filter: blur(2px); pointer-events: none; transition: .3s; }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #ffffff55; border-top-color: #fff; animation: rot .7s linear infinite; }
.spin.dark { border-color: #0002; border-top-color: var(--ink); }
@keyframes rot { to { transform: rotate(360deg); } }

/* примеры */
.sec { padding: 70px 0 20px; }
.sec h2 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -.03em; margin: 0 0 8px; text-align: center; }
.sec > .wrap > p.mute { text-align: center; margin: 0 auto 36px; max-width: 560px; font-size: 17px; }
.ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.ex { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 22px 18px 16px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.ex:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px #0005; }
.ex .shot { display: flex; justify-content: center; font-size: 8.6px; padding: 4px 0 10px; }
.ex .tag { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--acc); }
.ex .pr { font-size: 15px; line-height: 1.4; flex: 1; }
.ex .btn { width: 100%; padding: 11px; font-size: 15px; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.stp { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 22px; }
.stp b { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--ink); color: #fff; margin-bottom: 12px; }
.stp h3 { margin: 0 0 6px; letter-spacing: -.02em; }
.stp p { margin: 0; color: var(--mute); line-height: 1.45; }
footer { color: var(--mute); font-size: 14px; padding: 50px 0 40px; text-align: center; }

/* iPhone 15 Pro: экран 393×852 pt, 1em = 16 pt */
.phone { position: relative; width: 25.82em; padding: .62em; border-radius: 4.05em; background: #0a0a0b; flex: none;
  box-shadow: 0 0 0 .2em #2f2f33, 0 0 0 .26em #8c8c92, 0 0 0 .3em #3a3a3f, 0 3em 5em -2.4em #0006, 0 1.2em 2.4em -1.4em #0005; }
.phone .pb { position: absolute; width: .26em; background: linear-gradient(90deg, #6d6d73, #3a3a3f); border-radius: .2em; }
.phone .pb-a { left: -.52em; top: 8.6em; height: 2.2em; }
.phone .pb-v1 { left: -.52em; top: 12.6em; height: 4.2em; }
.phone .pb-v2 { left: -.52em; top: 17.6em; height: 4.2em; }
.phone .pb-p { right: -.52em; top: 14.2em; height: 6.6em; background: linear-gradient(270deg, #6d6d73, #3a3a3f); }
.phone .screen { position: relative; width: 100%; aspect-ratio: 393 / 852; background: #f2f2f7; border-radius: 3.45em; overflow: hidden; color: #000; }
.island { position: absolute; top: .69em; left: 50%; transform: translateX(-50%); width: 7.88em; height: 2.31em; border-radius: 1.2em; background: #000; z-index: 3; }
.sbar { position: absolute; top: 0; left: 0; right: 0; height: 3.4em; display: flex; justify-content: space-between; align-items: center; padding: .25em 1.9em 0 2.5em; }
.sb-time { font-size: 1.06em; font-weight: 600; letter-spacing: -.01em; }
.sb-r { display: flex; align-items: center; gap: .32em; }
.sb-r svg { fill: #000; color: #000; height: .74em; }
.sb-r .sb-sig { width: 1.12em; }
.sb-r .sb-wifi { width: 1em; }
.sb-r .sb-bat { width: 1.7em; height: .82em; }
.wnav { display: flex; align-items: center; gap: .55em; padding: 3.75em 1em .7em; }
.wtitle { font-size: 2.12em; font-weight: 700; letter-spacing: -.02em; flex: 1; }
.wbtn { width: 2.1em; height: 2.1em; border-radius: 50%; background: #e3e3e8; display: grid; place-items: center; font-weight: 600; font-size: 1em; color: #000; line-height: 1; }
.wbtn:last-child { font-size: .7em; width: 3em; height: 3em; letter-spacing: -.05em; }
.wpass { padding: 0 1em; }
.wcards { position: absolute; left: 1em; right: 1em; bottom: 1.7em; }
.wcards i { display: block; height: 3.7em; border-radius: .85em; margin-top: -2.9em; box-shadow: 0 -.15em .5em #0002; }
.wcards .c1 { background: linear-gradient(135deg, #f7f7f9, #dcdce2); margin-top: 0; }
.wcards .c2 { background: #1c1c1e; }
.wcards .c3 { background: linear-gradient(135deg, #2f6bff, #1846c2); }
.homebar { position: absolute; bottom: .5em; left: 50%; transform: translateX(-50%); width: 8.4em; height: .32em; border-radius: .2em; background: #000; opacity: .85; }

/* карта Wallet */
.wcard { width: 100%; background: var(--bg); color: var(--fg); border-radius: .78em; overflow: hidden; font-size: 1em; box-shadow: 0 .3em 1.2em #0003; transition: background .3s; }
.wtop { display: flex; align-items: center; gap: .55em; padding: .75em .8em .65em; min-height: 3.6em; }
.wlogo { height: 2.15em; width: auto; max-width: 6.9em; object-fit: contain; }
.wname { font-size: 1.12em; font-weight: 600; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.whdr { display: flex; gap: .9em; text-align: right; }
.wf .wl { color: var(--lb); font-size: .64em; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; margin-bottom: .15em; }
.wf .wv { font-size: 1.02em; }
.wf.hdr .wv { font-size: 1.12em; }
.wstrip { position: relative; aspect-ratio: 375 / 123; }
.wstrip img { width: 100%; height: 100%; display: block; }
.wpri { position: absolute; left: .9em; top: 50%; transform: translateY(-50%); }
.wpri .wl { font-size: .72em; }
.wpri .wv { font-size: 2.6em; font-weight: 300; letter-spacing: -.02em; line-height: 1; }
.wrow { display: flex; justify-content: space-between; gap: .8em; padding: .7em .9em .2em; }
.wrow .wf:last-child { text-align: right; }
.wrow .wf:first-child { flex: 1; min-width: 0; }
.wrow .wv { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcode { display: flex; justify-content: center; padding: .9em 0 1.1em; }
.wqr { background: #fff; border-radius: .45em; padding: .45em .45em .3em; text-align: center; color: #000; font-size: .62em; font-weight: 600; letter-spacing: .08em; }
.wqr img { width: 9.5em; height: 9.5em; display: block; image-rendering: pixelated; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 40px); opacity: 0; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 14px; font-weight: 600; transition: .3s; z-index: 50; pointer-events: none; max-width: 90vw; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: #c0392b; }

.modal { position: fixed; inset: 0; background: #0006; display: none; place-items: center; z-index: 40; padding: 20px; }
.modal.on { display: grid; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.modal .panel { width: 100%; max-width: 400px; }

/* кабинет */
.progs { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 14px; margin-bottom: 8px; scrollbar-width: thin; }
.prog { flex: none; width: 210px; border: 2px solid transparent; border-radius: 18px; padding: 8px; background: var(--card); cursor: pointer; text-align: left; transition: border-color .2s, transform .15s; box-shadow: 0 1px 0 var(--line); }
.prog:hover { transform: translateY(-2px); }
.prog.on { border-color: var(--ink); }
.prog .mini { font-size: 8.6px; pointer-events: none; }
.prog .mini .wcode { display: none; }
.prog .pt { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; padding: 8px 4px 2px; }
.prog .pt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prog.add { display: grid; place-items: center; border: 2px dashed #cfccc4; background: transparent; color: var(--mute); font-weight: 650; font-size: 15px; min-height: 120px; box-shadow: none; }
.prog.add:hover { border-color: var(--ink); color: var(--ink); }
.prog.add span { font-size: 28px; display: block; text-align: center; }
.dash { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 32px; align-items: start; padding: 10px 0 40px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stat { background: #0000000a; border-radius: 14px; padding: 12px; }
.stat b { display: block; font-size: 24px; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; }
.stat span { font-size: 12px; color: var(--mute); }
.share { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; }
.share img { width: 150px; height: 150px; border-radius: 12px; border: 1px solid var(--line); }
.copy { display: flex; gap: 8px; margin: 10px 0; }
.copy input { font-size: 14px; }
.list { list-style: none; padding: 0; margin: 10px 0 0; }
.list li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.stack { display: flex; flex-direction: column; gap: 18px; }
.save-bar { position: sticky; bottom: 12px; display: flex; gap: 10px; justify-content: flex-end; align-items: center; background: #ffffffe6; backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 16px; padding: 10px 10px 10px 16px; margin-top: 14px; }
.save-bar .mute { flex: 1; font-size: 14px; }

/* касса */
video.cam { width: 100%; border-radius: 18px; background: #000; aspect-ratio: 1; object-fit: cover; }
.big-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.big-actions .btn { padding: 18px 12px; font-size: 17px; }
.btn.go { background: var(--ok); }
.center { text-align: center; }

@media (max-width: 860px) {
  .res-grid, .dash { grid-template-columns: 1fr; gap: 24px; }
  .stage { position: static; }
  .steps { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .form, .grid2 { grid-template-columns: 1fr; }
  .hero { padding-top: 24px; }
  .stage { font-size: 12px; }
  .ask .hint { display: none; }
  .share { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .cta-box { flex-direction: column; align-items: stretch; text-align: center; }
  .cta { width: 100%; }
  .lv-head, .lv { grid-template-columns: 1fr 1.2fr 70px 28px; }
}
@media print {
  body * { visibility: hidden; }
  .poster, .poster * { visibility: visible; }
  .poster { position: fixed; inset: 0; display: flex !important; }
}