.mp7-tp { --mp7-surf: rgba(255, 255, 255, 0.04); --mp7-lime: var(--h5-accent, #7fd3a4); --mp7-sub: rgba(255, 255, 255, 0.6); }
.mp7-panel { position: relative; isolation: isolate; overflow: hidden; background: var(--mp7-surf); color: #fafafa; border-radius: 16px; }
.mp7-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0.14; filter: grayscale(1) brightness(1.6); pointer-events: none; }
.mp7-in { position: relative; z-index: 1; display: flex; flex-direction: row; gap: 40px; padding: 40px; }
@media screen and (min-width: 1280px) { .mp7-in { min-height: 37.1875rem; } }
.mp7-tx { display: flex; flex-direction: column; align-items: flex-start; width: 40%; max-width: 27.875rem; flex-shrink: 0; text-align: left; }
.mp7-eyebrow { display: inline-flex; align-items: center; gap: 16px; margin: 0 0 16px; }
.mp7-eyebrow span, .mp7-step-e { font-family: "Cashpad Mono", ui-monospace, Menlo, monospace; font-weight: 500; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; }
.mp7-eyebrow span { font-size: clamp(12px, calc(11.4px + 0.125vw), 13px); color: var(--mp7-sub); }
.mp7-ic { display: block; width: 30px; height: 30px; flex: none; color: var(--mp7-lime); }
body.h5 .mp7-h { margin: auto 0 0; font-family: "Cashpad Display", ui-sans-serif, system-ui, sans-serif; font-size: clamp(26px, calc(17.6px + 1.75vw), 40px);
  font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; color: #fafafa; text-align: left; }
.mp7-p { margin: 12px 0 0; font-size: clamp(15px, calc(14.4px + 0.125vw), 16px); line-height: 1.4; color: var(--mp7-sub); }
.mp7-tx .h5-btn { margin-top: 24px; }   


.mp7-vis { position: relative; flex: 1 1 auto; align-self: center; width: 100%; max-width: 39rem; margin-inline: auto; aspect-ratio: 612 / 492; container-type: inline-size; }
.mp7-stage { --u: calc(100cqw / 612); position: absolute; inset: 0; }
.mp7-term, .mp7-row, .mp7-card, .mp7-go { position: absolute; box-sizing: border-box; }
.mp7-term { left: calc(var(--u) * 4); top: calc(var(--u) * 66); width: calc(var(--u) * 300); height: calc(var(--u) * 130);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 12);
  border-radius: calc(var(--u) * 8); background: var(--mp7-surf); }
.mp7-spark { display: block; width: calc(var(--u) * 32); height: calc(var(--u) * 32); color: var(--mp7-lime); }
.mp7-type { margin: 0; min-height: 1.3em; font-family: "Cashpad Mono", ui-monospace, Menlo, monospace; font-size: calc(var(--u) * 13); line-height: 1.3; letter-spacing: 0.04em; color: var(--mp7-sub); white-space: nowrap; }
.mp7-bar { position: relative; display: block; overflow: hidden; width: calc(var(--u) * 145); height: calc(var(--u) * 3); border-radius: 99px; background: rgba(255, 255, 255, 0.1); }
.mp7-bar i { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: var(--mp7-lime); animation: mp7-seg 2.6s cubic-bezier(0.45, 0, 0.3, 1) infinite; }
.mp7-bar i:nth-child(1) { left: 0; width: 6%; animation-duration: 2.2s; }
.mp7-bar i:nth-child(2) { left: 0; width: 34%; animation-delay: -0.9s; }
.mp7-bar i:nth-child(3) { left: 0; width: 14%; animation-duration: 3.1s; animation-delay: -1.7s; }
@keyframes mp7-seg { from { transform: translateX(-110%); } to { transform: translateX(760%); } }
.mp7-bar i:nth-child(2) { animation-name: mp7-seg2; }
@keyframes mp7-seg2 { from { transform: translateX(-110%); } to { transform: translateX(300%); } }
.mp7-vis.is-off .mp7-bar i { animation-play-state: paused; }

.mp7-rows { margin: 0; padding: 0; list-style: none; }
.mp7-row { left: calc(var(--u) * 4); top: calc(var(--u) * (207 + var(--i) * 57)); width: calc(var(--u) * 300); height: calc(var(--u) * 48);
  display: flex; flex-direction: column; justify-content: center; gap: calc(var(--u) * 5); padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 8); background: var(--mp7-surf);
  font-family: "Cashpad Mono", ui-monospace, Menlo, monospace; text-transform: uppercase; letter-spacing: 0.15em; color: #fafafa; white-space: nowrap; }
.mp7-row-l { display: flex; align-items: center; gap: calc(var(--u) * 5); font-size: calc(var(--u) * 9.5); font-weight: 600; line-height: 1; }
.mp7-row-l .mp7-play { width: calc(var(--u) * 7); height: calc(var(--u) * 5); color: var(--mp7-sub); flex: none; }
.mp7-row-v { overflow: hidden; text-overflow: ellipsis; font-size: calc(var(--u) * 9); line-height: 1; color: var(--mp7-sub); }

.mp7-cards { margin: 0; }
.mp7-card { left: calc(var(--u) * 322); top: calc(var(--u) * (66 + var(--i) * 79.5)); width: calc(var(--u) * 284); height: calc(var(--u) * 70.5);
  display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 12); margin: 0; padding: 0 calc(var(--u) * 22);
  border-radius: calc(var(--u) * 8); background: var(--mp7-surf); color: #fafafa; }
.mp7-card dt { display: flex; flex-direction: column; gap: calc(var(--u) * 2); min-width: 0; font-family: "Cashpad Sans", ui-sans-serif, system-ui, sans-serif; }
.mp7-card dt b { font-size: calc(var(--u) * 14); font-weight: 400; line-height: 1.2; color: #fafafa; }
.mp7-card dt span { font-size: calc(var(--u) * 11.5); font-weight: 400; line-height: 1.2; color: var(--mp7-sub); }
.mp7-card dd { margin: 0; font-family: "Cashpad Display", ui-sans-serif, system-ui, sans-serif; font-size: calc(var(--u) * 28); font-weight: 500; line-height: 1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp7-go { left: calc(var(--u) * 322); top: calc(var(--u) * 384); width: calc(var(--u) * 284); height: calc(var(--u) * 39);
  display: flex; align-items: center; justify-content: center; border-radius: calc(var(--u) * 8); background: var(--mp7-lime); color: #0f1011;
  font-family: "Cashpad Sans", ui-sans-serif, system-ui, sans-serif; font-size: calc(var(--u) * 13.5); font-weight: 500; text-decoration: none; transition: background-color 0.2s ease; }
.mp7-go:hover { background: #9adfb8; text-decoration: none; }
.mp7-go:focus-visible, .mp7-link:focus-visible { outline: 2px solid var(--h5-accent); outline-offset: 3px; }


.mp7-vis.is-armed .mp7-term, .mp7-vis.is-armed .mp7-row { transition: left 0.7s var(--h5-ease), top 0.7s var(--h5-ease), width 0.7s var(--h5-ease), height 0.7s var(--h5-ease),
  opacity 0.45s ease, transform 0.45s ease; }
.mp7-vis.is-armed:not(.is-p2) .mp7-term { left: calc(var(--u) * 116); top: calc(var(--u) * 20); width: calc(var(--u) * 380); height: calc(var(--u) * 160); }
.mp7-vis.is-armed:not(.is-p2) .mp7-row { left: calc(var(--u) * 116); top: calc(var(--u) * (192 + var(--i) * 57)); width: calc(var(--u) * 380); }
.mp7-vis.is-armed:not(.is-p1) .mp7-term { opacity: 0; transform: scale(0.96); }
.mp7-vis.is-armed:not(.is-p1) .mp7-term > * { opacity: 0; }
.mp7-vis.is-armed .mp7-term > * { transition: opacity 0.4s ease 0.35s; }
.mp7-vis.is-armed .mp7-row { transition-delay: 0s, 0s, 0s, 0s, calc(1.1s + var(--i) * 0.18s), calc(1.1s + var(--i) * 0.18s); }
.mp7-vis.is-armed.is-p2 .mp7-row { transition-delay: 0s; }
.mp7-vis.is-armed:not(.is-p1) .mp7-row { opacity: 0; transform: translateY(calc(var(--u) * 10)); }
.mp7-vis.is-armed .mp7-card, .mp7-vis.is-armed .mp7-go { transition: opacity 0.5s ease, transform 0.6s var(--h5-ease); transition-delay: calc(0.35s + var(--i, 4) * 0.1s); }
.mp7-vis.is-armed:not(.is-p2) .mp7-card, .mp7-vis.is-armed:not(.is-p2) .mp7-go { opacity: 0; transform: translateX(calc(var(--u) * 40)); }


@media screen and (max-width: 767px) {
  .mp7-panel { border-radius: 16px; }
  .mp7-in { flex-direction: column; gap: 24px; padding: 40px 20px; }
  .mp7-tx { width: 100%; max-width: none; }
  .mp7-eyebrow { gap: 12px; }
  .mp7-ic { width: 26px; height: 26px; }
  body.h5 .mp7-h { margin-top: 20px; }
  .mp7-p { margin-top: 12px; }
  .mp7-vis { aspect-ratio: auto; container-type: normal; max-width: none; }
  .mp7-stage { --u: 1px; position: static; display: flex; flex-direction: column; gap: 9px; }
  .mp7-term, .mp7-row, .mp7-card, .mp7-go { position: relative; left: auto !important; top: auto !important; width: auto !important; }
  .mp7-term { height: 130px !important; }
  .mp7-rows { display: flex; flex-direction: column; gap: 9px; }
  .mp7-row { height: 54px !important; gap: 7px; }
  .mp7-row-l { font-size: 11px; }
  .mp7-row-v { font-size: 10.5px; }
  .mp7-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 6px; }
  .mp7-card { height: auto; flex-direction: column; align-items: flex-start; gap: 14px; padding: 16px; }
  .mp7-card dd { font-size: 26px; }
  .mp7-go { height: 44px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .mp7-bar i { animation: none; } .mp7-bar i:nth-child(2) { transform: translateX(80%); } }


.mp7-hw { --mp7-ink-line: rgba(244, 242, 236, 0.5); }
body.h5 .mp7-hw-h { margin: 0 auto; max-width: 27rem; font-family: "Cashpad Display", ui-sans-serif, system-ui, sans-serif;
  font-size: var(--t-h2); font-weight: 500; line-height: 1.04; letter-spacing: -0.03em; color: var(--h5-ink); text-align: center; }   
.mp7-hw-vis { display: none; }
.mp7-steps { display: flex; flex-direction: column; gap: 32px; max-width: 34rem; margin: 56px auto 0; padding: 0; list-style: none; }

.mp7-step { position: relative; display: flex; flex-direction: column; align-items: center; padding: 20px 24px 28px; text-align: center;
  border: 1px solid rgba(244, 242, 236, 0.14); border-radius: 16px; }
.mp7-step-e { position: relative; margin: 0 0 12px; font-size: clamp(10px, calc(9.4px + 0.125vw), 11px); color: var(--h5-ink); opacity: 0.8; }
.mp7-step-e .mp7-play { display: none; }
body.h5 .mp7-step-h { margin: 0 0 2px; font-family: "Cashpad Display", ui-sans-serif, system-ui, sans-serif; font-size: clamp(18px, calc(16.8px + 0.25vw), 20px);
  font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: var(--h5-ink); }
.mp7-step-p { margin: 0; font-size: clamp(15px, calc(14.4px + 0.125vw), 16px); line-height: 1.45; color: var(--h5-ink); opacity: 0.8; text-wrap: balance; }
.mp7-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 14px; color: var(--h5-ink); text-decoration: none;
  font-family: "Cashpad Mono", ui-monospace, Menlo, monospace; font-size: clamp(14px, calc(13.4px + 0.125vw), 15px); font-weight: 500; letter-spacing: -0.05em; }
.mp7-link .mp7-play { width: 7px; height: 5px; margin-top: 1px; transition: transform 0.2s ease; }
.mp7-link:hover { color: var(--h5-accent); text-decoration: none; }
.mp7-link:hover .mp7-play { transform: translateX(2px); }
.mp7-step .mp7-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mp7-lead { display: none; }


.mp7-hw.is-pin { padding-block: 0; }
.mp7-hw.is-pin .mp7-hw-track { height: calc(100vh + 4 * 62vh); }
.mp7-hw.is-pin .mp7-hw-pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mp7-hw.is-pin .mp7-hw-vis { position: relative; z-index: 1; display: block; width: 100%; max-width: 21.25rem; aspect-ratio: 340 / 360; max-height: calc(100vh - 260px); margin: 0 auto; }
.mp7-art { --art-ground: var(--h5-bg, #0f1011); position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(calc(12px - var(--lp, 0) * 24px)) scale(calc(0.97 + var(--lp, 0) * 0.05)); transition: opacity 0.5s ease; }
.mp7-art.is-active { opacity: 1; }
.mp7-art .art-svg { width: 100%; height: 100%; }
.mp7-art .mp7-crop { overflow: hidden; }
.mp7-art.is-armed .art-svg :is(.o, .h, .p, .q) { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.mp7-art.is-armed .art-svg :is(.art-glyph, .art-fade, .art-txt, [clip-path]) { opacity: 0; }
.mp7-art.is-armed.is-on .art-svg :is(.p, .q) { stroke-dashoffset: 0; transition: stroke-dashoffset calc(var(--t, 1.2) * 0.8s) cubic-bezier(0.4, 0.1, 0.5, 1) calc(var(--d, 0) * 0.8s); }
.mp7-art.is-armed.is-on .art-svg :is(.art-glyph, .art-fade, .art-txt, [clip-path]) { opacity: 1; transition: opacity 0.8s ease 0.5s; }
.mp7-hw.is-pin .mp7-steps { position: relative; display: block; width: 100%; max-width: 68.5rem; height: 0; margin: -24px auto 0; padding-inline: 24px; box-sizing: border-box; gap: 0; }
.mp7-hw.is-pin .mp7-step { position: absolute; bottom: 48px; display: flex; align-items: stretch; width: 17.125rem; padding: 0; text-align: left; border: 0; border-radius: 0;
  opacity: 0; will-change: opacity, transform; }
.mp7-hw.is-pin .mp7-step--l { left: 24px; }
.mp7-hw.is-pin .mp7-step--r { right: 24px; width: 16.375rem; }
.mp7-hw.is-pin .mp7-step-e { margin-bottom: 14px; }
.mp7-hw.is-pin .mp7-step-e .mp7-play { display: block; position: absolute; top: 0.3125rem; right: calc(100% + 1rem); width: 12px; height: auto; color: var(--h5-ink); }
.mp7-hw.is-pin .mp7-step-h { margin-bottom: 4px; text-align: left; }
.mp7-hw.is-pin .mp7-step-p { text-wrap: pretty; }
.mp7-hw.is-pin .mp7-link { margin-top: 4px; }
.mp7-hw.is-pin .mp7-step .mp7-link::after { display: none; }
@media screen and (min-width: 1280px) {
  .mp7-hw.is-pin .mp7-lead { display: block; color: var(--mp7-ink-line); overflow: visible; }
  .mp7-hw.is-pin .mp7-lead--l { margin-bottom: 8px; }
  .mp7-hw.is-pin .mp7-lead--r { position: absolute; top: 2.625rem; right: calc(100% + 1rem); }
}


body.h5 .toast_item { overflow: hidden; }
@media screen and (max-width: 767px) { body.h5 .toast_wrap { height: 5.25rem; } }


body.h5 .mp7-peg-sub { margin-top: 14px; }
.mp7-peg .h5-head { margin-bottom: 40px; }
.mp7-peg-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; }
.art-vault-fig.mp7-peg-fig { --art-ground: #191a1b; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 32px; align-items: center;
  margin: 0; padding: 40px; background: rgba(255, 255, 255, 0.04); border-radius: 16px; }
.mp7-peg-draw { width: 100%; max-width: 360px; margin-inline: auto; }
.mp7-peg-key { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; font-family: "Cashpad Sans", ui-sans-serif, system-ui, sans-serif; }
.mp7-peg-l { font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, 0.6); }
.mp7-peg-big { font-family: "Cashpad Display", ui-sans-serif, system-ui, sans-serif; font-size: clamp(48px, calc(24px + 3vw), 68px); font-weight: 400;
  line-height: 1; letter-spacing: -0.03em; color: #fafafa; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp7-peg-floor { font-size: 14px; line-height: 1.35; color: rgba(255, 255, 255, 0.6); }
.mp7-peg-floor b { color: #fafafa; font-weight: 500; }
.mp7-peg-key .mp7-peg-src { margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.42); }
.mp7-peg-trio { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; margin: 0; text-align: left; }
.mp7-peg-t { min-width: 0; padding: 12px 14px; background: rgba(255, 255, 255, 0.04); border-radius: 8px; }
.mp7-peg-t dt { font-size: 12px; line-height: 1.3; color: rgba(255, 255, 255, 0.6); }
.mp7-peg-t dd { margin: 4px 0 0; font-size: 15px; line-height: 1.3; font-weight: 500; color: #fafafa; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp7-peg-fig[data-live-state="loading"] .mp7-peg-key { opacity: 0.6; }
.mp7-peg-key { transition: opacity 0.3s ease; }
.mp7-rules { display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 16px 40px; list-style: none; background: rgba(255, 255, 255, 0.04); border-radius: 16px; }
.mp7-rule { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.mp7-rule:first-child { border-top: 0; }
.mp7-rule-n { padding-top: 4px; font-family: "Cashpad Mono", ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1; color: rgba(255, 255, 255, 0.42); }
body.h5 .mp7-rule-t { margin: 0; font-family: "Cashpad Display", ui-sans-serif, system-ui, sans-serif; font-size: 20px; font-weight: 500; line-height: 1.25;
  letter-spacing: -0.01em; color: #fafafa; text-align: left; }
.mp7-rule-p { margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, 0.6); }
@media screen and (max-width: 1100px) {
  .mp7-peg-grid { grid-template-columns: 1fr; }
  .mp7-rules { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; padding: 16px 40px; }
  .mp7-rule:nth-child(2) { border-top: 0; }
}
@media screen and (max-width: 767px) {
  .mp7-peg .h5-head { margin-bottom: 28px; }
  .art-vault-fig.mp7-peg-fig { grid-template-columns: 1fr; gap: 20px; padding: 24px 20px; }
  .mp7-peg-draw { max-width: 240px; }
  .mp7-rules { padding: 4px 20px; }
  .mp7-rule { padding: 16px 0; }
}
@media screen and (max-width: 767px) {
  .mp7-rules { display: flex; }
  .mp7-rule:nth-child(2) { border-top: 1px solid rgba(255, 255, 255, 0.06); }
  .mp7-peg-trio { grid-template-columns: 1fr; gap: 6px; }
  .mp7-peg-t { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 14px; }
  .mp7-peg-t dd { margin: 0; }
}


body.h5 .container.pad-me { margin-bottom: 128px; }
@media screen and (max-width: 767px) { body.h5 .container.pad-me { margin-bottom: 72px; } }


body.h5 .faqs-section { padding: var(--h5-y) var(--h5-g); }   
body.h5 .site-wrapper__ask.faq { box-sizing: border-box; max-width: var(--h5-max); padding: 40px; }
body.h5 .site-wrapper__ask.faq .container { max-width: none; }
body.h5 .site-wrapper__ask.faq .grid-2 { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); column-gap: 40px; align-items: start; }
body.h5 .site-wrapper__ask.faq .heading-3 { margin: 0; font-size: clamp(26px, calc(17.6px + 1.75vw), 40px); line-height: 1.15; letter-spacing: -0.01em; }
body.h5 .faqs-block { gap: 8px; }
body.h5 .faq__row { padding: 18px 20px; border-radius: 8px; }
body.h5 .faq__title { font-size: 16px; line-height: 1.4; }
body.h5 .faq__answer { font-size: 15px; line-height: 1.55; }
body.h5 .faq-plus { opacity: 0.6; }
@media screen and (max-width: 767px) {
  body.h5 .site-wrapper__ask.faq { padding: 28px 20px; }
  body.h5 .site-wrapper__ask.faq .grid-2 { grid-template-columns: 1fr; row-gap: 24px; }
}