@charset "UTF-8";
/* Landing-page refinements layered over the generated React bundle. */
body {
  font-size-adjust: from-font;
}

.site-skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  transform: translateY(-180%);
  border-radius: 9999px;
  background: #ffffff;
  color: #0b3028;
  padding: 0.75rem 1rem;
  font-weight: 700;
  box-shadow: 0 12px 30px rgb(7 31 26 / 22%);
  transition: transform 160ms ease;
}

.site-skip-link:focus {
  transform: translateY(0);
  outline: 3px solid #27624f;
  outline-offset: 3px;
}

/* Gold is decorative at icon sizes, but small copy needs an AA foreground. */
#app-showcase .premium-kicker,
#features .premium-kicker,
#pricing .premium-kicker,
#faq .premium-kicker {
  color: #72551f !important;
}

/* Keep the miniature app preview legible even after it is scaled down. */
#app-showcase .pointer-events-none {
  --m-muted: #6b5849 !important;
}

main .premium-card .text-text-muted {
  color: #626860 !important;
}

strong.text-brand-terracotta {
  color: #934b35 !important;
}

footer > div > div:last-child {
  color: #82978f !important;
}

/* The first-visit privacy notice must not cover the hero conversion actions. */
[aria-labelledby="privacy-notice-title"] {
  max-width: 26rem !important;
  padding: 1rem !important;
}

[aria-labelledby="privacy-notice-title"] > .relative {
  padding-right: 2.5rem !important;
}

[aria-labelledby="privacy-notice-title"] > .relative > .mb-4,
[aria-labelledby="privacy-notice-title"] > .relative > .premium-kicker {
  display: none !important;
}

#privacy-notice-title {
  margin-top: 0 !important;
  font-size: 1rem !important;
  line-height: 1.5rem !important;
}

#privacy-notice-title + p {
  margin-top: 0.25rem !important;
  font-size: 0.75rem !important;
  line-height: 1.25rem !important;
}

[aria-labelledby="privacy-notice-title"] > .relative > a {
  margin-top: 0.35rem !important;
  font-size: 0.75rem !important;
}

[aria-labelledby="privacy-notice-title"] > .relative > .mt-5 {
  margin-top: 0.75rem !important;
  padding-top: 0.75rem !important;
}

[aria-labelledby="privacy-notice-title"] > .relative > .mt-5 button {
  padding-block: 0.625rem !important;
}

@media (max-width: 767px) {
  header {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  header .premium-nav {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .premium-hero {
    min-height: auto !important;
    padding-top: 7.25rem !important;
    padding-bottom: 4rem !important;
  }

  .premium-hero > .relative > .grid {
    gap: 2.25rem !important;
  }

  /* Preserve all feature content while avoiding an eight-card vertical wall. */
  #features > div > .grid {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: min(84vw, 21rem);
    gap: 1rem;
    margin-inline: -1rem;
    padding-inline: 1rem;
    padding-bottom: 1rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
  }

  #features > div > .grid > * {
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-skip-link {
    transition: none;
  }
}

/* Dynamic showcase panels must not become scroll-anchor candidates. */
#app-showcase {
  overflow-anchor: none;
}

/* ============================================================================
   r3 — แสงเงา / ตัวอักษร / การเคลื่อนไหว (2026-09-05)

   ชั้นนี้วางทับบันเดิล React ที่ generate มาแล้ว ในรีโปไม่มีซอร์สของบันเดิล
   ทุกอย่างที่นี่จึงต้องทำได้ด้วย CSS ล้วน และต้องเสื่อมสภาพอย่างสุภาพเสมอ:
   เบราว์เซอร์ที่ไม่รู้จักคุณสมบัติไหน ต้องได้หน้าเดิมที่ใช้งานได้ ไม่ใช่หน้าว่าง
   ============================================================================ */

:root {
  /* เส้นโค้งความเร็วชุดเดียวของทั้งเว็บ — ออกตัวเร็ว จบช้า (ให้ความรู้สึก "ลื่นและนิ่ง") */
  --lux-ease: cubic-bezier(.22, 1, .36, 1);
  --lux-ease-inout: cubic-bezier(.65, 0, .35, 1);
}

