@charset "utf-8";
:root{
  --blue:#073b8f;
  --green:#07983e;
  --line:#dcdcdc;
  --ink:#111;
}
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background:#fff;
  color:var(--ink);
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}
body{
  font-family:Arial,"Noto Sans","Noto Sans CJK SC","Noto Sans Devanagari",
              "Noto Sans Thai","Noto Sans Myanmar","Malgun Gothic",
              "Microsoft YaHei",sans-serif;
  font-synthesis:weight;
}
img{display:block;max-width:100%;height:auto}
.lp{
  width:min(100%,430px);
  margin:0 auto;
  background:#fff;
  padding:14px 16px 20px;
}

/* Header */
.site-header{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:60px;
  color:var(--blue);
  padding:0 2px 10px;
}
.site-header img{
  width:52px;
  flex:0 0 52px;
  object-fit:contain;
}
.site-name{
  font-size:26px;
  font-weight:900;
  line-height:1.15;
  text-align:left;
  min-width:0;
  text-wrap:balance;
}

/* All 11 language buttons use exactly the same structure and rules */
.language-nav{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:7px;
  margin:0 0 16px;
}
.language-nav a{
  grid-column:span 3;
  min-width:0;
  min-height:46px;
  height:auto;
  border:2px solid var(--blue);
  border-radius:9px;
  color:var(--blue);
  background:#fff;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3px 6px;
  font-size:19px;
  font-weight:900;
  line-height:1.1;
  text-align:center;
  white-space:normal;
  overflow-wrap:normal;
}
.language-nav a:nth-child(n+9){grid-column:span 4}
.language-nav a:focus-visible,
.cta:focus-visible{
  outline:3px solid #f6b900;
  outline-offset:2px;
}

/* Main title — text flows naturally; dotted underline follows each line */
.hero-title{
  margin:2px 0 0;
  color:var(--blue);
  font-size:33px;
  font-weight:900;
  line-height:1.34;
  letter-spacing:-.012em;
  text-wrap:balance;
  text-decoration-line:underline;
  text-decoration-style:dotted;
  text-decoration-color:var(--green);
  text-decoration-thickness:3.5px;
  text-underline-offset:8px;
}

/* Lead copy full width, large consultation illustration below */
.hero-lower{
  margin-top:16px;
}
.hero-copy{
  font-size:20px;
  font-weight:800;
  line-height:1.42;
  min-width:0;
  padding:0;
  text-wrap:balance;
}
.consultation{
  width:min(82%,330px);
  margin:14px auto 0;
  object-fit:contain;
}

/* 4 concern rows */
.concerns{
  margin-top:14px;
  border:2px solid var(--blue);
  border-radius:14px;
  padding:6px 14px;
}
.concern-item{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 54px;
  gap:10px;
  align-items:center;
  min-height:56px;
  padding:7px 0;
  border-bottom:1px solid var(--line);
}
.concern-item:last-child{border-bottom:0}
.check{
  width:34px;
  height:34px;
  object-fit:contain;
}
.concern-text{
  font-size:19px;
  font-weight:900;
  line-height:1.22;
  min-width:0;
}
.case-icon{
  justify-self:center;
  max-width:50px;
  max-height:42px;
  object-fit:contain;
}

/* 3 benefit boxes — equal height, size to their content, never clip text */
.benefits{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  align-items:stretch;
  gap:9px;
  margin:15px 0 0;
}
.benefit{
  border:2px solid var(--green);
  border-radius:10px;
  display:grid;
  grid-template-rows:52px minmax(0,1fr);
  row-gap:7px;
  justify-items:center;
  padding:12px 6px 10px;
  text-align:center;
}
.benefit img{
  width:auto;
  height:48px;
  max-width:90%;
  object-fit:contain;
  align-self:center;
}
.benefit-text{
  font-size:15px;
  font-weight:900;
  line-height:1.22;
  align-self:center;
  width:100%;
  min-width:0;
  hyphens:auto;
  text-align:center;
  text-wrap:balance;
}

