@font-face {
  font-family: "Be Vietnam Pro";
  src: url("/assets/fonts/BeVietnamPro-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Be Vietnam Pro";
  src: url("/assets/fonts/BeVietnamPro-Medium.ttf") format("truetype");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --p-bg: #f6f4ee; --p-surface: #ffffff; --p-ink: #17241b; --p-muted: #59645c;
  --p-accent: #2e7d5b; --p-accent-ink: #f6f4ee; --p-action: #2e7d5b; --p-action-ink: #f6f4ee;
  --p-inv-bg: #12251c; --p-inv-surface: #1c3328; --p-inv-ink: #f6f4ee; --p-inv-muted: #a7b0a9;
  --p-inv-accent: #8fd3ae; --p-inv-accent-ink: #12251c; --p-inv-action: #8fd3ae; --p-inv-action-ink: #12251c;
  --font-display: "Be Vietnam Pro", system-ui, sans-serif;
  --font-text: "Be Vietnam Pro", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --display-weight: 500;
  --display-tracking: -0.03em;
  --display-tracking-xl: -0.04em;
  --ly-scale: 0.9;
}

.nav__logo { display: inline-flex; align-items: center; gap: 10px; }
.logo-mark { width: 34px; height: 30px; flex: none; }
.footer--dark .logo-mark, .ground-inverse .logo-mark { filter: none; }
.lang-switch { font-weight: 500; letter-spacing: .02em; }

.btn--play { gap: 10px; background: #111614; color: #fff; border-color: #111614; padding-inline: 18px 22px; cursor: default; }
a.btn--play { cursor: pointer; }
.btn--play .play-icon { width: 17px; height: 19px; flex: none; color: #8fd3ae; }
.play__txt { display: grid; line-height: 1.05; text-align: left; font-size: 16px; font-weight: 500; }
.play__txt small { font-size: 13px; font-weight: 400; opacity: .82; }
.btn--play.btn--on-dark { background: #f6f4ee; color: #111614; border-color: #f6f4ee; }
.btn--play.btn--on-dark .play-icon { color: #2e7d5b; }
@media (max-width: 1023px) { .nav__actions .btn--nav { display: none; } }

.hero__art {
  --ground-bg: #dce8d2; --ground-surface: #eef4ea; --ground-accent: #8fd3ae;
  background:
    radial-gradient(70% 60% at 18% 12%, #f4f8f1, transparent 70%),
    radial-gradient(60% 50% at 90% 100%, #b9d9c4, transparent 70%),
    #dce8d2;
}
.hero__art > .ly-piece--main.phone {
  left: auto; right: 10%; top: var(--s-8); width: min(340px, 62%);
  border-radius: 34px; border: 8px solid #17241b; background: #0e1219; overflow: hidden;
  box-shadow: 0 30px 60px -30px rgb(18 37 28 / .55);
}
.phone img { display: block; width: 100%; height: auto; }
.hero__art > .ly-piece--note { left: var(--s-6); bottom: var(--s-8); width: 290px; z-index: 2; }
.d-card { background: #fff; color: #17241b; border-radius: 14px; padding: 14px 16px; font: 400 14px/1.4 var(--font-text); box-shadow: 0 0 0 1px rgb(0 0 0 / .07), 0 18px 44px -20px rgb(0 0 0 / .45); }
.d-card h5 { margin: 0; font: 500 16px/1.3 var(--font-text); }
.d-card__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.d-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 99px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.d-chip--rare { background: #dfe8f5; color: #1f4f8c; }
.d-note__line { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; color: #2e3a33; border-top: 1px solid rgb(0 0 0 / .06); }
.d-note__line i { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #e3ede4; color: #2e7d5b; font-style: normal; font-size: 12px; font-weight: 500; }
.d-note__line b { font-weight: 500; color: #17241b; }
.hero__proof { font-size: var(--t-small); color: var(--muted); }
@media (max-width: 1023px) {
  .hero__art > .ly-piece--main.phone { top: var(--s-6); right: 10%; width: min(280px, 52%); }
  .hero__art > .ly-piece--note { left: var(--s-4); bottom: var(--s-4); width: 260px; }
}
@media (max-width: 639px) {
  .hero__art > .ly-piece--main.phone { left: 50%; right: auto; transform: translateX(-50%); top: var(--s-4); width: 220px; border-width: 6px; border-radius: 26px; }
}

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); }
.steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.steps__n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #e3ede4; color: #2e7d5b; font-weight: 500; }
.steps h3 { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: 0; margin: 6px 0 var(--s-2); }
.steps p { margin: 0; color: var(--ink); }
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); height: 100%; min-height: 0; }
.shot { margin: 0; position: relative; overflow: hidden; border-radius: var(--r-lg); background: #dce8d2; height: 520px; }
.shot img { position: absolute; left: 50%; top: var(--s-6); transform: translateX(-50%); width: 78%; height: auto; border-radius: 22px; border: 6px solid #17241b; box-shadow: 0 24px 48px -28px rgb(18 37 28 / .6); }
@media (max-width: 1023px) { .shot { height: 440px; } }
@media (max-width: 639px) {
  .how { row-gap: var(--s-7); }
  .shots { gap: var(--s-3); }
  .shot { height: 380px; }
  .shot img { width: 86%; top: var(--s-4); border-width: 4px; border-radius: 16px; }
}

.tiers { list-style: none; margin: 0 0 var(--s-7); padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-5); }
.tier { display: grid; gap: var(--s-3); }
.tier__frame { display: block; aspect-ratio: 3 / 4; border-radius: 14px; padding: 8px; background: var(--tf); }
.tier__frame { position: relative; }
.tier__frame::before { content: ""; display: block; height: 100%; border-radius: 8px; background: var(--ti); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06); }
.tier__frame img { position: absolute; left: 50%; top: 50%; width: 42%; height: auto; transform: translate(-50%, -50%); opacity: .55; }
.tier--legendary .tier__frame img, .tier--mythic .tier__frame img { opacity: .8; }
.tier__name { font-weight: 500; }
.tier--common { --tf: #a9aeb4; --ti: #f4f3ef; }
.tier--uncommon { --tf: #3f8b5c; --ti: #f1f5ef; }
.tier--rare { --tf: #2b67b0; --ti: #eef3fa; }
.tier--epic { --tf: #7a4cc2; --ti: #f4f0fa; }
.tier--legendary { --tf: linear-gradient(135deg, #8c6416, #e8c46a 35%, #a87a1e 60%, #f2d88a 85%, #8c6416); --ti: #1e1c18; }
.tier--mythic { --tf: linear-gradient(135deg, #7fe0d8, #9aa8ff 50%, #f2a6e0); --ti: #121318; }
.feat h3 { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: 0; margin: 0 0 var(--s-2); }
.feat p { margin: 0; }
.feat { border-top: 1px solid var(--line); padding-top: var(--s-5); }
@media (max-width: 1023px) { .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tier__frame { aspect-ratio: 4 / 3; } }
@media (max-width: 639px) { .tiers { gap: var(--s-3); margin-bottom: var(--s-7); } .tier__frame { aspect-ratio: 3 / 4; } .feats { row-gap: var(--s-6); } }

.faq.faq--two > .faq__item { padding: var(--s-5) 0; align-content: start; }
.faq.faq--two > .faq__item:nth-child(-n+2) { padding-top: 0; }
@media (max-width: 1023px) { .faq.faq--two > .faq__item:nth-child(2) { padding-top: var(--s-5); } }

.ph { background: #fbebdd; color: #8a3f12; border-radius: 4px; padding: 0 .25em; font-weight: inherit; }
.ph[data-placeholder] { outline: none; }

.doc { padding: calc(var(--nav) + var(--s-8)) 0 var(--s-9); }
main.doc { height: auto; }
.doc__head h1 { font-size: clamp(34px, 2.4vw + 18px, 52px); line-height: 1.08; margin: 0 0 var(--s-4); }
.doc__meta { color: var(--muted); font-size: var(--t-small); margin: 0 0 var(--s-8); }
.doc__draft { color: #8a3f12; }
.doc__toc { position: sticky; top: calc(var(--nav) + var(--s-5)); align-self: start; max-height: calc(100svh - var(--nav) - var(--s-7)); overflow: auto; }
.doc__toc ol { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.doc__toc a { color: var(--muted); text-decoration: none; font-size: var(--t-small); line-height: 1.4; }
.doc__toc a:hover { color: var(--ink); }
.prose { max-width: 72ch; }
.prose h2 { font: 500 clamp(22px, .6vw + 18px, 28px)/1.25 var(--font-display); letter-spacing: -0.01em; margin: var(--s-8) 0 var(--s-4); scroll-margin-top: calc(var(--nav) + var(--s-5)); }
.prose > :first-child { margin-top: 0; }
.prose p, .prose li { line-height: 1.7; }
.prose p { margin: 0 0 var(--s-4); }
.prose ul { margin: 0 0 var(--s-4); padding-left: 1.25em; display: grid; gap: var(--s-2); }
.prose a { color: var(--action); text-underline-offset: 3px; }
.prose strong { font-weight: 500; }
.table-wrap { overflow-x: auto; margin: 0 0 var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; min-width: 520px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.prose th { font-weight: 500; background: #eef3ea; }
.prose tr:last-child td { border-bottom: 0; }
.prose td:first-child { font-weight: 500; }
@media (max-width: 1023px) { .doc__toc { display: none; } .prose { grid-column: 1 / -1; } }
@media (max-width: 639px) { .doc { padding-top: calc(var(--nav) + var(--s-6)); } .prose table { font-size: 14px; } }

footer.site-foot { padding: var(--s-8) 0 var(--s-7); }
.footer__col a[aria-current="page"] { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

.doc--404 .wrap { max-width: 760px; }
.nf__code { font: 500 clamp(72px, 10vw, 140px)/1 var(--font-display); letter-spacing: -0.04em; color: #2e7d5b; margin: 0 0 var(--s-4); }
.doc--404 h1 { font-size: clamp(30px, 2vw + 18px, 44px); margin: 0 0 var(--s-4); }
.doc--404 .btn-row { margin-top: var(--s-6); }

.hero__proof { color: var(--ink); }
.close__word { line-height: 1.08; padding-top: .04em; }
.steps h3 { display: flex; align-items: center; gap: var(--s-3); margin-top: 0; }
.steps__n { width: 32px; height: 32px; flex: none; font-size: 15px; }
.steps li { display: block; }
.steps li p { margin-top: var(--s-2); }
.faq--compact > .faq__item { padding: var(--s-4) 0; }
.faq--compact > .faq__item:first-child { padding-top: 0; }
@media (max-width: 639px) {
  .shots { grid-template-columns: 1fr; gap: var(--s-4); }
  .shot { height: 420px; }
  .shot img { width: 72%; }
  .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.faq-side { display: grid; gap: var(--s-5); align-content: start; }
.shot--faq { height: 560px; }
.shot--faq img { width: min(300px, 70%); }
@media (min-width: 1024px) {
  #faq > .faq-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  #faq .faq-text { grid-column: 1 / span 6; }
  #faq .faq-side { grid-column: 7 / -1; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  #faq > .faq-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  #faq .faq-text { grid-column: 1 / span 6; }
  #faq .faq-side { grid-column: 7 / -1; padding-top: calc(var(--t-h2) * 1.25 + var(--head-gap)); }
  .shot--faq { height: 440px; }
}
@media (max-width: 639px) { .shot--faq { height: 520px; } .shot--faq img { width: 72%; } }
.prose ul { list-style: disc; }
.prose ul li::marker { color: var(--muted); }