/* =====================================================================
   Landing Page — โทน sale page

   ใช้กับหน้าที่ต้องปิดการขายทั้งหมด:
     - /free, /design/car, /design/motorcycle, ...  → view-landing.php
     - /plate/{จังหวัด}                             → view-province.php

   ทั้งสอง view ใช้คลาสชุดเดียวกันหมด ต่างกันแค่เนื้อหาที่เอามาใส่
   เพราะมันคือหน้าประเภทเดียวกัน: คนมาจากการค้นหา เห็นของ แล้วกดสั่ง
   ถ้าแยกไฟล์ CSS กันคนละชุด สองหน้านี้จะค่อย ๆ เพี้ยนออกจากกันเอง
   ตอนแก้ทีละครั้ง จนสุดท้ายดูเหมือนคนละเว็บ

   ---------------------------------------------------------------------
   แนวคิดของหน้านี้ ต่างจากหน้าอื่นของเว็บตรงไหน

   หน้าอื่นเป็นหน้า "ให้อ่าน" หน้านี้เป็นหน้า "ให้กด" ของเดิมเรียงเป็น
   หัวข้อ → ย่อหน้ายาว → ปุ่มเล็ก ๆ กลางหน้า ซึ่งอ่านรู้เรื่องแต่ไม่ปิดการขาย
   คนที่เข้ามาจาก Google คำว่า "ออกแบบป้ายทะเบียนฟรี" ต้องเห็นของจริง
   กับปุ่มเริ่มออกแบบภายในหน้าจอแรก ไม่ใช่ต้องเลื่อนลงไปหา

   ที่เปลี่ยน:
     - ยกรูปผลงานจริงขึ้นมาอยู่ใน hero คู่กับ H1 (ของเดิมรูปอยู่ครึ่งหน้าล่าง)
     - ปุ่มหลักใหญ่ สีอุ่นตัดกับพื้นหลังฟ้าเทาของเว็บ และมีซ้ำ 3 จุดตามความยาวหน้า
     - ราคาเริ่มต้นเป็นป้ายแยก ไม่ใช่ตัวเลขฝังอยู่กลางย่อหน้า
     - แต่ละส่วนเป็นกล่องมุมมนวางซ้อนบนพื้นไล่เฉดของเว็บ แทนการ์ดสี่เหลี่ยมแบน

   ---------------------------------------------------------------------
   เรื่อง SEO ที่ห้ามพลาด

   ข้อความทุกคำของเดิม (answer / intro / steps / faq) ยังอยู่ครบและยังเป็น
   ข้อความจริงใน DOM ไม่ได้ย้ายไปอยู่ใน ::before หรือซ่อนด้วย JS
   หน้านี้กินทราฟฟิก Featured Snippet อยู่ ถ้าเอาข้อความออกคือเสียของ

   ---------------------------------------------------------------------
   หมายเหตุ: คลาสขึ้นต้น lp- ทั้งหมด ไม่ทับกับคลาสเดิมของเว็บหรือ Bootstrap
   ===================================================================== */

