/* Homepage hero, typing challenge and game navigation. */
.mkt-hero {
  padding-block: clamp(34px, 5.4vw, 76px);
  background:
    radial-gradient(ellipse at 84% 30%, var(--primary-soft), transparent 54%),
    radial-gradient(ellipse at 4% 95%, color-mix(in srgb, #f8be7c 14%, transparent), transparent 42%),
    var(--bg);
}

.mkt-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(24px, 6vw, 88px);
}

.mkt-kicker {
  color: var(--primary-ink);
  font-weight: 700;
  margin: 0 0 14px;
}

.mkt-intro h1 {
  font-size: clamp(3rem, 5.7vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -.055em;
  margin: 0;
}

html[lang="th"] .mkt-intro h1 { line-height: 1.22; letter-spacing: -.045em; }
.mkt-intro h1 em { color: var(--primary-ink); font-style: normal; }

.mkt-lead {
  color: var(--ink-2);
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  margin: 20px 0 24px;
  max-width: 40ch;
}

.mkt-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mkt-actions .btn { max-width: 100%; }
.mkt-intro .btn-ghost { --b: var(--surface); }
.mkt-note { color: var(--ink-3); font-size: .9rem; margin: 12px 0 0; }

.mkt-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  isolation: isolate;
  padding: clamp(13px, 2.1vw, 26px);
  border: 1px solid color-mix(in srgb, var(--primary) 21%, var(--line));
  border-radius: clamp(24px, 4vw, 40px);
  background:
    radial-gradient(circle at 23% 21%, color-mix(in srgb, #f9c28d 27%, transparent), transparent 46%),
    radial-gradient(circle at 69% 40%, color-mix(in srgb, #a58bff 36%, transparent), transparent 71%),
    var(--surface);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 20%, transparent), 0 22px 54px -26px color-mix(in srgb, var(--primary) 54%, transparent);
}

.mkt-guide [hidden],
.mkt-demo-intro [hidden] { display: none; }

.mkt-guide-name {
  color: var(--ink-2);
  font-size: .85rem;
  font-weight: 750;
  margin: 0;
}

.mkt-scene { display: grid; grid-area: 2 / 1; grid-template-rows: auto 1fr; }

.mkt-portrait {
  position: relative;
  display: grid;
  place-items: center;
  height: clamp(198px, 22.6vw, 290px);
  isolation: isolate;
}

.mkt-portrait::before {
  content: "";
  position: absolute;
  width: 76%;
  aspect-ratio: 1.24;
  max-height: 96%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 46%, color-mix(in srgb, #fbf8ff 75%, transparent), transparent 70%);
  opacity: .76;
}

.mkt-portrait::after {
  content: "";
  position: absolute;
  bottom: 7%;
  width: 43%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #4e38b446, transparent 70%);
  z-index: -1;
}

.mkt-portrait img {
  position: relative;
  height: 95%;
  width: min(59%, 260px);
  object-fit: contain;
  filter: drop-shadow(0 12px 15px #3d26774d);
}

.mkt-keys { position: absolute; inset: 0; }

.mkt-keys span {
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(30px, 4.6vw, 56px);
  aspect-ratio: 1;
  border: 1px solid #fff9;
  border-bottom-width: 4px;
  border-radius: 12px;
  color: #39247b;
  background: linear-gradient(150deg, #fff, #e4dbff);
  box-shadow: 0 7px 14px #3d267728;
  font: 750 clamp(.95rem, 2vw, 1.45rem)/1 var(--font-sans);
}

.mkt-keys span:nth-child(1) { left: 9%; top: 18%; transform: rotate(-15deg); }
.mkt-keys span:nth-child(2) { right: 9%; top: 25%; transform: rotate(15deg); background: linear-gradient(150deg, #fff3bd, #ffd591); color: #5d340b; }
.mkt-keys span:nth-child(3) { right: 16%; bottom: 12%; transform: rotate(-10deg); background: linear-gradient(150deg, #e7fff5, #aeead9); color: #1d5146; }

.mkt-speech {
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 17px;
  padding: 12px 15px;
  box-shadow: var(--shadow-sm);
}

.mkt-speech h2 { color: var(--ink); font-size: 1.05rem; margin: 0 0 4px; text-wrap: initial; }
.mkt-speech p { font-size: .87rem; line-height: 1.5; margin: 0 0 5px; }
.mkt-speech a { color: var(--primary-ink); font-weight: 750; font-size: .86rem; display: inline-block; }
.mkt-speech a .ico { width: 1em; height: 1em; vertical-align: -.15em; }

.mkt-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }

.mkt-controls button {
  border: 1px solid var(--line-2);
  border-radius: 10px;
  color: var(--ink-2);
  background: var(--surface);
  font: inherit;
  font-size: .8rem;
  font-weight: 650;
  min-height: 44px;
  padding: 6px;
  cursor: pointer;
}

.mkt-controls button:hover { border-color: var(--primary); }
.mkt-controls button[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); }

.mkt-demo-section {
  background: var(--surface);
  border-block: 1px solid var(--line);
  padding-block: clamp(32px, 5.6vw, 76px);
}

.mkt-demo-section .demo-grid { grid-template-columns: minmax(0, .65fr) minmax(0, 1fr); }
.mkt-demo-intro img { display: block; object-fit: contain; margin-bottom: 6px; }
.mkt-demo-intro .title { margin-bottom: 8px; }
.mkt-demo-intro .lead { margin: 0 0 9px; }
.mkt-demo-keyboard-note,
.mkt-demo-privacy { margin: 0 0 7px; color: var(--ink-3); font-size: .89rem; }
.mkt-demo-privacy { margin-bottom: 14px; }

.mkt-demo-section .demo {
  border-radius: 22px;
  box-shadow: 0 12px 34px -20px color-mix(in srgb, var(--primary) 54%, transparent);
}

.mkt-demo-section .demo:focus-within { box-shadow: var(--ring), var(--shadow); }

.mkt-demo-section .demo-top { background: var(--primary-soft); border-bottom: 0; }
.mkt-demo-section .demo-body { padding: clamp(15px, 3vw, 25px) clamp(14px, 3vw, 24px); }
.mkt-demo-section .demo-text { color: var(--ink-2); min-height: 2.8em; }
.mkt-demo-section .demo-text i.ok { color: var(--success-ink); background: var(--success-soft); }
.mkt-demo-section .demo-text i.cur { background: var(--primary-soft); }

.mkt-demo-meter {
  display: block;
  appearance: none;
  width: 100%;
  height: 5px;
  border: 0;
  background: var(--line);
  color: var(--primary);
}

.mkt-demo-meter::-webkit-progress-bar { background: var(--line); }
.mkt-demo-meter::-webkit-progress-value { background: var(--primary); }
.mkt-demo-meter::-moz-progress-bar { background: var(--primary); }
.mkt-demo-section .demo-done p { margin: 0; }
.mkt-demo-section .demo-nojs { display: block; }
.mkt-demo-section .demo-ready .demo-nojs,
.mkt-demo-section .demo:not(.demo-ready) :is(.demo-input, .demo-hint, .mkt-demo-meter) { display: none; }

.mkt-overview {
  padding-block: clamp(34px, 5.6vw, 72px);
  background: linear-gradient(var(--bg), var(--bg-2));
}

.mkt-overview .section-head { margin-bottom: 20px; }
.mkt-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.mkt-feature-grid a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 12px;
  padding: clamp(14px, 2vw, 22px);
  border: 1px solid var(--line);
  border-bottom: 3px solid var(--line-2);
  border-radius: 19px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.mkt-feature-grid a:hover { border-color: var(--primary); }
.mkt-feature-grid b { display: block; color: var(--ink); }
.mkt-feature-grid small { display: block; color: var(--ink-2); font-size: .85rem; line-height: 1.5; margin-top: 4px; }

.mkt-feature-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--primary-ink);
  background: var(--primary-soft);
  border-radius: 12px;
}

.mkt-feature-grid a:nth-child(2) .mkt-feature-icon { color: #724310; background: #ffedc1; }
.mkt-feature-grid a:nth-child(3) .mkt-feature-icon { color: #235b4f; background: #d5f3e8; }
.mkt-feature-grid a > .ico { width: 16px; height: 16px; margin-top: 5px; }

.mkt-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--line-2);
  border-radius: 24px;
  background: linear-gradient(110deg, var(--surface), var(--primary-soft));
  padding: clamp(20px, 4vw, 42px);
}

.mkt-story img { width: clamp(66px, 15vw, 160px); height: auto; }
.mkt-story .title { margin-bottom: 10px; text-wrap: initial; }
.mkt-story p:not(.mkt-status) { max-width: 65ch; }
.mkt-status { color: var(--primary-ink); font-size: .84rem; font-weight: 700; margin: 0 0 8px; }

#pricing .pricing-conversion-frame {
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
  background: linear-gradient(var(--primary-soft), var(--bg) 49%);
  box-shadow: 0 14px 40px -25px color-mix(in srgb, var(--primary) 43%, transparent);
}

#pricing .mkt-plan-pro { border-color: color-mix(in srgb, var(--primary) 60%, var(--line)); }
#pricing .mkt-plan-pro .ribbon { background: #3e306f; }
.mkt-trial-note { color: var(--ink-2); font-size: .93rem; margin: 12px auto 0; }

@media (prefers-reduced-motion: no-preference) {
  .mkt-scene:not([hidden]) img { animation: mkt-greet .55s cubic-bezier(.2, .7, .3, 1) both; }
  @keyframes mkt-greet {
    0% { opacity: 0; transform: translateY(8px) scale(.94); }
    65% { opacity: 1; transform: translateY(-5px) scale(1.025); }
    100% { opacity: 1; transform: none; }
  }
}

@media (max-width: 760px) {
  .mkt-hero-grid,
  .mkt-demo-section .demo-grid,
  .mkt-feature-grid { grid-template-columns: minmax(0, 1fr); }

  .mkt-hero-grid { gap: 22px; }
  .mkt-intro h1 { font-size: clamp(2.42rem, 9.4vw, 4rem); }
  .mkt-lead { margin: 12px 0 16px; }
  .mkt-intro .btn { padding-inline: 13px; min-height: 48px; font-size: .95rem; }
  .mkt-portrait { height: clamp(154px, 47vw, 227px); }
  .mkt-demo-intro img { width: 58px; height: 54px; }
}

@media (max-width: 390px) {
  .mkt-demo-section .demo-stats { gap: 13px; }
  .mkt-demo-section .demo-top { padding-inline: 13px; }
  .mkt-story { grid-template-columns: minmax(0, 1fr); }
  .mkt-story img { grid-row: 1; }
}