/* สไตล์ทั้งระบบอยู่ไฟล์นี้ไฟล์เดียว
   ค่าธีมทั้งหมดมาจาก project/DESIGN.md · ห้ามสร้างไฟล์ CSS แยกต่อหน้า
   ห้ามเขียนค่าสีหรือระยะห่างดิบ — ใช้ var(--...) เท่านั้น */

/* TOKENS:BEGIN */
/* generate จาก project/DESIGN.md — ห้ามแก้ด้วยมือ
   แก้ค่าที่ DESIGN.md แล้วรัน: php scripts/design-sync.php */

:root {
  --color-brand-primary: #C24E00;
  --color-brand-on-primary: #FFFFFF;
  --color-brand-primary-hover: #A84300;
  --color-brand-accent: #FD6B08;
  --color-brand-accent-end: #FE9609;
  --color-brand-accent-soft: #FDE9DD;
  --color-brand-logo: #FAA61A;
  --color-brand-link: #B34700;
  --color-brand-ink: #1A243D;
  --color-brand-on-ink: #FFFFFF;
  --color-surface-page: #FCFCFD;
  --color-surface-card: #FFFFFF;
  --color-surface-raised: #F5F6FA;
  --color-surface-tint: #FDF9F6;
  --color-text-strong: #070A18;
  --color-text-normal: #3C424A;
  --color-text-muted: #5A606B;
  --color-border-normal: #E4E5EB;
  --color-border-strong: #868B96;
  --color-state-success: #15803D;
  --color-state-warning: #A16207;
  --color-state-danger: #C0262D;
  --color-state-info: #1D5FD0;
  --color-focus: #C24E00;
  --color-overlay: rgb(7 10 24 / .48);
  --font-heading: "Prompt";
  --font-body: "IBM Plex Sans Thai";
  --font-mono: "ui-monospace";
  --font-zh: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-display: 4rem;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold: 600;
  --leading-tight: 1.3;
  --leading-snug: 1.45;
  --leading-normal: 1.65;
  --leading-loose: 1.85;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;
  --icon-sm: 16px;
  --icon-base: 20px;
  --icon-lg: 32px;
  --icon-xl: 48px;
  --shadow-sm: 0 1px 2px rgb(16 24 40 / .06);
  --shadow-md: 0 6px 20px rgb(16 24 40 / .07);
  --shadow-lg: 0 24px 48px rgb(16 24 40 / .12);
  --shadow-header: 0 6px 24px rgb(16 24 40 / .08);
  --duration-fast: 140ms;
  --duration-normal: 220ms;
  --duration-slow: 320ms;
  --duration-reveal: 560ms;
  --ease-standard: cubic-bezier(.2,0,0,1);
  --ease-enter: cubic-bezier(0,0,0,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --table-row-height: 44px;
  --table-cell-padding: 0 12px;
  --table-head-background: transparent;
  --table-head-padding: 8px 12px;
  --table-font-size: 0.875rem;
  --choice-size: 20px;
  --choice-mark: 10px;
  --choice-arrow-wide: 10px;
  --choice-arrow-tall: 6px;
  --badge-radius: 6px;
  --badge-type-border-style: dashed;
  --badge-status-border-style: solid;
  --hero-min-height: 600px;
  --hero-min-height-mobile: 480px;
  --hero-gap: 48px;
  --hero-image-ratio: 4 / 3;
  --hero-scrim: linear-gradient(to top, rgb(0 0 0 / .72) 0%, rgb(0 0 0 / .45) 42%, rgb(0 0 0 / .08) 100%);
  --hero-on-image: #FFFFFF;
  --product-card-image-ratio: 3 / 4;
  --product-card-gap: 16px;
  --product-card-grid-gap: 32px;
  --product-card-name-size: 1.0625rem;
  --product-card-meta-size: 0.9375rem;
  --prose-max-width: 70ch;
  --prose-paragraph-gap: 16px;
  --prose-heading-gap: 36px;
  --news-item-image-ratio: 16 / 9;
  --news-item-image-width: 320px;
  --news-item-gap: 24px;
  --news-item-divider-style: 1px solid var(--color-border-normal);
  --site-header-height: 76px;
  --site-header-height-mobile: 64px;
  --site-logo-height: 36px;
  --site-logo-height-mobile: 30px;
  --site-footer-logo-height: 56px;
  --site-section-pad: 80px;
  --site-section-pad-mobile: 56px;
  --site-gutter: 24px;
  --site-gutter-mobile: 16px;
  --site-mega-width: 640px;
  --site-drawer-width: 360px;
  --site-reveal-shift: 24px;
  --site-head-max-width: 720px;
  --showcase-laptop-width: 600px;
  --showcase-phone-width: 168px;
  --showcase-chart-height: 120px;
  --showcase-bezel: 12px;
  --showcase-bar-ratio: 4 / 3;
  --industry-media-ratio: 16 / 10;
  --layout-max-width: 1200px;
  --layout-form-width: 760px;
  --layout-field-min-width: 220px;
  --layout-tile-min-width: 260px;
  --layout-aside-width: 320px;
  --layout-page-media-width: 360px;
  --layout-page-media-height: 200px;
  --layout-sidebar-width: 240px;
  --layout-sidebar-collapsed: 60px;
  --layout-breakpoint: 768px;
}

/* โหมดตามที่ผู้ใช้เลือก — PHP เขียน data-theme ที่ <html> เพื่อไม่ให้หน้ากะพริบตอนโหลด */
:root[data-theme="dark"] {
  --color-brand-primary: #FF8A3D;
  --color-brand-on-primary: #1A0E05;
  --color-brand-primary-hover: #FFA366;
  --color-brand-accent: #FF8A3D;
  --color-brand-accent-end: #FFA94D;
  --color-brand-accent-soft: #3A2416;
  --color-brand-logo: #FAA61A;
  --color-brand-link: #FFA366;
  --color-brand-ink: #0B0F1A;
  --color-brand-on-ink: #F4F5F8;
  --color-surface-page: #0E1014;
  --color-surface-card: #171A20;
  --color-surface-raised: #1F232B;
  --color-surface-tint: #1C1712;
  --color-text-strong: #F4F5F8;
  --color-text-normal: #C6CAD4;
  --color-text-muted: #9AA1AE;
  --color-border-normal: #2A2F38;
  --color-border-strong: #737B8A;
  --color-state-success: #4ED08A;
  --color-state-warning: #F0B44A;
  --color-state-danger: #FF7B72;
  --color-state-info: #7DA0FF;
  --color-focus: #FF8A3D;
  --color-overlay: rgb(0 0 0 / .65);
}

/* ยังไม่เคยเลือก — ตามค่าของเครื่อง */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-brand-primary: #FF8A3D;
    --color-brand-on-primary: #1A0E05;
    --color-brand-primary-hover: #FFA366;
    --color-brand-accent: #FF8A3D;
    --color-brand-accent-end: #FFA94D;
    --color-brand-accent-soft: #3A2416;
    --color-brand-logo: #FAA61A;
    --color-brand-link: #FFA366;
    --color-brand-ink: #0B0F1A;
    --color-brand-on-ink: #F4F5F8;
    --color-surface-page: #0E1014;
    --color-surface-card: #171A20;
    --color-surface-raised: #1F232B;
    --color-surface-tint: #1C1712;
    --color-text-strong: #F4F5F8;
    --color-text-normal: #C6CAD4;
    --color-text-muted: #9AA1AE;
    --color-border-normal: #2A2F38;
    --color-border-strong: #737B8A;
    --color-state-success: #4ED08A;
    --color-state-warning: #F0B44A;
    --color-state-danger: #FF7B72;
    --color-state-info: #7DA0FF;
    --color-focus: #FF8A3D;
    --color-overlay: rgb(0 0 0 / .65);
  }
}

/* TOKENS:END */

/* ------------------------------------------------------------ ฟอนต์ (self-host)

   ‼️ ห้ามโหลดจาก CDN (กฎเหล็กข้อ 2) — ไฟล์อยู่ public/assets/vendor/fonts/ (SIL OFL 1.1)
   ‼️ แยกไฟล์ไทย/ละตินด้วย unicode-range — หน้าภาษาไทยไม่ต้องโหลดตัวละตินถ้าไม่มีตัวอังกฤษ
   ‼️ Prompt มีแค่ 600 (พาดหัว) · IBM Plex Sans Thai 400/500/600 (เนื้อความ) — โหลดเฉพาะน้ำหนักที่ใช้จริง */

@font-face {
  font-family: "Prompt";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../vendor/fonts/prompt-thai-600-normal.woff2") format("woff2");
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "Prompt";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../vendor/fonts/prompt-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../vendor/fonts/ibm-plex-sans-thai-thai-400-normal.woff2") format("woff2");
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../vendor/fonts/ibm-plex-sans-thai-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../vendor/fonts/ibm-plex-sans-thai-thai-500-normal.woff2") format("woff2");
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../vendor/fonts/ibm-plex-sans-thai-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../vendor/fonts/ibm-plex-sans-thai-thai-600-normal.woff2") format("woff2");
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "IBM Plex Sans Thai";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../vendor/fonts/ibm-plex-sans-thai-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer reset, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  /* ‼️ [hidden] ของเบราว์เซอร์คือ display:none ที่ specificity ต่ำสุด
     component ไหนตั้ง display:flex/grid ไว้ จะทับมันทั้งหมด
     ผลคือ JS ตั้ง element.hidden = true สำเร็จจริง ตัวนับถูก แต่ของยังโผล่บนหน้า
     เป็นบั๊กที่ตรวจจากโค้ดไม่เห็นเลย เห็นได้ทางเดียวคือเปิดหน้าดู
     !important ในชั้นล่างชนะ declaration ปกติของชั้นที่สูงกว่า ซึ่งคือสิ่งที่ต้องการตรงนี้พอดี */
  [hidden] { display: none !important; }

  /* ‼️ ไอคอนต้องมีขนาดของตัวเองทุกขนาดที่ view เรียกใช้
     empty-state.php เรียก icon('...', 'icon-lg') มาตั้งแต่ต้น แต่ไม่มีคลาสนี้ใน CSS
     ไอคอนของสถานะว่างจึงเล็กเท่าไอคอนในปุ่ม ดูเหมือนไอคอนหลุดมา
     เป็น typo ที่ไม่มีอะไรจับได้เลย เพราะ CSS ที่ไม่มีอยู่ไม่เคยรายงาน error */
  .icon    { width: var(--icon-base); height: var(--icon-base); flex-shrink: 0; }
  .icon-sm { width: var(--icon-sm);   height: var(--icon-sm); }
  .icon-lg { width: var(--icon-lg);   height: var(--icon-lg); }
  .icon-xl { width: var(--icon-xl);   height: var(--icon-xl); }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, fieldset { margin: 0; }
  fieldset, legend { padding: 0; border: 0; }
  ul[class], ol[class] { list-style: none; padding: 0; margin: 0; }
  img, picture, svg { max-width: 100%; display: block; }
  button, input, select, textarea { font: inherit; color: inherit; }
  table { border-collapse: collapse; width: 100%; }
}

@layer base {
  /* ‼️ ต้องผูก color-scheme กับธีมที่ "ระบบ" เลือก ไม่ใช่ธีมของ "เครื่อง"
     ถ้าปล่อยเป็น `light dark` เฉยๆ native control (select, ปฏิทิน, แถบเลื่อน)
     จะตามธีมของ OS ผลคือผู้ใช้เลือกโหมดสว่างแต่ <select> เป็นกล่องดำบนพื้นครีม อ่านไม่ออก
     โปรเจคที่ธีมเริ่มต้นสวนกับ OS จะเจอทันทีตั้งแต่หน้าแรก */
  html { color-scheme: light dark; }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"]  { color-scheme: dark; }

  body {
    background: var(--color-surface-page);
    color: var(--color-text-normal);
    font-family: var(--font-body), system-ui, sans-serif;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-heading), system-ui, sans-serif;
    line-height: var(--leading-tight);
    color: var(--color-text-strong);
  }

  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
  h3 { font-size: var(--text-lg); }

  a { color: var(--color-brand-primary); }

  /* focus ต้องเห็นชัดทุกจุดที่กดได้ — ห้าม outline:none โดยไม่ใส่แบบอื่นแทน */
  :focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  /* ผู้ใช้บางคนเวียนหัวจากการเคลื่อนไหว */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      transition-duration: .01ms !important;
    }
  }
}

