/*
 * DICHANA v8.5.69 — Thai Typography Compatibility & Visual Regression Fix
 * Scope: every public HTML page.
 * Purpose:
 * - Use the shared self-hosted Prompt family with Thai-safe line height, regular body weight and semibold headings.
 * - Preserve each component's intended size and colour instead of globally flattening UI styles.
 * - Repair dark-surface contrast, centered section headings, responsive titles and mobile actions.
 */

:root {
  --dcn-v8569-body-size: clamp(1rem, .975rem + .1vw, 1.0625rem);
  --dcn-v8569-body-line: 1.75;
  --dcn-v8569-heading-line: 1.32;
  --dcn-v8569-mobile-gutter: clamp(.875rem, 4.25vw, 1.25rem);
  --dcn-v8569-white: #fff;
  --dcn-v8569-white-soft: rgba(255,255,255,.82);
  --dcn-v8569-white-muted: rgba(255,255,255,.72);
  --dcn-v8569-ink: #101828;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-synthesis: none;
}

body.typography-v8569,
body.typography-v8569 * {
  font-family: var(--dichana-font-sans) !important;
  letter-spacing: 0 !important;
  font-synthesis: none;
  font-kerning: auto;
}

body.typography-v8569 {
  font-size: var(--dcn-v8569-body-size);
  font-weight: 400;
  line-height: var(--dcn-v8569-body-line);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Thai body copy: regular weight, comfortable vowel/diacritic clearance. */
body.typography-v8569 :where(
  p, li, dt, dd, blockquote, figcaption, address, caption,
  td, input, select, textarea, option,
  .lead, .article-intro, .article-body, .article-content,
  .blog-card-excerpt, .blog-card-summary, .policy-content,
  .legal-content, .form-help, .field-help,
  .product-detail-description, .tester-modal-summary
) {
  font-weight: 400 !important;
  line-height: var(--dcn-v8569-body-line) !important;
  overflow-wrap: break-word;
  word-break: normal;
  line-break: auto;
  hyphens: none;
}

body.typography-v8569 :where(p, li, dd, blockquote, figcaption) {
  text-wrap: pretty;
}

/* Preserve component sizing; standardise only weight, rhythm and Thai wrapping. */
body.typography-v8569 :where(h1, h2, h3, h4, h5, h6) {
  margin-block-start: 0;
  font-weight: 600 !important;
  line-height: var(--dcn-v8569-heading-line) !important;
  overflow: visible !important;
  overflow-wrap: break-word;
  word-break: normal;
  line-break: auto;
  hyphens: none;
  text-wrap: balance;
  padding-bottom: .035em;
}

body.typography-v8569 :where(h3, h4) {
  line-height: 1.42 !important;
}

body.typography-v8569 :where(h5, h6) {
  line-height: 1.5 !important;
}

body.typography-v8569 :where(h1, h2, h3, h4, h5, h6) :where(span, strong, b, em) {
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: 0 !important;
}

body.typography-v8569 :where(strong, b, th, summary) {
  font-weight: 600 !important;
}

body.typography-v8569 :where(.btn, button, [role="button"], .nav-links a, .drawer-menu a) {
  font-weight: 600 !important;
}

/* Page-level title scale. Do not resize headings inside cards, modals or compact panels. */
body.typography-v8569 :where(
  .page-hero h1.title,
  .batch2-hero-copy h1.title,
  .batch3-hero-copy h1.title,
  .batch4-hero-copy h1.title,
  .standard-v8562-hero-copy h1.title,
  .article-hero-copy h1,
  .blog-hero-copy h1
) {
  font-size: clamp(2.65rem, 4vw, 3.8rem) !important;
  line-height: 1.22 !important;
  max-width: 100%;
}

body.typography-v8569 .hero-video-title {
  font-size: clamp(2.8rem, 4.7vw, 4.5rem) !important;
  line-height: 1.14 !important;
}

/* Intentional centered section heads must stack, not form an accidental flex row. */
body.typography-v8569 .section-head.centered {
  display: block !important;
  width: 100%;
  text-align: center !important;
}

body.typography-v8569 .section-head.centered > .kicker {
  display: inline-flex;
  width: auto;
  margin: 0 auto 12px;
}

body.typography-v8569 .section-head.centered > :where(h2, h3, .title) {
  width: min(100%, 900px);
  margin-inline: auto !important;
  margin-bottom: 12px;
}

body.typography-v8569 .section-head.centered > p {
  width: min(100%, 760px);
  margin: 0 auto !important;
}

body.typography-v8569 .section-head.centered > div {
  margin-inline: auto;
}

/* Keep compact labels on one line; prevents badges such as “Quality Gates” splitting. */
body.typography-v8569 :where(
  .section-head > .kicker,
  .cta-band .kicker,
  .article-cta-box .kicker,
  .dark-card .kicker,
  .contact-next-step-inner-v8566 .kicker,
  .standard-v8562-quality-intro .kicker,
  .standard-v8562-cta-inner .kicker
) {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  line-height: 1.4 !important;
}

/* ---------- Dark-surface compatibility ----------
   v8.5.51 gave every heading the global ink colour. These scoped rules restore
   the intended white hierarchy on dark cards and CTA surfaces. */
body.typography-v8569 :where(
  .formula-panel-content,
  .cta-band,
  .article-cta-box,
  .dark-card,
  .contact-hero-card-v8564,
  .contact-next-step-inner-v8566,
  .standard-v8562-quality-intro,
  .standard-v8562-cta-inner,
  .footer
) :where(h1, h2, h3, h4, h5, h6) {
  color: var(--dcn-v8569-white) !important;
}

body.typography-v8569 :where(
  .formula-panel-content,
  .cta-band,
  .article-cta-box,
  .dark-card,
  .contact-hero-card-v8564,
  .contact-next-step-inner-v8566,
  .standard-v8562-quality-intro,
  .standard-v8562-cta-inner,
  .footer
) :where(p, li, dd, figcaption) {
  color: var(--dcn-v8569-white-soft) !important;
}

body.typography-v8569 :where(
  .cta-band,
  .article-cta-box,
  .dark-card,
  .contact-hero-card-v8564,
  .contact-next-step-inner-v8566,
  .standard-v8562-quality-intro,
  .standard-v8562-cta-inner,
  .footer
) strong {
  color: var(--dcn-v8569-white) !important;
}

body.typography-v8569 .formula-panel-content h3 {
  color: #fff !important;
  line-height: 1.28 !important;
}

body.typography-v8569 .formula-panel-content p {
  color: rgba(255,255,255,.86) !important;
}

body.typography-v8569 .formula-panel-content .card-link {
  color: #fff !important;
}

body.typography-v8569 .contact-hero-card-v8564 li {
  color: rgba(255,255,255,.82) !important;
}

body.typography-v8569 .contact-hero-card-v8564 li > span {
  color: #fff !important;
}

body.typography-v8569 .contact-hero-card-footer-v8564 {
  color: rgba(255,255,255,.82) !important;
}

/* Dark-surface badges: stronger contrast without losing DICHANA CI. */
body.typography-v8569 :where(
  .cta-band,
  .article-cta-box,
  .dark-card,
  .contact-next-step-inner-v8566,
  .standard-v8562-quality-intro,
  .standard-v8562-cta-inner
) .kicker {
  color: #ffd7f2 !important;
  background: rgba(255,255,255,.11) !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: none !important;
}

body.typography-v8569 :where(.article-cta-box, .cta-band, .dark-card) .btn-secondary {
  color: #fff !important;
  border-color: rgba(255,255,255,.42) !important;
  background: rgba(255,255,255,.06) !important;
}

body.typography-v8569 :where(.article-cta-box, .cta-band, .dark-card) .btn-secondary:hover {
  border-color: rgba(255,255,255,.72) !important;
  background: rgba(255,255,255,.13) !important;
}

body.typography-v8569 .footer .btn-primary,
body.typography-v8569 .footer .btn-primary * {
  color: #fff !important;
  font-weight: 600 !important;
}

/* CTA headings: balanced scale, avoiding two-line blocks that dominate the card. */
body.typography-v8569 :where(.cta-band, .article-cta-box, .contact-next-step-inner-v8566) h2.title,
body.typography-v8569 :where(.cta-band, .article-cta-box, .contact-next-step-inner-v8566) h2 {
  font-size: clamp(2rem, 2.55vw, 2.75rem) !important;
  line-height: 1.28 !important;
  max-width: 24ch;
}

body.typography-v8569 .contact-hero-card-v8564 h2 {
  font-size: clamp(1.65rem, 2vw, 2.15rem) !important;
  line-height: 1.3 !important;
}

/* Improve Thai text clipping and navigation rhythm. */
body.typography-v8569 :where(.nav-links a, .drawer-menu a, .site-footer a, .footer a) {
  line-height: 1.55 !important;
  overflow: visible !important;
}

body.typography-v8569 .nav-links a {
  white-space: nowrap;
  font-size: clamp(.82rem, .82vw, .92rem);
}

body.typography-v8569 :where(.btn, button, [role="button"]) {
  line-height: 1.45 !important;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

body.typography-v8569 :where(input, select, textarea, button) {
  font-size: max(1rem, 16px);
}

body.typography-v8569 :where(input, select, textarea) {
  line-height: 1.65 !important;
  font-weight: 400 !important;
}

body.typography-v8569 :where(input, textarea)::placeholder {
  font-weight: 400;
  letter-spacing: 0;
  opacity: .72;
}

body.typography-v8569 :where(a[href^="mailto:"], a[href^="tel:"]) {
  overflow-wrap: anywhere;
}

body.typography-v8569 :where(pre, code, kbd, samp) {
  font-family: var(--dichana-font-sans) !important;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Contact preparation list: allow genuine Thai wrapping instead of clipping. */
body.typography-v8569 .contact-prep-card-v8566 .check-list li {
  min-width: 0;
  height: auto !important;
  overflow: visible !important;
  white-space: normal !important;
}

/* ---------- Responsive Thai typography ---------- */
@media (max-width: 1024px) {
  body.typography-v8569 :where(
    .page-hero h1.title,
    .batch2-hero-copy h1.title,
    .batch3-hero-copy h1.title,
    .batch4-hero-copy h1.title,
    .standard-v8562-hero-copy h1.title,
    .article-hero-copy h1,
    .blog-hero-copy h1
  ) {
    font-size: clamp(2.35rem, 5.4vw, 3.25rem) !important;
  }

  body.typography-v8569 .hero-video-title {
    font-size: clamp(2.45rem, 6vw, 3.6rem) !important;
  }
}

@media (max-width: 760px) {
  :root {
    --dcn-v8569-body-line: 1.72;
  }

  body.typography-v8569 .container {
    width: min(100% - (var(--dcn-v8569-mobile-gutter) * 2), var(--container)) !important;
    max-width: 100%;
  }

  body.typography-v8569 :where(.article-shell, .product-library-shell) {
    width: min(100% - (var(--dcn-v8569-mobile-gutter) * 2), 100%) !important;
    max-width: 100%;
  }

  body.typography-v8569 .formula-fullscreen-container {
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
  }

  body.typography-v8569 .nav-wrap {
    padding-left: max(.875rem, env(safe-area-inset-left)) !important;
    padding-right: max(.875rem, env(safe-area-inset-right)) !important;
  }

  body.typography-v8569 :where(
    .page-hero h1.title,
    .batch2-hero-copy h1.title,
    .batch3-hero-copy h1.title,
    .batch4-hero-copy h1.title,
    .standard-v8562-hero-copy h1.title,
    .article-hero-copy h1,
    .blog-hero-copy h1
  ) {
    font-size: clamp(2rem, 9.2vw, 2.55rem) !important;
    line-height: 1.24 !important;
  }

  body.typography-v8569 .hero-video-title {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(2rem, 9vw, 2.5rem) !important;
    line-height: 1.16 !important;
  }

  body.typography-v8569 :where(.section-head h2.title, .section-head > h2) {
    font-size: clamp(1.65rem, 7.2vw, 2.05rem) !important;
    line-height: 1.34 !important;
  }

  body.typography-v8569 :where(.cta-band, .article-cta-box, .contact-next-step-inner-v8566) h2.title,
  body.typography-v8569 :where(.cta-band, .article-cta-box, .contact-next-step-inner-v8566) h2 {
    max-width: 100%;
    font-size: clamp(1.65rem, 7vw, 2.05rem) !important;
    line-height: 1.34 !important;
  }

  body.typography-v8569 .contact-hero-card-v8564 h2 {
    font-size: clamp(1.55rem, 6.7vw, 1.9rem) !important;
  }

  body.typography-v8569 .section-head.centered {
    text-align: center !important;
  }

  body.typography-v8569 .section-head.centered > :where(h2, h3, .title),
  body.typography-v8569 .section-head.centered > p {
    width: 100%;
  }

  body.typography-v8569 .contact-prep-card-v8566 .check-list {
    grid-template-columns: 1fr !important;
  }

  body.typography-v8569 .mobile-contact-bar :where(a, .btn) {
    min-width: 0;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 420px) {
  :root {
    --dcn-v8569-mobile-gutter: .875rem;
  }

  body.typography-v8569 :where(.hero-ctas, .page-hero .hero-ctas, .cta-actions) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    gap: .75rem !important;
  }

  body.typography-v8569 :where(.hero-ctas, .page-hero .hero-ctas, .cta-actions) .btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  body.typography-v8569 :where(.btn, button, [role="button"]) {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.typography-v8569 {
    scroll-behavior: auto;
  }
}

/* Final priority lock against legacy v8.5.11/v8.5.51 font-weight rules only.
   Colours and component dimensions remain component-owned. */
html body#dichana-typography-v8551.typography-v8569 :is(h1,h2,h3,h4,h5,h6),
html body.typography-v8569.typography-v8569.typography-v8569 :is(h1,h2,h3,h4,h5,h6) {
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

html body#dichana-typography-v8551.typography-v8569 :is(p,li,dt,dd,blockquote,figcaption,address,caption),
html body.typography-v8569.typography-v8569.typography-v8569 :is(p,li,dt,dd,blockquote,figcaption,address,caption) {
  font-weight: 400 !important;
  line-height: var(--dcn-v8569-body-line) !important;
  letter-spacing: 0 !important;
}

/* v8.5.69 high-specificity compatibility lock for legacy ID-based rules. */
html body#dichana-typography-v8551.typography-v8569.typography-v8569.typography-v8569 h1,
html body#dichana-typography-v8551.typography-v8569.typography-v8569.typography-v8569 h2,
html body#dichana-typography-v8551.typography-v8569.typography-v8569.typography-v8569 h3,
html body#dichana-typography-v8551.typography-v8569.typography-v8569.typography-v8569 h4,
html body#dichana-typography-v8551.typography-v8569.typography-v8569.typography-v8569 h5,
html body#dichana-typography-v8551.typography-v8569.typography-v8569.typography-v8569 h6 {
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

html body#dichana-typography-v8551.typography-v8569.typography-v8569.typography-v8569 :is(p,li,dt,dd,blockquote,figcaption,address,caption) {
  font-weight: 400 !important;
  line-height: var(--dcn-v8569-body-line) !important;
  letter-spacing: 0 !important;
}

html body#dichana-typography-v8551.typography-v8569 .formula-panel-content h3 {
  color: #fff !important;
  font-size: clamp(1.8rem, 2.2vw, 2.4rem) !important;
  line-height: 1.28 !important;
  font-weight: 600 !important;
}

html body#dichana-typography-v8551.typography-v8569 :is(.cta-band, .article-cta-box, .contact-next-step-inner-v8566) h2.title,
html body#dichana-typography-v8551.typography-v8569 :is(.cta-band, .article-cta-box, .contact-next-step-inner-v8566) h2 {
  color: #fff !important;
  font-size: clamp(2rem, 2.45vw, 2.75rem) !important;
  line-height: 1.28 !important;
  font-weight: 600 !important;
  max-width: 30ch;
}

html body#dichana-typography-v8551.typography-v8569 .contact-hero-card-v8564 h2 {
  color: #fff !important;
  font-size: clamp(1.65rem, 2vw, 2.15rem) !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
}

@media (max-width: 760px) {
  html body#dichana-typography-v8551.typography-v8569 :is(.cta-band, .article-cta-box, .contact-next-step-inner-v8566) h2.title,
  html body#dichana-typography-v8551.typography-v8569 :is(.cta-band, .article-cta-box, .contact-next-step-inner-v8566) h2 {
    font-size: clamp(1.65rem, 7vw, 2.05rem) !important;
    max-width: 100%;
  }
}