.lp {
    /* สีเน้น — ใช้สีแบรนด์ของเว็บ ไม่ใช้สีนอกจาน
       ---------------------------------------------------------------
       เคยลองใช้ทองอุ่นเพราะอยากให้ปุ่มเด้งออกจากพื้นฟ้าเทาของเว็บ
       เด้งจริงแต่เด้งจนหลุดจากเว็บ กลายเป็นปุ่มที่ดูเหมือนแบนเนอร์โฆษณา
       แปะมาจากที่อื่น ไม่ใช่ปุ่มของ Meekai

       ลำดับสายตาในหน้านี้จึงสร้างด้วย "ความเข้ม" ของสีแบรนด์สีเดียว
       ไม่ใช่การเอาสีใหม่มาเพิ่ม:
         ปุ่มหลัก = เข้มทึบ + เงาฟุ้ง   (ก้อนเดียวในหน้าที่สีจัดขนาดนี้)
         ป้าย/ชิป = สีจาง ๆ พื้นโปร่ง  (เป็นป้ายกำกับ ไม่ใช่ของให้กด)
         ปุ่มรอง  = พื้นขาว ขอบบาง
       ห้ามเอาสีเข้มทึบไปใช้กับอย่างอื่นนอกจากปุ่มหลัก เดี๋ยวลำดับจะพัง */
    --lp-accent: var(--color-main);
    --lp-accent-strong: var(--color-main-active);
    --lp-accent-tint: rgba(69, 99, 125, .11);
    --lp-accent-line: rgba(69, 99, 125, .22);

    /* ปุ่มหลัก — สลับขั้วระหว่างโหมดสว่างกับมืด
       สว่าง: พื้นน้ำเงินเข้ม ตัวหนังสือขาว (contrast 5.1:1)
       มืด:   พื้นฟ้าอ่อน ตัวหนังสือเข้ม (contrast 8.7:1)
       ถ้าดันใช้น้ำเงินเข้มทั้งสองโหมด พอมาอยู่บนพื้นมืด ตัวปุ่มเองจะกลืน
       กับพื้นหลัง (contrast ปุ่มกับพื้นเหลือ 2.6:1) มองไม่ออกว่าเป็นปุ่ม */
    --lp-btn-bg: linear-gradient(135deg, #4f7093 0%, #45637d 45%, #354c61 100%);
    --lp-btn-ink: #fff;
    --lp-btn-glow: 53, 76, 97;

    --lp-surface: rgba(255, 255, 255, .82);
    --lp-surface-solid: #fff;
    --lp-border: rgba(69, 99, 125, .14);
    --lp-ink: #1f2b38;
    --lp-ink-soft: #5b6b7d;

    --lp-radius-lg: 32px;
    --lp-radius: 22px;
    --lp-radius-sm: 16px;

    --lp-shadow: 0 2px 6px rgba(31, 43, 56, .05),
                 0 18px 44px rgba(31, 43, 56, .11);
    --lp-shadow-lift: 0 4px 12px rgba(31, 43, 56, .08),
                      0 26px 60px rgba(31, 43, 56, .16);

    color: var(--lp-ink);
}

[data-theme="dark"] .lp {
    --lp-surface: rgba(37, 45, 62, .72);
    --lp-surface-solid: #252d3e;
    --lp-border: rgba(150, 178, 209, .16);
    --lp-ink: #e6edf7;
    --lp-ink-soft: #a5b4c8;

    --lp-accent: #8fb3d6;
    --lp-accent-strong: #6f97be;
    --lp-accent-tint: rgba(143, 179, 214, .14);
    --lp-accent-line: rgba(143, 179, 214, .26);

    --lp-btn-bg: linear-gradient(135deg, #9dc2e4 0%, #85aed4 45%, #6b95bf 100%);
    --lp-btn-ink: #14222f;
    --lp-btn-glow: 107, 149, 191;

    --lp-shadow: 0 2px 6px rgba(0, 0, 0, .3),
                 0 18px 44px rgba(0, 0, 0, .42);
    --lp-shadow-lift: 0 4px 12px rgba(0, 0, 0, .36),
                      0 26px 60px rgba(0, 0, 0, .5);
}

/* ป้ายทะเบียนตัวอย่างในหน้า ห้ามโดนสีตัวหนังสือของ .lp ทับ
   ป้ายจริงต้องเป็นสีตามกฎหมาย ไม่ใช่สีตามธีมเว็บ */
.lp .plate-size,
.lp .plate-size * {
    color: initial;
}


/* =====================================================================
   โครงหน้า — แต่ละส่วนเป็นกล่องมุมมนวางซ้อนบนพื้นไล่เฉดของเว็บ

   ไม่ทำ section เต็มความกว้างจอ เพราะทั้งเว็บคุมเนื้อหาไว้ที่ 1000px
   (.container ใน stylesheet.css) ถ้าหน้านี้หลุดขอบออกไปหน้าเดียว
   มันจะดูเหมือนหลงมาจากเว็บอื่น ความมนกับเงาให้ความรู้สึก
   "เป็นส่วน ๆ" ได้พอ ๆ กับแถบสีเต็มจอ โดยไม่ต้องแหกกริดเดิม
   ===================================================================== */
.lp-section {
    margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.lp-panel {
    padding: clamp(1.5rem, 4vw, 2.75rem);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
    background: var(--lp-surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--lp-shadow);
}

/* หัวข้อประจำส่วน */
.lp-head {
    max-width: 640px;
    margin: 0 auto clamp(1.5rem, 4vw, 2.25rem);
    text-align: center;
}

.lp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
    padding: .35rem .9rem;
    border-radius: 999px;
    background: rgba(69, 99, 125, .1);
    color: var(--color-main);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.6;
}

[data-theme="dark"] .lp-eyebrow {
    background: rgba(150, 178, 209, .14);
    color: #a8c4dd;
}

.lp-head h2 {
    margin-bottom: .5rem;
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    font-weight: 700;
    line-height: 1.45;
    text-wrap: balance; /* เหตุผลเดียวกับ .lp-title */
}

/* หัวข้อในโหมดมืด
   .text-gradient ของเว็บ (dark-mode.css) ไล่จาก --color-main #45637d
   ซึ่งบนพื้นหลังมืด #1a1f2e ได้ contrast ราว 2.4:1 ต่ำกว่าเกณฑ์ตัวอักษรขนาดใหญ่
   ของ WCAG ที่ 3:1 หัวข้อครึ่งซ้ายเลยจมหายไปกับพื้น
   แก้เฉพาะขอบเขตหน้า landing ไม่ไปแตะ dark-mode.css เพราะคลาสนั้น
   ใช้ทั้งเว็บ แก้ตรงนั้นจะกระทบหน้าอื่นที่ยังไม่ได้ตรวจ */
[data-theme="dark"] .lp .text-gradient {
    background: linear-gradient(135deg, #8fb3d6 0%, #d3e3f4 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.lp-head p {
    margin-bottom: 0;
    color: var(--lp-ink-soft);
    line-height: 1.7;
}


/* =====================================================================
   HERO — รูปของจริงกับปุ่มต้องอยู่ในหน้าจอแรกพร้อมกัน

   สองคอลัมน์: ซ้ายคำพูด ขวาของจริง
   ถ้าหน้าไหนไม่มีรูปผลงาน (.lp-hero--solo) จะยุบเหลือคอลัมน์เดียวจัดกลาง
   ===================================================================== */
.lp-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: clamp(2.5rem, 6vw, 4rem);
    padding: clamp(1.75rem, 4.5vw, 3.25rem);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
    background:
        linear-gradient(150deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .72) 58%, rgba(232, 240, 248, .78) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--lp-shadow-lift);
}

[data-theme="dark"] .lp-hero {
    background:
        linear-gradient(150deg, rgba(43, 53, 73, .9) 0%, rgba(33, 41, 58, .78) 58%, rgba(27, 34, 49, .85) 100%);
}

/* วงแสงอุ่นหลังมุมขวาบน ทำให้ hero ไม่แบนและพารถสายตาไปทางรูป
   ไม่ใช้ background-image เพราะอยากให้มันล้นออกนอกกล่องแล้วโดน overflow ตัด
   จะได้เป็นส่วนโค้งพาดมุม ไม่ใช่วงกลมลอยอยู่กลางกล่อง */
.lp-hero::before {
    content: "";
    position: absolute;
    top: -38%;
    right: -14%;
    width: 46%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(69, 99, 125, .16) 0%, rgba(69, 99, 125, 0) 68%);
    pointer-events: none;
}