@layer layout {
  .shell { display: flex; flex: 1; min-height: 0; }

  .sidebar {
    width: var(--layout-sidebar-width);
    flex-shrink: 0;
    background: var(--color-surface-card);
    border-inline-end: 1px solid var(--color-border-normal);
    display: flex;
    flex-direction: column;

    /* ‼️ ไม่มี transition บน width โดยตั้งใจ
       การเคลื่อน width ทำให้เบราว์เซอร์คำนวณ layout ใหม่ทุกเฟรมแล้วกระตุก
       และการพับเมนูคือสิ่งที่ผู้ใช้ทำซ้ำหลายสิบครั้งต่อวัน ทรานซิชันจึงกลายเป็นความหน่วง
       เคลื่อนได้เฉพาะ transform และ opacity เท่านั้น */
  }

  /* พับแล้วต้องย่อ ไม่ใช่ปิดหาย — ผู้ใช้ยังกดใช้งานได้ทุกเมนู */
  .sidebar[data-collapsed="true"] { width: var(--layout-sidebar-collapsed); }
  .sidebar[data-collapsed="true"] .brand-name { display: none; }

  /* sidebar อยู่กับที่ หน้ายาวแค่ไหนก็ตาม — เมนูเลื่อนในตัวเอง (กฎของ .nav อยู่ใน components ส่วนเมนู) */
  @media (min-width: 769px) {
    /* ‼️ sticky สร้าง stacking context — ต้องมี z-index ไม่งั้น popover เมนูย่อย (fixed ข้างใน) ถูกเนื้อหาหน้าทับ */
    .sidebar { position: sticky; inset-block-start: 0; z-index: 30; align-self: flex-start; block-size: 100dvh; }
  }
  .sidebar-backdrop { display: none; }

  .main { flex: 1; min-width: 0; display: flex; flex-direction: column; }


  .topbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-block-end: 1px solid var(--color-border-normal);
    background: var(--color-surface-card);
  }

  .content {
    flex: 1;
    padding: var(--space-6) var(--space-5);
    width: 100%;
  }

  /* ‼️ คอลัมน์ของ "หน้า" — ความกว้างเป็นเรื่องของหน้า ไม่ใช่ของ component
     ห้ามใส่ max-width หรือ fit-content ทีละ component เด็ดขาด
     ปล่อยให้ component คุมเองแล้วจะได้ตารางที่ยืดจนปุ่มห่างจากข้อมูล 400px
     หรือได้ที่ว่างโล่งข้างขวาข้างเดียวเพราะหัวเพจกว้างเต็มแต่การ์ดแคบและชิดซ้าย
     ทั้งสองอาการไม่มีใครสั่งให้เกิด เป็นผลข้างเคียงของการไม่มีใครคุมความกว้างของหน้า */
  .page {
    width: 100%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .page[data-width="form"] { max-width: var(--layout-form-width); }
  .page[data-width="list"] { max-width: var(--layout-max-width); }
  .page[data-width="wide"] { max-width: 100%; }

  /* ‼️ split — การ์ดหรือสรุปด้านข้างคู่กับเนื้อหาหลัก (มีตั้งแต่ 3.17.0)
     เป็นข้อยกเว้นของ "หนึ่งหน้ามีคอลัมน์เดียว" ที่ต้องเลือกโดยตั้งใจ ไม่ใช่ค่าเริ่มต้น
     ใช้เมื่อแบบของหน้ากำหนดมา หรือเมื่อด้านข้างช่วยตัดสินใจเรื่องในเนื้อหาหลักจริง (สรุปของสิ่งที่กำลังแก้)
     ยังเป็นความกว้างเดียวของหน้า — แบ่งพื้นที่ภายในด้วย .split-layout ไม่ใช่ให้ component คุมความกว้างเอง */
  .page[data-width="split"] { max-width: var(--layout-max-width); }

  .split-layout {
    display: grid;
    grid-template-columns: minmax(0, var(--layout-aside-width)) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
  }

  .split-aside { display: flex; flex-direction: column; gap: var(--space-4); }
  .split-main  { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }

  /* จอแคบ ด้านข้างขึ้นก่อนเนื้อหาหลัก — มันคือบริบทของสิ่งที่กำลังทำ */
  @media (max-width: 900px) {
    .split-layout { grid-template-columns: minmax(0, 1fr); }
  }

  /* ---------------------------------------------------------------- หัวเพจ */

  /* ‼️ ทุกหน้าเปิดด้วยหัวเพจ มาจาก layout กลางเหมือน footer
     ไม่มีหัวเพจ = ทุกอย่างในหน้ามีน้ำหนักเท่ากัน ไม่มีจุดเริ่มให้สายตา */
  .page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .page-head-text { display: flex; flex-direction: column; gap: var(--space-2); }

  .page-lead {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    max-width: 70ch;
  }

  /* ปุ่มหลักของหน้าอยู่ที่นี่ ห้ามไปปนกับแถบตัวกรอง — ปนกันแล้วเส้นฐานไม่ตรงกัน */
  .page-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

  /* ภาพหรือไอคอนข้างหัวเพจ — ขนาดมาจาก token ไม่ใช่จากไฟล์ภาพ
     ภาพที่ไม่จำกัดความสูงจะดันเนื้อหาลงไปใต้จอแรกบนโน้ตบุ๊ก */
  .page-head.has-media { align-items: center; }
  .page-head.has-media .page-head-text { flex: 1 1 var(--layout-field-min-width); }

  .page-media {
    margin: 0;
    flex: 0 1 var(--layout-page-media-width);
    max-height: var(--layout-page-media-height);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .page-media img { display: block; width: 100%; height: 100%; max-height: var(--layout-page-media-height); object-fit: cover; }

  .page-media.is-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: var(--space-16);
    height: var(--space-16);
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    color: var(--color-brand-primary);
  }

  .page-media.is-icon svg { width: var(--space-8); height: var(--space-8); }

  @media (max-width: 768px) {
    .page-media:not(.is-icon) { flex-basis: 100%; }
  }

  /* เส้นทางนำทาง — อยู่เหนือชื่อหน้า ตัวเล็กและเงียบกว่าชื่อหน้าเสมอ */
  .breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
  .breadcrumb li { display: flex; align-items: center; gap: var(--space-2); }
  .breadcrumb li + li::before { content: "/"; color: var(--color-border-strong); }
  .breadcrumb a { color: var(--color-text-muted); }
  .breadcrumb a:hover { color: var(--color-text-strong); }
  .breadcrumb [aria-current="page"] { color: var(--color-text-normal); }

  /* ‼️ ความกว้างของช่องกรอกต้องบอกความยาวที่คาดหวัง
     ช่องกว้างเต็มฟอร์มที่รับได้ 3 ตัวอักษร คือการบอกผู้ใช้ผิด */
  .field[data-width="short"]  { max-width: 12ch; }
  .field[data-width="medium"] { max-width: 32ch; }
  .field[data-width="full"]   { max-width: 100%; }

  /* ฟอร์มเกิน 4 ช่องต้องแบ่งกลุ่ม และช่องสั้นเรียงกันเป็น grid ไม่ใช่เรียงลงมาทีละช่อง */
  .field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--layout-field-min-width), 1fr));
    gap: var(--space-4);
    align-items: start;
  }

  fieldset.group {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-md);
  }

  fieldset.group > legend {
    padding-inline: var(--space-2);
    color: var(--color-text-strong);
    font-weight: var(--weight-medium);
  }

  /* ---------------------------------------------------- การ์ดทางเข้า (tile) */

  /* ‼️ เป็น component กลาง ไม่ใช่สไตล์ของหน้าคู่มือ
     หน้าที่ทำหน้าที่ "เลือกทางเข้า" ทุกหน้าใช้ตัวนี้ — หน้ารวมคู่มือ หน้าสรุป หน้าเลือกโมดูล
     รายการลิงก์เปล่าไม่มีลำดับสายตา และไม่บอกว่าปลายทางเกี่ยวกับอะไร */
  .tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--layout-tile-min-width), 1fr));
    gap: var(--space-4);
  }

  .tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-lg);
    color: var(--color-text-normal);
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard);
  }

  .tile:hover { border-color: var(--color-brand-primary); box-shadow: var(--shadow-md); }
  /* tile ที่แสดงตัวเลขอย่างเดียว (ไม่ใช่ลิงก์) — ห้ามมี hover ที่ชวนให้กด */
  .tile.is-static:hover { border-color: var(--color-border-normal); box-shadow: none; }

  /* แท่งส่วนแบ่ง (AI Visibility · share of voice) — <meter> ของเบราว์เซอร์ อ่านได้ด้วย screen reader */
  .aiv-bars { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
  .aiv-bar { display: grid; grid-template-columns: minmax(0, 10em) minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
  .aiv-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-medium); }
  .aiv-bar meter { inline-size: 100%; block-size: var(--space-3); }
  .aiv-bar-value { color: var(--color-text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
  .aiv-simulated { border-style: dashed; }

  .tile-icon {
    display: inline-flex;
    color: var(--color-brand-primary);
  }

  .tile-title {
    color: var(--color-text-strong);
    font-weight: var(--weight-medium);
  }

  .tile-summary {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  .site-footer {
    padding: var(--space-4) var(--space-5);
    border-block-start: 1px solid var(--color-border-normal);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
  }

  .stack { display: flex; flex-direction: column; gap: var(--space-4); }
  .row   { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
  .spacer { margin-inline-start: auto; }

  .centered {
    flex: 1;
    display: grid;
    place-items: center;
    padding: var(--space-6);
  }

  @media (max-width: 768px) {
    .sidebar {
      position: fixed;
      inset-block: 0;
      inset-inline-start: 0;
      z-index: 40;
      transform: translateX(-100%);
      transition: transform var(--duration-normal) var(--ease-standard);
    }
    .sidebar[data-open="true"] { transform: translateX(0); }
    /* มือถือไม่มีโหมดย่อเหลือไอคอน — เมนูเลื่อนออกมาเต็มความกว้างเสมอ แม้เคยย่อไว้บนจอใหญ่ */
    .sidebar[data-collapsed="true"] { width: var(--layout-sidebar-width); }
    .sidebar[data-collapsed="true"] .brand-name { display: inline; }
    /* ปุ่มลอย "?" อยู่ชั้นบนกว่าเมนู — ระหว่างเมนูเปิดให้หลบ ไม่งั้นทับรายการล่างสุด */
    body:has(.sidebar[data-open="true"]) .support-fab { visibility: hidden; }
    .sidebar-backdrop:not([hidden]) {
      display: block;
      position: fixed;
      inset: 0;
      z-index: 39;
      background: var(--color-overlay);
    }
    .content { padding: var(--space-4) var(--space-3); }
  }
}

@layer components {

  /* ---------------------------------------------------------------- ปุ่ม */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-normal);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-standard);
  }

  .btn:hover { background: var(--color-surface-raised); }
  .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

  .btn-primary {
    background: var(--color-brand-primary);
    color: var(--color-brand-on-primary);
  }
  /* ‼️ hover ต้องเข้มขึ้น ไม่ใช่สว่างขึ้น — brightness() ทำให้ตัวหนังสือขาวบนส้ม contrast ตกต่ำกว่า 4.5:1 */
  .btn-primary:hover { background: var(--color-brand-primary-hover); }

  .btn-secondary { border-color: var(--color-border-strong); }

  .btn-danger {
    background: var(--color-state-danger);
    color: var(--color-brand-on-primary);
  }

  /* ปุ่มไอคอนล้วน — ต้องมี aria-label และ tooltip เสมอ */
  .btn-icon {
    min-width: 44px;
    padding: var(--space-2);
  }

  /* กันกดซ้ำ — กดแล้ว disable ทันทีพร้อมแสดงว่ากำลังทำงาน */
  .btn[data-busy="true"] { pointer-events: none; opacity: .6; }

  /* ---------------------------------------------------------------- ฟอร์ม */

  .field { display: flex; flex-direction: column; gap: var(--space-1); }

  .field label { color: var(--color-text-strong); font-weight: var(--weight-medium); }
  .field .hint { color: var(--color-text-muted); font-size: var(--text-sm); }

  .field input,
  .field select,
  .field textarea {
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface-page);
  }

  .field[data-invalid="true"] input,
  .field[data-invalid="true"] select,
  .field[data-invalid="true"] textarea { border-color: var(--color-state-danger); }

  /* ---------------------------------------------- ติ๊กถูก / ตัวเลือกเดียว

     ‼️ ก่อน 3.20.0 ไม่มีสไตล์ของ checkbox กับ radio เลยทั้งไฟล์
        ผลคือทุกโปรเจคได้กล่องสีฟ้าของ Windows ซึ่งไม่ตามธีมและไม่ตามโหมดมืด
        appearance: none ต้องมาคู่กับการวาดเองเสมอ ไม่งั้นช่องจะหายไปทั้งอัน */

  .choice { display: flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; }

  /* พื้นที่กดต้องถึง 44px ทั้งแถว ไม่ใช่แค่ตัวกล่อง 18px */
  .choice { min-height: 44px; padding-block: var(--space-2); }

  .field input[type="checkbox"],
  .field input[type="radio"] {
    appearance: none;
    flex: none;
    width: var(--choice-size);
    height: var(--choice-size);
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface-page);
    display: grid;
    place-content: center;
  }

  .field input[type="checkbox"] { border-radius: var(--radius-sm); }
  .field input[type="radio"] { border-radius: 50%; }

  .field input[type="checkbox"]:checked,
  .field input[type="radio"]:checked,
  .field input[type="checkbox"]:indeterminate {
    border-color: var(--color-brand-primary);
    background: var(--color-brand-primary);
  }

  /* เครื่องหมายวาดด้วย clip-path ไม่ใช่ไฟล์ภาพ — เปลี่ยนสีตามโหมดได้และไม่ต้องโหลดอะไรเพิ่ม */
  .field input[type="checkbox"]::before,
  .field input[type="radio"]::before {
    content: "";
    width: var(--choice-mark);
    height: var(--choice-mark);
    transform: scale(0);
    background: var(--color-brand-on-primary);
  }

  .field input[type="checkbox"]::before {
    clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 84% 0, 39% 70%);
  }

  .field input[type="radio"]::before { border-radius: 50%; }

  /* ‼️ ครึ่งๆ กลางๆ (indeterminate) ต้องต่างจากทั้งติ๊กและไม่ติ๊ก
     หัวตารางที่เลือกบางแถวต้องบอกได้ว่า "บางอัน" ไม่ใช่ "ทั้งหมด" */
  .field input[type="checkbox"]:indeterminate::before {
    clip-path: polygon(0 38%, 100% 38%, 100% 62%, 0 62%);
    transform: scale(1);
  }

  .field input[type="checkbox"]:checked::before,
  .field input[type="radio"]:checked::before { transform: scale(1); }

  .field input[type="checkbox"]:disabled,
  .field input[type="radio"]:disabled { opacity: .5; cursor: not-allowed; }

  .choice-text { display: flex; flex-direction: column; gap: 2px; }
  .choice-text .hint { font-size: var(--text-sm); }

  /* กลุ่มตัวเลือกใช้ fieldset เพื่อให้ screen reader อ่านหัวข้อกลุ่มก่อนอ่านตัวเลือก */
  .choice-group { display: flex; flex-direction: column; border: 0; margin: 0; padding: 0; }
  .choice-group > legend { color: var(--color-text-strong); font-weight: var(--weight-medium); padding: 0; }

  /* error อยู่ใต้ช่องที่ผิด ไม่กองรวมบนสุด */
  .field .error { color: var(--color-state-danger); font-size: var(--text-sm); }

  .required-mark { color: var(--color-state-danger); }

  /* dropdown ที่ค้นได้ — JS สร้างครอบ <select> เดิม (components.md ข้อ 3ก)
     ‼️ select ตัวจริงต้องยังโฟกัสได้ ห้าม display:none ห้าม visibility:hidden
        ไม่งั้นฟอร์มที่มี required แล้ว validate ไม่ผ่านจะส่งไม่ได้โดยไม่มีข้อความให้ผู้ใช้เห็น */
  /* ‼️ นอกฟอร์ม (เช่นตัวสลับภาษาบนแถบบน) ต้องกว้างตามเนื้อหา ไม่ใช่ยืดเต็มที่ว่าง
     ของเดิมเป็น <select> ที่กว้างตามตัวเลือกยาวสุด — ยืดเต็มเมื่อไหร่แถบบนเพี้ยนทันที */
  .combobox { position: relative; display: inline-flex; flex-direction: column; }

  .field .combobox { display: flex; }

  .combobox select {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
  }

  .combobox-input { position: relative; padding-inline-end: var(--space-8); }

  /* ลูกศรวาดเอง — ของเดิมเป็นลูกศรของ OS ซึ่งไม่ตามธีมและโหมดมืด */
  .combobox::after {
    content: "";
    position: absolute;
    inset-inline-end: var(--space-3);
    inset-block-start: 50%;
    width: var(--choice-arrow-wide);
    height: var(--choice-arrow-tall);
    translate: 0 -50%;
    background: var(--color-text-muted);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    pointer-events: none;
  }

  .combobox[data-open="true"]::after { rotate: 180deg; }

  /* select ที่ JS ยังไม่ครอบ (เช่น JS พัง) ต้องไม่หลุดธีมไปทั้งกล่อง
     ‼️ ตัวรายการที่กางออกมายังเป็นของ OS อยู่ดี — นี่คือทางสำรอง ไม่ใช่สิ่งที่ตั้งใจให้ผู้ใช้เห็น */
  .field select {
    appearance: none;
    padding-inline-end: var(--space-8);
  }

  .combobox-list {
    position: absolute;
    inset-block-start: calc(100% + var(--space-1));
    inset-inline: 0;
    z-index: 20;
    max-height: 18rem;
    overflow-y: auto;
    margin: 0;
    padding: var(--space-1);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-md);
    list-style: none;
  }

  .combobox-option,
  .combobox-empty,
  .combobox-more {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 44px;
    justify-content: center;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
  }

  .combobox-option { cursor: pointer; }

  /* ไฮไลต์ด้วยพื้นหลัง ไม่ใช่สีตัวอักษรอย่างเดียว — คนตาบอดสีต้องเห็นว่าอยู่แถวไหน */
  .combobox-option[aria-selected="true"] {
    background: var(--color-brand-primary);
    color: var(--color-brand-on-primary);
  }

  .combobox-option[aria-selected="true"] .combobox-hint { color: inherit; opacity: .85; }
  .combobox-option:hover { background: var(--color-surface-page); }

  .combobox-hint { color: var(--color-text-muted); font-size: var(--text-sm); }

  .combobox-empty,
  .combobox-more { color: var(--color-text-muted); font-size: var(--text-sm); }

  .combobox-more { cursor: pointer; text-align: center; }

  /* ---------------------------------------------------------------- ตาราง */

  .table-wrap { overflow-x: auto; }

  /* ‼️ ค่ารูปทรงของตารางมาจาก component.table ใน DESIGN.md ไม่ใช่เขียนดิบที่นี่
     เดิมเขียนดิบ ผลคือเอาดีไซน์จากภายนอกเข้ามาแล้วสีเปลี่ยนตาม แต่แถวยังสูงเท่าเดิม */
  .table { font-size: var(--table-font-size); }

  .table th, .table td {
    padding: var(--table-cell-padding);
    height: var(--table-row-height);
    border-block-end: 1px solid var(--color-border-normal);
    text-align: start;
    vertical-align: middle;
  }

  .table thead th {
    background: var(--table-head-background);
    padding: var(--table-head-padding);
    height: auto;
    color: var(--color-text-strong);
    font-weight: var(--weight-medium);
    white-space: nowrap;
  }

  .table th a { color: inherit; text-decoration: none; display: inline-flex; gap: var(--space-1); }
  .table .num { text-align: end; font-variant-numeric: tabular-nums; }
  .table tbody tr:hover { background: var(--color-surface-raised); }
  .table .actions { display: flex; gap: var(--space-1); justify-content: end; }

  /* บนมือถือยุบเป็นการ์ด ห้าม scroll แนวนอน */
  @media (max-width: 768px) {
    .table thead { display: none; }
    .table tbody tr {
      display: block;
      border: 1px solid var(--color-border-normal);
      border-radius: var(--radius-lg);
      padding: var(--space-3);
      margin-block-end: var(--space-3);
    }
    .table td {
      display: flex;
      justify-content: space-between;
      gap: var(--space-3);
      border: 0;
      padding: var(--space-1) 0;
    }
    .table td::before {
      content: attr(data-label);
      color: var(--color-text-muted);
      font-size: var(--text-sm);
    }
    .table td[data-primary]::before { content: none; }
    .table td[data-primary] { font-weight: var(--weight-bold); color: var(--color-text-strong); }
  }

  /* ---------------------------------------------------------------- สถานะ */

  .empty-state, .error-state {
    text-align: center;
    padding: var(--space-12) var(--space-4);
    color: var(--color-text-muted);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: center;
  }

  .empty-state h3, .error-state h3 { color: var(--color-text-strong); }

  .skeleton {
    background: var(--color-surface-raised);
    border-radius: var(--radius-sm);
    height: 1em;
    animation: pulse 1.4s ease-in-out infinite;
  }

  @keyframes pulse { 50% { opacity: .5; } }

  /* ---------------------------------------------------------------- toast */

  /* ต้องลอย ห้ามแทรกในหน้า เพราะแบบแทรกจะดัน component อื่นเลื่อนตำแหน่ง */
  .toasts {
    position: fixed;
    inset-block-end: var(--space-4);
    inset-inline-end: var(--space-4);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: min(380px, calc(100vw - var(--space-8)));
  }

  .toast {
    display: flex;
    gap: var(--space-3);
    align-items: start;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-normal);
    background: var(--color-surface-card);
    box-shadow: var(--shadow-lg);
    animation: toast-in var(--duration-normal) var(--ease-enter);
  }

  /* ‼️ ไม่ใช้แถบสีหนาข้างซ้าย โดยตั้งใจ
     มันคือลายเซ็นที่จำได้ทันทีว่าเป็น UI ที่ AI สร้าง และซ้ำซ้อนด้วย
     เพราะมาตรฐานบังคับให้แต่ละแบบต่างกันทั้งสีและไอคอนอยู่แล้ว
     ปล่อยให้ไอคอนทำหน้าที่สื่อความหมาย ส่วนกรอบอยู่เป็นกลาง */
  .toast .toast-icon { flex-shrink: 0; }

  .toast[data-type="success"] .toast-icon { color: var(--color-state-success); }
  .toast[data-type="warning"] .toast-icon { color: var(--color-state-warning); }
  .toast[data-type="danger"]  .toast-icon { color: var(--color-state-danger); }
  .toast[data-type="info"]    .toast-icon { color: var(--color-state-info); }

  .toast .ref { color: var(--color-text-muted); font-size: var(--text-sm); }

  @keyframes toast-in {
    from { opacity: 0; transform: translateY(var(--space-2)); }
  }

  /* ---------------------------------------------------------------- modal */

  dialog {
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-lg);
    background: var(--color-surface-card);
    color: var(--color-text-normal);
    padding: 0;
    max-width: min(560px, calc(100vw - var(--space-8)));
    width: 100%;

    /* ‼️ ต้องเป็น fit-content ห้ามปล่อยเป็น auto
       เบราว์เซอร์วาง <dialog> แบบ modal เป็น absolute พร้อม inset: 0
       height: auto จึงยืดเต็มความสูงที่มี แล้วโดน max-height ของ UA หนีบไว้
       ผลคือกล่องที่มีข้อความสองบรรทัด สูง 774px บนจอ 812px
       เนื้อหากองอยู่ด้านบน ที่เหลือเป็นพื้นว่าง — ดูเหมือนแผงเต็มจอ ไม่ใช่กล่องยืนยัน
       มองจากโค้ดไม่เห็นเลย เห็นตอนวัดความสูงจริงเทียบกับความสูงของเนื้อหา */
    height: fit-content;
  }

  dialog::backdrop { background: var(--color-overlay); }

  .dialog-head, .dialog-foot {
    padding: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .dialog-head { border-block-end: 1px solid var(--color-border-normal); }
  .dialog-foot { border-block-start: 1px solid var(--color-border-normal); justify-content: end; }
  .dialog-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }

  @media (max-width: 768px) {
    /* ‼️ max-height กับ margin ต้องสั่งด้วย ไม่งั้นไม่เต็มจอจริงตามสเปค
       UA ตั้ง max-height: calc(100% - 38px) และ margin: auto ให้ dialog แบบ modal
       สั่งแค่ height: 100dvh จึงถูกหนีบเหลือ 774px บนจอสูง 812px
       เหลือขอบบนล่างข้างละ 19px ซึ่งอ่านออกมาเป็น "กล่องที่พยายามเต็มจอแต่ไม่สุด" */
    dialog {
      max-width: 100vw;
      height: 100dvh;
      max-height: 100dvh;
      margin: 0;
      border-radius: 0;
    }
  }

  /* กล่องยืนยัน — เล็กกว่า modal ปกติ และไม่เต็มจอบนมือถือ
     กล่องที่มีข้อความสองบรรทัดแล้วกินเต็มจอ ทำให้ผู้ใช้เสียบริบทว่ากดมาจากแถวไหน */
  dialog.dialog-sm {
    max-width: min(420px, calc(100vw - var(--space-8)));
  }

  @media (max-width: 768px) {
    /* กล่องยืนยันไม่เต็มจอ — ต้องคืนค่า margin กับ max-height ที่ dialog ปกติสั่งไว้ด้วย */
    dialog.dialog-sm {
      height: fit-content;
      max-height: calc(100dvh - var(--space-6));
      margin: auto;
      max-width: calc(100vw - var(--space-6));
      border-radius: var(--radius-lg);
    }
  }

  /* ฟอร์มของปุ่มที่ต้องยืนยัน — อยู่ในแถวตารางจึงต้องไม่ดันความสูงของแถว */
  .confirm-form { display: inline-flex; }

  /* ------------------------------------------------------------ แนบไฟล์ */

  .upload { gap: var(--space-2); }

  /* ‼️ กรอบลากวางถูกสร้างโดย app.js — ถ้า JS ไม่ทำงาน ผู้ใช้จะเห็น input ปกติ
     ซึ่งใช้งานได้จริง ดีกว่ากรอบสวยๆ ที่ลากแล้วไม่เกิดอะไร */
  .upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);

    /* ‼️ <button> หดตามเนื้อหาโดยปริยาย ต้องสั่งความกว้างเอง
       ไม่สั่งแล้วได้กรอบกว้าง 42px ที่ข้อความไหลลงเป็นแนวตั้ง
       และดันกล่อง modal จนเลื่อนแนวนอนได้ ซึ่งผิดกฎ "หน้าห้ามเลื่อนแนวนอน" */
    width: 100%;
    min-height: calc(var(--space-16) + var(--space-12));
    padding: var(--space-5);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    color: var(--color-text-muted);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-standard),
                background var(--duration-fast) var(--ease-standard);
  }

  .upload-zone:hover,
  .upload-zone:focus-visible { border-color: var(--color-brand-primary); }

  /* สถานะตอนลากผ่าน — ต้องเห็นชัดว่าปล่อยได้แล้ว ไม่งั้นผู้ใช้ไม่รู้ว่าวางตรงไหน */
  .upload-zone[data-dragging="true"] {
    border-color: var(--color-brand-primary);
    background: var(--color-surface-card);
    border-style: solid;
  }

  .upload-list { display: flex; flex-direction: column; gap: var(--space-2); margin-block-start: var(--space-3); }

  .upload-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-md);
  }

  .upload-item[data-invalid="true"] { border-color: var(--color-state-danger); }

  /* ชื่อไฟล์ยาวต้องหดได้ ไม่ใช่ดันปุ่มลบตกขอบ */
  .upload-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .upload-size { color: var(--color-text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
  .upload-why  { color: var(--color-state-danger); font-size: var(--text-sm); }
  .upload-thumb { width: var(--space-10); height: var(--space-10); object-fit: cover; border-radius: var(--radius-sm); flex: none; }

  /* แถบความคืบหน้า — เขียนเป็น element ของเราเอง ไม่ใช้ <progress> ของ OS
     ด้วยเหตุผลเดียวกับ control อื่นในข้อ 5.12 คือจัดสไตล์ข้ามเบราว์เซอร์ไม่ได้จริง */
  .upload-progress {
    height: var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-surface-raised);
    overflow: hidden;
    margin-block-start: var(--space-3);
  }

  /* ‼️ ขยับด้วย transform: scaleX() ห้ามขยับ width
     design.md หมวด motion เขียนไว้เองว่า "เคลื่อนแค่ transform และ opacity เท่านั้น"
     เคลื่อน width ทำให้เบราว์เซอร์คำนวณ layout ใหม่ทุกเฟรมแล้วกระตุก
     ซึ่งเห็นชัดที่สุดตอนอัปโหลดไฟล์ใหญ่ เพราะแถบขยับถี่ๆ ตลอดเวลาที่รอ

     JS สั่งความคืบหน้าด้วย el.style.transform = 'scaleX(0.42)' */
  .upload-progress > i {
    display: block;
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: var(--color-brand-primary);
    transition: transform var(--duration-fast) var(--ease-standard);
  }

  /* ------------------------------------------------------------- tooltip */

  /* ‼️ tooltip ของ OS คือจุดที่ระบบหลุดคาแรกเตอร์ เหมือน select ในข้อ 5.12
     มันขึ้นช้าประมาณ 1 วินาที · ใช้ฟอนต์และสีของ Windows · ไม่ตามธีมที่ระบบเลือก
     และกฎบังคับว่าปุ่มไอคอนล้วน "ทุกตัว" ต้องมี tooltip จึงเจอทุกหน้า

     ‼️ ห้ามใส่ข้อมูลที่จำเป็นไว้ใน tooltip — บนมือถือไม่มี hover
        ตัวนี้จึงขึ้นตอน focus ด้วย เพื่อให้คีย์บอร์ดและจอสัมผัสยังเห็น */
  .tooltip {
    position: fixed;
    z-index: 60;
    max-width: var(--layout-field-min-width);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-text-strong);
    color: var(--color-surface-page);
    font-size: var(--text-sm);
    line-height: var(--leading-tight);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-standard);
  }

  .tooltip[data-shown="true"] { opacity: 1; }

  /* ---------------------------------------------------------------- เมนู */

  .nav { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); }

  .nav a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text-normal);
    text-decoration: none;
  }

  .nav a:hover { background: var(--color-surface-raised); }

  .nav a[aria-current="page"] {
    background: var(--color-brand-primary);
    color: var(--color-brand-on-primary);
  }

  /* ---------------------------------------------- เมนูหลังบ้านแบบกลุ่ม (partials/nav.php · app.js "เมนูกลุ่ม")

     ‼️ ขยาย/ยุบด้วย grid-template-rows 0fr → 1fr ไม่ใช่ height — ไม่ต้องรู้ความสูงจริง และไม่ต้องคำนวณใน JS
     ‼️ กลุ่มที่ปิดต้อง visibility: hidden — ลิงก์ข้างในจะได้ไม่ถูก Tab เข้าไปทั้งที่มองไม่เห็น
     ‼️ ตอนย่อเหลือไอคอน เมนูย่อยไม่กางในแถบ — เปิดเป็น popover ข้างไอคอนแทน (ตำแหน่งตั้งจาก JS)   */

  .sidebar .nav { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-block-end: var(--space-20); }

  .nav-tree, .nav-sub { margin: 0; padding: 0; list-style: none; }
  .nav-tree { display: flex; flex-direction: column; gap: var(--space-1); }

  .nav .nav-link,
  .nav-group-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    inline-size: 100%;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    color: var(--color-text-normal);
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  }
  .nav .nav-link:hover,
  .nav-group-toggle:hover { background: var(--color-surface-raised); color: var(--color-text-strong); }
  .nav .nav-link:focus-visible,
  .nav-group-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }

  .nav-group-toggle .nav-label { flex: 1; text-wrap: balance; }
  .nav-chevron { display: inline-flex; color: var(--color-text-muted); transition: transform var(--duration-normal) var(--ease-standard); }
  .nav-group[data-open="true"] > .nav-group-toggle .nav-chevron { transform: rotate(180deg); }

  /* กลุ่มที่มีหน้าปัจจุบันอยู่ข้างใน — บอกได้แม้กลุ่มจะปิดอยู่ */
  .nav-group[data-active="true"] > .nav-group-toggle { color: var(--color-text-strong); font-weight: var(--weight-bold); }
  .nav-group[data-active="true"] > .nav-group-toggle > .icon,
  .nav .nav-top[aria-current="page"] > .icon { color: var(--color-brand-primary); }

  /* หน้าปัจจุบัน: พื้นอ่อน + แถบสีแบรนด์ด้านหน้า + ตัวหนา — ตัวอักษรสีเข้มปกติ (ผ่าน contrast ทั้งสองโหมด) */
  .nav .nav-link[aria-current="page"] {
    background: var(--color-brand-accent-soft);
    color: var(--color-text-strong);
    font-weight: var(--weight-bold);
    box-shadow: inset var(--space-1) 0 0 var(--color-brand-primary);
  }

  .nav-group-panel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows var(--duration-normal) var(--ease-standard), visibility 0s linear var(--duration-normal);
  }
  .nav-group[data-open="true"] > .nav-group-panel {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows var(--duration-normal) var(--ease-standard), visibility 0s;
  }
  /* สถานะตั้งต้นตอนโหลดหน้า (กลุ่มที่จำไว้) ต้องไม่เล่นอนิเมชัน — ไม่งั้นทุกหน้าที่เปิดเมนูจะกระพือ */
  .nav[data-nav-init] .nav-group-panel,
  .nav[data-nav-init] .nav-chevron { transition: none; }
  .nav-group-inner { min-height: 0; overflow: hidden; }

  .nav-sub {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-inline-start: var(--space-5);
    padding: var(--space-1) 0 var(--space-2) var(--space-3);
    border-inline-start: 1px solid var(--color-border-normal);
  }
  .nav .nav-sub-link { min-height: var(--space-10); color: var(--color-text-muted); }
  .nav-popover-title { display: none; }

  /* ---- ย่อเหลือไอคอน (desktop) */
  .sidebar[data-collapsed="true"] :is(.nav-top, .nav-group-toggle) .nav-label,
  .sidebar[data-collapsed="true"] .nav-chevron { display: none; }
  .sidebar[data-collapsed="true"] :is(.nav-top, .nav-group-toggle) { justify-content: center; padding-inline: 0; }
  .sidebar[data-collapsed="true"] .nav-group-panel { display: none; }
  /* ย่อแล้วต้องยังเห็นว่าอยู่หน้าไหน — ไอคอนของกลุ่ม/ลิงก์ที่ active เป็นพื้นสีแบรนด์เต็ม */
  .sidebar[data-collapsed="true"] .nav-group[data-active="true"] > .nav-group-toggle,
  .sidebar[data-collapsed="true"] .nav .nav-top[aria-current="page"] {
    background: var(--color-brand-primary);
    color: var(--color-brand-on-primary);
    box-shadow: none;
  }
  .sidebar[data-collapsed="true"] .nav-group[data-active="true"] > .nav-group-toggle > .icon,
  .sidebar[data-collapsed="true"] .nav .nav-top[aria-current="page"] > .icon { color: inherit; }
  .sidebar[data-collapsed="true"] .nav-group[data-popover="true"] > .nav-group-toggle { box-shadow: inset 0 0 0 2px var(--color-brand-primary); }

  .sidebar[data-collapsed="true"] .nav-group[data-popover="true"] > .nav-group-panel {
    display: block;
    position: fixed;
    z-index: 55;
    min-inline-size: var(--layout-field-min-width);
    padding: var(--space-2);
    visibility: visible;
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: nav-popover-in var(--duration-fast) var(--ease-enter);
  }
  .sidebar[data-collapsed="true"] .nav-group[data-popover="true"] .nav-group-inner { overflow: visible; }
  .sidebar[data-collapsed="true"] .nav-group[data-popover="true"] .nav-popover-title {
    display: block;
    margin: 0;
    padding: var(--space-1) var(--space-3) var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
  }
  .sidebar[data-collapsed="true"] .nav-group[data-popover="true"] .nav-sub { margin: 0; padding: 0; border: 0; }
  .sidebar[data-collapsed="true"] .nav-group[data-popover="true"] .nav-sub-link { color: var(--color-text-normal); }

  @keyframes nav-popover-in {
    from { opacity: 0; transform: translateX(calc(var(--space-1) * -1)); }
  }

  /* มือถือ: ไม่มีโหมดย่อ — กลับเป็น accordion เต็มความกว้างแม้เคยย่อไว้บนจอใหญ่ */
  @media (max-width: 768px) {
    .sidebar[data-collapsed="true"] :is(.nav-top, .nav-group-toggle) .nav-label { display: inline; }
    .sidebar[data-collapsed="true"] .nav-chevron { display: inline-flex; }
    .sidebar[data-collapsed="true"] :is(.nav-top, .nav-group-toggle) { justify-content: flex-start; padding-inline: var(--space-3); }
    .sidebar[data-collapsed="true"] .nav-group-panel { display: grid; }
    .sidebar[data-collapsed="true"] .nav-group[data-active="true"] > .nav-group-toggle { background: none; color: var(--color-text-strong); }
    .sidebar[data-collapsed="true"] .nav-group[data-active="true"] > .nav-group-toggle > .icon,
    .sidebar[data-collapsed="true"] .nav .nav-top[aria-current="page"] > .icon { color: var(--color-brand-primary); }
    .sidebar[data-collapsed="true"] .nav .nav-top[aria-current="page"] {
      background: var(--color-brand-accent-soft);
      color: var(--color-text-strong);
      box-shadow: inset var(--space-1) 0 0 var(--color-brand-primary);
    }
  }

  .brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-3);
    color: var(--color-text-strong);
    font-weight: var(--weight-bold);
  }

  /* ‼️ เส้นแบ่งเป็นของ sidebar ไม่ใช่ของ .brand
     layout auth เอา .brand ไปวางบนหน้าเข้าสู่ระบบด้วย ซึ่งไม่มี sidebar
     ปล่อยไว้จะได้เส้นใต้สั้นๆ ค้างอยู่ใต้ชื่อร้านโดยไม่มีใครสั่ง */
  .sidebar .brand { border-block-end: 1px solid var(--color-border-normal); }

  /* ‼️ โหมดแถบบน — เว็บสาธารณะใช้ sidebar ไม่ได้ มันกินพื้นที่มือถือและไม่มีใครทำกัน
     มาจาก APP_NAV_STYLE ที่ layout อ่าน ซึ่งตรงกับ layout.nav ใน DESIGN.md */
  .shell[data-nav="header"] { flex-direction: column; }
  .shell[data-nav="header"] .brand { border: 0; padding: 0; }
  .shell[data-nav="header"] .brand-name { letter-spacing: .18em; font-weight: var(--weight-medium); }
  .shell[data-nav="header"] .nav { flex-direction: row; gap: var(--space-5); padding: 0; }
  .shell[data-nav="header"] .nav a { padding: var(--space-2) 0; background: none; }
  .shell[data-nav="header"] .nav a[aria-current] { text-decoration: underline; text-underline-offset: var(--space-2); }
  .shell[data-nav="header"] .nav svg { display: none; }

  /* จอแคบ เมนูตกลงมาเป็นแถวที่สอง ไม่ใช่ซ่อนหาย — การซ่อนเมนูบนมือถือคือการทำให้กดไม่ได้ */
  @media (max-width: 640px) {
    .shell[data-nav="header"] .topbar { flex-wrap: wrap; row-gap: var(--space-2); }
    .shell[data-nav="header"] .nav { order: 3; width: 100%; }

    /* ‼️ บนมือถือลิงก์เมนูคือปุ่ม ต้องได้พื้นที่กด 44px ตามกฎ
       บนเดสก์ท็อปไม่ต้อง เพราะเมาส์ไม่ได้มีความคลาดเคลื่อนแบบนิ้ว */
    .shell[data-nav="header"] .nav a,
    .shell[data-nav="header"] .brand { min-height: 44px; display: inline-flex; align-items: center; }
  }

  /* ---------------------------------------------------------------- อื่นๆ */

  .card {
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
  }

  /* ‼️ "ประเภท" กับ "สถานะ" ต้องต่างกันด้วยรูปทรง ไม่ใช่แค่สี (design.md 5.6)
     เดิม .badge มีแบบเดียว ทั้งสองอย่างจึงหน้าตาเหมือนกันหมด
     กวาดตาแล้วแยกความหมายไม่ออก ซึ่งเป็นอาการที่ feedback รอบแรกรายงานไว้ตรงๆ

     รูปแบบเส้นขอบมาจาก component.badge ใน DESIGN.md เพื่อให้ดีไซน์กำหนดได้
     ไม่ใช่ฝังไว้ที่นี่แล้วดีไซน์เปลี่ยนไม่ได้ */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--badge-radius);
    border: 1px var(--badge-status-border-style) var(--color-border-strong);
    font-size: var(--text-sm);
    white-space: nowrap;
  }

  .badge-type { border-style: var(--badge-type-border-style); }

  .toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: end;
    padding-block-end: var(--space-4);
  }

  .pagination { display: flex; gap: var(--space-1); align-items: center; flex-wrap: wrap; }
  .pagination [aria-current="page"] { background: var(--color-brand-primary); color: var(--color-brand-on-primary); }

  .support-fab {
    position: fixed;
    inset-block-end: var(--space-5);
    inset-inline-start: var(--space-5);
    z-index: 50;
    border-radius: var(--radius-full);
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-strong);
    box-shadow: var(--shadow-md);
  }

  .prose { max-width: var(--prose-max-width); display: flex; flex-direction: column; gap: var(--prose-paragraph-gap); }
  .prose h2 { margin-block-start: var(--prose-heading-gap); font-weight: var(--weight-normal); font-size: var(--text-xl); }
  .prose ol, .prose ul { padding-inline-start: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
  .prose figure { display: flex; flex-direction: column; gap: var(--space-2); }
  .prose figcaption { color: var(--color-text-muted); font-size: var(--text-sm); }

  /* ------------------------------------------------ ส่วนเปิดหน้า (hero)

     ‼️ component ชุดนี้เป็นของหน้าสาธารณะ ต่างจากที่เหลือในไฟล์ซึ่งเป็นของหลังบ้าน
        ค่าทุกตัวมาจาก component: ใน DESIGN.md ห้ามเขียนค่าดิบเพิ่มที่นี่          */

  .hero {
    display: grid;
    gap: var(--hero-gap);
    align-items: center;
    min-height: var(--hero-min-height-mobile);
    padding-block: var(--space-12);
  }

  .hero-body { display: flex; flex-direction: column; gap: var(--space-5); }

  .hero-eyebrow {
    font-size: var(--text-sm);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .hero-title {
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
    font-weight: var(--weight-normal);
    color: var(--color-text-strong);
  }

  .hero-lead {
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    color: var(--color-text-normal);
    max-width: 46ch;
  }

  .hero-image {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: var(--hero-image-ratio);
    object-fit: cover;
    border-radius: var(--radius-lg);
  }

  @media (min-width: 768px) {
    .hero {
      grid-template-columns: 1fr 1fr;
      min-height: var(--hero-min-height);
      padding-block: var(--space-16);
    }
  }

  /* ------------------------------------------------ แหกกรอบความกว้างของหน้า

     ‼️ กฎ 5.4 บอกว่าหนึ่งหน้ามีความกว้างเดียว ซึ่งถูกสำหรับหน้าหลังบ้าน
        แต่หน้าสาธารณะที่ทุกอย่างอยู่ในกรอบ 1120px จะไม่มีอะไรสะดุดตาเลย
        ข้อ 5.16 จึงอนุญาตให้แหกกรอบได้ และนี่คือเครื่องมือที่ใช้แหก

     ‼️ ใช้ 100vw ไม่ได้ เพราะมันรวมความกว้างของ scrollbar แล้วจะเกิด scroll แนวนอน
        ต้องใช้ 100dvw ซึ่งไม่รวม และ fallback เป็น 100% สำหรับเบราว์เซอร์เก่า */
  .bleed {
    width: 100%;
    width: 100dvw;
    margin-inline: calc(50% - 50dvw);
  }

  /* ------------------------------------------------ ส่วนเปิดแบบเต็มจอ ข้อความทับภาพ */

  .hero-full { position: relative; display: grid; align-items: end; min-height: 82svh; padding: 0; }
  .hero-full > .hero-media { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; }

  /* ‼️ ชั้นไล่สีคั่นระหว่างภาพกับตัวอักษร ไม่ใช่ของตกแต่ง
     ภาพถ่ายมีทั้งส่วนสว่างและมืด วางตัวอักษรลงไปตรงๆ แล้ววัด contrast ไม่ผ่านเป็นเรื่องปกติ */
  .hero-full::after {
    content: "";
    grid-area: 1 / 1;
    background: var(--hero-scrim);
  }

  .hero-full > .hero-body {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    align-self: end;
    max-width: var(--layout-max-width);
    margin-inline: auto;
    padding: var(--space-16) var(--space-6);
    width: 100%;
  }

  /* ‼️ ตัวอักษรบนภาพใช้สีคงที่ ไม่ใช่ token ของธีม
     เพราะพื้นหลังคือภาพ ไม่ใช่พื้นของระบบ จึงไม่เปลี่ยนตามโหมดสว่าง/มืด */
  .hero-full .hero-title,
  .hero-full .hero-lead,
  .hero-full .hero-eyebrow { color: var(--hero-on-image); }
  .hero-full .hero-title { font-size: var(--text-display); line-height: var(--leading-tight); }
  .hero-full .hero-lead { max-width: 52ch; }

  /* ------------------------------------------------ ตะแกรงการ์ดสินค้า */

  .product-grid {
    display: grid;
    gap: var(--product-card-grid-gap);
    grid-template-columns: repeat(auto-fill, minmax(var(--layout-tile-min-width), 1fr));
    list-style: none;
    padding: 0;
  }

  .product-card {
    display: flex;
    flex-direction: column;
    gap: var(--product-card-gap);
    text-decoration: none;
    color: inherit;
  }

  .product-card-image {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: var(--product-card-image-ratio);
    object-fit: cover;
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    transition: opacity var(--duration-fast) var(--ease-standard);
  }

  .product-card:hover .product-card-image { opacity: .88; }

  .product-card-name {
    font-size: var(--product-card-name-size);
    color: var(--color-text-strong);
  }

  .product-card-meta {
    font-size: var(--product-card-meta-size);
    color: var(--color-text-muted);
  }

  /* ------------------------------------------------ รายการข่าว */

  .news-list { list-style: none; padding: 0; display: flex; flex-direction: column; }
  .news-list > li + li { border-block-start: var(--news-item-divider-style); }

  .news-item {
    display: grid;
    gap: var(--news-item-gap);
    padding-block: var(--space-6);
    text-decoration: none;
    color: inherit;
  }

  .news-item-image {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: var(--news-item-image-ratio);
    object-fit: cover;
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
  }

  .news-item-body { display: flex; flex-direction: column; gap: var(--space-2); }
  .news-item-date { font-size: var(--text-sm); color: var(--color-text-muted); }

  .news-item-title {
    font-size: var(--text-xl);
    line-height: var(--leading-tight);
    color: var(--color-text-strong);
  }

  .news-item:hover .news-item-title { color: var(--color-brand-primary); }
  .news-item-lead { color: var(--color-text-normal); }

  @media (min-width: 620px) {
    .news-item { grid-template-columns: var(--news-item-image-width) 1fr; align-items: start; }
  }

  /* ------------------------------------------------ ส่วนของหน้าสาธารณะ */

  .page-section { padding-block: var(--space-12); }
  .page-section + .page-section { border-block-start: 1px solid var(--color-border-normal); }
  .page-section > h2 { font-size: var(--text-2xl); font-weight: var(--weight-normal); }
  .page-section > .lead { color: var(--color-text-muted); margin-block-end: var(--space-8); }

  .split { display: grid; gap: var(--space-10); align-items: center; }
  .split-media { inline-size: 100%; block-size: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-lg); }
  @media (min-width: 768px) { .split { grid-template-columns: 1fr 1fr; } }

  /* ================================================================ เว็บสาธารณะ

     ‼️ ทุกอย่างข้างล่างเป็นของ layouts/site.php และ partials/blocks/ — หลังบ้านไม่ใช้
     ‼️ ค่าทุกตัวมาจาก token ของ project/DESIGN.md (component.site · component.showcase · component.industry)
     ‼️ เว็บสาธารณะเป็นโหมดสว่างอย่างเดียว (site.php บังคับ data-theme="light") — แต่ห้ามเขียนสีตายตัว
        ใช้ token เสมอ เพื่อให้วันที่เปิดโหมดมืดไม่ต้องรื้อ                                              */

  .site-body { background: var(--color-surface-page); }
  .site-main { flex: 1; }
  .site-main:focus { outline: none; }
  .site-main > .page { gap: 0; }

  /* หัวเพจของหน้าสาธารณะที่ไม่มี hero (บทความ นโยบาย) — ให้อยู่ในกรอบเดียวกับเนื้อหา */
  .site-main > .page > .page-head {
    width: min(100% - 2 * var(--site-gutter-mobile), var(--layout-max-width));
    margin: var(--space-12) auto var(--space-6);
  }

  .container,
  .container-wide {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--site-gutter-mobile);
  }
  .container      { max-width: calc(var(--layout-max-width) + 2 * var(--site-gutter)); }
  .container-wide { max-width: calc(var(--layout-max-width) + 10 * var(--site-gutter)); }

  @media (min-width: 768px) {
    .container, .container-wide { padding-inline: var(--site-gutter); }
  }

  .skip-link {
    position: absolute;
    inset-inline-start: var(--space-4);
    top: var(--space-2);
    z-index: 100;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-surface-card);
    color: var(--color-text-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-200%);
  }
  .skip-link:focus { transform: none; }

  /* ---------------------------------------------------------------- ปุ่มทรงแคปซูล */

  .btn-pill {
    border-radius: var(--radius-full);
    padding-inline: var(--space-5);
    font-weight: var(--weight-bold);
    white-space: nowrap;
  }
  .btn-lg { min-height: var(--space-12); padding-inline: var(--space-6); font-size: var(--text-base); }

  .btn-pill.btn-primary { box-shadow: var(--shadow-sm); }
  .btn-pill.btn-secondary { background: var(--color-surface-card); color: var(--color-text-strong); }
  .btn-pill.btn-secondary:hover { border-color: var(--color-brand-primary); background: var(--color-surface-card); }

  .btn-outline {
    border-color: var(--color-brand-primary);
    background: var(--color-surface-card);
    color: var(--color-brand-primary);
  }
  .btn-outline:hover { background: var(--color-brand-primary); color: var(--color-brand-on-primary); }

  /* บนแถบสีเข้ม (CTA band) — พื้นขาวตัวหนังสือส้มเข้ม 4.79:1 */
  .btn-light { background: var(--color-surface-card); color: var(--color-brand-primary); box-shadow: var(--shadow-md); }
  .btn-light:hover { background: var(--color-surface-card); box-shadow: var(--shadow-lg); }

  /* ‼️ มีพื้นทึบครึ่งหนึ่งของ ink รองไว้ — ไม่งั้นตัวหนังสือขาวที่วางบนแสงส้มของแถบจะ contrast ไม่ถึง */
  .btn-ghost-light {
    border-color: color-mix(in srgb, var(--color-brand-on-ink) 70%, transparent);
    background: color-mix(in srgb, var(--color-brand-ink) 40%, transparent);
    color: var(--color-brand-on-ink);
  }
  .btn-ghost-light:hover { background: color-mix(in srgb, var(--color-brand-ink) 65%, transparent); }

  .btn-arrow { transition: transform var(--duration-fast) var(--ease-standard); }
  .btn:hover .btn-arrow { transform: translateX(var(--space-1)); }

  .text-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 44px;
    color: var(--color-brand-link);
    font-weight: var(--weight-medium);
    text-decoration: none;
  }
  .text-link:hover { text-decoration: underline; text-underline-offset: var(--space-1); }

  /* ทั้งการ์ดกดได้ด้วยลิงก์ตัวเดียว — ไม่ต้องห่อทั้งการ์ดด้วย <a> ที่มีหัวข้ออยู่ข้างใน */
  .stretched::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

  /* ---------------------------------------------------------------- ชิ้นส่วนกลางของบล็อก */

  .eyebrow-pill {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-brand-accent-soft);
    color: var(--color-text-strong);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
  }

  .section { padding-block: var(--site-section-pad-mobile); }
  .section[data-tone="raised"] { background: var(--color-surface-raised); }
  .section[data-tone="tint"] { background: linear-gradient(180deg, var(--color-surface-tint), var(--color-surface-page)); }
  @media (min-width: 768px) { .section { padding-block: var(--site-section-pad); } }

  .section-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: var(--site-head-max-width);
    margin-block-end: var(--space-10);
  }
  .section-head[data-align="center"] { margin-inline: auto; text-align: center; align-items: center; }
  .section-head[data-align="center"] .eyebrow-pill { align-self: center; }

  .section-title {
    font-size: clamp(var(--text-xl), 2.6vw, var(--text-3xl));
    line-height: var(--leading-snug);
    font-weight: var(--weight-bold);
    color: var(--color-text-strong);
  }

  .section-lead { color: var(--color-text-normal); font-size: var(--text-lg); line-height: var(--leading-normal); }

  .block-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-2); }
  .block-actions.is-center { justify-content: center; margin-block-start: var(--space-10); }

  .icon-chip {
    display: inline-grid;
    place-items: center;
    width: var(--space-12);
    height: var(--space-12);
    border-radius: var(--radius-md);
    background: var(--color-brand-accent-soft);
    color: var(--color-brand-primary);
    transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  }
  .icon-chip .icon { width: var(--icon-lg); height: var(--icon-lg); }

  .check-list { display: flex; flex-direction: column; gap: var(--space-3); }
  .check-list li { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--color-text-normal); }
  .check-dot {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: var(--space-6);
    height: var(--space-6);
    margin-block-start: calc(var(--space-1) / 2);
    border-radius: var(--radius-full);
    background: var(--color-brand-primary);
    color: var(--color-brand-on-primary);
  }

  /* ---------------------------------------------------------------- header */

  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--color-surface-card);
    border-block-end: 1px solid transparent;
    transition: box-shadow var(--duration-normal) var(--ease-standard), border-color var(--duration-normal) var(--ease-standard);
  }
  .site-header[data-scrolled="true"] { box-shadow: var(--shadow-header); border-block-end-color: var(--color-border-normal); }

  .site-header-inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: var(--site-header-height-mobile);
  }

  .site-logo { display: inline-flex; align-items: center; min-height: 44px; flex: none; }
  .site-logo img { width: auto; height: var(--site-logo-height-mobile); }

  .site-actions { display: flex; align-items: center; gap: var(--space-3); margin-inline-start: auto; }

  .site-phone {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding-inline: var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    color: var(--color-text-strong);
    font-weight: var(--weight-medium);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    white-space: nowrap;
  }
  .site-phone:hover { border-color: var(--color-brand-primary); color: var(--color-brand-primary); }
  .site-actions .site-phone { display: none; }

  .site-nav-list { display: flex; }
  .site-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    color: var(--color-text-strong);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }
  .site-nav-link::after {
    content: "";
    position: absolute;
    inset-inline: var(--space-3);
    bottom: var(--space-1);
    height: 2px;
    border-radius: var(--radius-full);
    background: var(--color-brand-accent);
    transform: scaleX(0);
    transition: transform var(--duration-normal) var(--ease-standard);
  }
  .site-nav-link:hover::after,
  .site-nav-link[aria-current="page"]::after,
  .is-active > .site-nav-link::after { transform: scaleX(1); }

  .site-nav-caret { width: var(--icon-sm); height: var(--icon-sm); transition: rotate var(--duration-fast) var(--ease-standard); }
  [aria-expanded="true"] > .site-nav-caret { rotate: 180deg; }

  .has-menu { position: relative; }

  .site-menu {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3);
    background: var(--color-surface-card);
  }

  .site-menu-link {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text-strong);
    text-decoration: none;
  }
  .site-menu-link:hover, .site-menu-link[aria-current="page"] { background: var(--color-surface-raised); }
  .site-menu-link:hover .site-menu-icon { background: var(--color-brand-primary); color: var(--color-brand-on-primary); }

  .site-menu-icon {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: var(--space-10);
    height: var(--space-10);
    border-radius: var(--radius-md);
    background: var(--color-brand-accent-soft);
    color: var(--color-brand-primary);
    transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  }
  .site-menu-text { display: flex; flex-direction: column; gap: var(--space-1); padding-block: var(--space-1); }
  .site-menu-label { font-weight: var(--weight-medium); line-height: var(--leading-snug); }
  .site-menu-desc { color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-snug); }

  .site-nav-head, .site-nav-extra { display: none; }
  .site-backdrop { display: none; }

  /* ---- จอใหญ่: เมนูบนแถบ · เมนูย่อยกางลงมา */
  @media (min-width: 1280px) {
    .site-header-inner { min-height: var(--site-header-height); gap: var(--space-6); }
    .site-logo img { height: var(--site-logo-height); }
    .site-nav { margin-inline-start: auto; }
    .site-actions { margin-inline-start: 0; }
    .site-nav-toggle { display: none; }

    .site-menu {
      position: absolute;
      top: 100%;
      inset-inline-start: 50%;
      z-index: 5;
      width: min(var(--site-mega-width), 90vw);
      grid-template-columns: repeat(2, minmax(0, 1fr));
      border: 1px solid var(--color-border-normal);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
      translate: -50% 0;
      opacity: 0;
      visibility: hidden;
      transform: translateY(var(--space-2));
      transition: opacity var(--duration-fast) var(--ease-standard),
                  transform var(--duration-fast) var(--ease-standard),
                  visibility 0s linear var(--duration-fast);
    }

    /* สะพานล่องหนระหว่างหัวเมนูกับแผง — เลื่อนเมาส์ลงแล้วแผงไม่หายกลางทาง */
    .site-menu::before { content: ""; position: absolute; inset-inline: 0; bottom: 100%; height: var(--space-3); }

    .has-menu:hover > .site-menu,
    .site-header:not([data-enhanced]) .has-menu:focus-within > .site-menu,
    .has-menu > [aria-expanded="true"] + .site-menu {
      opacity: 1;
      visibility: visible;
      transform: none;
      transition-delay: 0s;
    }
  }

  @media (min-width: 1360px) {
    .site-actions .site-phone { display: inline-flex; }
  }

  /* ---- จอเล็กกว่า 1200: เมนูเป็น drawer ด้านขวา */
  @media (max-width: 1279.98px) {
    .site-nav {
      position: fixed;
      inset-block: 0;
      inset-inline-end: 0;
      z-index: 60;
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
      width: min(var(--site-drawer-width), 100%);
      padding: var(--space-4);
      overflow-y: auto;
      overscroll-behavior: contain;
      background: var(--color-surface-card);
      box-shadow: var(--shadow-lg);
      transform: translateX(100%);
      visibility: hidden;
      transition: transform var(--duration-slow) var(--ease-standard), visibility 0s linear var(--duration-slow);
    }
    .site-header[data-nav-open="true"] .site-nav {
      transform: none;
      visibility: visible;
      transition: transform var(--duration-slow) var(--ease-enter), visibility 0s;
    }

    .site-nav-head { display: flex; align-items: center; justify-content: space-between; }
    .site-nav-close { color: var(--color-text-strong); }
    .site-nav-head img { width: auto; height: var(--site-logo-height-mobile); }

    .site-nav-list { flex-direction: column; gap: var(--space-1); }
    .site-nav-link { width: 100%; justify-content: space-between; font-size: var(--text-base); }
    .site-nav-link::after { display: none; }
    .is-active > .site-nav-link, .site-nav-link[aria-current="page"] { color: var(--color-brand-primary); }

    .site-menu { display: none; padding: 0 0 var(--space-2) var(--space-2); }
    .has-menu > [aria-expanded="true"] + .site-menu { display: grid; }

    .site-nav-extra {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      margin-block-start: auto;
      padding-block-start: var(--space-4);
      border-block-start: 1px solid var(--color-border-normal);
    }
    .site-nav-extra .btn, .site-nav-extra .site-phone { justify-content: center; }

    .site-backdrop {
      display: block;
      position: fixed;
      inset: 0;
      z-index: 55;
      background: var(--color-overlay);
      opacity: 0;
      visibility: hidden;
      transition: opacity var(--duration-slow) var(--ease-standard), visibility 0s linear var(--duration-slow);
    }
    .site-header[data-nav-open="true"] .site-backdrop { opacity: 1; visibility: visible; transition-delay: 0s; }
  }

  @media (max-width: 639.98px) {
    .site-actions .site-cta { display: none; }
  }

  html[data-nav-open="true"] { overflow: hidden; }

  /* ---------------------------------------------------------------- footer */

  .site-footer-public {
    background: var(--color-brand-ink);
    color: color-mix(in srgb, var(--color-brand-on-ink) 80%, transparent);
    font-size: var(--text-sm);
  }
  .site-footer-public a { color: color-mix(in srgb, var(--color-brand-on-ink) 85%, transparent); text-decoration: none; }
  .site-footer-public a:hover { color: var(--color-brand-on-ink); text-decoration: underline; text-underline-offset: var(--space-1); }
  .site-footer-public :focus-visible { outline-color: var(--color-brand-on-ink); }

  .site-footer-grid {
    display: grid;
    gap: var(--space-10) var(--space-8);
    padding-block: var(--space-16) var(--space-12);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  }
  @media (min-width: 1024px) {
    .site-footer-grid { grid-template-columns: 1.6fr repeat(3, 1fr) 1.5fr; }
  }

  .site-footer-col { min-width: 0; }
  .site-footer-brand { display: flex; flex-direction: column; gap: var(--space-4); }
  .site-footer-logo { display: inline-flex; align-self: flex-start; }
  .site-footer-logo img { width: auto; height: var(--site-footer-logo-height); }
  .site-footer-about { line-height: var(--leading-normal); max-width: 36ch; }

  .site-footer-heading {
    margin-block-end: var(--space-3);
    color: var(--color-brand-on-ink);
    font-family: var(--font-body), system-ui, sans-serif;
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
  }
  .site-footer-links { display: flex; flex-direction: column; }
  .site-footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
  @media (min-width: 1024px) { .site-footer-links a { min-height: var(--space-8); } }

  .site-footer-contact { display: flex; flex-direction: column; gap: var(--space-3); }
  .site-footer-contact li { display: flex; gap: var(--space-2); align-items: flex-start; }
  .site-footer-contact .icon { flex: none; margin-block-start: calc(var(--space-1) / 2); color: var(--color-brand-logo); }
  .site-footer-contact address { font-style: normal; line-height: var(--leading-normal); }

  .site-footer-bottom { border-block-start: 1px solid color-mix(in srgb, var(--color-brand-on-ink) 15%, transparent); }
  .site-footer-bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-6);
    padding-block: var(--space-5);
  }
  .site-footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); }
  .site-footer-legal a { display: inline-flex; align-items: center; min-height: 44px; }

  /* ---------------------------------------------------------------- hero */

  .hero-site {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--color-surface-tint) 0%, var(--color-surface-page) 100%);
  }

  .hero-site-glow {
    position: absolute;
    top: -20%;
    inset-inline-end: -12%;
    width: 72%;
    aspect-ratio: 1;
    border-radius: var(--radius-full);
    background: radial-gradient(closest-side, color-mix(in srgb, var(--color-brand-accent) 20%, transparent), transparent);
    pointer-events: none;
    transform: translateY(var(--parallax-y, 0px));
  }

  .hero-site-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hero-gap);
    align-items: center;
    min-height: var(--hero-min-height-mobile);
    padding-block: var(--space-10) var(--space-12);
  }

  .hero-site-text { display: flex; flex-direction: column; gap: var(--space-5); }

  .hero-site-title {
    /* ตัดบรรทัดแบบสมดุล — ไม่ให้เหลือคำเดียวค้างบรรทัดสุดท้าย ("…ธุรกิจของ / คุณ") */
    text-wrap: balance;
    font-size: clamp(var(--text-2xl), 3.7vw, var(--text-display));
    line-height: var(--leading-tight);
    font-weight: var(--weight-bold);
    color: var(--color-text-strong);
  }

  .hero-site-lead { max-width: 40ch; color: var(--color-text-normal); font-size: var(--text-lg); line-height: var(--leading-normal); }
  .hero-site-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-2); }
  /* ปุ่มยาว (เช่น "Free consultation 099-109-5544") ห้ามล้นขอบจอเล็ก — จอ < 400px ลด padding และให้ตัดบรรทัดได้ */
  .hero-site-actions .btn { max-inline-size: 100%; }
  .btn-nowrap { white-space: nowrap; }
  @media (max-width: 399.98px) { .hero-site-actions .btn { padding-inline: var(--space-4); white-space: normal; text-align: center; } }

  .hero-site-visual { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
  .hero-site-image { width: 100%; height: auto; aspect-ratio: var(--hero-image-ratio); object-fit: cover; border-radius: var(--radius-xl); }

  @media (min-width: 960px) {
    .hero-site-inner {
      grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
      min-height: var(--hero-min-height);
      padding-block: var(--space-12) var(--space-16);
    }
  }

  .mock-caption { color: var(--color-text-muted); font-size: var(--text-xs); text-align: center; }

  /* ---------------------------------------------------------------- mockup แดชบอร์ด (HTML/CSS) */

  .mock-frame { position: relative; }
  .mock-frame[data-frame="laptop"] { padding-inline-start: var(--space-12); padding-block-end: var(--space-10); }

  .device-laptop, .device-panel {
    container-type: inline-size;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--color-surface-card);
    box-shadow: var(--shadow-lg);
  }
  .device-laptop {
    border: var(--showcase-bezel) solid var(--color-brand-ink);
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-sm);
  }
  .device-panel { border: 1px solid var(--color-border-normal); border-radius: var(--radius-xl); }

  /* ฐานแล็ปท็อป */
  .mock-frame[data-frame="laptop"]::after {
    content: "";
    position: absolute;
    inset-inline: calc(var(--space-12) - var(--space-5)) calc(-1 * var(--space-5));
    bottom: calc(var(--space-10) - var(--space-3));
    height: var(--space-3);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: linear-gradient(180deg, var(--color-border-normal), var(--color-border-strong));
  }

  .mock {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    height: 100%;
    color: var(--color-text-normal);
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
  }

  .mock-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-2);
    background: var(--color-surface-raised);
    border-inline-end: 1px solid var(--color-border-normal);
  }
  .mock-logo { width: var(--space-10); height: auto; margin-block-end: var(--space-2); }
  .mock-side-item {
    display: inline-grid;
    place-items: center;
    width: var(--space-8);
    height: var(--space-8);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
  }
  .mock-side-item.is-on { background: var(--color-brand-accent-soft); color: var(--color-brand-primary); }

  .mock-main { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; padding: var(--space-3) var(--space-4); }
  .mock-top { display: flex; align-items: center; justify-content: space-between; }
  .mock-title { color: var(--color-text-strong); font-family: var(--font-heading), system-ui, sans-serif; font-size: var(--text-sm); font-weight: var(--weight-bold); }
  .mock-avatar {
    width: var(--space-6);
    height: var(--space-6);
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-brand-accent-end), var(--color-brand-accent));
  }
  .mock-avatar.is-sm { width: var(--space-5); height: var(--space-5); flex: none; }

  .mock-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .mock-kpi, .mock-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-md);
    background: var(--color-surface-card);
  }
  .mock-kpi-label, .mock-card-label { color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mock-kpi-value {
    color: var(--color-text-strong);
    font-family: var(--font-heading), system-ui, sans-serif;
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .mock-kpi-delta { color: var(--color-state-success); font-weight: var(--weight-medium); }

  .mock-panels { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-2); flex: 1; min-height: 0; }
  .mock-chart { min-height: 0; }
  .mock-tree-card { justify-content: flex-start; }
  .mock-chart-svg { width: 100%; height: 100%; min-height: var(--space-16); overflow: visible; }
  .mock-chart-grid { fill: none; stroke: var(--color-border-normal); stroke-width: 1; }
  .mock-chart-area { stroke: none; }
  .mock-stop-top { stop-color: var(--color-brand-accent); stop-opacity: .28; }
  .mock-stop-bottom { stop-color: var(--color-brand-accent); stop-opacity: 0; }
  .mock-chart-line {
    fill: none;
    stroke: var(--color-brand-accent);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    vector-effect: non-scaling-stroke;
    animation: mock-draw calc(var(--duration-reveal) * 3) var(--ease-soft) var(--duration-slow) backwards;
  }
  .mock-chart-dot { fill: var(--color-brand-primary); animation: mock-pulse calc(var(--duration-reveal) * 4) ease-in-out infinite; }

  .mock-tree { display: flex; flex-direction: column; align-items: center; gap: 0; padding-block: var(--space-2); }
  .mock-tree.is-large { padding-block: var(--space-4); }
  .mock-node {
    width: var(--space-4);
    height: var(--space-4);
    border-radius: var(--radius-full);
    background: var(--color-brand-accent-soft);
    border: 2px solid var(--color-brand-accent);
  }
  .mock-node.is-root { width: var(--space-6); height: var(--space-6); background: var(--color-brand-primary); border-color: var(--color-brand-primary); }
  .mock-node.is-sm { width: var(--space-3); height: var(--space-3); }
  .mock-tree.is-large .mock-node { width: var(--space-6); height: var(--space-6); }
  .mock-tree.is-large .mock-node.is-root { width: var(--space-8); height: var(--space-8); }
  .mock-tree.is-large .mock-node.is-sm { width: var(--space-4); height: var(--space-4); }
  .mock-branch { width: 60%; height: var(--space-3); border: 2px solid var(--color-border-strong); border-block-end: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
  .mock-branch.is-wide { width: 86%; }
  .mock-tree-row { display: flex; justify-content: space-between; width: 72%; }
  .mock-tree.is-large .mock-tree-row:last-child { width: 96%; }

  .mock-rows { display: flex; flex-direction: column; }
  .mock-row { display: flex; align-items: center; gap: var(--space-2); padding-block: var(--space-2); border-block-end: 1px solid var(--color-border-normal); }
  .mock-row:last-child { border-block-end: 0; }
  .mock-row-id { flex: 1; color: var(--color-text-strong); font-weight: var(--weight-medium); }
  .mock-row-amount { font-variant-numeric: tabular-nums; color: var(--color-text-strong); }
  .mock-chip { padding: 0 var(--space-2); border-radius: var(--radius-full); border: 1px solid currentColor; font-weight: var(--weight-medium); }
  .mock-chip[data-status="paid"] { color: var(--color-state-success); }
  .mock-chip[data-status="pending"] { color: var(--color-state-warning); border-style: dashed; }

  @container (max-width: 440px) {
    .mock .is-optional { display: none; }
    .mock-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mock-panels { grid-template-columns: minmax(0, 1fr); }
    .mock-main { padding: var(--space-2); gap: var(--space-2); }
    .mock-side { padding-inline: var(--space-1); }
  }

  .device-phone {
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: var(--showcase-phone-width);
    max-width: 24%;
    aspect-ratio: 9 / 18;
    padding: var(--space-2);
    border-radius: var(--radius-xl);
    background: var(--color-brand-ink);
    box-shadow: var(--shadow-lg);
    animation: mock-float calc(var(--duration-reveal) * 11) ease-in-out infinite;
    /* อยู่หน้าฐานแล็ปท็อป (::after ของ .mock-frame วาดทีหลัง จึงทับมือถือ) */
    z-index: 1;
  }
  .mock-phone {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    height: 100%;
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius-lg);
    background: var(--color-surface-card);
    font-size: var(--text-xs);
    overflow: hidden;
  }
  .mock-phone-head { display: flex; align-items: center; justify-content: space-between; }
  .mock-phone-head .mock-logo { width: var(--space-10); margin: 0; }
  .mock-phone-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-brand-accent-soft), var(--color-surface-tint));
  }
  .mock-phone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .mock-phone-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-1);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-md);
    color: var(--color-text-strong);
    text-align: center;
  }
  .mock-phone-tile .icon { color: var(--color-brand-primary); }

  /* จอแคบ: มือถือจำลองบังแล็ปท็อปเกินครึ่ง — ซ่อนไว้ แล็ปท็อปเต็มความกว้าง */
  @media (max-width: 639.98px) {
    .device-phone { display: none; }
    .mock-frame[data-frame="laptop"] { padding-inline-start: 0; }
    .mock-frame[data-frame="laptop"]::after { inset-inline: calc(-1 * var(--space-2)); }
  }

  @keyframes mock-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes mock-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
  @keyframes mock-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-1 * var(--space-2))); } }

  /* ---------------------------------------------------------------- trust bar · stats */

  .trust-bar { padding-block: var(--space-8); border-block: 1px solid var(--color-border-normal); background: var(--color-surface-card); }
  .trust-bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-10); }
  .trust-bar-title {
    padding-inline-end: var(--space-6);
    border-inline-end: 2px solid var(--color-brand-accent);
    color: var(--color-text-strong);
    font-family: var(--font-heading), system-ui, sans-serif;
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    max-width: 14ch;
  }
  .trust-bar-logos { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: var(--space-6) var(--space-10); }
  .trust-bar-logos img { width: auto; height: var(--space-12); object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter var(--duration-normal) var(--ease-standard), opacity var(--duration-normal) var(--ease-standard); }
  .trust-bar-logos img:hover { filter: none; opacity: 1; }

  .stats-band { padding-block: var(--space-8); }
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-lg);
    background: var(--color-surface-card);
    box-shadow: var(--shadow-md);
  }
  .stat { display: flex; align-items: center; gap: var(--space-3); }
  .stat-icon { color: var(--color-brand-primary); }
  .stat-icon .icon { width: var(--icon-lg); height: var(--icon-lg); }
  .stat-body { display: flex; flex-direction: column; }
  .stat-value { color: var(--color-text-strong); font-family: var(--font-heading), system-ui, sans-serif; font-size: var(--text-2xl); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
  .stat-label { color: var(--color-text-muted); font-size: var(--text-sm); }

  /* ---------------------------------------------------------------- feature grid */

  .feature-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (min-width: 640px) { .feature-grid[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 1100px) { .feature-grid[data-columns="8"] { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-3); } }
  @media (max-width: 639.98px) { .feature-grid[data-columns="3"], .feature-grid[data-columns="4"] { grid-template-columns: minmax(0, 1fr); } }

  .feature-grid > li { display: flex; }
  .feature-card {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-3);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-lg);
    background: var(--color-surface-card);
    box-shadow: var(--shadow-sm);
    color: var(--color-text-strong);
    text-align: center;
    text-decoration: none;
    transition: transform var(--duration-normal) var(--ease-standard),
                box-shadow var(--duration-normal) var(--ease-standard),
                border-color var(--duration-normal) var(--ease-standard);
  }
  .feature-grid:not([data-columns="8"]) .feature-card { align-items: flex-start; text-align: start; padding: var(--space-6); }
  a.feature-card:hover { transform: translateY(calc(-1 * var(--space-1))); border-color: var(--color-brand-primary); box-shadow: var(--shadow-md); }
  a.feature-card:hover .icon-chip { background: var(--color-brand-primary); color: var(--color-brand-on-primary); }
  .feature-card-title { font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: var(--leading-snug); text-wrap: balance; }
  .feature-grid:not([data-columns="8"]) .feature-card-title { font-size: var(--text-lg); }
  .feature-card-text { color: var(--color-text-muted); font-size: var(--text-sm); }

  /* ---------------------------------------------------------------- split */

  .split-section[data-layout="band"] { padding-block: var(--space-6); }
  @media (min-width: 768px) { .split-section[data-layout="band"] { padding-block: var(--space-8); } }

  .split-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: center; }
  .split-text { display: flex; flex-direction: column; gap: var(--space-4); }
  .split-image { width: 100%; height: auto; border-radius: var(--radius-xl); }

  @media (min-width: 900px) {
    .split-block[data-layout="plain"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); }
    .split-block[data-layout="plain"]:not([data-reverse="true"]) .split-visual { order: 2; }
  }

  .split-block[data-layout="band"] {
    position: relative;
    overflow: hidden;
    padding: var(--space-6);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-xl);
    background: linear-gradient(100deg,
      color-mix(in srgb, var(--color-brand-accent) 12%, var(--color-surface-card)) 0%,
      var(--color-surface-card) 42%,
      var(--color-surface-raised) 100%);
    box-shadow: var(--shadow-md);
  }
  @media (min-width: 960px) {
    .split-block[data-layout="band"] {
      grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr) minmax(0, 1fr);
      gap: var(--space-10);
      padding: var(--space-8) var(--space-10);
    }
    .split-block[data-layout="band"] .split-points { padding-inline-start: var(--space-8); border-inline-start: 1px solid var(--color-border-normal); }
  }

  .bars-art {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    width: 100%;
    max-width: 16rem;
    aspect-ratio: var(--showcase-bar-ratio);
    margin-inline: auto;
    padding: var(--space-3);
  }
  .bars-art-bar {
    flex: 1;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: linear-gradient(to top, var(--color-brand-accent), var(--color-brand-accent-end));
    box-shadow: var(--shadow-sm);
    transform-origin: bottom;
    transition: transform var(--duration-reveal) var(--ease-soft);
  }
  .bars-art-bar[data-h="1"] { height: 28%; }
  .bars-art-bar[data-h="2"] { height: 42%; transition-delay: calc(var(--duration-fast) * .5); }
  .bars-art-bar[data-h="3"] { height: 58%; transition-delay: calc(var(--duration-fast) * 1); }
  .bars-art-bar[data-h="4"] { height: 76%; transition-delay: calc(var(--duration-fast) * 1.5); }
  .bars-art-bar[data-h="5"] { height: 96%; transition-delay: calc(var(--duration-fast) * 2); }
  .bars-art-trend { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .bars-art-trend path {
    fill: none;
    stroke: var(--color-brand-primary);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 1;
    vector-effect: non-scaling-stroke;
  }

  /* ---------------------------------------------------------------- plan cards */

  .plan-grid { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 640px) { .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1100px) { .plan-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

  .plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-lg);
    background: var(--color-surface-card);
    transition: transform var(--duration-normal) var(--ease-standard),
                box-shadow var(--duration-normal) var(--ease-standard),
                border-color var(--duration-normal) var(--ease-standard);
  }
  .plan-card:hover { transform: translateY(calc(-1 * var(--space-1))); border-color: var(--color-brand-primary); box-shadow: var(--shadow-md); }
  .plan-card-art {
    display: inline-grid;
    place-items: center;
    width: var(--space-16);
    height: var(--space-16);
    border-radius: var(--radius-lg);
    background: var(--color-brand-accent-soft);
    color: var(--color-brand-primary);
  }
  .plan-card-name { font-size: var(--text-xl); }
  .plan-card-text { flex: 1; color: var(--color-text-normal); }
  /* Mockup: การ์ดแผนจัดกึ่งกลาง (ไอคอน · ชื่อ · คำอธิบาย) */
  .plan-card { align-items: center; text-align: center; box-shadow: var(--shadow-sm); }

  /* ---------------------------------------------------------------- industry grid */

  .industry-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (min-width: 768px) { .industry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 1100px) { .industry-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
  .industry-grid > li { display: flex; }

  .industry-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-lg);
    background: var(--color-surface-card);
    box-shadow: var(--shadow-sm);
    color: var(--color-text-strong);
    text-decoration: none;
    transition: transform var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
  }
  a.industry-card:hover { transform: translateY(calc(-1 * var(--space-1))); box-shadow: var(--shadow-md); }

  .industry-media {
    display: grid;
    place-items: center;
    aspect-ratio: var(--industry-media-ratio);
    overflow: hidden;
    color: var(--color-brand-primary);
    background: linear-gradient(135deg, var(--color-brand-accent-soft), var(--color-surface-tint));
  }
  .industry-media[data-tone="1"] { background: linear-gradient(135deg, var(--color-surface-tint), var(--color-brand-accent-soft)); }
  .industry-media[data-tone="2"] { background: linear-gradient(160deg, var(--color-brand-accent-soft), var(--color-surface-raised)); }
  .industry-media[data-tone="3"] { background: linear-gradient(135deg, var(--color-surface-raised), var(--color-brand-accent-soft)); }
  .industry-media[data-tone="4"] { background: linear-gradient(200deg, var(--color-brand-accent-soft), var(--color-surface-tint)); }
  .industry-media[data-tone="5"] { background: linear-gradient(120deg, var(--color-surface-raised), var(--color-surface-tint) 40%, var(--color-brand-accent-soft)); }
  .industry-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-standard); }
  a.industry-card:hover .industry-media img { transform: scale(1.04); }
  .industry-icon { transition: transform var(--duration-normal) var(--ease-standard); }
  a.industry-card:hover .industry-icon { transform: scale(1.08); }

  .industry-body { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-3) var(--space-2) var(--space-4); text-align: center; }
  .industry-title { font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: var(--leading-snug); }
  .industry-subtitle { color: var(--color-text-muted); font-size: var(--text-xs); }

  /* ---------------------------------------------------------------- showcase + tabs */

  .showcase-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); align-items: center; }
  .showcase-text { display: flex; flex-direction: column; gap: var(--space-4); }
  .showcase-stage { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
  @media (min-width: 960px) { .showcase-inner { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--space-16); } }

  .tabs-list {
    display: inline-flex;
    align-self: flex-start;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: var(--space-1);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-full);
    background: var(--color-surface-card);
  }
  .tab {
    min-height: 44px;
    padding-inline: var(--space-5);
    border: 0;
    border-radius: var(--radius-full);
    background: none;
    color: var(--color-text-normal);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  }
  .tab:hover { color: var(--color-text-strong); }
  .tab[aria-selected="true"] { background: var(--color-brand-primary); color: var(--color-brand-on-primary); }
  .tab-panel:not([hidden]) { animation: panel-in var(--duration-normal) var(--ease-enter) backwards; }
  @keyframes panel-in { from { opacity: 0; transform: translateY(var(--space-2)); } to { opacity: 1; transform: none; } }

  /* ---------------------------------------------------------------- about teaser */

  .about-teaser { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); align-items: center; }
  @media (min-width: 900px) { .about-teaser { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); } }
  .about-text { display: flex; flex-direction: column; gap: var(--space-4); }
  .about-media img { width: 100%; height: auto; border-radius: var(--radius-xl); }

  .about-brand-panel {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    padding: var(--space-12);
    border-radius: var(--radius-xl);
    background:
      radial-gradient(color-mix(in srgb, var(--color-brand-accent) 18%, transparent) 1px, transparent 2px) 0 0 / var(--space-5) var(--space-5),
      linear-gradient(135deg, var(--color-surface-tint), var(--color-brand-accent-soft));
    border: 1px solid var(--color-border-normal);
    transform: translateY(var(--parallax-y, 0px));
  }
  .about-brand-panel img { width: min(100%, 22rem); height: auto; filter: drop-shadow(var(--shadow-md)); }

  /* ---------------------------------------------------------------- testimonials */

  .testimonial-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(100%, 26rem);
    gap: var(--space-5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-block-end: var(--space-3);
  }
  .testimonial-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-lg);
    background: var(--color-surface-card);
    box-shadow: var(--shadow-sm);
    scroll-snap-align: start;
  }
  .testimonial-mark { color: var(--color-brand-primary); }
  .testimonial-quote { font-size: var(--text-lg); color: var(--color-text-strong); }
  .testimonial-person { display: flex; align-items: center; gap: var(--space-3); margin-block-start: auto; }
  .testimonial-photo { width: var(--space-12); height: var(--space-12); border-radius: var(--radius-full); object-fit: cover; }
  .testimonial-name { display: block; font-weight: var(--weight-bold); color: var(--color-text-strong); }
  .testimonial-role { display: block; color: var(--color-text-muted); font-size: var(--text-sm); }
  .slider-controls { display: flex; justify-content: center; gap: var(--space-2); margin-block-start: var(--space-4); }
  .slider-btn { border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); }

  /* ---------------------------------------------------------------- faq */

  .faq-wrap { max-width: calc(var(--layout-form-width) + 2 * var(--site-gutter)); }
  .faq-list { border-block-start: 1px solid var(--color-border-normal); }
  .faq-item { border-block-end: 1px solid var(--color-border-normal); }
  .faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 44px;
    padding-block: var(--space-4);
    color: var(--color-text-strong);
    font-weight: var(--weight-bold);
    list-style: none;
    cursor: pointer;
  }
  .faq-question::-webkit-details-marker { display: none; }
  .faq-question:hover { color: var(--color-brand-primary); }
  .faq-caret { flex: none; color: var(--color-brand-primary); transition: rotate var(--duration-normal) var(--ease-standard); }
  .faq-item[open] .faq-caret { rotate: 180deg; }
  .faq-answer { display: flex; flex-direction: column; gap: var(--space-3); padding-block-end: var(--space-5); color: var(--color-text-normal); }
  .faq-item[open] .faq-answer { animation: panel-in var(--duration-normal) var(--ease-enter) backwards; }

  /* ---------------------------------------------------------------- cta band */

  .cta-band {
    position: relative;
    overflow: hidden;
    background: linear-gradient(100deg, var(--color-brand-ink) 0%, var(--color-brand-ink) 30%, var(--color-brand-primary) 100%);
    color: var(--color-brand-on-ink);
  }
  .cta-band-glow {
    position: absolute;
    inset-inline-end: -10%;
    bottom: -70%;
    width: 55%;
    aspect-ratio: 1;
    border-radius: var(--radius-full);
    background: radial-gradient(closest-side, color-mix(in srgb, var(--color-brand-accent-end) 30%, transparent), transparent);
    pointer-events: none;
  }
  .cta-band-inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6) var(--space-10);
    padding-block: var(--space-12);
  }
  .cta-band-text { display: flex; flex-direction: column; gap: var(--space-2); max-width: 48rem; }
  .cta-band-title { color: var(--color-brand-on-ink); font-size: clamp(var(--text-xl), 2.6vw, var(--text-3xl)); font-weight: var(--weight-bold); }
  .cta-band-lead { color: color-mix(in srgb, var(--color-brand-on-ink) 88%, transparent); font-size: var(--text-lg); }
  .cta-band-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

  /* ---------------------------------------------------------------- rich text · steps · compare */

  .rich-text { margin-inline: auto; }
  .rich-text h2 { font-size: var(--text-2xl); font-weight: var(--weight-bold); margin-block-start: 0; }
  .rich-text a { color: var(--color-brand-link); }

  .steps { display: grid; gap: var(--space-8) var(--space-6); grid-template-columns: minmax(0, 1fr); counter-reset: none; }
  @media (min-width: 640px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .step { position: relative; display: flex; flex-direction: column; gap: var(--space-3); }
  .step-number {
    display: inline-grid;
    place-items: center;
    width: var(--space-12);
    height: var(--space-12);
    border-radius: var(--radius-full);
    background: var(--color-brand-primary);
    color: var(--color-brand-on-primary);
    font-family: var(--font-heading), system-ui, sans-serif;
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    box-shadow: 0 0 0 var(--space-2) var(--color-brand-accent-soft);
  }
  .step-title { font-size: var(--text-lg); }
  .step-text { color: var(--color-text-normal); }
  @media (min-width: 1100px) {
    .step:not(:last-child)::after {
      content: "";
      position: absolute;
      top: calc(var(--space-12) / 2);
      inset-inline: calc(var(--space-12) + var(--space-4)) var(--space-2);
      border-block-start: 2px dashed var(--color-border-strong);
    }
  }

  .compare-wrap { border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg); background: var(--color-surface-card); }
  .compare-table { min-width: 34rem; }
  .compare-table th, .compare-table td { padding: var(--space-4) var(--space-5); border-block-end: 1px solid var(--color-border-normal); text-align: center; vertical-align: middle; }
  .compare-table tbody tr:last-child > * { border-block-end: 0; }
  .compare-table th[scope="row"] { text-align: start; color: var(--color-text-strong); font-weight: var(--weight-medium); }
  .compare-table thead th { color: var(--color-text-strong); font-family: var(--font-heading), system-ui, sans-serif; }
  .compare-table .is-highlight { background: color-mix(in srgb, var(--color-brand-accent-soft) 60%, var(--color-surface-card)); }
  .compare-yes { display: inline-grid; place-items: center; color: var(--color-state-success); }
  .compare-no { display: inline-grid; place-items: center; color: var(--color-text-muted); }

  /* ---------------------------------------------------------------- lead form */

  .lead-form-wrap { max-width: calc(var(--layout-form-width) + 2 * var(--site-gutter)); }
  .lead-form {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-5);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-xl);
    background: var(--color-surface-card);
    box-shadow: var(--shadow-md);
  }
  @media (min-width: 768px) { .lead-form { padding: var(--space-8); } }
  .lead-form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
  .lead-form-note { max-width: 46ch; color: var(--color-text-muted); font-size: var(--text-sm); }
  .lead-form-note a { color: var(--color-brand-link); }
  /* คำแนะนำของทั้งกลุ่ม (เช่น เบอร์หรืออีเมลอย่างน้อยหนึ่งช่อง) — บรรทัดเดียวใต้หัวกลุ่ม ไม่แทรกในช่องใดช่องหนึ่ง */
  .group-note { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
  /* ช่องที่ตั้งกว้างเต็ม (ชื่อ · ประเภทธุรกิจ) กินทั้งแถว — ช่องที่เหลือเรียงคู่กันพอดีแถว */
  .lead-form .field-grid > .field[data-width="full"] { grid-column: 1 / -1; }

  /* ‼️ honeypot — ซ่อนจากสายตาด้วยวิธีเดียวกับ .visually-hidden ไม่ใช่ display:none
     bot หลายตัวข้ามช่องที่ display:none แต่ยังกรอกช่องที่แค่มองไม่เห็น */
  .hp-field { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* ---------------------------------------------------------------- motion (app.js เปิดใช้)

     ‼️ เนื้อหาต้องเห็นครบเมื่อไม่มี JS — ซ่อนก่อนเลื่อนมาถึงเฉพาะเมื่อ app.js ใส่ data-motion="on"
        ซึ่งมันไม่ใส่เมื่อผู้ใช้ตั้ง prefers-reduced-motion
     ‼️ ใช้ transition ไม่ใช่ animation — หลังแสดงแล้ว transform กลับเป็น none
        ไม่ค้างเป็น stacking context ให้ dropdown ในบล็อกถูกทับ (design.md 11)                     */

  html[data-motion="on"] .reveal {
    transition: opacity var(--duration-reveal) var(--ease-soft), transform var(--duration-reveal) var(--ease-soft);
  }
  html[data-motion="on"] .reveal:not(.is-visible) { opacity: 0; transform: translateY(var(--site-reveal-shift)); }
  html[data-motion="on"] .reveal[data-reveal-delay="1"] { transition-delay: calc(var(--duration-fast) * .6); }
  html[data-motion="on"] .reveal[data-reveal-delay="2"] { transition-delay: calc(var(--duration-fast) * 1.2); }
  html[data-motion="on"] .reveal[data-reveal-delay="3"] { transition-delay: calc(var(--duration-fast) * 1.8); }

  html[data-motion="on"] .reveal:not(.is-visible) .bars-art-bar { transform: scaleY(.08); }
  html[data-motion="on"] .reveal:not(.is-visible) .mock-chart-line { animation-play-state: paused; }

  /* ‼️ animation วนไม่รู้จบต้องปิดเอง — กฎกลางย่อ duration เหลือ .01ms ซึ่งทำให้ของวนกะพริบถี่แทนที่จะหยุด */
  @media (prefers-reduced-motion: reduce) {
    .device-phone, .mock-chart-dot { animation: none; }
  }

  /* ---------------------------------------------------------------- CMS หลังบ้าน (Phase 3)
     ‼️ ใช้ token เท่านั้น — หลังบ้านมีโหมดมืด ทุกสีต้องมาจาก token ที่มีค่าทั้งสองโหมด */

  .cms-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
  .cms-list > li { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border-normal); }
  .cms-list > li:last-child { border-bottom: 0; }
  .cms-menu > li[data-depth="1"] { padding-inline-start: var(--space-8); }

  .cms-block { border-inline-start: 2px solid var(--color-brand-primary); }
  .cms-block-head { padding: 0 var(--space-2); }
  .cms-block-bar { justify-content: flex-start; }
  .cms-block-tools { align-items: end; }
  .cms-block-add { align-items: end; flex-wrap: wrap; }
  .cms-diff { padding-block: var(--space-3); border-bottom: 1px solid var(--color-border-normal); }
  .cms-diff[data-changed="true"] { border-inline-start: 2px solid var(--color-state-warning); padding-inline-start: var(--space-3); }
  .cms-rows { display: flex; flex-direction: column; gap: var(--space-3); }
  .cms-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--layout-field-min-width), 1fr));
    gap: var(--space-3);
    align-items: end;
    padding: var(--space-3);
    background: var(--color-surface-tint);
    border-radius: var(--radius-md);
  }

  .cms-row > [data-row-remove] { justify-self: start; align-self: end; }

  .snippet {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-md);
    max-width: var(--layout-form-width);
  }
  .snippet-url { font-size: var(--text-xs); color: var(--color-text-muted); overflow-wrap: anywhere; }
  .snippet-title { font-size: var(--text-lg); color: var(--color-brand-link); }
  .snippet-desc { font-size: var(--text-sm); color: var(--color-text-normal); }
  .counter[data-over="true"] { color: var(--color-state-warning); font-weight: var(--weight-medium); }

  .editor-toolbar { gap: var(--space-1); flex-wrap: wrap; }
  .code-input { font-family: var(--font-mono); font-size: var(--text-sm); }

  .media-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--layout-tile-min-width), 1fr));
    gap: var(--space-4);
  }
  .media-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2);
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-md);
  }
  .media-card:hover { border-color: var(--color-brand-primary); }
  .media-card a { display: flex; flex-direction: column; gap: var(--space-2); color: var(--color-text-normal); text-decoration: none; }
  .media-card img {
    width: 100%;
    height: auto;
    aspect-ratio: var(--product-card-image-ratio);
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--color-surface-tint);
  }
  .media-card-name { font-size: var(--text-sm); overflow-wrap: anywhere; }

  .badge[data-type="warning"] { border-color: var(--color-state-warning); color: var(--color-text-strong); }

  .cms-dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-2) var(--space-4); margin: 0; }
  .cms-dl dt { color: var(--color-text-muted); }
  .cms-dl dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
  .cms-note { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
  .cms-pre {
    margin: 0;
    padding: var(--space-3);
    max-height: var(--layout-page-media-height);
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    background: var(--color-surface-tint);
    border-radius: var(--radius-sm);
  }

  @media (max-width: 768px) {
    .cms-dl { grid-template-columns: 1fr; }
    .cms-dl dd { padding-bottom: var(--space-2); }
    .cms-menu > li[data-depth="1"] { padding-inline-start: var(--space-4); }
  }

}