/* CTA */
.cta-wrap{margin-top:15px}
.cta{
  width:100%;
  min-height:60px;
  border-radius:999px;
  background:var(--green);
  color:#fff;
  text-decoration:none;
  display:grid;
  grid-template-columns:50px minmax(0,1fr) 28px;
  align-items:center;
  padding:9px 12px;
}
.bubble{
  width:38px;
  height:24px;
  background:#fff;
  border-radius:99px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  position:relative;
}
.bubble:after{
  content:"";
  position:absolute;
  left:6px;
  bottom:-5px;
  border-top:7px solid #fff;
  border-right:6px solid transparent;
}
.bubble i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--green);
}
.cta-text{
  font-size:21px;
  font-weight:900;
  line-height:1.18;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 4px;
}
.arrow{
  font-size:30px;
  line-height:1;
  text-align:right;
}

@media(max-width:370px){
  .lp{padding-left:12px;padding-right:12px}
  .site-header{gap:9px}
  .site-header img{width:46px;flex-basis:46px}
  .site-name{font-size:23px}

  .language-nav{gap:5px}
  .language-nav a{
    min-height:42px;
    font-size:17px;
    padding-left:4px;
    padding-right:4px;
  }

  .hero-title{font-size:29px}
  .hero-copy{font-size:18px}
  .concern-text{font-size:17px}
  .concern-item{min-height:52px}

  .benefits{gap:7px}
  .benefit{padding:10px 5px 9px}
  .benefit-text{font-size:14px}

  .cta-text{font-size:19px}
}

/* Simplified Chinese typography
   Primary font: Microsoft YaHei — widely used for Simplified Chinese UI on Windows.
   Fallbacks preserve readability on macOS/iOS/Android without loading external web fonts. */
html[lang="zh-CN"] body,
html[lang="zh-CN"] .site-name,
html[lang="zh-CN"] .language-nav,
html[lang="zh-CN"] .hero-title,
html[lang="zh-CN"] .hero-copy,
html[lang="zh-CN"] .concern-text,
html[lang="zh-CN"] .benefit-text,
html[lang="zh-CN"] .cta-text {
  font-family: "Microsoft YaHei", "Microsoft YaHei UI", "PingFang SC", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  font-synthesis: none;
}

/* YaHei is clearest at its native bold weight; avoid synthetic 900-weight glyphs. */
html[lang="zh-CN"] .site-name,
html[lang="zh-CN"] .hero-title,
html[lang="zh-CN"] .hero-copy,
html[lang="zh-CN"] .concern-text,
html[lang="zh-CN"] .benefit-text,
html[lang="zh-CN"] .cta-text {
  font-weight: 700;
  letter-spacing: 0;
}

html[lang="zh-CN"] .language-nav a {
  font-family: "Microsoft YaHei", "Microsoft YaHei UI", "PingFang SC", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}

/* Korean: keep words intact when wrapping (no mid-word breaks) */
html[lang="ko"] .site-name,
html[lang="ko"] .hero-title,
html[lang="ko"] .hero-copy,
html[lang="ko"] .concern-text,
html[lang="ko"] .benefit-text,
html[lang="ko"] .cta-text{
  word-break:keep-all;
}

/* Languages with long unbroken words: allow safe in-word wrapping as a last resort */
html[lang="my"] .benefit-text,
html[lang="my"] .cta-text,
html[lang="th"] .benefit-text{
  overflow-wrap:anywhere;
}

/* Burmese: tall stacked glyphs need extra leading and clearance so
   characters and the dotted underline never overlap */
html[lang="my"] .site-name{line-height:1.45}
html[lang="my"] .hero-title{
  line-height:1.62;
  text-underline-offset:13px;
  text-decoration-thickness:3px;
  letter-spacing:.015em;
}
html[lang="my"] .hero-copy{line-height:1.6}
html[lang="my"] .concern-text{line-height:1.55;letter-spacing:.015em}
html[lang="my"] .benefit-text{line-height:1.55;letter-spacing:.015em}
html[lang="my"] .cta-text{line-height:1.5}
html[lang="my"] .language-nav a{line-height:1.4}