/* ---------------------------------------------------------------- ตัวอักษร */

body {
  /* เปิด kerning/ligature ให้ชัดเจน แทนที่จะพึ่งค่าเริ่มต้นของแต่ละเบราว์เซอร์ */
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
}

/* ⚠️ ระยะบรรทัดของหัวข้อ: วัดจริงบนหน้านี้ ไม่ใช่รสนิยม
   ที่ 73.6px (hero h1) บันเดิลให้ระยะบรรทัด 73.6px (1.0 เท่า) แต่หมึกจริงของไทยคือ
   "เงินของคุณ" สระอุลงล่าง 26px และ "ควรเข้าใจง่าย" ไม้เอกขึ้นบน 67px
   → 73.6 − 26 − 67 = เหลื่อมกัน 19.4px และคู่ถัดไปเหลื่อม 7.4px
   ไทยวางวรรณยุกต์/สระซ้อนแนวตั้ง จึงต้องการ leading มากกว่าละตินเสมอ
   1.28 ทำให้คู่ที่แย่ที่สุดเหลือช่องว่าง +1.2px (คำนวณจากสตริงจริงบนหน้า)
   ⛔ ห้ามลดกลับไปต่ำกว่า ~1.24 เพราะจะกลับไปชนที่เดิม */
.premium-display {
  line-height: 1.28;
  /* -0.055em เดิมตั้งด้วยสายตาแบบละติน ไทยที่แน่นขนาดนั้นทำให้ฐานอักษรเบียดวรรณยุกต์ตัวข้าง */
  letter-spacing: -.024em;
  text-wrap: balance;
}

main p,
.premium-hero p,
footer p {
  text-wrap: pretty;
}

/* ตัวเลขเงินต้องเรียงหลักตรงกันทุกแถว ไม่ใช่ขยับตามความกว้างของเลขแต่ละตัว */
.premium-hero .premium-dark-panel,
#app-showcase,
#pricing {
  font-variant-numeric: tabular-nums;
}

.premium-kicker {
  /* ตัวพิมพ์เล็กที่ถูกยืดระยะ ต้องคมขึ้นนิดหนึ่งถึงจะอ่านออกเท่าเดิม */
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}

/* การ์ดราคาใช้ reveal ของ Framer Motion อยู่แล้ว การเฟดซ้ำด้วย view timeline ทำให้
   การ์ด Pro ที่สูงกว่าจอมือถือค้างแบบโปร่งใสและดูเป็นสีเทาระหว่างเลื่อน */
#pricing .grid > div {
  opacity: 1 !important;
}

/* แยกการยกตอน hover ออกจาก transform ที่ Framer Motion ใช้ตอน reveal */
#how-it-works .grid > div {
  translate: 0 0;
  transition:
    translate 420ms var(--lux-ease),
    box-shadow 420ms var(--lux-ease),
    border-color 420ms var(--lux-ease),
    background-color 420ms var(--lux-ease);
}

@media (hover: hover) and (pointer: fine) {
  #how-it-works .grid > div:hover {
    translate: 0 -10px;
    border-color: rgba(215, 188, 131, .48);
    background-color: rgba(255, 255, 255, .09);
    box-shadow:
      0 3px 8px rgba(2, 16, 13, .20),
      0 24px 48px -18px rgba(2, 16, 13, .55),
      inset 0 1px 0 rgba(255, 255, 255, .09);
  }
}

/* การ์ดในส่วนไฮไลต์ ฟีเจอร์ และแพ็กเกจใช้ translate แยกจาก transform
   ของบันเดิล เพื่อให้ยกขึ้นได้แม้กำลังเล่น reveal หรือมี scale ของ Pro อยู่ */
#highlights .premium-card,
#features .premium-card,
#pricing .grid > div {
  translate: 0 0;
  transition:
    translate 420ms var(--lux-ease),
    box-shadow 420ms var(--lux-ease),
    border-color 420ms var(--lux-ease),
    background-color 420ms var(--lux-ease);
}