.lp-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    /* คอลัมน์ซ้ายกว้างกว่าเพราะต้องวางปุ่มสองปุ่มเรียงกันในบรรทัดเดียวให้ได้
       ถ้าแบ่งครึ่งเท่ากัน ปุ่มรองจะตกบรรทัด แล้วมันจะดูเหมือนปุ่มที่หลงมา
       มากกว่าเป็นทางเลือกที่สองของปุ่มหลัก */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: center;
    gap: clamp(1.75rem, 4vw, 3rem);
}

.lp-hero--solo .lp-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.lp-hero--solo .lp-usp {
    display: inline-block;
    text-align: left;
}

.lp-hero--solo .lp-actions,
.lp-hero--solo .lp-trust {
    justify-content: center;
}

/* ป้ายเหนือ H1 — บอกข้อเสนอเป็นคำเดียวก่อนที่เขาจะอ่านอะไรเลย
   จงใจทำเป็นสีจางพื้นโปร่ง ไม่ใช่ปุ่มสีจัด
   ถ้าทำเข้มทึบเหมือนปุ่มหลัก จะมีก้อนสีเข้มสองก้อนวางอยู่ในกรอบสายตาเดียวกัน
   แล้วตาจะไม่รู้ว่าควรกดอันไหน ป้ายนี้เป็นข้อมูล ไม่ใช่ของให้กด */
.lp-flag {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    padding: .4rem 1rem;
    border: 1px solid var(--lp-accent-line);
    border-radius: 999px;
    background: var(--lp-accent-tint);
    color: var(--lp-accent-strong);
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.6;
}

.lp-flag i {
    color: var(--lp-accent);
}