/* ================================================================ Phase 4 — หน้าใน · ภาษา · บทความ */
@layer components {

  /* ---------------------------------------------------------------- ภาษาจีน
     ‼️ ฟอนต์ self-host ไม่มีตัวอักษรจีน — ใช้ฟอนต์ระบบ (token --font-zh ใน DESIGN.md) ไม่โหลด CJK webfont (หนักหลาย MB) */
  :lang(zh) body,
  :lang(zh) h1, :lang(zh) h2, :lang(zh) h3, :lang(zh) h4,
  :lang(zh) .hero-site-title, :lang(zh) .hero-page-title, :lang(zh) .btn,
  :lang(zh) .site-nav-link, :lang(zh) .site-footer-heading, :lang(zh) .stat-value {
    font-family: var(--font-zh);
  }
  :lang(zh) .hero-site-title, :lang(zh) .hero-page-title { letter-spacing: .01em; }

  /* ---------------------------------------------------------------- ส่วนเปิดของหน้าใน (hero variant "page") */
  .hero-page {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--color-surface-tint) 0%, var(--color-surface-page) 100%);
    border-block-end: 1px solid var(--color-border-normal);
  }
  .hero-page-glow {
    position: absolute;
    top: -55%;
    inset-inline-end: -8%;
    width: 46%;
    aspect-ratio: 1;
    border-radius: var(--radius-full);
    background: radial-gradient(closest-side, color-mix(in srgb, var(--color-brand-accent) 16%, transparent), transparent);
    pointer-events: none;
  }
  .hero-page-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding-block: var(--space-8) var(--space-12);
  }
  .hero-page-title {
    max-width: 24ch;
    color: var(--color-text-strong);
    font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
  }
  .hero-page-lead { max-width: 62ch; color: var(--color-text-normal); font-size: var(--text-lg); line-height: var(--leading-normal); }
  .hero-page .check-list { max-width: 62ch; }
  @media (min-width: 768px) { .hero-page-inner { padding-block: var(--space-10) var(--space-16); } }

  /* ---------------------------------------------------------------- ตัวสลับภาษา (TH | EN | 中文) */
  .lang-switch { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
  .lang-switch-icon { flex: none; color: var(--color-text-muted); }
  .lang-switch-list { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
  .lang-switch-list li { display: inline-flex; align-items: center; margin: 0; }
  .lang-switch-list li + li::before { content: ""; display: inline-block; width: 1px; height: 1em; margin-inline: var(--space-1); background: var(--color-border-strong); vertical-align: middle; opacity: .5; }
  .lang-switch-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--space-10);
    min-height: var(--space-10);
    padding-inline: var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--color-text-normal);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
  }
  .lang-switch-link:hover { color: var(--color-brand-primary); background: var(--color-brand-accent-soft); }
  .lang-switch-link[aria-current="true"] { color: var(--color-brand-primary); font-weight: var(--weight-bold); }
  .lang-switch-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .lang-switch-link:lang(zh) { font-family: var(--font-zh); }

  .lang-switch.is-drawer { display: none; }
  .lang-switch.is-header .lang-switch-icon { display: none; }
  /* header จอ 1200–1599: เมนู + ตัวสลับภาษา + เบอร์ + ปุ่ม Demo ไม่พอที่ — ซ่อนเม็ดเบอร์โทร (ยังอยู่ใน footer และหน้า Contact) ปุ่ม Demo ต้องเห็นเสมอ */
  @media (min-width: 1280px) and (max-width: 1599.98px) {
    .site-actions .site-phone { display: none; }
  }
  @media (max-width: 1279.98px) {
    .lang-switch.is-header { display: none; }
    .lang-switch.is-drawer { display: inline-flex; justify-content: center; }
  }

  .lang-switch.is-footer .lang-switch-icon { color: var(--color-brand-logo); }
  .lang-switch.is-footer .lang-switch-link { color: var(--color-brand-on-ink); opacity: .82; }
  .lang-switch.is-footer .lang-switch-link:hover { opacity: 1; background: color-mix(in srgb, var(--color-brand-on-ink) 10%, transparent); color: var(--color-brand-on-ink); }
  .lang-switch.is-footer .lang-switch-link[aria-current="true"] { opacity: 1; color: var(--color-brand-logo); }

  /* ---------------------------------------------------------------- บทความ */
  .post { display: flex; flex-direction: column; gap: var(--space-6); max-width: var(--layout-form-width); }
  .post-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
  .post-meta-item { display: inline-flex; align-items: center; gap: var(--space-2); }
  .post-meta-item .icon { color: var(--color-brand-primary); }
  .post-cover { margin: 0; }
  .post-cover img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
  .post-body img { height: auto; border-radius: var(--radius-md); }
  /* ---- หน้าบทความ: คอลัมน์อ่านเดียวกึ่งกลางหน้า (เจ้าของสั่ง 2026-11-08: เนื้อหาชิดซ้าย ขวาว่างครึ่งจอ)
     หัวเพจ (breadcrumb + H1) · รูปปก · เนื้อหา · ลิงก์ขั้นต่อไป · บทความที่เกี่ยวข้อง อยู่แนวเดียวกัน */
  .site-main > .page:has(.post) > .page-head { width: min(100% - 2 * var(--site-gutter-mobile), var(--layout-form-width)); }
  .post, .post ~ .next-steps, .post ~ .post-related { margin-inline: auto; max-width: var(--layout-form-width); }
  .post-body { max-width: none; }
  /* รูปในเนื้อหา: ไม่ล้นคอลัมน์ · กึ่งกลาง · รูปที่วางติดกัน (แบนเนอร์ท้ายบทความ) มีระยะห่าง */
  .post-body img { display: block; max-width: 100%; margin-inline: auto; }
  .post-body a:has(> img) { display: block; }
  .post-body :is(img, a:has(> img)) + :is(img, a:has(> img)), .post-body :is(img, a:has(> img)) + br + :is(img, a:has(> img)) { margin-block-start: var(--space-5); }
  .post-body figure { margin: 0; }
  /* แบนเนอร์หลายรูปที่ต้นฉบับห่อด้วย <figure> ซ้อนกัน — เว้นระยะเท่าย่อหน้า ไม่ใช่ 8px */
  .post-body figure:has(> figure) { gap: var(--space-5); }
  /* ตารางในบทความ: หัวตารางมีพื้น · เส้นคั่นแถว · จอแคบเลื่อนแนวนอนได้ (ไม่ดันหน้าให้กว้าง) */
  .post-body table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-md);
    overflow: hidden;
    font-size: var(--text-sm);
  }
  /* จอแคบ: ตารางเป็นบล็อกเลื่อนแนวนอนได้ (thead/tbody ยังอยู่ในตารางเดียวกัน คอลัมน์ไม่เหลื่อม) */
  @media (max-width: 639.98px) { .post-body table { display: block; overflow-x: auto; } }
  .post-body th, .post-body td { padding: var(--space-3) var(--space-4); text-align: start; vertical-align: top; border-block-end: 1px solid var(--color-border-normal); }
  .post-body th { background: var(--color-surface-raised); color: var(--color-text-strong); font-weight: var(--weight-bold); }
  .post-body tbody tr:last-child > * { border-block-end: 0; }
  .post-body tbody tr:nth-child(even) > td { background: var(--color-surface-tint); }
  .post-back a { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px; font-weight: var(--weight-medium); }
  .post-related { margin-block: var(--space-12) var(--space-8); }
  .post-related h2 { margin-block-end: var(--space-5); font-size: var(--text-2xl); }

  /* ลิงก์ "ขั้นต่อไป" ท้ายบทความ (partials/next-steps.php) — การ์ดลิงก์ไปหน้าบริการที่ตรงเรื่อง */
  .next-steps { margin-block-start: var(--space-10); }
  .next-steps h2 { margin-block-end: var(--space-4); font-size: var(--text-xl); }
  .next-steps-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
  .next-step {
    display: flex; flex-direction: column; gap: var(--space-2); block-size: 100%;
    padding: var(--space-4) var(--space-5); text-decoration: none; color: inherit;
    border: 1px solid var(--color-border-normal); border-radius: var(--radius-lg);
    background: var(--color-surface-card); box-shadow: var(--shadow-sm);
  }
  .next-step:hover { border-color: var(--color-brand-primary); }
  .next-step:focus-visible { outline: 3px solid var(--color-brand-accent); outline-offset: 2px; }
  .next-step-title { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-bold); color: var(--color-brand-primary); }
  .next-step-text { color: var(--color-text-muted); font-size: var(--text-sm); }
  @media (min-width: 760px) { .next-steps-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  /* การ์ดบทความที่มีภาพเด่นจาก media library */
  .news-item-image { object-fit: cover; aspect-ratio: var(--news-item-image-ratio); }

  /* ---------------------------------------------------------------- micro-interaction ของการ์ดลิงก์ */
  @media (prefers-reduced-motion: no-preference) {
    .news-item { transition: transform var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard); }
    .news-item:hover { transform: translateY(-2px); }
  }

  /* ฟอร์ม: ช่องที่ผิดเห็นได้โดยไม่พึ่งสีอย่างเดียว (มีข้อความใต้ช่องเสมอ) */
  .lead-form [aria-invalid="true"] { border-color: var(--color-state-danger); outline: 1px solid var(--color-state-danger); }

  /* ================================================================ Mockup หน้าแรก 2026-11-04 (Premium Technology + Human Trust) */

  /* ---- เลื่อนไปยัง anchor แบบนุ่ม (#lead-form) — เว้นที่ให้ header ที่ติดบน */
  html { scroll-padding-top: calc(var(--site-header-height) + var(--space-4)); }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

  /* ---- หัวข้อส่วนกลางหน้า: ขีดส้มสองข้าง */
  .section-head[data-align="center"] .section-title { display: inline-flex; align-items: center; gap: var(--space-4); }
  .section-head[data-align="center"] .section-title::before,
  .section-head[data-align="center"] .section-title::after {
    content: "";
    flex: none;
    width: var(--space-10);
    border-block-start: 2px solid var(--color-brand-accent);
  }
  @media (max-width: 639.98px) {
    .section-head[data-align="center"] .section-title { display: block; }
    .section-head[data-align="center"] .section-title::before,
    .section-head[data-align="center"] .section-title::after { content: none; }
  }

  /* ---- hero: บรรทัดที่ 2+ ของพาดหัวเป็นสีส้ม · ภาพบุคคล + mockup ซ้อน */
  /* block ของตัวเอง → text-wrap: balance ทำงานกับบรรทัดสีส้มได้ (<br> ทำให้ balance ไม่ทำงาน — มือถือเหลือ "คุณ" คำเดียวในบรรทัด)
     · balance เฉพาะมือถือ — จอใหญ่ตัดบรรทัดแบบ Mockup ("…ตามแผนธุรกิจ / ของคุณ")
     · จีนไม่ balance — ตัดกลางคำ (计|划) */
  .hero-site-accent { display: block; color: var(--color-brand-primary); }
  /* ขนาดสูงสุด 3.5rem (กึ่งกลาง 4xl–display): คอลัมน์ข้อความหยุดโตที่ความกว้าง container แต่ 3.7vw ยังโตต่อ —
     ที่ 1536px "ที่ออกแบบตามแผนธุรกิจ" ต้องการ 590px มีอยู่ 587px จึงตัดบรรทัดผิดจาก Mockup (วัดจริง 2026-11-04) */
  /* ส่วนสีส้มเป็นบล็อกของตัวเอง + ตัดบรรทัดสมดุล → "ที่ออกแบบตามแผน / ธุรกิจของคุณ" ไม่เหลือคำเดียวค้าง */
  .hero-site-title .hero-site-accent { display: block; text-wrap: balance; }
  .hero-site-title { text-wrap: wrap; font-size: clamp(var(--text-2xl), 3.7vw, calc((var(--text-4xl) + var(--text-display)) / 2)); }
  @media (max-width: 639.98px) {
    .hero-site-title, .hero-site-accent { text-wrap: balance; }
  }
  :lang(zh) .hero-site-title, :lang(zh) .hero-site-accent { text-wrap: wrap; }

  .hero-site-visual[data-compose="person"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
  }
  .hero-person, .hero-person-devices { grid-area: 1 / 1; }
  /* ภาพบุคคล OMC (768×948) มีพื้นโปร่งใสฝั่งขวา ~19% ของภาพ — จอสองคอลัมน์เลื่อนทั้งชุด (คน + อุปกรณ์) ไปขวาเท่ากัน
     ให้ไหล่ขวาชนขอบ container (แนวเดียวกับแถบตัวเลขด้านล่าง) · ระยะคน↔แล็ปท็อปคงเดิม · ส่วนที่ล้นเป็นพื้นโปร่งใส (.hero-site ตัดไว้) */
  @media (min-width: 960px) {
    .hero-site-visual[data-compose="person"] .hero-person { translate: 19.3% 0; }
    .hero-site-visual[data-compose="person"] .hero-person-devices { translate: calc(19.3% / 0.76) 0; }
  }
  .hero-person { position: relative; justify-self: end; width: min(100%, 36rem); }

  /* ---- Final Approved Mockup (2026-11-08, ภาพ 1672×941): header เต็มความกว้างจอ (โลโก้ชิดขอบ ~gutter)
     · ไม่มีปุ่มเบอร์โทรบนแถบ (เบอร์อยู่ใน drawer มือถือ · แถบติดล่างจอ · footer · หน้าติดต่อ)
     · hero กว้างเท่า container-wide (ข้อความเริ่ม x≈140 ที่ 1672px) · ภาพบุคคล+อุปกรณ์ใหญ่ขึ้น ~20% ชิดขวา */
  @media (min-width: 1280px) {
    .site-header-inner.container-wide { max-width: none; }
    .site-actions > .site-phone { display: none; }
    /* เมนูอยู่กึ่งกลางระหว่างโลโก้กับปุ่ม (แบบ Mockup: กลุ่มเมนูกึ่งกลางหน้า) · ระยะระหว่างเมนูกว้างขึ้น */
    .site-nav { margin-inline: auto; }
    .site-nav-list { column-gap: 0; }
    /* hero กว้างเท่าส่วนอื่นของหน้า (.container) — เดิมกว้างแบบ container-wide + ภาพเลยขอบขวา
       เจ้าของสั่ง 2026-11-08: บีบซ้าย-ขวาเข้ากลาง ให้แนวเดียวกับแถบตัวเลขด้านล่าง */
    .hero-person { width: min(100%, 40rem); }
    .hero-site-inner { min-height: auto; padding-block: var(--space-6) var(--space-10); }
    .hero-site-title { font-size: clamp(var(--text-2xl), 3.9vw, var(--text-display)); }
    .hero-site-lead { font-size: calc((var(--text-lg) + var(--text-xl)) / 2); }
  }
  /* ระยะเมนูกว้างแบบ Mockup เฉพาะจอที่พอ — 1366px แถบเต็ม ปุ่ม Demo หลุดขอบขวา (วัดจริง 2026-11-08) */
  @media (min-width: 1536px) { .site-nav-list { column-gap: var(--space-8); } }
  /* วงแสงอุ่นด้านหลังบุคคล (แบบ Mockup) */
  .hero-person::before {
    content: "";
    position: absolute;
    inset: 8% -6% 10%;
    border-radius: var(--radius-full);
    background: radial-gradient(closest-side, color-mix(in srgb, var(--color-brand-accent) 16%, transparent), transparent);
    pointer-events: none;
  }
  .hero-person-image {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    /* ภาพตัดพื้นหลังแล้ว (WebP โปร่งใส) — ขอบล่างจางหายหลังแล็ปท็อปแทนการตัดขอบ
       ‼️ ภาพจาก CMS ที่ไม่โปร่งใสจะเห็นเป็นกรอบสี่เหลี่ยม — ใช้ภาพตัดพื้นหลังเท่านั้น (คู่มือ CMS) */
    mask-image: linear-gradient(180deg, currentColor 72%, transparent 98%);
  }
  .hero-person-devices {
    position: relative;
    z-index: 1;
    justify-self: start;
    align-self: end;
    width: 76%;
    /* แล็ปท็อปบังลำตัวช่วงล่างของบุคคล (แบบ Mockup) — ส่วนที่จางของภาพอยู่หลังจอ */
    margin-block-end: calc(-1 * var(--space-6));
  }

  /* เปิดหน้าแบบนุ่ม — h1 · ย่อหน้านำ · ภาพบุคคล ไม่ fade: เป็นตัวเลือก LCP
     (มือถือ LCP = ย่อหน้านำ — fade แล้ว LCP ช้าไป ~0.7 วินาที วัดจริง 2026-11-04) */
  @media (prefers-reduced-motion: no-preference) {
    .hero-site .check-list, .hero-site-actions, .hero-person-devices, .hero-site .eyebrow-pill {
      animation: hero-rise var(--duration-reveal) var(--ease-enter) backwards;
    }
    .hero-site .eyebrow-pill { animation-delay: 0ms; }
    .hero-site .check-list { animation-delay: calc(var(--duration-fast) * .8); }
    .hero-site-actions { animation-delay: calc(var(--duration-fast) * 1.8); }
    .hero-person-devices { animation-delay: calc(var(--duration-fast) * 1.4); }
    .hero-person-devices .device-laptop { animation: mock-float calc(var(--duration-reveal) * 14) ease-in-out calc(var(--duration-reveal) * 2) infinite; }
  }
  @keyframes hero-rise { from { opacity: 0; transform: translateY(var(--space-4)); } to { opacity: 1; transform: none; } }
  .hero-site-visual[data-compose="person"] .mock-caption { grid-area: 2 / 1; padding-block-start: var(--space-8); }
  /* แท็บเล็ต: คนขวา mockup ซ้าย เห็นทั้งคู่ · มือถือ: mockup กว้างขึ้น คนอยู่ด้านหลังเหนือจอ */
  @media (min-width: 640px) and (max-width: 959.98px) {
    .hero-person { width: 46%; }
    .hero-person-devices { width: 62%; }
  }
  @media (max-width: 639.98px) {
    /* ยกภาพบุคคลขึ้นเหนือจอแล็ปท็อป — เห็นหน้า ไหล่ และแขนที่กอดอก ไม่ใช่แค่ศีรษะ (ภาพบุคคล OMC 2026-11-08) */
    .hero-person { width: min(80%, 24rem); margin-block-end: var(--space-20); }
    .hero-person-devices { width: 84%; }
  }

  /* ตัวเลขที่ยืนยันแล้ว: การ์ดลอยทับขอบล่างของ hero (แบบ Mockup) */
  .hero-site + .stats-band { position: relative; z-index: 2; margin-block-start: calc(-1 * var(--space-10)); padding-block-start: 0; }
  .stats-band .stat { justify-content: center; }
  @media (min-width: 640px) {
    .stats-band .stat:not(:first-child) { border-inline-start: 1px solid var(--color-border-normal); }
  }

  /* ---- การ์ด "ทำไมต้อง OMC" และการ์ดอื่น: ยกขึ้นเล็กน้อยเมื่อชี้ */
  @media (prefers-reduced-motion: no-preference) {
    div.feature-card:hover { transform: translateY(calc(-1 * var(--space-1))); box-shadow: var(--shadow-md); }
  }

  /* ---- ฟีเจอร์เด่น: ภาพซ้าย ข้อความขวา */
  @media (min-width: 960px) {
    .showcase-inner[data-reverse="true"] { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
    .showcase-inner[data-reverse="true"] .showcase-text { order: 2; }
  }

  /* ---- split (ทีมงาน): บรรทัดรองสีส้ม · คำอธิบายใต้ภาพ */
  .split-subtitle {
    color: var(--color-brand-primary);
    font-family: var(--font-heading), system-ui, sans-serif;
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
  }
  .split-figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
  .split-figure .split-image { aspect-ratio: 3 / 2; object-fit: cover; box-shadow: var(--shadow-lg); }
  .split-caption { color: var(--color-text-muted); font-size: var(--text-xs); text-align: end; }

  /* ---- ขั้นตอน: เลข + ไอคอน · ลูกศรเชื่อม */
  .step-head { display: flex; align-items: center; gap: var(--space-4); }
  .step-icon { color: var(--color-brand-primary); }
  .step-icon .icon { width: var(--icon-xl); height: var(--icon-xl); }
  @media (min-width: 1100px) {
    .step:has(.step-icon):not(:last-child)::after { inset-inline-start: calc(var(--space-12) + var(--icon-xl) + var(--space-8)); }
  }

  /* ---- ติดต่อ: ข้อความ | ฟอร์มย่อ | ภาพผู้ให้คำปรึกษา */
  .lead-contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: center; }
  .lead-contact-text { display: flex; flex-direction: column; gap: var(--space-4); }
  .lead-contact .lead-form { gap: var(--space-4); }
  /* ฟอร์มย่อ: ไม่มีกรอบกลุ่ม (หัวกลุ่มยังอยู่ให้ screen reader) · ช่องเรียงสองคอลัมน์ */
  .lead-contact fieldset.group { padding: 0; border: 0; gap: var(--space-3); }
  .lead-contact fieldset.group > legend { padding: 0; margin-block-end: var(--space-1); color: var(--color-text-strong); font-weight: var(--weight-bold); }
  .lead-contact .field-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--space-3) var(--space-4); }
  .lead-contact .lead-form-foot { flex-direction: column; align-items: stretch; }
  .lead-contact .lead-form-foot .btn { justify-content: center; }
  .lead-contact-figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
  .lead-contact-image { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 70% 30%; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
  @media (min-width: 1100px) {
    /* ‼️ ภาพไม่ยืดตามความสูงฟอร์ม (เคยยืดจนภาพคนถูกครอปเป็นแท่งสูง) — สัดส่วน 4:5 กึ่งกลางแนวตั้งคู่กับข้อความ */
    .lead-contact { grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--space-10); align-items: center; }
    .lead-contact-image { aspect-ratio: 4 / 5; object-position: 60% 25%; }
  }
  @media (max-width: 639.98px) {
    .lead-contact-figure { display: none; }
  }

  /* ---- แถบติดต่อติดล่างจอ (มือถือ) */
  .site-mobile-bar { display: none; }
  @media (max-width: 767.98px) {
    .site-mobile-bar {
      position: fixed;
      inset-inline: 0;
      bottom: 0;
      z-index: 40;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-2);
      padding: var(--space-2) var(--site-gutter-mobile) calc(var(--space-2) + env(safe-area-inset-bottom));
      border-block-start: 1px solid var(--color-border-normal);
      background: var(--color-surface-card);
      box-shadow: var(--shadow-lg);
    }
    .site-mobile-bar .btn { justify-content: center; }
    .site-body { padding-block-end: calc(var(--space-16) + env(safe-area-inset-bottom)); }
  }
}