@media (hover: hover) and (pointer: fine) {
  #highlights .premium-card:hover,
  #features .premium-card:hover,
  #pricing .grid > div:hover {
    translate: 0 -10px;
    border-color: rgba(185, 149, 85, .48);
    box-shadow:
      0 3px 8px rgba(8, 38, 31, .08),
      0 24px 50px -18px rgba(8, 38, 31, .28),
      0 48px 90px -36px rgba(8, 38, 31, .20),
      inset 0 1px 0 rgba(255, 255, 255, .82);
  }
}

/* ------------------------------------------------------------------ แสงเงา */

/* เงาชั้นเดียวอ่านเป็น "สติกเกอร์แปะ" — ของจริงมีทั้งเงาสัมผัส เงาใกล้ และเงาไกล
   และย้อมด้วยเขียวเข้มของแบรนด์ ไม่ใช่เทากลาง เพื่อให้อยู่ในตระกูลสีเดียวกับพื้นครีม */
.premium-card {
  box-shadow:
    0 1px 2px rgba(8, 38, 31, .05),
    0 10px 24px -12px rgba(8, 38, 31, .10),
    0 30px 64px -26px rgba(8, 38, 31, .16),
    inset 0 1px 0 rgba(255, 255, 255, .72);
  transition-property: transform, box-shadow, border-color, background-color;
  transition-duration: 520ms;
  transition-timing-function: var(--lux-ease);
}

@media (hover: hover) and (pointer: fine) {
  /* การ์ดมี hover:-translate-y-* ของตัวเองอยู่แล้ว ที่นี่เติมแค่ "เงายกตาม" ไม่แตะ transform */
  .premium-card:hover {
    box-shadow:
      0 2px 4px rgba(8, 38, 31, .06),
      0 18px 36px -16px rgba(8, 38, 31, .14),
      0 48px 90px -36px rgba(8, 38, 31, .22),
      inset 0 1px 0 rgba(255, 255, 255, .82);
    border-color: rgba(185, 149, 85, .42);
  }
}

.premium-nav {
  box-shadow:
    0 1px 1px rgba(3, 24, 19, .04),
    0 8px 22px -10px rgba(3, 24, 19, .16),
    0 26px 60px -28px rgba(3, 24, 19, .24),
    inset 0 1px 0 rgba(255, 255, 255, .85);
  /* saturate ต่อท้าย backdrop-filter ที่มีอยู่แล้ว ไม่ได้สร้างเลเยอร์ใหม่เพิ่ม */
  backdrop-filter: blur(22px) saturate(155%);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
  transition: box-shadow 480ms var(--lux-ease), background-color 480ms var(--lux-ease);
}

/* แผงเข้มที่เป็น "การ์ด" ต้องลอย — ตัวที่เป็นพื้นทั้ง section ห้ามมีเงา ไม่งั้นเห็นเป็นรอยต่อ */
.premium-dark-panel:not(section) {
  box-shadow:
    0 2px 6px rgba(3, 20, 16, .22),
    0 26px 56px -22px rgba(3, 20, 16, .42),
    0 60px 120px -55px rgba(3, 20, 16, .55),
    inset 0 1px 0 rgba(255, 255, 255, .10);
}

/* ภาพตัวอย่างแอปในหน้าแรก เป็นจุดที่สายตาไปหยุด จึงให้เงาลึกที่สุดในหน้า */
.premium-hero [class*="rounded-[34px]"] {
  box-shadow:
    0 3px 8px rgba(2, 16, 13, .20),
    0 28px 60px -22px rgba(2, 16, 13, .45),
    0 70px 130px -55px rgba(2, 16, 13, .62),
    inset 0 1px 0 rgba(255, 255, 255, .55);
}

#faq .space-y-4 > div {
  transition-property: transform, box-shadow, border-color, background-color;
  transition-duration: 420ms;
  transition-timing-function: var(--lux-ease);
}