.lp-title {
    margin-bottom: .75rem;
    font-size: clamp(1.85rem, 5vw, 3rem);
    font-weight: 800;
    /* ภาษาไทยมีสระบนวรรณยุกต์ซ้อนสองชั้น (เช่น ป้าย) line-height ต่ำกว่า 1.3
       ตัวหนังสือจะเบียดกันจนอ่านยาก ตัวอักษรละตินไม่มีปัญหานี้ */
    line-height: 1.35;
    letter-spacing: -.01em;
    /* ภาษาไทยไม่เว้นวรรคระหว่างคำ เบราว์เซอร์เลยตัดบรรทัดตามพจนานุกรมของมันเอง
       ผลคือหัวเรื่องมักเหลือคำสั้น ๆ ห้อยอยู่บรรทัดสุดท้ายลำพัง
       ("ออกแบบป้ายทะเบียนรถ / ฟรี") balance เกลี่ยความยาวแต่ละบรรทัดให้ใกล้กัน
       เบราว์เซอร์เก่าที่ไม่รู้จัก property นี้จะข้ามไป ได้ผลเหมือนเดิม ไม่พัง */
    text-wrap: balance;
}

.lp-lead {
    margin-bottom: 1.5rem;
    color: var(--lp-ink-soft);
    font-size: clamp(1rem, 2.2vw, 1.15rem);
    line-height: 1.75;
}

/* รายการข้อดี — ติ๊กถูก อ่านเร็วกว่าย่อหน้า */
.lp-usp {
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
}

.lp-usp li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin-bottom: .6rem;
    line-height: 1.65;
}

.lp-usp li:last-child {
    margin-bottom: 0;
}

.lp-usp i {
    flex: 0 0 auto;
    margin-top: .3rem;
    color: #2e9e5b;
    font-size: .95rem;
}


/* =====================================================================
   ปุ่ม
   ===================================================================== */
.lp-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1.5rem;
}

.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .95rem 1.85rem;
    border: 0;
    border-radius: 999px;
    font-size: 1.05rem;
    font-weight: 700;
    /* เผื่อที่ให้สระบนภาษาไทย เหมือน .lp-title */
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s cubic-bezier(.34, 1.4, .64, 1),
                box-shadow .2s ease,
                filter .2s ease;
}

.lp-btn:hover,
.lp-btn:focus-visible {
    text-decoration: none;
    transform: translateY(-2px);
}

.lp-btn:active {
    transform: translateY(0);
}

.lp-btn:focus-visible {
    outline: 3px solid var(--color-main);
    outline-offset: 3px;
}

.lp-btn-primary {
    background: var(--lp-btn-bg);
    color: var(--lp-btn-ink);
    /* เงาฟุ้งสีเดียวกับตัวปุ่ม ไม่ใช่เงาเทา
       เงาเทาทำให้ปุ่มดูเหมือนกระดาษวางซ้อน เงาสีเดียวกันทำให้ดูเหมือนมีแสงในตัว
       และเป็นสิ่งที่แยกปุ่มหลักออกจากกล่องอื่นในหน้า ที่ใช้เงาเทาหมด */
    box-shadow: 0 4px 14px rgba(var(--lp-btn-glow), .3),
                0 14px 34px rgba(var(--lp-btn-glow), .26);
}

.lp-btn-primary:hover,
.lp-btn-primary:focus-visible {
    color: var(--lp-btn-ink);
    filter: brightness(1.08);
    box-shadow: 0 6px 18px rgba(var(--lp-btn-glow), .34),
                0 20px 44px rgba(var(--lp-btn-glow), .32);
}

.lp-btn-ghost {
    border: 1.5px solid var(--lp-border);
    background: var(--lp-surface-solid);
    color: var(--lp-ink);
    box-shadow: 0 2px 8px rgba(31, 43, 56, .07);
}

.lp-btn-ghost:hover,
.lp-btn-ghost:focus-visible {
    border-color: var(--color-main);
    color: var(--color-main);
}

[data-theme="dark"] .lp-btn-ghost:hover,
[data-theme="dark"] .lp-btn-ghost:focus-visible {
    border-color: #8fb3d6;
    color: #cfe0f2;
}

.lp-btn-lg {
    padding: 1.05rem 2rem;
    font-size: 1.15rem;
}

/* บรรทัดใต้ปุ่ม — กันความลังเล ("กดแล้วจะโดนอะไรไหม") */
.lp-btn-note {
    margin: -.5rem 0 0;
    color: var(--lp-ink-soft);
    font-size: .85rem;
    line-height: 1.6;
}


/* =====================================================================
   แถบความน่าเชื่อถือใต้ปุ่ม
   ===================================================================== */
.lp-trust {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.4rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--lp-border);
}

.lp-trust-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--lp-ink-soft);
    font-size: .875rem;
    line-height: 1.6;
}

