:root{
  --bg:#f5f5f5;
  --card:rgba(255,255,255,0.94);
  --text:#0a0a0a;
  --muted:#666666;
  --accent:#e86a00;
  --accent-soft:#fff2e7;
  --line:#e5e5e5;
  --shadow:0 20px 50px rgba(0,0,0,0.08);
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  line-height:1.7;
  background:radial-gradient(circle at top right,#fff2e7 0%,#fafafa 30%,#f5f5f5 100%);
}

.container{width:min(920px,92%);margin:42px auto}

.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,0.9);
  border-radius:28px;
  padding:34px;
  box-shadow:var(--shadow);
}

.logo-wrap{text-align:center;margin-bottom:26px}

.logo{display:block;width:min(360px,84%);height:auto;margin:0 auto}

.badge{
  display:inline-block;
  margin-top:18px;
  padding:8px 14px;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent);
  font-size:0.92rem;
  font-weight:700;
}

.topnav{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:18px}

.topnav a,
a{
  color:var(--accent);
  font-weight:700;
  text-decoration:none;
}

a:hover{text-decoration:underline}

/* The language pair sits at the far end of the row. The language you are
   already reading is the black one and is not a link; the one you can
   switch to stays light grey until you point at it. These rules follow the
   link colour above on purpose, since they carry the same weight and have
   to win. */
.topnav__lang{display:flex;gap:7px;align-items:center;margin-left:auto;font-weight:700}

.topnav__lang a{color:#757575;transition:color 0.35s ease}

.topnav__lang a:hover{color:var(--text)}

.topnav__lang [aria-current]{color:var(--text)}

.topnav__sep{color:#d0d0d0;font-weight:400}

h1{margin:24px 0 8px;font-size:clamp(2rem,4vw,2.7rem);line-height:1.15}

h2{margin:34px 0 12px;font-size:1.28rem;line-height:1.25;color:var(--accent)}

h3{margin:26px 0 8px;font-size:1.02rem;line-height:1.3;color:var(--text)}

p,
li{color:var(--muted);font-size:1rem}

strong{color:var(--text)}

.meta{margin:0 0 22px;color:#8a8a8a;font-size:0.95rem}

.notice{
  margin:24px 0 28px;
  padding:18px;
  border-radius:18px;
  background:var(--accent-soft);
  border:1px solid #ffd5b0;
  color:#9a4700;
  font-weight:600;
}

.summary,
.details{display:grid;gap:12px;margin:24px 0}

.summary{margin-bottom:6px}

.summary div,
.details div{
  padding:14px 16px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--line);
}

ul{padding-left:22px}

li+li{margin-top:8px}

/* the data sharing table, allowed to scroll on its own rather than
   pushing the card sideways */
.table-wrap{margin:20px 0;overflow-x:auto;-webkit-overflow-scrolling:touch}

table{
  width:100%;
  min-width:520px;
  border-collapse:collapse;
  font-size:0.95rem;
}

th,
td{
  padding:11px 14px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--line);
  color:var(--muted);
}

th{
  color:var(--text);
  font-weight:700;
  background:#fff;
  white-space:nowrap;
}

tbody tr:last-child td{border-bottom:none}

.support{
  margin-top:28px;
  padding:22px;
  border-radius:22px;
  background:linear-gradient(180deg,#fff 0%,#fff8f2 100%);
  border:1px solid var(--line);
}

footer{
  margin-top:30px;
  padding-top:18px;
  border-top:1px solid var(--line);
  color:#8a8a8a;
  font-size:0.92rem;
}

@media (max-width:700px){
  .container{margin:20px auto}
  .card{padding:22px;border-radius:22px}
  h2{font-size:1.16rem}
  table{font-size:0.9rem}
  th,td{padding:9px 11px}
}