/* [hidden] must win.
   The HTML `hidden` attribute is how every script in this project shows and
   hides things -- `el.hidden = true`. The user agent implements it as
   `[hidden]{display:none}`, which ANY author rule setting `display` beats,
   and 253 classes in this project set one. That has silently broken four
   features already: the OTP resend row, the receipt-form save message, the
   Omise card panel, and the purchase-history empty state, each of which
   ignored `el.hidden = true` and sat on screen saying something untrue.
   Each was found by a user, none by a test.
   `!important` is the point rather than a shortcut: this rule exists
   specifically to outrank author rules. An element that must be visible
   should not carry the attribute. */
[hidden]{display:none!important}
@font-face {
  font-family: "LINE Seed Sans TH";
  src: url("../fonts/LINESeedSansTH_W_Rg.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "LINE Seed Sans TH";
  src: url("../fonts/LINESeedSansTH_W_Bd.woff2") format("woff2");
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
}

@font-face {
  font-family: "LINE Seed Sans TH";
  src: url("../fonts/LINESeedSansTH_W_XBd.woff2") format("woff2");
  font-style: normal;
  font-weight: 800 900;
  font-display: swap;
}

html,
body,
button,
input,
select,
textarea {
  font-family: "LINE Seed Sans TH", Arial, sans-serif !important;
}

.language-switch {
  position: relative;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  margin-right: 16px;
  padding: 5px 9px;
  color: #ffffffa8;
  border: 1px solid #ffffff30;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.language-switch button {
  position: relative;
  z-index: 51;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  pointer-events: auto;
}

.language-switch button.active {
  color: var(--lime);
}

/* Keep the service navigation geometrically centered in the header. */
nav {
  position: relative;
}

/* Keep the header controls above the hero artwork so links remain clickable. */
.hero-shell > nav {
  z-index: 100;
}

.hero-shell > nav .nav-cta,
.hero-shell > nav .language-switch {
  position: relative;
  z-index: 101;
  pointer-events: auto;
}

nav .logo {
  position: relative;
}

nav .logo::after {
  content: "Report";
  position: absolute;
  left: 46%;
  top: 61%;
  width: 40%;
  height: 25%;
  color: #fff;
  background: #0b4742;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  border: 1px solid currentColor;
}

footer .logo {
  position: relative;
}

footer .logo::after {
  content: "Report";
  position: absolute;
  left: 46%;
  top: 61%;
  width: 40%;
  height: 25%;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
}

.footer-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #607775;
}

.footer-contact > span {
  color: var(--ink);
  font-weight: 700;
}