.lp-trust-item i {
    color: var(--color-main);
    font-size: 1rem;
}

[data-theme="dark"] .lp-trust-item i {
    color: #8fb3d6;
}

.lp-trust-item strong {
    color: var(--lp-ink);
    font-weight: 700;
}


/* =====================================================================
   กองรูปใน hero — ของจริงต้องมาก่อนคำอธิบาย

   รูปใหญ่หนึ่ง รูปเล็กซ้อนมุมหนึ่ง แล้วมีป้ายราคาลอยทับ
   เอียงนิดเดียว (1.5deg) ให้ดูเป็นของที่วางอยู่จริง ไม่ใช่ภาพ stock
   ===================================================================== */
.lp-shots {
    position: relative;
    padding-bottom: 1.5rem;
    padding-left: 1.5rem;
}

/* ก้อนสีอิสระหลังรูป ทำให้กองรูปไม่ลอยอยู่เฉย ๆ
   border-radius สี่ค่าไม่เท่ากัน = ทรงออร์แกนิก ไม่ใช่วงรี */
.lp-shots::before {
    content: "";
    position: absolute;
    inset: -8% -6% 2% -2%;
    z-index: 0;
    border-radius: 58% 42% 46% 54% / 45% 52% 48% 55%;
    background: linear-gradient(140deg, rgba(69, 99, 125, .2) 0%, rgba(167, 179, 190, .24) 100%);
    filter: blur(6px);
    pointer-events: none;
}

.lp-shot-main,
.lp-shot-sub {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: 4px solid var(--lp-surface-solid);
    background: var(--lp-surface-solid);
    box-shadow: var(--lp-shadow-lift);
}

.lp-shot-main {
    border-radius: 28px;
    transform: rotate(1.5deg);
}

.lp-shot-sub {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 42%;
    border-radius: 20px;
    transform: rotate(-3deg);
}

.lp-shot-main img,
.lp-shot-sub img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* กรอบจัตุรัสทั้งคู่ ไม่ใช่ 4:3
   รูปผลงานที่ลูกค้าส่งมามีทั้งแนวตั้งและแนวนอนปนกัน (768x960 บ้าง 2048x1584 บ้าง)
   ถ้าบังคับเป็น 4:3 รูปแนวตั้งจะโดน object-fit: cover เฉือนหัวท้ายจนป้ายขาดกลาง
   จัตุรัสเป็นทรงที่เฉือนน้อยที่สุดโดยเฉลี่ยเมื่อรูปต้นทางคละแนว
   และยังคุมความสูง hero ไว้ได้ ไม่กระโดดตามสัดส่วนรูปที่บังเอิญถูกหยิบมา */
.lp-shot-main img,
.lp-shot-sub img {
    aspect-ratio: 1;
}

/* ป้ายราคา — ของเดิมตัวเลข 129 บาท ฝังอยู่กลางย่อหน้ายาว ไม่มีใครเห็น
   ราคาที่ถูกกว่าที่เขาคาดคือเหตุผลที่ทำให้กดปุ่ม ต้องอ่านได้ในแวบเดียว */
.lp-price {
    position: absolute;
    right: -.5rem;
    top: 8%;
    z-index: 3;
    padding: .7rem 1.1rem;
    border-radius: 18px;
    background: var(--lp-surface-solid);
    box-shadow: var(--lp-shadow-lift);
    text-align: center;
    line-height: 1.4;
}

.lp-price span {
    display: block;
    color: var(--lp-ink-soft);
    font-size: .7rem;
}

.lp-price strong {
    display: block;
    color: var(--color-main);
    font-size: 1.35rem;
    font-weight: 800;
}

[data-theme="dark"] .lp-price strong {
    color: #a8c4dd;
}


/* =====================================================================
   กล่องคำตอบตรงประเด็น (Featured Snippet / AI Overview)

   ข้อความในนี้คือข้อความที่ Google หยิบไปโชว์ ห้ามแก้ ห้ามตัด
   ทำได้แค่ใส่กรอบให้มันดูเป็นคำตอบ ไม่ใช่ย่อหน้าแรกที่คนกวาดตาข้าม
   ===================================================================== */
.lp-answer {
    position: relative;
    padding: clamp(1.35rem, 3.5vw, 2rem);
    padding-left: clamp(1.35rem, 3.5vw, 2rem);
    border: 1px solid var(--lp-border);
    /* border-left: 5px solid var(--lp-accent); */
    border-radius: var(--lp-radius);
    background: var(--lp-surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--lp-shadow);
}

