:root{ --c-white:#ffffff; --c-green:#6C5CE7; --c-green-dark:#4B3FB0; --c-yellow:#FF7A45; --c-blue:#2541B2; --c-blue-dark:#16296B; --c-ink:#1A1830; --c-gray:#6E6B85; --c-border:#E4E1F0; --c-bg-alt:#F6F5FC; }
*{ box-sizing:border-box; }
/* svh, not vh: iOS measures vh against the viewport with the URL bar hidden, so
   a 100vh flex-centred box ends up partly below the fold on a phone. */
body{ margin:0; min-height:100svh; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,#EDE9FF,#ffffff); font-family:'Inter',sans-serif; color:var(--c-ink); padding:clamp(12px,4vw,24px); -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.box{ max-width:440px; width:100%; background:#fff; border:1px solid var(--c-border); border-radius:22px; box-shadow:0 10px 30px rgba(18,75,95,0.12); padding:clamp(22px,5vw,38px); text-align:center; }
.brand{ display:flex; align-items:center; justify-content:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.3rem; margin-bottom:22px; }
h1{ font-family:'Space Grotesk',sans-serif; font-size:1.3rem; margin:0 0 8px; }
p{ color:var(--c-gray); font-size:.92rem; margin:0 0 22px; }
.langs{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.langs a{ display:block; text-decoration:none; padding:16px 10px; min-height:60px; border-radius:14px; border:2px solid var(--c-border); color:var(--c-ink); font-weight:700; transition:border-color .15s ease, background .15s ease; }
.langs a:hover{ border-color:var(--c-green); background:#EDE9FF; }
.langs small{ display:block; font-weight:500; color:var(--c-gray); font-size:.78rem; margin-top:3px; }
.signal{ display:inline-flex; align-items:flex-end; gap:3px; height:16px; }
.signal i{ width:3px; border-radius:2px; display:block; }
.signal i:nth-child(1){ height:35%; background:#6C5CE7; } .signal i:nth-child(2){ height:60%; background:#FF7A45; }
.signal i:nth-child(3){ height:85%; background:#2541B2; } .signal i:nth-child(4){ height:100%; background:#4B3FB0; }

/* A 320px phone leaves ~272px for the box: two 130px language tiles still fit,
   but the four-tile grid gets cramped once the sub-labels wrap — one column
   below that width keeps every tile a comfortable target. */
@media (max-width:340px){ .langs{ grid-template-columns:1fr; } }