@media (hover: hover) and (pointer: fine) {
  #faq .space-y-4 > div:hover {
    border-color: rgba(185, 149, 85, .45);
    box-shadow:
      0 2px 4px rgba(8, 38, 31, .05),
      0 16px 34px -18px rgba(8, 38, 31, .18);
  }
}

/* ------------------------------------------------------------ การเคลื่อนไหว */

@keyframes lux-rise {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes lux-sheen {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

@keyframes lux-orb-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-3%, 4%, 0) scale(1.09); }
}

@keyframes lux-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ปุ่มและลิงก์วงกลม: จังหวะเดียวกันทั้งเว็บ */
header a,
header button,
main a[class*="rounded-full"],
main button[class*="rounded-full"] {
  transition-property: transform, box-shadow, background-color, border-color, color, opacity;
  transition-duration: 420ms;
  transition-timing-function: var(--lux-ease);
}

/* แสงกวาดผ่านปุ่มหลักตอนชี้ — ทำด้วย transform อย่างเดียว จึงอยู่บน compositor */
a[href*="play.google.com"] {
  position: relative;
  overflow: hidden;
}

a[href*="play.google.com"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, .42) 50%, transparent 64%);
  transform: translate3d(-130%, 0, 0);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  a[href*="play.google.com"]::after {
    transition: transform 950ms var(--lux-ease);
  }

  a[href*="play.google.com"]:hover::after {
    transform: translate3d(130%, 0, 0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* ตัวหนังสือทองไล่แสงช้า ๆ — 11 วินาทีต่อรอบ ช้าพอที่จะไม่ดึงสายตาไปจากเนื้อหา */
  .gold-text {
    background-size: 220% 100%;
    animation: lux-sheen 11s var(--lux-ease-inout) infinite;
  }

  /* หน้าแรกไล่ขึ้นทีละชิ้นตอนโหลด */
  .premium-hero [class*="xl:col-span-5"] > *,
  .premium-hero [class*="lg:col-start-7"] {
    animation: lux-rise 900ms var(--lux-ease) both;
  }

  .premium-hero [class*="xl:col-span-5"] > *:nth-child(1) { animation-delay: 60ms; }
  .premium-hero [class*="xl:col-span-5"] > *:nth-child(2) { animation-delay: 140ms; }
  .premium-hero [class*="xl:col-span-5"] > *:nth-child(3) { animation-delay: 220ms; }
  .premium-hero [class*="xl:col-span-5"] > *:nth-child(4) { animation-delay: 300ms; }
  .premium-hero [class*="xl:col-span-5"] > *:nth-child(5) { animation-delay: 380ms; }

  .premium-hero [class*="lg:col-start-7"] {
    animation-duration: 1100ms;
    animation-delay: 200ms;
  }
}

/* วงกลมเบลอในพื้นหลังลอยช้า ๆ — เฉพาะจอใหญ่ที่มีเมาส์
   มือถือไม่เอาด้วย: `.premium-orb` เบลอ 110px อยู่แล้ว การขยับมันบนเครื่องเล็กไม่คุ้มเฟรม */
@media (min-width: 1024px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .premium-orb {
    animation: lux-orb-drift 26s var(--lux-ease-inout) infinite alternate;
    will-change: transform;
  }

  #features .premium-orb { animation-duration: 32s; animation-delay: -8s; }
  #pricing .premium-orb { animation-duration: 29s; animation-delay: -14s; }
}

/* เนื้อหาไล่ขึ้นตอนเลื่อนถึง — ผูกกับตำแหน่งการเลื่อนตรง ๆ ไม่ใช่ตัวจับเวลา
   จึงไม่มี JavaScript มาเกี่ยวและไม่กินเธรดหลัก
   เบราว์เซอร์ที่ไม่รองรับจะข้ามทั้งบล็อกและได้หน้าเดิมที่มองเห็นทุกอย่าง */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    #highlights > div > div:first-child,
    #app-showcase > div > div:first-child,
    #how-it-works > div > div:first-child,
    #features > div > div:first-child,
    #pricing > div > div:first-child,
    #faq > div > div:first-child,
    #highlights .premium-card,
    #features .premium-card,
    #how-it-works .grid > div,
    #faq .space-y-4 > div,
    #app-showcase > div > div:nth-child(2),
    #app-showcase > div > div:nth-child(3) > div {
      animation-name: lux-rise;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 6% cover 26%;
    }

    /* หน่วงทีละใบด้วย "ระยะการเลื่อน" ไม่ใช่ animation-delay
       (ไทม์ไลน์แบบนี้ไม่มีเวลาให้หน่วง มีแต่ตำแหน่ง) */
    #highlights .premium-card:nth-child(2),
    #features .premium-card:nth-child(2),
    #features .premium-card:nth-child(6),
    #how-it-works .grid > div:nth-child(2),
    #faq .space-y-4 > div:nth-child(2) {
      animation-range: entry 10% cover 30%;
    }

    #highlights .premium-card:nth-child(3),
    #features .premium-card:nth-child(3),
    #features .premium-card:nth-child(7),
    #how-it-works .grid > div:nth-child(3),
    #faq .space-y-4 > div:nth-child(3) {
      animation-range: entry 14% cover 34%;
    }

    #features .premium-card:nth-child(4),
    #features .premium-card:nth-child(8),
    #faq .space-y-4 > div:nth-child(4) {
      animation-range: entry 18% cover 38%;
    }

    #faq .space-y-4 > div:nth-child(5) {
      animation-range: entry 22% cover 42%;
    }
  }
}