.lp-answer-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .65rem;
    color: var(--color-main);
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.6;
}

[data-theme="dark"] .lp-answer-label {
    color: #a8c4dd;
}

.lp-answer p {
    margin-bottom: 0;
    font-size: clamp(1rem, 2.2vw, 1.1rem);
    line-height: 1.85;
}


/* =====================================================================
   การ์ดจุดขาย — แปลงย่อหน้า intro เป็นกล่อง

   เนื้อความเหมือนเดิมทุกตัวอักษร แค่ให้แต่ละย่อหน้ามีกล่องกับไอคอนของตัวเอง
   ย่อหน้าติดกันสองก้อนบนพื้นขาว คนกวาดตาผ่านทั้งคู่
   ===================================================================== */
.lp-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.lp-feature {
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    background: var(--lp-surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--lp-shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}

.lp-feature:hover {
    transform: translateY(-4px);
    box-shadow: var(--lp-shadow-lift);
}

.lp-feature-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    /* มุมมนไม่เท่ากันแบบ squircle ให้ไอคอนดูนุ่มกว่าวงกลมหรือสี่เหลี่ยมมน */
    border-radius: 16px 16px 16px 6px;
    background: linear-gradient(135deg, var(--color-main) 0%, var(--color-main-active) 100%);
    color: #fff;
    font-size: 1.2rem;
}

.lp-feature p {
    margin-bottom: 0;
    color: var(--lp-ink-soft);
    line-height: 1.8;
}


/* =====================================================================
   ตารางสเปก (หน้าที่มี specs เช่น /design/car)
   ===================================================================== */
.lp-specs {
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    background: var(--lp-surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--lp-shadow);
}

.lp-specs h2 {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.6;
}

.lp-specs h2 i {
    color: var(--color-main);
}

[data-theme="dark"] .lp-specs h2 i {
    color: #8fb3d6;
}

.lp-specs dl {
    margin: 0;
}

/* ไม่ใช้ <table class="table"> เพราะ Bootstrap 5.3 ทาพื้นเซลล์ด้วย
   --bs-table-bg: var(--bs-body-bg) (ขาว) ทับพื้นการ์ด ทำให้ dark mode เพี้ยน */
.lp-spec-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--lp-border);
    line-height: 1.65;
}

.lp-spec-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.lp-spec-row dt {
    color: var(--lp-ink-soft);
    font-size: .9rem;
    font-weight: 400;
}

.lp-spec-row dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
}


/* =====================================================================
   ขั้นตอน — การ์ดมีเลขลอยมุม

   เลขอยู่นอกกล่อง (ครึ่งหนึ่งล้นขึ้นไป) ทำให้ลำดับอ่านได้จากการกวาดตา
   แนวเดียว ไม่ต้องหาเลขในกล่องทีละใบ
   ===================================================================== */
.lp-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.75rem 1rem;
}

.lp-step {
    position: relative;
    padding: 2rem 1.25rem 1.5rem;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    background: var(--lp-surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--lp-shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}

.lp-step:hover {
    transform: translateY(-4px);
    box-shadow: var(--lp-shadow-lift);
}

.lp-step-num {
    position: absolute;
    top: -18px;
    left: 1.25rem;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 3px solid var(--lp-surface-solid);
    border-radius: 14px 14px 14px 5px;
    background: linear-gradient(135deg, var(--color-main) 0%, var(--color-main-active) 100%);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 6px 16px rgba(69, 99, 125, .3);
}

.lp-step h3 {
    margin-bottom: .5rem;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.6;
}

.lp-step p {
    margin-bottom: 0;
    color: var(--lp-ink-soft);
    font-size: .92rem;
    line-height: 1.75;
}


/* =====================================================================
   แถบปิดการขาย — จุดที่ตั้งใจให้กด

   ใช้สีเข้มทึบต่างจากทุกกล่องในหน้า (ที่เหลือเป็นกระจกขาว)
   ความต่างของพื้นหลังคือสิ่งที่บอกว่า "ตรงนี้ไม่ใช่เนื้อหา ตรงนี้คือปุ่ม"
   ===================================================================== */
.lp-band {
    position: relative;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 3.25rem) clamp(1.5rem, 4vw, 3rem);
    border-radius: var(--lp-radius-lg);
    background: linear-gradient(135deg, #4a6a86 0%, var(--color-main) 40%, #32485c 100%);
    color: #fff;
    text-align: center;
    box-shadow: var(--lp-shadow-lift);
}

/* ส่วนโค้งจาง ๆ พาดมุมล่างซ้าย กันไม่ให้แถบเป็นสี่เหลี่ยมสีทึบแบน ๆ */
.lp-band::before {
    content: "";
    position: absolute;
    left: -12%;
    bottom: -58%;
    width: 52%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.lp-band::after {
    content: "";
    position: absolute;
    right: -8%;
    top: -46%;
    width: 42%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 196, 221, .3) 0%, rgba(168, 196, 221, 0) 70%);
    pointer-events: none;
}