/* Absolute typography lock for legacy selectors with long class chains.
   :not(#...) contributes ID specificity while still matching every heading/copy element. */
html body.typography-v8569 h1:not(#dcn-v8569-heading-lock),
html body.typography-v8569 h2:not(#dcn-v8569-heading-lock),
html body.typography-v8569 h3:not(#dcn-v8569-heading-lock),
html body.typography-v8569 h4:not(#dcn-v8569-heading-lock),
html body.typography-v8569 h5:not(#dcn-v8569-heading-lock),
html body.typography-v8569 h6:not(#dcn-v8569-heading-lock) {
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

html body.typography-v8569 :is(p,li,dt,dd,blockquote,figcaption,address,caption):not(#dcn-v8569-copy-lock) {
  font-weight: 400 !important;
  line-height: var(--dcn-v8569-body-line) !important;
  letter-spacing: 0 !important;
}

/* DICHANA v8.5.97 — Mobile Thai word-boundary hotfix */
.thai-word-nowrap {
  display: inline-block;
  white-space: nowrap;
}

@media (max-width: 760px) {
  html[lang="th"] body.typography-v8569 .hero-video-lead {
    overflow-wrap: normal !important;
    word-break: normal !important;
    line-break: auto;
    hyphens: none;
    text-wrap: pretty;
  }
}

@supports (word-break: auto-phrase) {
  @media (max-width: 760px) {
    html[lang="th"] body.typography-v8569 .hero-video-lead {
      word-break: auto-phrase !important;
    }
  }
}