@layer utilities {
  .muted   { color: var(--color-text-muted); }
  .strong  { color: var(--color-text-strong); }
  .small   { font-size: var(--text-sm); }
  .nowrap  { white-space: nowrap; }
  .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* ================================================================ หน้ารวมบทความ — redesign 2026-11-07 (mockup "บทความ / ความรู้") */

  /* ---- ส่วนเปิดน้ำเงินหมึก + แล็ปท็อป (hero variant page · tone dark · visual network) */
  .hero-page.is-dark {
    background:
      radial-gradient(60% 120% at 100% 100%, color-mix(in srgb, var(--color-brand-accent) 28%, transparent), transparent 70%),
      linear-gradient(120deg, var(--color-brand-ink) 0%, color-mix(in srgb, var(--color-brand-ink) 86%, var(--color-brand-primary)) 100%);
    border-block-end: 0;
    color: var(--color-brand-on-ink);
  }
  .hero-page.is-dark .hero-page-glow { opacity: .55; }
  .hero-page.is-dark .hero-page-title { color: var(--color-brand-on-ink); }
  .hero-page.is-dark .hero-page-lead { color: color-mix(in srgb, var(--color-brand-on-ink) 86%, transparent); }
  .hero-page.is-dark .breadcrumb ol,
  .hero-page.is-dark .breadcrumb a { color: color-mix(in srgb, var(--color-brand-on-ink) 78%, transparent); }
  .hero-page.is-dark .breadcrumb a:hover,
  .hero-page.is-dark .breadcrumb [aria-current="page"] { color: var(--color-brand-on-ink); }
  .hero-page.is-dark .breadcrumb li + li::before { color: color-mix(in srgb, var(--color-brand-on-ink) 45%, transparent); }
  .hero-page.is-dark .eyebrow-pill {
    background: color-mix(in srgb, var(--color-brand-on-ink) 12%, transparent);
    color: var(--color-brand-on-ink);
    border-color: color-mix(in srgb, var(--color-brand-on-ink) 22%, transparent);
  }
  .hero-page.is-dark .mock-caption { color: color-mix(in srgb, var(--color-brand-on-ink) 70%, transparent); }

  /* inline-size 100% — justify-self:end อย่างเดียวทำให้ figure หดเหลือความกว้างต่ำสุดของเนื้อหา (แล็ปท็อปเล็กผิดรูป) */
  .hero-page-visual { display: none; margin: 0; inline-size: 100%; max-inline-size: calc(var(--space-24) * 5); justify-self: end; }
  @media (min-width: 900px) {
    .hero-page.has-visual .hero-page-inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
      align-items: center;
      column-gap: var(--space-12);
      padding-block: var(--space-8) var(--space-10);
    }
    .hero-page.has-visual .hero-page-inner > :not(.hero-page-visual) { grid-column: 1; }
    .hero-page-visual {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      grid-column: 2;
      grid-row: 1 / span 6;
      align-self: center;
    }
  }

  /* ---- แถบตัวกรองหมวด + ค้นหา */
  .blog-listing { padding-block: var(--space-8) var(--space-4); }
  .blog-listing + .blog-listing { padding-block: var(--space-8) var(--space-12); }
  .blog-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-block-end: var(--space-6);
  }
  .blog-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .blog-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding-inline: var(--space-4);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-full);
    background: var(--color-surface-card);
    box-shadow: var(--shadow-sm);
    color: var(--color-text-strong);
    font-weight: var(--weight-medium);
    text-decoration: none;
  }
  .blog-pill:hover { border-color: var(--color-brand-primary); color: var(--color-brand-primary); }
  .blog-pill[aria-current="page"] {
    background: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
    color: var(--color-brand-on-primary);
  }
  .blog-search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 18rem;
    max-width: 24rem;
    min-height: 44px;
    padding-inline: var(--space-4) var(--space-1);
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-full);
    background: var(--color-surface-card);
    color: var(--color-text-muted);
  }
  .blog-search:focus-within { border-color: var(--color-brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-accent) 22%, transparent); }
  .blog-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-strong);
    font: inherit;
    outline: none;
  }
  .blog-search-submit {
    min-height: calc(var(--space-8) + var(--space-1));
    padding-inline: var(--space-4);
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-brand-primary);
    color: var(--color-brand-on-primary);
    font: inherit;
    font-weight: var(--weight-medium);
    cursor: pointer;
  }
  .blog-results { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-block-end: var(--space-4); color: var(--color-text-normal); }
  .blog-results a { color: var(--color-brand-link); }
  @media (max-width: 639.98px) {
    .blog-filter { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); padding-block-end: var(--space-1); scrollbar-width: none; }
    .blog-pill { flex: none; }
    .blog-search { max-width: none; }
  }

  /* ---- การ์ดบทความแนวนอน */
  .news-list { gap: var(--space-5); }
  .news-list > li + li { border-block-start: 0; }
  .news-item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--color-border-normal);
    border-radius: var(--radius-lg);
    background: var(--color-surface-card);
    box-shadow: var(--shadow-sm);
  }
  .news-item:has(.news-item-link:focus-visible) { outline: 3px solid var(--color-brand-accent); outline-offset: 2px; }
  .news-item-media { position: relative; overflow: hidden; background: var(--color-surface-raised); }
  .news-item-media .news-item-image { display: block; inline-size: 100%; block-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
  .news-item-fallback {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    block-size: 100%;
    background: linear-gradient(135deg, var(--color-brand-ink), color-mix(in srgb, var(--color-brand-ink) 70%, var(--color-brand-primary)));
  }
  .news-item-fallback img { inline-size: 42%; block-size: auto; }
  .news-item-body { gap: var(--space-2); padding: var(--space-5); }
  .news-item-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); }
  .news-item-meta span { display: inline-flex; align-items: center; gap: var(--space-1); }
  .news-item-title { font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: var(--leading-snug); }
  .news-item-link { color: var(--color-text-strong); text-decoration: none; }
  .news-item-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .news-item-link:focus-visible { outline: none; }
  .news-item:hover .news-item-link { color: var(--color-brand-primary); }
  .news-item-lead {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    color: var(--color-text-normal);
  }
  .news-item-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-start: var(--space-2); }
  .news-item-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
  .news-chip {
    position: relative;
    z-index: 2; /* เหนือ ::after ของลิงก์หัวข้อ — ชิปกดแยกได้ */
    display: inline-flex;
    align-items: center;
    min-height: var(--space-8);
    padding-inline: var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-surface-raised);
    color: var(--color-text-normal);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
  }
  .news-chip:hover { color: var(--color-brand-primary); }
  .news-chip.is-category { background: color-mix(in srgb, var(--color-brand-accent) 12%, var(--color-surface-card)); color: var(--color-brand-link); }
  .news-item-more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: calc(var(--space-8) + var(--space-1));
    padding-inline: var(--space-4);
    border: 1px solid var(--color-brand-primary);
    border-radius: var(--radius-full);
    color: var(--color-brand-link);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
  }
  .news-item:hover .news-item-more { background: var(--color-brand-primary); color: var(--color-brand-on-primary); }
  @media (min-width: 760px) {
    /* ภาพปกเดิมส่วนใหญ่เป็นจัตุรัส — คอลัมน์ภาพ 30% + การ์ดสูงขึ้นเล็กน้อย ตัดภาพน้อยลง */
    /* align-items: stretch — กฎเดิม (min-width 620px) ตั้ง start ไว้ ทำให้คอลัมน์ภาพไม่ยืดเต็มความสูงการ์ด */
    .news-item { grid-template-columns: minmax(0, 30%) minmax(0, 1fr); align-items: stretch; }
    .news-item-media .news-item-image, .news-item-fallback { aspect-ratio: auto; min-block-size: 100%; position: absolute; inset: 0; }
    .news-item-media { min-block-size: calc(var(--space-24) * 2 + var(--space-4)); }
    .news-item-body { padding: var(--space-5) var(--space-6); }
  }
  @media (prefers-reduced-motion: no-preference) {
    .news-item { transition: transform var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard); }
    .news-item:hover { transform: translateY(calc(-1 * var(--space-1))); box-shadow: var(--shadow-md); }
    .news-item-media .news-item-image { transition: transform var(--duration-slow) var(--ease-soft); }
    .news-item:hover .news-item-image { transform: scale(1.04); }
    .news-item-more, .blog-pill { transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
  }

  /* ---- แบ่งหน้า (หน้าสาธารณะ) */
  .site-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-2); margin-block-start: var(--space-10); }
  .site-pagination-page, .site-pagination-step {
    display: inline-grid;
    place-items: center;
    min-inline-size: 44px;
    block-size: 44px;
    padding-inline: var(--space-2);
    border-radius: var(--radius-full);
    color: var(--color-text-strong);
    font-weight: var(--weight-medium);
    text-decoration: none;
  }
  .site-pagination-page:hover { background: var(--color-surface-raised); }
  .site-pagination-page[aria-current="page"] { background: var(--color-brand-primary); color: var(--color-brand-on-primary); }
  .site-pagination-step { border: 1px solid var(--color-border-normal); background: var(--color-surface-card); box-shadow: var(--shadow-sm); }
  .site-pagination-step:hover { border-color: var(--color-brand-primary); color: var(--color-brand-primary); }
  .site-pagination-gap { color: var(--color-text-muted); padding-inline: var(--space-1); }

  /* ---- หน้าแรก: แถบตัวเลข + Technology Partner (บล็อก stats ที่มีหัวข้อ) */
  /* ส่วนถัดไปมี padding ของตัวเองอยู่แล้ว — ปลายส่วนนี้จึงสั้น ไม่ให้เกิดช่องว่างซ้อนสองชั้น */
  .stats-band[data-layout="partner"] { padding-block-end: var(--space-4); }
  .stats-band[data-layout="partner"] .stats-grid { padding: var(--space-6) var(--space-8); }
  .stats-band[data-layout="partner"] .stat-value { font-size: var(--text-3xl); line-height: var(--leading-tight); color: var(--color-brand-ink); }
  @media (min-width: 960px) { .stats-band[data-layout="partner"] .stat-value { font-size: var(--text-4xl); } }
  .stats-band[data-layout="partner"] .stat[data-kind="text"] .stat-value { font-size: var(--text-xl); }
  @media (min-width: 960px) { .stats-band[data-layout="partner"] .stat[data-kind="text"] .stat-value { font-size: var(--text-2xl); } }
  .stats-band[data-layout="partner"] .stat-icon {
    display: inline-grid; place-items: center; flex: none;
    width: var(--space-12); height: var(--space-12);
    border-radius: var(--radius-md); background: var(--color-brand-accent-soft);
  }
  .stat-suffix { color: var(--color-brand-primary); }
  .stats-band[data-layout="partner"] .section-head { max-width: 60rem; margin-block-start: var(--space-12); margin-block-end: 0; }
  /* หัวข้อยาว (ข้อความหลักของแบรนด์): ไม่มีขีดสองข้าง ให้ตัวหนังสือได้ความกว้างเต็ม · ตัดบรรทัดสมดุล */
  .stats-band[data-layout="partner"] .section-title { display: block; text-wrap: balance; }
  .stats-band[data-layout="partner"] .section-title::before,
  .stats-band[data-layout="partner"] .section-title::after { content: none; }
  .stats-band[data-layout="partner"] .section-lead { max-inline-size: 52rem; }
  @media (max-width: 639.98px) {
    .stats-band[data-layout="partner"] .stats-grid { padding: var(--space-5); gap: var(--space-5); }
    .stats-band[data-layout="partner"] .stat { justify-content: flex-start; }
  }

  /* ---- การ์ดจุดแข็งแบบมีเลขลำดับ (feature_grid numbered) */
  @media (min-width: 640px) and (max-width: 1099.98px) { .feature-grid[data-numbered="true"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .feature-grid[data-numbered="true"] .feature-card { overflow: hidden; padding-block-start: var(--space-8); }
  .feature-grid[data-numbered="true"] .feature-card::before {
    content: "";
    position: absolute; inset-inline: 0; inset-block-start: 0;
    block-size: var(--space-1);
    background: linear-gradient(90deg, var(--color-brand-accent), var(--color-brand-accent-end));
    transform: scaleX(.18); transform-origin: left center;
    transition: transform var(--duration-slow) var(--ease-soft);
  }
  .feature-card-index {
    position: absolute; inset-block-start: var(--space-5); inset-inline-end: var(--space-6);
    color: var(--color-border-normal);
    font-family: var(--font-heading), system-ui, sans-serif; font-size: var(--text-3xl); font-weight: var(--weight-bold);
    line-height: 1; font-variant-numeric: tabular-nums;
    transition: color var(--duration-normal) var(--ease-standard);
  }
  .feature-grid[data-numbered="true"] .feature-card-title { padding-inline-end: var(--space-10); }
  .feature-grid[data-numbered="true"] .feature-card-text { line-height: var(--leading-normal); }
  .feature-grid[data-numbered="true"] .feature-card:hover { border-color: var(--color-brand-accent-soft); }
  .feature-grid[data-numbered="true"] .feature-card:hover::before { transform: scaleX(1); }
  .feature-grid[data-numbered="true"] .feature-card:hover .feature-card-index { color: var(--color-brand-accent); }
  .feature-grid[data-numbered="true"] .feature-card:hover .icon-chip { background: var(--color-brand-primary); color: var(--color-brand-on-primary); }
  @media (prefers-reduced-motion: reduce) {
    .feature-grid[data-numbered="true"] .feature-card::before { transition: none; }
  }
}