.lp-band > * {
    position: relative;
    z-index: 1;
}

.lp-band h2 {
    margin-bottom: .75rem;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 800;
    line-height: 1.45;
    text-wrap: balance; /* เหตุผลเดียวกับ .lp-title */
}

.lp-band p {
    max-width: 560px;
    margin: 0 auto 1.75rem;
    color: rgba(255, 255, 255, .86);
    line-height: 1.75;
}

.lp-band .lp-actions {
    justify-content: center;
    margin-bottom: 1.25rem;
}

/* ปุ่มหลักในแถบนี้ต้องสลับเป็นพื้นขาว
   ตัวแถบเองเป็นสีน้ำเงินแบรนด์ ถ้าวางปุ่มน้ำเงินแบรนด์ทับลงไป
   ปุ่มจะจมหายไปในพื้น (contrast ~1.3:1) เหลือแค่เงาราง ๆ
   พื้นขาวบนน้ำเงินได้ 8.9:1 และยังเป็นสีในจานเดิม ไม่ได้เพิ่มสีใหม่ */
.lp-band .lp-btn-primary {
    background: #fff;
    color: var(--color-main-active);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18),
                0 14px 34px rgba(0, 0, 0, .22);
}

.lp-band .lp-btn-primary:hover,
.lp-band .lp-btn-primary:focus-visible {
    color: var(--color-main-active);
    filter: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22),
                0 20px 44px rgba(0, 0, 0, .28);
}

.lp-band .lp-btn-ghost {
    border-color: rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.lp-band .lp-btn-ghost:hover,
.lp-band .lp-btn-ghost:focus-visible {
    border-color: #fff;
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.lp-band-note {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.5rem;
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: .875rem;
    line-height: 1.6;
}

.lp-band-note span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}


/* =====================================================================
   ลิงก์ไปหน้า landing อื่น
   ===================================================================== */
.lp-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .85rem;
}

.lp-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding: 1.25rem .85rem;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-sm);
    background: var(--lp-surface);
    color: var(--lp-ink);
    text-align: center;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(31, 43, 56, .06);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.lp-link:hover,
.lp-link:focus-visible {
    transform: translateY(-3px);
    border-color: var(--color-main);
    color: var(--lp-ink);
    text-decoration: none;
    box-shadow: var(--lp-shadow);
}

.lp-link i {
    color: var(--color-main);
    font-size: 1.4rem;
}

[data-theme="dark"] .lp-link i {
    color: #8fb3d6;
}

.lp-link span {
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.55;
}


/* =====================================================================
   ชิปลิงก์ — ใช้กับรายชื่อจังหวัดอื่นในหน้า /plate/{จังหวัด}

   ของเดิมเป็นตัวหนังสือสีเทาเรียงต่อกันเป็นพรืด 70 กว่าชื่อ
   อ่านไม่ออกว่าอันไหนจบอันไหนเริ่ม และไม่มีอะไรบอกว่ากดได้
   ทำเป็นชิปมีขอบ แต่ละชื่อจึงมีขอบเขตของตัวเอง

   ตั้งใจให้เบากว่า .lp-link (การ์ดเลือกประเภทป้าย) เพราะลิงก์พวกนี้
   มีไว้ให้ Google เดินต่อระหว่างหน้าจังหวัดเป็นหลัก
   ไม่ใช่ทางที่อยากให้ลูกค้าเดินออกจากหน้าที่กำลังจะปิดการขาย
   ===================================================================== */
.lp-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}

.lp-chip {
    display: inline-flex;
    align-items: center;
    padding: .4rem .9rem;
    border: 1px solid var(--lp-border);
    border-radius: 999px;
    background: var(--lp-surface);
    color: var(--lp-ink-soft);
    font-size: .85rem;
    line-height: 1.6;
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease, transform .2s ease;
}

.lp-chip:hover,
.lp-chip:focus-visible {
    transform: translateY(-2px);
    border-color: var(--lp-accent);
    color: var(--lp-ink);
    text-decoration: none;
}


/* =====================================================================
   Breadcrumb
   ===================================================================== */
