/* Privacy, Terms and Contact: the main site's white look, made for reading. */
:root {
  color-scheme: light;
  --bg: #FFFFFF; --bg-2: #F6F8FA; --tint: #F0FAF8;
  --ink: #0A1A26; --soft: #33475A; --muted: #5E6E7B; --faint: #8A98A4;
  --line: #E6ECF0; --teal: #0E9F8E; --teal-deep: #0B7A6E; --teal-bg: #E3F6F3; --navy: #0B1F2E;
  --display: "Inter Tight", "Inter", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.65 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.03em; margin: 0; text-wrap: balance }
p, li, td { text-wrap: pretty }
a { color: var(--teal-deep) }
.wrap { max-width: 760px; margin-inline: auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)) }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 8px }

.nav { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,0.86); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--line) }
.nav .wrap { max-width: 1200px; display: flex; align-items: center; gap: 16px; height: 62px }
.brand { display: flex; align-items: center; gap: 10px; font: 600 17px var(--display); letter-spacing: -0.02em; color: var(--ink); text-decoration: none }
.brand svg { width: 30px; height: 30px }
.seg { margin-left: auto; display: inline-flex; padding: 3px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line) }
.seg button { font: 600 12px var(--body); color: var(--muted); background: none; border: 0; padding: 6px 11px; border-radius: 7px; cursor: pointer; letter-spacing: 0.04em }
.seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(10,26,38,0.06), 0 2px 8px -2px rgba(10,26,38,0.08) }

.top { background: linear-gradient(180deg, var(--tint), #fff); border-bottom: 1px solid var(--line); padding: 56px 0 40px; text-align: center }
.label { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-deep) }
.top h1 { font-size: clamp(34px, 6vw, 48px); line-height: 1.08; margin-top: 12px }
.top p { margin: 14px auto 0; max-width: 34em; color: var(--muted) }
.meta { margin-top: 12px; font-size: 13.5px; color: var(--faint) }

main { padding: 44px 0 72px }
main h2 { font-size: 23px; line-height: 1.25; margin: 44px 0 12px }
main h2:first-child { margin-top: 0 }
main p, main li { color: var(--soft) }
main p + p { margin-top: 12px }
main ul { padding-left: 20px; margin: 10px 0 0 } main li + li { margin-top: 6px }
.lead { font-size: 17.5px; color: var(--ink) !important }
.promise { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none }
.promise li { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); font-weight: 500 }
.promise li + li { margin-top: 0 }
.promise i { width: 24px; height: 24px; border-radius: 50%; background: var(--teal-bg); display: grid; place-content: center; flex: none }
.promise svg { width: 12px; height: 12px }

/* Data table: rows on wide screens, cards on phones. */
.data { display: grid; gap: 12px; margin-top: 18px }
.row { border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; background: #fff; box-shadow: 0 1px 2px rgba(10,26,38,0.03) }
.row h3 { font-size: 17px; letter-spacing: -0.015em }
.row dl { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 6px 16px; margin: 10px 0 0; font-size: 15px }
.row dt { color: var(--faint); font-weight: 500 }
.row dd { margin: 0; color: var(--soft) }

.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 8px }
.cards a, .cards div { display: block; padding: 22px; border-radius: 18px; border: 1px solid var(--line); background: #fff; text-decoration: none; color: var(--ink); box-shadow: 0 1px 2px rgba(10,26,38,0.04), 0 2px 8px -2px rgba(10,26,38,0.06) }
.cards a:hover { border-color: rgba(14,159,142,0.4) }
.cards b { display: block; font: 600 18px var(--display); letter-spacing: -0.02em }
.cards span { display: block; margin-top: 6px; color: var(--muted); font-size: 15px }
.cards em { display: block; margin-top: 12px; font-style: normal; font-weight: 600; color: var(--teal-deep) }

footer { border-top: 1px solid var(--line); padding: 28px 0 36px; text-align: center; font-size: 13.5px; color: var(--muted) }
footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 10px }
footer nav a { color: var(--muted); text-decoration: none } footer nav a:hover, footer nav a[aria-current] { color: var(--ink) }
footer small { font-size: 11.5px; color: var(--faint) }

[data-lang] { display: none }
html[lang="ms"] [data-lang="ms"], html[lang="en"] [data-lang="en"] { display: revert }

@media (max-width: 640px) {
  .top { padding: 40px 0 32px }
  main { padding-top: 32px }
  .row { padding: 16px }
  .row dl { grid-template-columns: minmax(0, 1fr); gap: 2px }
  .row dd + dt { margin-top: 8px }
  .cards { grid-template-columns: minmax(0, 1fr) }
}