@font-face {
  font-family: "IBM Plex Sans Thai";
  src: url("/assets/fonts/ibm-plex-sans-thai-300-69c4d81ca441.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Thai";
  src: url("/assets/fonts/ibm-plex-sans-thai-400-3d3a54fa1343.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Thai";
  src: url("/assets/fonts/ibm-plex-sans-thai-500-7d9617ffca22.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Thai";
  src: url("/assets/fonts/ibm-plex-sans-thai-600-67be3c4a37b8.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --canvas: #f5f5f7;
  --ink: #333333;
  --muted: #666666;
  --soft: #999999;
  --line: #e2e2de;
  --white: #ffffff;
  --page: min(1240px, calc(100vw - 48px));
  --content: min(1028px, calc(100vw - 48px));
  --shadow-image: 10px 10px 30px rgba(0, 0, 0, 0.1);
}

* { box-sizing: border-box; }

html { background: var(--canvas); color: var(--ink); scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--canvas);
  font-family: "IBM Plex Sans Thai", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
}

img { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
a { color: inherit; }

@keyframes hero-settle {
  from { opacity: 0; transform: scale(1.025); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes lift-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes header-in {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.grid-width-12 { width: var(--page); margin-inline: auto; }
.grid-width-10 { width: var(--content); margin-inline: auto; }
.grid-offset-1 { width: var(--content); margin-inline: auto; }

.site-header {
  --nav-ease: cubic-bezier(.22, 1, .36, 1);
  position: fixed;
  z-index: 100;
  top: 20px;
  left: 50%;
  width: var(--page);
  height: 60px;
  padding: 0 24px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  overflow: hidden;
  border: 1px solid rgba(51,51,51,.08);
  border-radius: 999px;
  background: rgba(241,241,239,.92);
  box-shadow: 0 8px 28px rgba(24,24,20,.08);
  color: #333;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: none;
  animation: header-in .7s cubic-bezier(.22, 1, .36, 1) both;
  transition: width 500ms var(--nav-ease), background-color 300ms ease, box-shadow 300ms ease;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.site-header.is-compact { width: min(744px, calc(100vw - 48px)); }
.site-header.nav-initializing,
.site-header.nav-initializing .brand-char,
.site-header.nav-initializing .brand-slash { transition: none !important; }
.brand {
  position: relative;
  display: inline-flex;
  flex: 0 1 auto;
  min-width: 0;
  height: 24px;
  align-items: center;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
}
.brand > img, .brand-static-short { display: none; }
@media (max-width: 1199px) {
  .brand .brand-static-full { display: none; }
  .brand .brand-static-short { display: inline; }
}
.brand-name { display: inline-flex; align-items: baseline; white-space: nowrap; }
.brand-retained { flex: 0 0 auto; }
.brand-char {
  display: inline-block;
  max-width: var(--char-width, 1em);
  overflow: hidden;
  opacity: 1;
  transform: translateX(0);
  transition:
    max-width 170ms var(--nav-ease) var(--expand-delay, 0ms),
    opacity 110ms ease var(--expand-delay, 0ms),
    transform 170ms var(--nav-ease) var(--expand-delay, 0ms);
}
.brand-slash {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-.12em) scale(.75);
  transition:
    max-width 150ms var(--nav-ease) 0ms,
    opacity 110ms ease 0ms,
    transform 150ms var(--nav-ease) 0ms;
}
.site-header.is-compact .brand-char {
  max-width: 0;
  opacity: 0;
  transform: translateX(-.28em);
  transition-delay: var(--collapse-delay, 0ms);
}
.site-header.is-compact .brand-slash {
  max-width: .65em;
  opacity: 1;
  transform: translateY(-.12em) scale(1);
  transition-delay: 235ms;
}
.nav-placeholder { margin-left: auto; display: flex; gap: 40px; align-items: center; }
.nav-placeholder span, .nav-placeholder a, .language-placeholder span { color: #555; text-decoration: none; }
.nav-placeholder a { position: relative; padding: 8px 0; }
.nav-placeholder a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease-out;
}
.home-page .nav-placeholder .is-active { color: #222; }
.home-page .nav-placeholder .is-active::after,
.nav-placeholder a:hover::after,
.nav-placeholder a:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .nav-placeholder a::after { transition: none; }
}
.language-placeholder { display: none; }
.brand:focus-visible,
.nav-placeholder a:focus-visible { outline: 2px solid #333; outline-offset: 5px; border-radius: 3px; }

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  color: white;
}
.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: hero-settle 1.2s cubic-bezier(.22, 1, .36, 1) both;
}
.hero-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 35%, rgba(17,17,17,.6)); }
.hero-copy {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: clamp(76px, 12vh, 100px);
  transform: translateX(-50%);
}
.hero-copy > * { animation: lift-in .75s cubic-bezier(.22, 1, .36, 1) both; }
.hero-copy .eyebrow { animation-delay: .16s; }
.hero-copy h1 { animation-delay: .24s; }
.eyebrow { font-size: 16px; line-height: 1; text-transform: uppercase; }
.hero h1 { margin-top: 28px; font-size: clamp(56px, 5.55vw, 80px); font-weight: 400; line-height: 1.025; letter-spacing: 0; }

main { min-height: 0; }

.meta-card {
  position: relative;
  z-index: 2;
  height: 194px;
  margin-top: -60px;
  padding: 20px;
  display: flex;
  gap: 23px;
  overflow: hidden;
  border-radius: 20px;
  background: white;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  animation: lift-in .75s .32s cubic-bezier(.22, 1, .36, 1) both;
}

.motion-ready .reveal-on-scroll {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .7s cubic-bezier(.22, 1, .36, 1),
    transform .7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.motion-ready .reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.meta-item { flex: 1 1 0; min-width: 0; padding-block: 10px; }
.meta-fixed { flex: 0 0 110px; }
.meta-label { margin-bottom: 18px; color: #999; text-transform: uppercase; }
.meta-item > p:last-child { color: #666; }

.overview { margin-top: 60px; }
.split-section { display: grid; grid-template-columns: 185px 1fr; column-gap: 27px; align-items: start; }
.split-section h2, .solution-intro h2 { font-size: 22px; font-weight: 500; line-height: 15px; letter-spacing: -.015em; }
.split-content { display: flex; flex-direction: column; gap: 40px; }
.body-large { font-size: 18px; line-height: 26px; }
.overview { height: 294px; }
.overview .body-large { height: 91px; }
.objectives { height: 163px; display: flex; flex-direction: column; gap: 27px; }
.objectives h3 { height: 13px; line-height: 13px; }
.objectives h3, .case-copy h3, .sequence-copy h3, .score-copy h2, .outcome-copy h3 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.objectives ul { width: 100%; padding-left: 24px; font-size: 16px; line-height: 28px; }

.challenge-card { margin-top: 100px; padding: 40px; border-radius: 20px; background: white; }
.challenge-summary { height: 195px; padding: 30px; border-radius: 20px; background: #f1f1ef; }
.challenge-summary > h2 { text-align: center; font-size: 22px; font-weight: 500; line-height: 15px; letter-spacing: -.015em; }
.challenge-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.challenge-grid h3 { font-size: 15px; font-weight: 600; line-height: 10px; letter-spacing: -.005em; }
.challenge-grid p { height: 50px; margin-top: 20px; font-size: 14px; line-height: 20px; }
.old-flow { min-height: 153px; margin-top: 40px; padding-left: 75px; display: flex; align-items: flex-start; }
.old-flow-illustration { width: 75px; height: 153px; flex: 0 0 75px; overflow: hidden; }
.old-flow-illustration img { width: 272px; height: 153px; max-width: none; object-fit: cover; object-position: center; transform: translateX(-98px); }
.old-flow-content { flex: 1; margin-left: 30px; padding-top: 0; }
.old-flow-content h3 { font-size: 18px; line-height: 26px; font-weight: 600; }
.old-flow-content > p { margin-top: 8px; font-size: 14px; line-height: 20px; }
.flow-steps { margin-top: 40px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 12px; }
.flow-steps span { min-height: 48px; display: grid; place-items: center; padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 12px; line-height: 18px; text-align: center; }
.flow-steps b { font-size: 20px; font-weight: 400; color: #666; }

.solution { margin-top: 100px; }
.solution-intro { width: 744px; max-width: 100%; height: 150px; }
.solution-intro .body-large { margin-top: 24px; }
.solution-intro .body-large + .body-large { margin-top: 20px; }
.case-card-grid { margin-top: 60px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.case-card { height: 757.465px; padding: 40px; display: flex; flex-direction: column; gap: 40px; border-radius: 20px; background: white; overflow: hidden; }
.case-copy { display: flex; flex-direction: column; gap: 24px; }
.case-card .case-copy { height: 104px; flex: 0 0 104px; }
.case-copy h3, .sequence-copy h3, .score-copy h2 { line-height: 13px; }
.case-copy p, .sequence-copy p, .score-copy > p { font-size: 16px; line-height: 28px; }
.case-card > img { width: 100%; flex: none; min-height: 0; object-fit: contain; object-position: center top; }
.case-card:first-child > img { height: 480.119px; }
.case-card:last-child > img { height: 533.465px; }

.phone-sequence { margin-top: 40px; padding-inline: 40px; }
.sequence-copy { width: 600px; max-width: 100%; display: flex; flex-direction: column; gap: 24px; }
.phone-sequence .sequence-copy { height: 104px; }
.creating-screens { height: 476px; margin-top: 40px; display: flex; align-items: flex-start; justify-content: center; gap: 30px; }
.creating-screens img { width: 140px; height: auto; border-radius: 10px; filter: drop-shadow(10px 10px 30px rgba(0,0,0,.1)); }
.creating-screens img:nth-child(1) { height: 301px; object-fit: cover; }
.creating-screens img:nth-child(2), .creating-screens img:nth-child(4) { height: 303px; object-fit: cover; object-position: top; }
.creating-screens img:nth-child(3) { height: 381px; object-fit: cover; object-position: top; }
.creating-screens img:nth-child(5) { height: 476px; object-fit: cover; object-position: top; }
.choosing { margin-top: 40px; }
.choosing-screens { height: 584px; margin-top: 40px; display: flex; align-items: flex-start; justify-content: center; gap: 30px; }
.choosing-screens figure { width: 140px; flex: 0 0 140px; }
.choosing-screens figcaption { margin-bottom: 10px; color: #666; font-size: 12px; font-weight: 500; line-height: 1; }
.phone-crop { position: relative; width: 140px; height: 303px; overflow: hidden; border: 1px solid #eee; border-radius: 10px; box-shadow: var(--shadow-image); }
.phone-crop > img:first-child { width: 140px; height: auto; max-width: none; object-fit: cover; object-position: top; }
.crop-discover { height: 566px; box-shadow: none; border: 0; }
.crop-discover > img:first-child { width: 140px; height: 566px; object-fit: cover; }
.crop-explore > img:first-child { height: 321px; object-fit: cover; object-position: top; }
.crop-standard > img:first-child { min-height: 303px; }
.chat-crop > img:first-child { height: 402px; object-fit: cover; object-position: top; }
.chat-bar { position: absolute; left: 0; bottom: 0; width: 140px; height: 34px; object-fit: cover; border-radius: 0 0 10px 10px; }

.score-band { position: relative; height: 529px; margin-top: 40px; overflow: hidden; color: white; }
.score-background, .score-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.score-background { object-fit: cover; }
.score-shade { background: rgba(34,34,34,.65); }
.score-content { position: relative; z-index: 1; width: 846px; max-width: calc(100vw - 48px); height: 448px; margin: 42px auto 0; display: flex; align-items: center; gap: 48px; }
.score-phone-stack { position: relative; width: 198px; height: 440px; flex: 0 0 198px; }
.score-phone { position: absolute; top: 4px; left: 25px; width: 148px; height: 440px; overflow: hidden; border-radius: 10px; box-shadow: var(--shadow-image); }
.score-phone img { width: 148px; height: 459px; max-width: none; object-fit: cover; object-position: top; }
.live-pill { position: absolute; top: 70px; left: 0; width: 198px; height: 34px; overflow: hidden; border-radius: 100px; box-shadow: var(--shadow-image); }
.live-pill img { position: absolute; width: 340px; height: 1055px; max-width: none; left: -71px; top: -209px; }
.score-copy { width: 600px; display: flex; flex-direction: column; gap: 24px; }
.score-copy > p { max-width: 600px; }
.score-details { display: flex; gap: 56px; align-items: flex-start; }
.score-details figure { width: 200px; }
.score-details figcaption { margin-bottom: 18px; font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; }
.score-details figure > img, .scorecard-crop { width: 200px; border-radius: 10px; box-shadow: var(--shadow-image); }
.score-details figure > img { height: 278px; object-fit: cover; object-position: top; }
.scorecard-crop { height: 203px; overflow: hidden; }
.scorecard-crop img { width: 200px; height: 615px; max-width: none; object-fit: cover; object-position: top; transform: translateY(-145px); }

.outcome { margin-top: 100px; height: 400px; display: grid; grid-template-columns: 269px 1fr; gap: 49px; align-items: start; }
.outcome-states { display: flex; flex-direction: column; gap: 32px; padding-top: 20px; }
.outcome-states div { display: flex; flex-direction: column; gap: 12px; }
.outcome-states span { color: #999; font-size: 15px; font-weight: 600; line-height: 10px; letter-spacing: -.005em; }
.outcome-states strong { font-size: 18px; font-weight: 400; line-height: 13px; }
.outcome-card { height: 400px; padding: 40px 30px; display: grid; grid-template-columns: 185px 1fr; gap: 27px; border-radius: 20px; background: white; }
.outcome-card > h2 { font-size: 22px; font-weight: 500; line-height: 15px; letter-spacing: -.015em; }
.outcome-copy { display: flex; flex-direction: column; }
.outcome-copy > h3 { line-height: 13px; }
.outcome-copy > p { margin-top: 0; font-size: 16px; line-height: 28px; }
.outcome-copy > p:first-of-type { margin-top: 20px; }
.outcome-copy > p:nth-of-type(2) { margin-top: 3px; }
.project-note { margin-top: 40px; padding-left: 20px; border-left: 4px solid var(--line); }
.project-note h4 { font-size: 15px; font-weight: 600; line-height: 10px; }
.project-note p { height: 74px; margin-top: 20px; font-size: 14px; line-height: 20px; }

@media (max-width: 1100px) {
  :root { --page: min(1240px, calc(100vw - 64px)); --content: min(1028px, calc(100vw - 96px)); }
  .challenge-grid { gap: 24px; }
  .old-flow { padding-left: 0; }
  .phone-sequence { padding-inline: 0; }
  .creating-screens, .choosing-screens { justify-content: flex-start; overflow-x: auto; padding: 0 24px 32px 0; scrollbar-width: thin; }
  .case-card { min-height: 680px; }
}

@media (max-width: 820px) {
  :root { --page: calc(100vw - 40px); --content: calc(100vw - 40px); }
  .site-header,
  .site-header.is-compact {
    top: 16px;
    width: calc(100vw - 32px);
    height: 56px;
    padding-inline: 16px;
    gap: 14px;
  }
  .site-header .brand-char { max-width: 0; opacity: 0; transform: translateX(-.28em); transition: none; }
  .site-header .brand-slash { max-width: .65em; opacity: 1; transform: translateY(-.12em) scale(1); transition: none; }
  .brand { font-size: 13px; }
  .nav-placeholder { gap: clamp(13px, 3.5vw, 24px); font-size: 11px; }
  .nav-placeholder a { padding-block: 9px; }
  .hero { min-height: 560px; }
  .hero-copy { bottom: clamp(72px, 10vh, 84px); }
  .hero h1 { font-size: 56px; line-height: 1.05; }
  .meta-card { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 24px; }
  .meta-fixed { flex: initial; }
  .overview { height: auto; }
  .overview .body-large, .objectives, .objectives h3, .challenge-summary, .challenge-grid p, .solution-intro, .phone-sequence .sequence-copy { height: auto; }
  .objectives h3, .challenge-grid h3, .case-copy h3, .sequence-copy h3, .score-copy h2, .outcome-copy h3 { line-height: 1.4; }
  .split-section { grid-template-columns: 1fr; gap: 28px; }
  .challenge-card { padding: 24px; }
  .challenge-summary { padding: 24px; }
  .challenge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .old-flow { align-items: center; }
  .flow-steps { grid-template-columns: 1fr; }
  .flow-steps b { transform: rotate(90deg); justify-self: center; }
  .case-card-grid { grid-template-columns: 1fr; }
  .case-card { height: auto; min-height: unset; }
  .case-card .case-copy { height: auto; flex-basis: auto; }
  .case-card > img { height: auto !important; max-height: 600px; }
  .score-band { height: auto; min-height: 820px; }
  .score-content { height: auto; padding: 48px 0; flex-direction: column; align-items: center; }
  .score-copy { width: 100%; }
  .score-details { justify-content: center; }
  .outcome { height: auto; grid-template-columns: 1fr; }
  .outcome-states { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .outcome-card { height: auto; grid-template-columns: 1fr; }
  .outcome-copy > p, .project-note p { height: auto; }
}

@media (max-width: 560px) {
  :root { --page: calc(100vw - 32px); --content: calc(100vw - 32px); }
  body { font-size: 15px; }
  .hero { min-height: 560px; }
  .hero-image { object-position: 58% center; }
  .hero-copy { bottom: 72px; }
  .eyebrow { font-size: 12px; }
  .hero h1 { margin-top: 18px; font-size: 44px; }
  .meta-card { margin-top: -44px; grid-template-columns: 1fr 1fr; border-radius: 16px; }
  .meta-item { padding: 0; }
  .meta-label { margin-bottom: 10px; }
  .overview, .challenge-card, .solution, .outcome { margin-top: 72px; }
  .body-large { font-size: 16px; line-height: 26px; }
  .challenge-card { width: calc(100vw - 24px); padding: 12px; border-radius: 16px; }
  .challenge-summary { padding: 20px; }
  .challenge-grid { grid-template-columns: 1fr; }
  .old-flow { padding: 20px 8px; align-items: flex-start; }
  .old-flow-illustration { display: none; }
  .old-flow-content { margin-left: 0; }
  .case-card-grid { margin-top: 40px; }
  .case-card { padding: 24px; border-radius: 16px; }
  .phone-sequence { margin-top: 56px; }
  .creating-screens, .choosing-screens { margin-top: 28px; }
  .score-band { min-height: 900px; }
  .score-content { max-width: calc(100vw - 32px); }
  .score-details { width: 100%; gap: 20px; justify-content: flex-start; overflow-x: auto; padding-bottom: 24px; }
  .score-details figure { flex: 0 0 200px; }
  .outcome-states { grid-template-columns: 1fr; }
  .outcome-card { padding: 28px 24px; border-radius: 16px; }
  main { padding-bottom: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .motion-ready .reveal-on-scroll { opacity: 1; transform: none; }
}