.lp-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.25rem;
    padding: 0;
    list-style: none;
    color: var(--lp-ink-soft);
    font-size: .85rem;
    line-height: 1.6;
}

.lp-crumbs a {
    color: var(--lp-ink-soft);
    text-decoration: none;
}

.lp-crumbs a:hover {
    color: var(--color-main);
    text-decoration: underline;
}

.lp-crumbs li + li::before {
    content: "/";
    margin-right: .5rem;
    opacity: .5;
}


/* =====================================================================
   จอเล็ก
   ===================================================================== */
@media (max-width: 991.98px) {
    .lp-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        text-align: center;
    }

    /* บนมือถือให้รูปมาก่อนคำ — ของจริงขายได้เร็วกว่าคำอธิบาย
       และเป็นภาพแรกที่เห็นโดยไม่ต้องเลื่อน

       แต่ต้องคุมความกว้างไว้ด้วย ปล่อยให้เต็มคอลัมน์แล้วรูปจัตุรัสจะสูงเท่า
       ความกว้างจอ (~340px) ซึ่งกินพื้นที่หน้าจอแรกไปเกือบครึ่ง */
    .lp-hero-media {
        order: -1;
        max-width: 300px;
        margin-inline: auto;
    }

    /* สลับให้ปุ่มขึ้นมาก่อนรายการข้อดี เฉพาะบนจอแคบ
       ---------------------------------------------------------------
       เรียงแบบเดสก์ท็อป (ข้อดี 3 ข้อ → ปุ่ม) พอมาต่อกันเป็นคอลัมน์เดียว
       ข้อดีสามข้อกินไป ~165px ดันปุ่มไปอยู่ที่ ~880px ซึ่งเลยขอบล่างจอ
       มือถือมาตรฐาน (390x844) ไปแล้ว คนต้องเลื่อนถึงจะเจอปุ่ม
       ซึ่งขัดกับเหตุผลทั้งหมดที่รื้อหน้านี้ใหม่

       ลำดับใหม่: รูป → ป้าย → หัวเรื่อง → คำโปรย → ปุ่ม → ข้อดี → ความน่าเชื่อถือ
       คนที่พร้อมอยู่แล้วกดได้เลย คนที่ยังลังเลเลื่อนลงไปอ่านเหตุผลต่อ
       ไม่ได้ตัดอะไรทิ้ง แค่ไม่บังคับให้ทุกคนอ่านก่อนถึงจะเจอปุ่ม
       (ลำดับใน DOM ยังเหมือนเดิม จึงไม่กระทบลำดับที่โปรแกรมอ่านหน้าจออ่าน) */
    .lp-hero-copy {
        display: flex;
        flex-direction: column;
    }

    .lp-flag     { order: 1; align-self: center; }
    .lp-title    { order: 2; }
    .lp-lead     { order: 3; }
    .lp-actions  { order: 4; }
    .lp-btn-note { order: 5; }
    .lp-usp      { order: 6; margin-top: 1.5rem; }
    .lp-trust    { order: 7; }

    .lp-usp {
        display: inline-block;
        text-align: left;
    }

    .lp-actions,
    .lp-trust {
        justify-content: center;
    }

    .lp-trust {
        gap: .6rem 1.1rem;
    }
}

@media (max-width: 575.98px) {
    .lp-hero,
    .lp-panel,
    .lp-band {
        border-radius: 24px;
    }

    /* จอแคบลงอีก ก็ต้องบีบรูปลงอีกด้วยเหตุผลเดียวกับใน media query ข้างบน
       ทุกพิกเซลที่รูปกินไป คือระยะที่ปุ่มขยับลงไปใกล้ขอบล่างจอ */
    .lp-hero-media {
        max-width: 280px;
    }

    .lp-lead {
        margin-bottom: 1.25rem;
    }

    .lp-usp {
        margin-bottom: 1.35rem;
    }

    .lp-shots {
        padding-left: 1rem;
        padding-bottom: 1rem;
    }

    .lp-shot-sub {
        width: 40%;
    }

    .lp-price {
        right: 0;
        padding: .55rem .85rem;
    }

    .lp-price strong {
        font-size: 1.15rem;
    }

    /* ปุ่มเต็มความกว้าง นิ้วโป้งพลาดยาก */
    .lp-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .lp-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp-btn,
    .lp-feature,
    .lp-step,
    .lp-link,
    .lp-chip {
        transition: none;
    }

    .lp-btn:hover,
    .lp-feature:hover,
    .lp-step:hover,
    .lp-link:hover,
    .lp-chip:hover {
        transform: none;
    }
}