/* แถบทองบางบอกว่าอ่านมาถึงไหนแล้ว — ผูกกับการเลื่อนของหน้า ไม่ได้ขยับเอง */
@supports (animation-timeline: scroll()) {
  body::after {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    height: 2px;
    z-index: 60;
    transform-origin: 0 50%;
    background: linear-gradient(90deg, rgba(185, 149, 85, 0), #b99555 28%, #e6cf98 62%, #b99555);
    pointer-events: none;
    animation-name: lux-progress;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll(root block);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* กติกา reduced-motion ของบันเดิลตั้ง animation-duration ไว้ .01ms ซึ่ง "ไม่มีผล"
     กับอนิเมชันที่ผูกกับการเลื่อน (มันไม่ได้เดินด้วยเวลา) จึงต้องปิดตรงนี้เองอีกชั้น */
  .premium-orb,
  .gold-text,
  .premium-hero [class*="xl:col-span-5"] > *,
  .premium-hero [class*="lg:col-start-7"],
  #highlights > div > div:first-child,
  #app-showcase > div > div:first-child,
  #how-it-works > div > div:first-child,
  #features > div > div:first-child,
  #pricing > div > div:first-child,
  #faq > div > div:first-child,
  #highlights .premium-card,
  #features .premium-card,
  #pricing .grid > div,
  #how-it-works .grid > div,
  #faq .space-y-4 > div,
  #app-showcase > div > div:nth-child(2),
  #app-showcase > div > div:nth-child(3) > div,
  body::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  #how-it-works .grid > div {
    translate: 0 0 !important;
  }

  #highlights .premium-card,
  #features .premium-card,
  #pricing .grid > div {
    translate: 0 0 !important;
  }
}

@media (max-width: 767px) {
  /* ⛔ ตาข่ายรอง: บนมือถือ `#features > div > .grid` กลายเป็นแถวเลื่อนแนวนอน (กฎ r2 ข้างบน)
     การ์ดข้างในจึงมี scroll container ที่ไม่เลื่อนแนวตั้ง — ถ้าไทม์ไลน์ `view()` ไม่ทำงาน
     ที่นั่น การ์ดจะค้างที่ opacity 0 แล้วหน้าฟีเจอร์ว่างเปล่าทั้งหน้า
     ปิดอนิเมชันตรงนั้นทิ้งไปเลย ปลอดภัยกว่าเสี่ยง */
  #features > div > .grid > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}