:root {
  --navy: #0B2233;
  --navy-90: #071722;
  --grey-10: #E4E9EC;
  --grey-05: #F4F7F8;
  --white: #FFFFFF;

  /* Life & Health brand accent (Tokio Marine Fresh Blue) */
  --life-color: #0096A9;
  --life-color-dark: #007586;
  --life-tint: rgba(0,150,169,0.10);

  /* Motor brand accent (Fin Insurance red) */
  --motor-color: #FD4949;
  --motor-color-dark: #E23434;
  --motor-tint: rgba(253,73,73,0.10);

  --font-head: 'Prompt', 'Noto Sans Thai', sans-serif;
  --font-body: 'Sarabun', 'Noto Sans Thai', sans-serif;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(11,34,51,0.10);
  --shadow-lg: 0 20px 48px rgba(11,34,51,0.16);
  --max-width: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--navy);
  background: var(--white);
  line-height: 1.7;
  font-size: 16px;
}
h1, h2, h3 { font-family: var(--font-head); color: var(--navy); line-height: 1.3; margin: 0 0 .6em; }
h1 { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; }
p { margin: 0 0 1em; }
a { color: var(--life-color); text-decoration: none; }
img { max-width: 100%; display: block; }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }
.section { padding: 72px 0; }
.section--grey { background: var(--grey-05); }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0;
}
.brand { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--navy); }
.brand span { color: var(--life-color); }
.topbar-tag { font-size: .85rem; color: #567; }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(circle at 15% 15%, rgba(0,150,169,0.16) 0%, transparent 45%),
    radial-gradient(circle at 85% 25%, rgba(253,73,73,0.14) 0%, transparent 45%),
    linear-gradient(180deg, var(--white) 0%, var(--grey-05) 100%);
  padding: 40px 0 80px;
  text-align: center;
}
.hero-eyebrow {
  display: inline-block;
  font-family: var(--font-head); font-size: .82rem; font-weight: 600;
  color: var(--navy); background: var(--white);
  border: 1px solid var(--grey-10);
  padding: 8px 18px; border-radius: 999px; margin-bottom: 22px;
  box-shadow: var(--shadow);
}
.hero h1 { max-width: 780px; margin-left: auto; margin-right: auto; }
.hero .lead { max-width: 620px; margin: 0 auto 36px; font-size: 1.1rem; color: #34505c; }

.choice-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  max-width: 820px; margin: 0 auto;
}
@media (max-width: 760px) { .choice-grid { grid-template-columns: 1fr; } }

.choice-card {
  display: block;
  background: var(--white);
  border-radius: var(--radius);
  padding: 34px 28px;
  box-shadow: var(--shadow);
  border: 1px solid var(--grey-10);
  border-top: 5px solid var(--accent, var(--life-color));
  text-align: left;
  transition: transform .15s ease, box-shadow .15s ease;
}
.choice-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); text-decoration: none; }
.choice-card.motor { --accent: var(--motor-color); }
.choice-card.life { --accent: var(--life-color); }
.choice-icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--tint, var(--life-tint));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; margin-bottom: 18px;
}
.choice-card.motor .choice-icon { --tint: var(--motor-tint); }
.choice-card.life .choice-icon { --tint: var(--life-tint); }
.choice-card h3 { margin-bottom: 6px; }
.choice-card p { color: #567; font-size: .95rem; margin-bottom: 18px; }
.choice-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600; font-size: .92rem;
  color: var(--white);
  background: var(--accent, var(--life-color));
  padding: 11px 20px; border-radius: 999px;
}
.choice-card:hover .choice-cta { filter: brightness(1.08); }
.choice-license { margin-top: 16px; font-size: .78rem; color: #789; }

/* ---------- Compare section ---------- */
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 800px) { .split-grid { grid-template-columns: 1fr; } }
.split-card {
  background: var(--white); border: 1px solid var(--grey-10); border-radius: var(--radius);
  padding: 30px; box-shadow: var(--shadow);
}
.split-card .badge {
  display: inline-block; font-family: var(--font-head); font-weight: 600; font-size: .78rem;
  color: var(--white); padding: 5px 14px; border-radius: 999px; margin-bottom: 14px;
}
.split-card.life .badge { background: var(--life-color); }
.split-card.motor .badge { background: var(--motor-color); }
.tag-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.tag-pill {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--grey-10); border-radius: 999px;
  padding: 8px 16px; font-size: .88rem; color: var(--navy);
  background: var(--grey-05);
}

.section-head { max-width: 680px; margin: 0 auto 44px; text-align: center; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600; font-size: .95rem;
  padding: 13px 26px; border-radius: 999px; border: none; cursor: pointer;
  color: var(--white);
}
.btn-life { background: var(--life-color); }
.btn-motor { background: var(--motor-color); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-90); color: rgba(255,255,255,.75); padding: 48px 0 26px; }
.site-footer a { color: rgba(255,255,255,.8); }
.disclaimer-box {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; padding: 18px 22px; font-size: .82rem; color: rgba(255,255,255,.65);
  margin-bottom: 26px;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px; font-size: .8rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}