/* Styles for pages created in the CMS (About, FAQ, Blog index, new pages, 404).
   They reuse the site's colours (--lumicore, --grey-body) and fonts from the Webflow CSS. */
.lc-main { padding: 120px 20px 80px; min-height: 60vh; }
.lc-content { max-width: 880px; margin: 0 auto; color: #202020; font-family: "IBM Plex Sans Thai", area-normal, sans-serif; font-size: 18px; line-height: 1.7; }
.lc-content.lc-wide { max-width: 1200px; }
.lc-hero { text-align: center; margin-bottom: 48px; }
.lc-hero h1 { font-family: area-extended, "IBM Plex Sans Thai", sans-serif; font-weight: 800; font-size: clamp(34px, 6vw, 64px); line-height: 1.1; margin: 0 0 16px; text-transform: uppercase; }
.lc-lead { font-size: 20px; color: #444; max-width: 720px; margin: 0 auto; }
.lc-body h2, .lc-faq h2 { font-family: area-extended, "IBM Plex Sans Thai", sans-serif; font-size: 28px; line-height: 1.25; margin: 48px 0 16px; }
.lc-body h3 { font-size: 22px; margin: 32px 0 12px; }
.lc-body p, .lc-body ul, .lc-body ol { margin: 0 0 16px; }
.lc-body a, .lc-faq a { color: #202020; text-decoration-color: var(--lumi-purple, #8701fa); text-underline-offset: 3px; }
.lc-body img { max-width: 100%; height: auto; border-radius: 20px; }
.lc-body table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 16px; }
.lc-body th, .lc-body td { border-bottom: 1px solid #c9cfd6; padding: 10px 8px; text-align: left; vertical-align: top; }
.lc-faq { margin-top: 48px; }
.lc-faq-item { background: #f0f1f2; border-radius: 20px; padding: 20px 24px; margin: 0 0 12px; }
.lc-faq-item summary { cursor: pointer; list-style: none; }
.lc-faq-item summary::-webkit-details-marker { display: none; }
.lc-faq-item summary h3, .lc-faq-item summary h2.lc-q { display: inline; font-size: 20px; line-height: 1.4; margin: 0; }
.lc-faq-answer { margin-top: 10px; }
.lc-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.lc-card a { display: block; background: #f0f1f2; border-radius: 20px; overflow: hidden; color: #202020; text-decoration: none; height: 100%; position: relative; transition: transform .2s; }
.lc-card a:hover { transform: translateY(-4px); }
.lc-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.lc-card h2 { font-size: 20px; line-height: 1.35; margin: 16px 20px 8px; }
.lc-card p { font-size: 15px; line-height: 1.6; margin: 0 20px 12px; color: #444; }
.lc-card time { display: block; font-size: 13px; margin: 0 20px 20px; color: #666; }
.lc-card-lang { position: absolute; top: 12px; left: 12px; background: var(--lumicore, #d2ff00); border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; }
.lc-button { display: inline-block; background: var(--lumicore, #d2ff00); color: #202020; border-radius: 999px; padding: 12px 28px; text-decoration: none; font-weight: 600; margin: 4px; }
.lc-button-ghost { background: transparent; border: 1px solid #202020; }
.lc-404 { text-align: center; }
@media (max-width: 767px) {
  .lc-main { padding: 100px 16px 60px; }
  .lc-content { font-size: 16px; }
  .lc-lead { font-size: 17px; }
}

/* Privacy and cookie policy pages */
.lc-table-wrap { overflow-x: auto; margin: 8px 0 24px; }
.lc-table-wrap table { min-width: 560px; }
.lc-body code { font-family: ui-monospace, Menlo, monospace; font-size: 15px; background: #f0f1f2; padding: 1px 6px; border-radius: 6px; }
.lc-en { margin-top: 56px; padding-top: 8px; border-top: 1px solid #c9cfd6; }
.lc-small { font-size: 14px; color: #555; margin: 0; }
/* Privacy request form: the site's form look (underlined fields like the contact form, lime pill button) */
.lc-dsar { margin: 8px 0 40px; max-width: 640px; }
.lc-form { display: flex; flex-direction: column; gap: 22px; }
.lc-form label { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 20px; font-weight: 400; color: #55595e; }
.lc-form input[type=text], .lc-form input[type=email], .lc-form select, .lc-form textarea { font-family: inherit; font-size: 16px; line-height: 24px; font-weight: 400; color: #202326; height: 46px; padding: 0; border: 0; border-bottom: 1px solid #adb7bd; border-radius: 0; background: transparent; width: 100%; box-sizing: border-box; -webkit-appearance: none; appearance: none; }
.lc-form textarea { height: auto; min-height: 92px; padding: 11px 0; resize: vertical; }
.lc-form select { padding-right: 28px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23202326' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 4px center; cursor: pointer; }
.lc-form input:focus, .lc-form select:focus, .lc-form textarea:focus { outline: none; border-bottom-color: #000; box-shadow: 0 1px 0 #000; }
.lc-form ::placeholder { color: #7b8086; }
.lc-form select:invalid { color: #7b8086; }
.lc-form .lc-small { font-size: 12px; line-height: 18px; color: #55595e; margin: -4px 0 0; }
.lc-form input[type=submit] { align-self: stretch; width: 100%; margin: 6px 0 0; padding: 16px 20px; border: 0; border-radius: 40px; background: #d2ff00; color: #000; cursor: pointer; font: 700 18px/20px area-normal, "area-normal-fb", "IBM Plex Sans Thai", Arial, sans-serif; }
.lc-form input[type=submit]:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.lc-dsar .w-form-done, .lc-dsar .w-form-fail { padding: 16px 0; border-top: 1px solid #adb7bd; font-size: 16px; }
.lc-en { scroll-margin-top: 120px; }

/* Extra section with headings under the design of the Lab pages */
.lc-extra { padding: 64px 20px 72px; background: #fff; }
.lc-extra .lc-body h2:first-child { margin-top: 0; }
.lc-dsar { scroll-margin-top: 120px; }