.footer-contact a {
  padding: 7px 11px;
  color: var(--deep);
  border: 1px solid #cbdad5;
  border-radius: 999px;
  font-weight: 700;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.footer-contact a:hover {
  color: #fff;
  background: var(--deep);
  border-color: var(--deep);
}

.mascot-visual {
  min-height: 570px;
}

.mascot-visual > img {
  width: auto;
  height: min(610px, 72vh);
  max-width: 100%;
  max-height: 610px;
  aspect-ratio: 1033 / 1522;
  object-fit: contain;
  border-radius: 0;
  filter: drop-shadow(0 28px 35px #082d293d);
}

/* Only the requested upload speech bubble is shown beside Joey. */
.mascot-glow,
.mascot-chip-two,
.mascot-caption {
  display: none;
}

.mascot-visual .mascot-chip-one {
  display: block;
  top: 12%;
  right: -2%;
  left: auto;
  width: 220px;
  padding: 18px 22px;
  color: #fff;
  background: #0d514b;
  border: 1px solid #ffffff20;
  border-radius: 36px;
  font-size: 0;
  line-height: 1.25;
  text-align: center;
  box-shadow: 0 18px 42px #082d2955;
}

.mascot-visual .mascot-chip-one svg {
  display: none;
}

.mascot-visual .mascot-chip-one::before {
  content: "อัพโหลดง่าย\A ได้รายงานพร้อมใช้";
  white-space: pre-line;
  font-size: 20px;
  font-weight: 700;
}

html[lang="en"] .mascot-visual .mascot-chip-one::before {
  content: "Easy upload\A Ready-to-use report";
}

.mascot-visual .mascot-chip-one::after {
  content: "";
  position: absolute;
  left: 34px;
  bottom: -15px;
  width: 30px;
  height: 26px;
  background: #0d514b;
  clip-path: polygon(0 0, 100% 0, 15% 100%);
}

.solution-grid > .solution-card {
  display: none;
}

.solution-grid {
  display: block;
  width: 100%;
}

.services-showcase {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.services-showcase img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1722 / 974;
  object-fit: contain;
  border-radius: 28px;
}

.services-showcase .showcase-link {
  position: absolute;
  z-index: 2;
  bottom: 7.5%;
  height: 9%;
  border-radius: 14px;
}

.services-showcase .report-link {
  left: 4.2%;
  width: 42.3%;
}

.services-showcase .care-link {
  right: 4.4%;
  width: 42.3%;
}

.services-showcase .showcase-link:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 4px;
}

.solution-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.service-html-card {
  min-height: 760px;
  padding: 42px 42px 24px;
  border-radius: 34px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 22px 55px #173c3520;
}

.report-html-card {
  color: #153f3b;
  background: #fff;
  border: 1px solid #dce8e4;
}

.care-html-card {
  color: #fff;
  background:
    radial-gradient(circle at 65% 55%, #0e5f55 0, transparent 45%),
    linear-gradient(145deg, #0b3f3b, #133f3a);
}

.service-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #13a8a9;
  letter-spacing: .13em;
  font-size: 14px;
  font-weight: 800;
}

.service-card-top b {
  padding: 8px 15px;
  color: #153f3b;
  background: #e5f5a7;
  border-radius: 999px;
  letter-spacing: .02em;
  font-size: 12px;
}

.service-html-card h3 {
  margin: 34px 0 12px;
  font-size: clamp(34px, 3.1vw, 50px);
  font-weight: 500;
  line-height: 1.14;
}

.service-html-card h3 mark {
  color: var(--lime);
  background: transparent;
}

.service-html-card > p {
  margin: 0;
  color: #6e8883;
  font-size: 18px;
  line-height: 1.55;
}

.care-html-card > p {
  color: #b7cbc6;
}

.report-art {
  min-height: 295px;
  margin-top: 28px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.report-art::before {
  content: "";
  position: absolute;
  inset: 45px 4% 5px;
  background: #eef7f3;
  border-radius: 48% 52% 42% 58%;
}

.report-sheet {
  z-index: 1;
  width: 68%;
  min-height: 225px;
  padding: 24px;
  background: #fff;
  border: 1px solid #e4ece9;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 18px 38px #17453e1b;
  transform: rotate(2deg);
}

.report-sheet > small,
.report-sheet > strong {
  display: block;
}

.report-sheet > small {
  color: #286a65;
  font-size: 10px;
  font-weight: 800;
}

.report-sheet > strong {
  margin-top: 16px;
  font-size: 22px;
}

.report-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 20px;
}

.report-metrics span {
  padding: 16px 4px;
  background: #f6f8f7;
  border-radius: 10px;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
}

.report-metrics i {
  display: block;
  color: #12aaa8;
  font-size: 25px;
  font-style: normal;
}

.report-art > em {
  z-index: 2;
  margin: 0 0 135px 14px;
  color: #164c46;
  font-size: 17px;
  font-weight: 700;
  transform: rotate(-8deg);
}

.service-benefits {
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: -22px -20px 22px;
  padding: 20px 8px;
  background: #f4f8f6f2;
  border-radius: 16px;
}

.service-benefits span {
  padding: 0 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
}

.service-benefits span + span {
  border-left: 1px solid #d5e5e0;
}

.service-benefits i {
  display: block;
  margin-bottom: 6px;
  color: #188c86;
  font-size: 26px;
  font-style: normal;
}

.care-art {
  min-height: 330px;
  margin: 28px 0 20px;
  position: relative;
}

.care-plan-sheet,
.care-checklist {
  position: absolute;
  width: 61%;
  padding: 25px;
  color: #174640;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 20px 38px #062d2a3b;
}

.care-plan-sheet {
  top: 10px;
  left: 5%;
  transform: rotate(-2deg);
}

.care-checklist {
  top: 42px;
  right: 2%;
}

.care-plan-sheet > strong {
  display: block;
  margin-bottom: 14px;
  font-size: 15px;
}

.care-plan-sheet span,
.care-checklist span {
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 7px;
  margin: 9px 0;
  font-size: 10px;
}

.care-plan-sheet i,
.care-checklist i {
  grid-row: span 2;
  color: #10a4a2;
  font-size: 20px;
  font-style: normal;
}

.care-plan-sheet small,
.care-checklist small {
  color: #79908b;
  font-size: 8px;
}

.care-checklist span::after {
  content: "✓";
  position: absolute;
  right: 18px;
  color: #10a4a2;
}

.service-card-button {
  min-height: 62px;
  margin-top: auto;
  padding: 0 24px;
  border: 1px solid #bdd7d1;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #143f3a;
  font-size: 18px;
  font-weight: 800;
}

.care-button {
  background: var(--lime);
  border-color: var(--lime);
}

.service-card-button b {
  font-size: 30px;
  font-weight: 400;
}

.service-card-signature {
  margin-top: 15px;
  color: #1bb0ae;
  text-align: center;
  letter-spacing: .28em;
  font-size: 10px;
  font-weight: 800;
}

.care-html-card .service-card-signature {
  color: var(--lime);
}

.faq-item {
  border-bottom: 1px solid #d8e3df;
}

.faq-item h3 {
  margin: 0;
}

.faq-question {
  width: 100%;
  padding: 22px 0;
  color: #173f3b;
  background: transparent;
  border: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}

.faq-question i {
  color: #139f9d;
  font-size: 24px;
  font-style: normal;
  transition: transform .2s ease;
}

.faq-question[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 42px 22px 0;
  color: #59736e;
  font-size: 15px;
  line-height: 1.7;
}

.faq-answer strong {
  color: #173f3b;
}

@media (min-width: 761px) {
  .navlinks {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }
}

@media (max-width: 760px) {
  .language-switch {
    margin-right: 8px;
  }

  .mascot-visual {
    min-height: 450px;
  }

  .mascot-visual > img {
    height: 445px;
  }

  .mascot-visual .mascot-chip-one {
    top: 5%;
    right: 0;
    width: 170px;
    padding: 13px 15px;
  }

  .mascot-visual .mascot-chip-one::before {
    font-size: 16px;
  }

  .solution-grid {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .service-html-card {
    min-height: 700px;
    padding: 28px 22px 20px;
    border-radius: 24px;
  }

  .service-html-card h3 {
    font-size: 34px;
  }

  .service-html-card > p {
    font-size: 16px;
  }

  .footer-contact {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .footer-contact > span {
    width: 100%;
  }
}
@media (min-width: 901px) {
  html[lang="en"] .before-after-section .center-head {
    max-width: 1040px;
  }

  .solutions-head {
    grid-template-columns: 0.48fr 1.52fr;
    gap: 32px;
  }

  .solutions-head h2 {
    font-size: clamp(34px, 3.55vw, 48px);
    letter-spacing: -0.045em;
  }
}

/* Compact results-to-delivery story */
.technology-section{padding-top:56px;padding-bottom:76px}.tech-intro{grid-template-columns:170px minmax(0,1.35fr) minmax(260px,.75fr);align-items:center;gap:30px;margin-bottom:28px}.tech-intro h2{margin:0;font-size:clamp(34px,3.7vw,52px);line-height:1.08}.tech-intro>p{font-size:13px;line-height:1.7}.tech-flow{gap:12px}.tech-flow article{min-height:190px;padding:20px;border-radius:18px}.tech-flow article h3{margin:13px 0 7px;font-size:22px}.tech-flow article p{font-size:12px;line-height:1.55}.tech-icon{width:46px;height:46px;border-radius:13px}.delivery-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr);align-items:center;gap:28px;margin-top:22px;padding:28px 34px;color:var(--ink);background:linear-gradient(110deg,#edf5ee,#f7faf5);border:1px solid #d7e5d9;border-radius:22px}.delivery-copy h3{margin:9px 0 5px;font-size:30px}.delivery-copy>p{margin:0;color:#607775;font-size:13px}.delivery-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}.delivery-options span{padding:9px;background:#ffffffa8;border:1px solid #dfe9e1;border-radius:10px;color:#365e58;font-size:10px;line-height:1.4}.delivery-options svg{width:17px;height:17px;flex:0 0 17px}.delivery-grid .video-preview{display:block}.delivery-grid .video-browser{box-shadow:0 14px 34px #16443c18}.delivery-grid .video-screen{min-height:245px}
@media (max-width:900px){.tech-intro{grid-template-columns:1fr}.delivery-grid{grid-template-columns:1fr}.delivery-options{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.technology-section{padding-top:35px}.tech-flow article{min-height:0}.delivery-options{grid-template-columns:1fr}.delivery-grid{padding:24px 20px}}

/* Compact report showcase inspired by the full report presentation */
.service-html-card{min-height:680px;padding:34px 34px 20px}.service-html-card h3{margin:24px 0 9px;font-size:clamp(32px,2.7vw,44px)}.service-html-card>p{font-size:15px}.report-art{min-height:250px;margin-top:18px}.report-art::before{inset:34px 2% 3px;border-radius:42%}.report-sheet{width:70%;min-height:205px;padding:20px}.report-sheet::before,.report-sheet::after{content:"";position:absolute;z-index:-1;top:36px;width:58%;height:82%;background:#fff;border:1px solid #e1e9e6;border-radius:12px;box-shadow:0 12px 24px #17453e12}.report-sheet{position:relative}.report-sheet::before{right:72%;transform:rotate(-6deg)}.report-sheet::after{left:72%;transform:rotate(6deg)}.report-metrics{margin-top:15px}.report-metrics span{padding:12px 3px}.report-art>em{margin-bottom:112px;font-size:14px}.service-benefits{margin:-16px -12px 14px;padding:14px 6px}.service-benefits span{font-size:11px}.service-benefits i{margin-bottom:3px;font-size:20px}.service-benefits small{display:block;margin-top:3px;color:#758b87;font-size:8px;font-weight:400}.service-card-button{min-height:52px;padding:0 18px;font-size:15px}.service-card-button b{font-size:24px}.service-card-signature{margin-top:10px}
@media(max-width:760px){.service-html-card{min-height:0}.report-sheet::before,.report-sheet::after{display:none}.service-benefits{grid-template-columns:1fr;gap:10px}.service-benefits span+span{border-left:0;border-top:1px solid #d5e5e0;padding-top:10px}}
.payment-modal-open{overflow:hidden}.landing-payment-modal{position:fixed;z-index:1000;inset:0;display:grid;place-items:center;padding:20px}.landing-payment-modal[hidden]{display:none}.landing-payment-backdrop{position:absolute;inset:0;border:0;background:#073d38b8;backdrop-filter:blur(6px);cursor:pointer}.landing-payment-dialog{position:relative;width:min(620px,100%);padding:38px;border:1px solid #d9e5e2;border-radius:28px;background:#fff;box-shadow:0 28px 90px #073d3859}.landing-payment-close{position:absolute;top:18px;right:20px;width:44px;height:44px;border:1px solid #d5e2df;border-radius:50%;background:#fff;color:#55736e;font-size:28px;line-height:1;cursor:pointer}.payment-kicker{margin:0;color:#219da1;font-size:13px;font-weight:800;letter-spacing:.15em}.landing-payment-dialog h2{margin:6px 48px 4px 0;color:#103f3b;font-size:34px;line-height:1.2}.payment-intro{margin:0 0 24px;color:#718783}.landing-payment-summary{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px;padding:18px 20px;border-radius:16px;background:#eef7f5}.landing-payment-summary span{display:grid;gap:3px}.landing-payment-summary b{color:#123f3b;font-size:20px}.landing-payment-summary small{color:#718783}.landing-payment-summary strong{color:#169b9e;font-size:30px}.landing-payment-methods{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}.landing-payment-methods label{cursor:pointer}.landing-payment-methods input{position:absolute;opacity:0}.landing-payment-methods label>span{min-height:112px;padding:18px;border:2px solid #dbe6e3;border-radius:16px;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-content:center}.landing-payment-methods i{grid-row:1/3;color:#169b9e;font-size:25px;font-style:normal}.landing-payment-methods b{color:#123f3b}.landing-payment-methods small{color:#718783}.landing-payment-methods input:checked+span{border-color:#20a4a7;background:#eef9f8;box-shadow:0 0 0 3px #20a4a719}.landing-payment-dialog .primary.full{width:100%;justify-content:center}.payment-prototype{text-align:center;margin:12px 0 0;color:#91a29f;font-size:12px}@media(max-width:600px){.landing-payment-dialog{padding:28px 20px}.landing-payment-dialog h2{font-size:27px}.landing-payment-methods{grid-template-columns:1fr}.landing-payment-summary{align-items:flex-start}.landing-payment-summary strong{font-size:25px}}

/* PromptPay QR waiting panel (Step 7 checkout rewiring — 2026-09-12).
 * Rendered by submitOrder() when method=promptpay returns a qr_payload.
 * Polling stops on `paid` (redirect), `failed` / `expired` (show message),
 * or cancel (re-enable the form). */
[data-qr-panel] {
  margin: 24px 0 16px;
  padding: 24px;
  border: 1px solid #d9e5e2;
  border-radius: 18px;
  background: #f7faf5;
  text-align: center;
}
[data-qr-panel] h3 {
  margin: 0 0 12px;
  color: #0b4c46;
  font-size: 22px;
}
[data-qr-panel] img {
  display: block;
  margin: 0 auto 16px;
  width: 240px;
  height: 240px;
  border: 1px solid #cfdcd8;
  border-radius: 8px;
  background: #fff;
}
[data-qr-panel] .qr-status {
  margin: 0 0 8px;
  color: #103f3b;
  font-weight: 600;
  font-size: 15px;
}
[data-qr-panel] .qr-detail {
  margin: 0 0 16px;
  color: #5b7572;
  font-size: 13px;
  line-height: 1.5;
}
[data-qr-panel] .qr-cancel {
  appearance: none;
  border: 1px solid #cfdcd8;
  border-radius: 999px;
  background: #fff;
  color: #55736e;
  padding: 8px 20px;
  font-size: 13px;
  cursor: pointer;
}
[data-qr-panel] .qr-cancel:hover {
  border-color: #169b9e;
  color: #169b9e;
}

/* Contact form status. POST /api/contact answers 501 by design (RULES.md R2), so this
   is the normal ending of that form, not an edge case: it needs to persist and be
   announced, which is why it is a role="alert" element and not the button's own label. */
.contact-status{margin:12px 0 0;color:#8a2b2b;font-size:14px;line-height:1.5}

/* hot.fix หน้า 3 — the calculator's tax-invoice reassurance, under its CTA. */
.calc-tax-note{display:block;margin-top:8px;text-align:center;color:#52716c;font-size:13px;line-height:1.5}

/* hot.fix ข้อ 22 — the nav's service entry is a disclosure over three services.
   A disclosure, NOT role="menu": three navigation links in a panel are not an
   application menu, and role="menu" would contract this into roving-tabindex
   arrow-key semantics nobody here wants. One attribute is the source of truth for
   open/closed -- the trigger's aria-expanded -- so the panel cannot end up visible
   while the button says it is closed.

   Colours, radii and the focus ring are the registered tokens (COMPONENTS.md); the
   trigger deliberately matches `.navlinks a` in site.css, including its lime hover,
   so it reads as the fourth sibling rather than as a new control. #718783 is not
   used anywhere here: every string in the panel is content, and it is 3.82:1. */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-trigger {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.nav-dropdown-trigger:hover {
  color: var(--lime);
}

/* An SVG chevron, not the text glyph U+2304, and the reason is measured. With `⌄`
   the two BOXES centred correctly (0.5px apart) while the INK did not: the label's
   ink centre sat 6.33px above the caret's, because that glyph is drawn low inside
   its em box. Nudging it with a translateY would have been a magic number tied to
   whichever font happens to render U+2304 on the machine doing the nudging -- right
   here, wrong elsewhere. An SVG's box IS its ink, so `align-items: center` on the
   button actually centres it, on every machine. The nav already carries 55 inline
   lucide icons, the sibling .nav-cta among them, so this is the existing idiom. */
.nav-dropdown-trigger svg {
  flex: 0 0 auto;
  /* -1px, and unlike the glyph nudge this one is safe to hardcode. align-items
     centres the text's LINE BOX, which reserves descender space; "บริการ" and
     "Services" both have no descenders, so their ink sits ~1.2px above that box's
     centre and a perfectly centred icon reads low. Measured from the rendered
     pixels at 3x, in both languages, before and after. LINE Seed is self-hosted
     (custom.css declares the @font-face), so its cap-height-to-em ratio does not
     vary by machine the way a fallback glyph's metrics do. */
  margin-top: -1px;
  transition: transform .15s ease-out;
}

.nav-dropdown-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  /* 102, and the honest reason is defensive, not observed. .nav-cta and
     .language-switch are siblings in this same stacking context carrying z-index
     101, so a panel at 1 loses to them wherever they meet. MEASURED at 761 / 800 /
     850 / 900 / 1000 / 1100 / 1440px: the panel and those two do NOT currently
     overlap at any of them — the only element it actually covers is nav .logo,
     between 761 and 850px. So 102 buys correctness if the nav is ever re-laid-out,
     and costs nothing now. Still inside nav's own context (z-index 100), so still
     under the payment modal at 1000 and every app modal.

     An earlier revision of this comment claimed the overlap "is real between ~761px
     and ~1000px, not theoretical". It was not; nobody had measured it. Noted rather
     than quietly corrected, because that is the R4 shape and this block already
     condemns it one rule below. */
  z-index: 102;
  min-width: 248px;
  margin: 0;
  padding: 8px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 34px #123f3b24;
  list-style: none;
  opacity: 0;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity .15s ease-out, transform .15s ease-out;
  pointer-events: none;
  visibility: hidden;
}

.nav-dropdown-trigger[aria-expanded="true"] + .nav-dropdown-panel {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  visibility: visible;
}

.nav-dropdown-panel a {
  min-height: 44px;
  padding: 12px 14px;
  border-radius: 8px;
  color: #123f3b;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.nav-dropdown-panel a:hover {
  background: #eef5f3;
  color: #123f3b;
}

.nav-dropdown-panel a i {
  color: #168f91;
  font-style: normal;
  font-size: 13px;
  margin-left: auto;
}

/* TWO DIFFERENT RINGS, AND THE DIFFERENCE IS MEASURED, NOT ASSERTED.

   The panel sits on white, where the #168f91 token is 3.91:1 -- over the 3:1
   non-text floor, and the registered choice.

   The TRIGGER sits on the hero gradient, and there the same token FAILS:
   3.02:1 on #073f3a, 2.51:1 on #0b4c46, 1.80:1 on the #17635d radial. A focus
   ring nobody can see is not a focus ring (rule 9 / §36, both floors). var(--lime)
   measures 7.32 / 6.10 / 4.37 on those three. It is also what .showcase-link
   :focus-visible already uses for exactly this on-hero case, and what the sibling
   nav anchors already use on hover -- so this is the existing answer, not a new one.

   An earlier revision of this block claimed #168f91 "also reads" here with no
   number behind it. It did not. That is the R4 shape, in the file that invented R4. */
.nav-dropdown-panel a:focus-visible {
  outline: 2px solid #168f91;
  outline-offset: 2px;
}

.nav-dropdown-trigger:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 2px;
  border-radius: 8px;
}

.nav-dropdown-trigger:active {
  color: var(--lime);
}

@media (prefers-reduced-motion: reduce) {
  .nav-dropdown-panel,
  .nav-dropdown-trigger svg {
    transition: none;
  }
}

/* FAQ section kicker sat flush against the "คำถามที่พบบ่อย" heading below it —
   site.css sets margin:0 on .section-kicker (generated, never hand-edited). */
.section-kicker{margin-bottom:12px}