:root {
  --g2g-primary:        #0C96C5;
  --g2g-primary-40:     #075A76;
  --g2g-secondary-40:   #E7F5F9;
  --g2g-secondary-90:   #9ED5E8;
  --g2g-gray-primary:   #333333;
  --g2g-gray-secondary: #707070;
  --g2g-gray-90:        #E9E9E9;
  --g2g-light:          #FAFAFA;
  --g2g-text:           #030914;
  --g2g-font: "Red Hat Display", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-lg: 8px;
  --r-full: 9999px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #FFFFFF;
  color: var(--g2g-gray-primary);
  font-family: var(--g2g-font);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.container { width: 100%; max-width: 760px; margin-inline: auto; padding-inline: 1.25rem; }

.site-header { border-bottom: 1px solid var(--g2g-gray-90); background: #FFFFFF; }
.site-header .inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.85rem; max-width: 1080px; }
.logo svg { display: block; height: 36px; width: auto; }
.back {
  font-size: 0.8125rem; font-weight: 500; color: var(--g2g-gray-secondary);
  border: 1px solid var(--g2g-gray-90); border-radius: var(--r-full);
  padding: 0.35rem 0.9rem; text-decoration: none;
}
.back:hover { background: var(--g2g-light); color: var(--g2g-primary); }

main { padding-block: clamp(2rem, 5vw, 3.5rem) 4rem; }

h1 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem); line-height: 1.15; margin: 0 0 0.5rem; color: var(--g2g-text); font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: 1.25rem; margin: 2.5rem 0 0.75rem; color: var(--g2g-text); font-weight: 600; }
h3 { font-size: 1rem; margin: 1.5rem 0 0.4rem; color: var(--g2g-text); font-weight: 600; }
p, li { text-wrap: pretty; }
p { margin: 0 0 0.85rem; }
ul { margin: 0 0 0.85rem; padding-left: 1.2rem; }
li { margin-bottom: 0.35rem; }
a { color: var(--g2g-primary); }

.updated { font-size: 0.8125rem; color: var(--g2g-gray-secondary); margin-bottom: 2rem; }

.langbar { display: flex; gap: 0.5rem; margin-bottom: 2rem; }
.langbar a {
  font-size: 0.8125rem; font-weight: 500; text-decoration: none;
  border: 1px solid var(--g2g-gray-90); border-radius: var(--r-full);
  padding: 0.3rem 0.85rem; color: var(--g2g-gray-secondary);
}
.langbar a:hover { background: var(--g2g-secondary-40); color: var(--g2g-primary-40); }

.facts { border: 1px solid var(--g2g-gray-90); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 1.5rem; }
.fact { display: grid; grid-template-columns: 210px 1fr; gap: 1rem; padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--g2g-gray-90); }
.fact:last-child { border-bottom: 0; }
.fact dt { font-weight: 600; color: var(--g2g-text); font-size: 0.875rem; margin: 0; }
.fact dd { margin: 0; font-size: 0.9375rem; }
@media (max-width: 600px) { .fact { grid-template-columns: 1fr; gap: 0.15rem; } }

.note { background: var(--g2g-secondary-40); border-radius: var(--r-lg); padding: 1rem 1.15rem; font-size: 0.9375rem; margin-bottom: 1.5rem; }

table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; margin-bottom: 1.25rem; }
th, td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--g2g-gray-90); vertical-align: top; }
th { font-weight: 600; color: var(--g2g-text); background: var(--g2g-light); font-size: 0.875rem; }
.table-wrap { overflow-x: auto; }

hr { border: 0; border-top: 1px solid var(--g2g-gray-90); margin: 3rem 0; }

footer { border-top: 1px solid var(--g2g-gray-90); padding-block: 1.75rem; font-size: 0.8125rem; color: var(--g2g-gray-secondary); }
footer .inner { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; max-width: 1080px; }
footer a { color: var(--g2g-primary); text-decoration: none; margin-right: 1.1rem; }
footer a:hover { text-decoration: underline; }

:where(a, button):focus-visible { outline: 2px solid var(--g2g-primary); outline-offset: 2px; border-radius: 4px; }