/* EyeShield — web.
   Built on the app's Clear Sky tokens, then given the depth a marketing page
   needs and a product UI does not: mesh gradients, layered device shots, dark
   contrast bands, scroll reveals. The colour spine is still app_colors.dart —
   an indigo is added purely as a gradient partner for the brand blue. */

:root{
  --page:#F7F8FA; --page-alt:#EEF1F6; --card:#FFFFFF; --card-alt:#F2F4F8;
  --border:#E8EBF0;
  --ink:#0F172A; --ink-2:#64748B; --ink-3:#9AA3B2;
  --brand:#2563EB; --brand-light:#4180F7; --brand-soft:#EFF4FF; --on-brand:#FFF;
  --indigo:#4F46E5; --violet:#7C3AED;
  --accent:#E8A33D; --accent-soft:#FEF6E3;
  --safe:#0E9F6E; --safe-soft:#E9F8F1;
  --night:#0A1020; --night-2:#131C31;
  --r-md:16px; --r-lg:22px; --r-xl:28px; --r-2xl:36px; --r-pill:999px;
  --sh-sm:0 4px 14px rgba(15,23,42,.06);
  --sh:0 18px 44px rgba(15,23,42,.10);
  --sh-lg:0 40px 90px rgba(15,23,42,.18);
  --sh-brand:0 18px 46px rgba(37,99,235,.34);
  --wrap:1280px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip}
body{margin:0; background:var(--page); color:var(--ink);
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:16.5px; line-height:1.68; font-weight:500; overflow-x:hidden;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
a{color:var(--brand); text-decoration:none}
/* height:auto is load-bearing. The <img> tags carry width/height attributes
   so the browser can reserve space and avoid layout shift; without this rule
   the attribute height wins over the scaled width and every screenshot renders
   stretched to 859px tall inside a 258px-wide frame. */
img{max-width:100%; height:auto; display:block}

h1,h2,h3{line-height:1.08; letter-spacing:-.035em; margin:0 0 .45em; font-weight:800}
h1{font-size:clamp(40px,5.6vw,86px)}
h2{font-size:clamp(30px,3.9vw,54px)}
h3{font-size:20px; letter-spacing:-.02em; line-height:1.25}
p{margin:0 0 1em}
.lede{font-size:clamp(16.5px,1.25vw,20.5px); color:var(--ink-2); max-width:54ch; line-height:1.7}
.grad{background:linear-gradient(105deg,var(--brand) 0%,var(--indigo) 45%,var(--violet) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent}

/* --- reveal ------------------------------------------------------------ */
.rv{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1),
  transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1!important; transform:none!important}
  *{transition:none!important; animation:none!important}}

/* --- header ------------------------------------------------------------ */
header.site{position:sticky; top:0; z-index:50; background:rgba(247,248,250,.72);
  backdrop-filter:saturate(180%) blur(16px); border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s}
header.site.stuck{border-bottom-color:var(--border); background:rgba(247,248,250,.92)}
header.site .wrap{display:flex; align-items:center; gap:18px; height:74px}
.brand{display:flex; align-items:center; gap:11px; font-weight:800; font-size:19px;
  letter-spacing:-.03em; color:var(--ink)}
/* The mark is now the app icon itself, plate included, so the wrapper stops
   painting its own gradient behind it — two plates read as a bug. */
.brand .mark{width:36px; height:36px; border-radius:12px; overflow:hidden;
  display:grid; place-items:center; box-shadow:0 10px 26px rgba(15,23,42,.22)}
.brand .mark svg{width:100%; height:100%; display:block}
header.site nav{margin-left:auto; display:flex; align-items:center; gap:30px}
header.site nav a:not(.btn){color:var(--ink-2); font-weight:700; font-size:14.5px}
header.site nav a:not(.btn):hover{color:var(--ink)}
@media(max-width:820px){header.site nav a.hide-sm{display:none}}

/* --- buttons ----------------------------------------------------------- */
.btn{display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:15.5px;
  padding:15px 26px; border-radius:var(--r-pill); color:var(--on-brand);
  background:linear-gradient(135deg,var(--brand),var(--indigo));
  box-shadow:var(--sh-brand); transition:transform .18s, box-shadow .18s; border:0}
.btn:hover{transform:translateY(-2px); box-shadow:0 24px 56px rgba(37,99,235,.42)}
.btn.ghost{background:var(--card); color:var(--ink); border:1px solid var(--border);
  box-shadow:var(--sh-sm)}
.btn.ghost:hover{box-shadow:var(--sh)}
.btn.light{background:#fff; color:var(--brand); box-shadow:0 18px 40px rgba(0,0,0,.22)}
.btn svg{width:18px; height:18px}

/* --- pills ------------------------------------------------------------- */
.pill{display:inline-flex; align-items:center; gap:8px; background:var(--card);
  border:1px solid var(--border); color:var(--brand); font-weight:800; font-size:12.5px;
  letter-spacing:.07em; text-transform:uppercase; padding:9px 16px;
  border-radius:var(--r-pill); box-shadow:var(--sh-sm); margin-bottom:22px}
.pill.on-dark{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16);
  color:#C7D6FF}
.pill i{width:7px; height:7px; border-radius:50%; background:var(--safe);
  box-shadow:0 0 0 4px rgba(14,159,110,.18)}

/* --- hero -------------------------------------------------------------- */
.hero{position:relative; padding:clamp(48px,6vh,84px) 0 clamp(36px,5vh,64px);
  isolation:isolate; display:flex; align-items:center;
  min-height:min(900px, calc(100vh - 74px))}
.hero>.wrap{width:100%}
.hero::before{content:""; position:absolute; inset:-30% 0 auto 0; height:150%;
  z-index:-2; background:
    radial-gradient(48% 40% at 18% 12%, rgba(37,99,235,.20), transparent 62%),
    radial-gradient(42% 38% at 82% 6%,  rgba(124,58,237,.17), transparent 60%),
    radial-gradient(50% 42% at 62% 48%, rgba(65,128,247,.15), transparent 64%)}
.hero::after{content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E")}
.hero .grid{display:grid; grid-template-columns:1.04fr .96fr; gap:44px; align-items:center}
.hero .grid>div:first-child{position:relative; z-index:2}
@media(max-width:940px){.hero .grid{grid-template-columns:1fr; gap:14px}
  .hero{padding-top:48px}}
.hero .cta-row{display:flex; gap:14px; flex-wrap:wrap; margin:30px 0 22px}
.trust{display:flex; gap:22px; flex-wrap:wrap; color:var(--ink-2); font-size:13.5px;
  font-weight:700}
.trust span{display:inline-flex; align-items:center; gap:8px}
.trust svg{width:16px; height:16px; color:var(--safe); flex:0 0 auto}

/* --- device cluster ---------------------------------------------------- */
/* Sized to stay inside its grid column. The side phones are absolutely
   positioned, so if the offsets exceed half the column they bleed over the
   headline in the other column — which is exactly what happened at the first
   attempt. Column is ~525px at the 1140 wrap; 140px offsets with 180px phones
   span 32..492 and stay clear. */
.cluster{position:relative; height:clamp(460px,52vh,660px); display:grid;
  place-items:center; z-index:1}
@media(max-width:940px){.cluster{height:500px}}
@media(max-width:560px){.cluster{height:420px}}
.cluster::before{content:""; position:absolute; width:min(440px,86vw); height:min(440px,86vw); border-radius:50%;
  background:radial-gradient(circle,rgba(37,99,235,.30),transparent 68%); filter:blur(24px)}
.phone{border-radius:38px; border:10px solid #0B1220; background:#0B1220;
  box-shadow:var(--sh-lg); overflow:hidden; position:absolute;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.phone img{border-radius:27px; display:block}
.phone.main{width:clamp(230px,17vw,300px); z-index:3; transform:translateY(-4px)}
.phone.left{width:clamp(160px,12vw,206px); z-index:2; transform:translate(-78%,52px) rotate(-8deg); opacity:.95}
.phone.right{width:clamp(160px,12vw,206px); z-index:2; transform:translate(78%,52px) rotate(8deg); opacity:.95}
@media(max-width:940px){.phone.main{width:238px}
  .phone.left{transform:translate(-128px,46px) rotate(-8deg); width:164px}
  .phone.right{transform:translate(128px,46px) rotate(8deg); width:164px}}
@media(max-width:560px){.phone.main{width:212px}
  .phone.left,.phone.right{display:none}}
.cluster:hover .phone.left{transform:translate(-84%,48px) rotate(-10deg)}
.cluster:hover .phone.right{transform:translate(84%,48px) rotate(10deg)}

/* --- marquee ----------------------------------------------------------- */
.marquee{border-block:1px solid var(--border); background:var(--card); overflow:hidden;
  padding:18px 0}
.marquee .track{display:flex; gap:56px; width:max-content; animation:slide 34s linear infinite}
.marquee span{display:inline-flex; align-items:center; gap:11px; color:var(--ink-2);
  font-weight:800; font-size:14.5px; white-space:nowrap; letter-spacing:-.01em}
.marquee svg{width:17px; height:17px; color:var(--brand)}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee:hover .track{animation-play-state:paused}

/* --- sections ---------------------------------------------------------- */
section{padding:clamp(64px,7.5vw,116px) 0; position:relative; overflow:clip}
.head{max-width:60ch; margin:0 auto 54px; text-align:center}
.head p{color:var(--ink-2); margin:0 auto; font-size:17.5px; max-width:52ch}
.head.left{margin-left:0; text-align:left}

/* --- bento ------------------------------------------------------------- */
.bento{display:grid; grid-template-columns:repeat(6,1fr); gap:20px}
@media(max-width:940px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.bento{grid-template-columns:1fr}}
.tile{background:var(--card); border:1px solid var(--border); border-radius:var(--r-2xl);
  padding:32px; box-shadow:var(--sh-sm); position:relative; overflow:hidden;
  transition:transform .3s, box-shadow .3s}
.tile:hover{transform:translateY(-4px); box-shadow:var(--sh)}
.tile.w3{grid-column:span 3} .tile.w2{grid-column:span 2}
.tile.w4{grid-column:span 4} .tile.w6{grid-column:span 6}
@media(max-width:940px){.tile.w3,.tile.w2,.tile.w4,.tile.w6{grid-column:span 2}}
@media(max-width:600px){.tile.w3,.tile.w2,.tile.w4,.tile.w6{grid-column:span 1}}
.tile .ico{width:50px; height:50px; border-radius:16px; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand); margin-bottom:20px}
.tile.safe .ico{background:var(--safe-soft); color:var(--safe)}
.tile.warm .ico{background:var(--accent-soft); color:var(--accent)}
.tile .ico svg{width:24px; height:24px}
.tile p{color:var(--ink-2); margin:0; font-size:15.5px}
.tile.shot{padding:32px 32px 0; overflow:hidden; display:flex; flex-direction:column}
.tile.shot .peek{width:min(268px,74%); height:236px; margin:30px auto 0; flex:none;
  border-radius:26px 26px 0 0; border:9px solid #0B1220; border-bottom:0;
  overflow:hidden; box-shadow:0 -14px 44px rgba(15,23,42,.18)}
.tile.shot p{margin-bottom:auto}
.tile.shot .peek img{width:100%; height:auto; border-radius:18px 18px 0 0}
.tile.dark{background:linear-gradient(150deg,var(--night),var(--night-2)); border-color:#1E293B}
.tile.dark h3{color:#fff} .tile.dark p{color:#94A3B8}
.tile.dark .ico{background:rgba(255,255,255,.08); color:#93B4FF}

/* --- steps ------------------------------------------------------------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; counter-reset:s}
@media(max-width:880px){.steps{grid-template-columns:1fr; gap:22px}}
.step{position:relative; padding-top:14px}
.step .n{font-size:64px; font-weight:800; letter-spacing:-.06em; line-height:1;
  background:linear-gradient(135deg,var(--brand),var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.9}
.step h3{margin:14px 0 8px} .step p{color:var(--ink-2); margin:0; font-size:15.5px}

/* --- dark band --------------------------------------------------------- */
.band{background:linear-gradient(160deg,var(--night) 0%,#101A2E 55%,#0D1526 100%);
  color:#fff; position:relative; overflow:hidden}
.band::before{content:""; position:absolute; inset:auto 0 -55% 0; height:120%;
  background:radial-gradient(45% 45% at 22% 100%, rgba(37,99,235,.34), transparent 62%),
             radial-gradient(40% 40% at 80% 90%, rgba(124,58,237,.26), transparent 60%)}
.band>*{position:relative; z-index:1}
.band h2{color:#fff} .band .head p{color:#94A3B8}
.split{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center}
@media(max-width:880px){.split{grid-template-columns:1fr; gap:36px}}
ul.ticks{list-style:none; padding:0; margin:0}
ul.ticks li{position:relative; padding-left:34px; margin-bottom:15px; color:var(--ink-2)}
ul.ticks li strong{color:var(--ink); font-weight:700}
.band ul.ticks li{color:#94A3B8} .band ul.ticks li strong{color:#fff}
ul.ticks li::before{content:""; position:absolute; left:0; top:5px; width:21px; height:21px;
  border-radius:50%; background:var(--safe-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E9F6E' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:12px; background-repeat:no-repeat; background-position:center}
.band ul.ticks li::before{background-color:rgba(14,159,110,.2)}

/* --- rail -------------------------------------------------------------- */
.rail{display:flex; gap:26px; overflow-x:auto; padding:10px 24px 26px;
  scroll-snap-type:x mandatory}
.rail::-webkit-scrollbar{height:7px}
.rail::-webkit-scrollbar-thumb{background:var(--border); border-radius:99px}
.rail .shot{flex:0 0 auto; width:236px; scroll-snap-align:center; border-radius:32px;
  border:9px solid #0B1220; background:#0B1220; overflow:hidden; box-shadow:var(--sh);
  transition:transform .3s}
.rail .shot:hover{transform:translateY(-8px)}
.rail .shot img{border-radius:23px}

/* --- price ------------------------------------------------------------- */
.prices{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:34px}
@media(max-width:880px){.prices{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.prices{grid-template-columns:1fr}}
.pr{background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:24px; text-align:center}
.pr.best{border:2px solid var(--brand); box-shadow:var(--sh-brand); position:relative}
.pr.best::after{content:attr(data-badge); position:absolute; white-space:nowrap; top:-11px; left:50%;
  transform:translateX(-50%); background:var(--brand); color:#fff; font-size:10.5px;
  font-weight:800; letter-spacing:.08em; padding:5px 12px; border-radius:var(--r-pill)}
.pr .t{font-weight:800; font-size:15px; color:var(--ink-2)}
.pr .v{font-size:30px; font-weight:800; letter-spacing:-.04em; margin:6px 0 2px}
.pr .s{font-size:13px; color:var(--ink-3); font-weight:700}

/* --- faq --------------------------------------------------------------- */
.faq{max-width:780px; margin:0 auto}
details{background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:20px 24px; margin-bottom:12px; box-shadow:var(--sh-sm)}
details[open]{box-shadow:var(--sh)}
summary{font-weight:800; font-size:16.5px; cursor:pointer; list-style:none;
  display:flex; align-items:center; gap:14px; letter-spacing:-.015em}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; margin-left:auto; font-size:22px; color:var(--brand);
  font-weight:700; transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:14px 0 0; color:var(--ink-2); font-size:15.5px}

/* --- final CTA --------------------------------------------------------- */
.final{border-radius:var(--r-2xl); padding:74px 44px; text-align:center;
  background:linear-gradient(135deg,var(--brand) 0%,var(--indigo) 52%,var(--violet) 100%);
  box-shadow:var(--sh-brand); color:#fff; position:relative; overflow:hidden}
.final::before{content:""; position:absolute; inset:-60% 0 auto 0; height:180%;
  background:radial-gradient(40% 40% at 20% 20%, rgba(255,255,255,.22), transparent 60%),
             radial-gradient(35% 35% at 82% 76%, rgba(255,255,255,.14), transparent 58%)}
.final>*{position:relative; z-index:1}
.final h2{color:#fff} .final p{color:rgba(255,255,255,.9); max-width:52ch; margin:0 auto 28px}

/* --- footer ------------------------------------------------------------ */
footer.site{background:var(--card); border-top:1px solid var(--border);
  padding:52px 0 64px; color:var(--ink-2); font-size:14.5px}
footer.site .cols{display:flex; gap:44px; flex-wrap:wrap; align-items:flex-start}
footer.site nav{display:flex; gap:26px; flex-wrap:wrap; margin-left:auto}
footer.site nav a{color:var(--ink-2); font-weight:700}
footer.site nav a:hover{color:var(--brand)}
footer.site .fine{margin-top:32px; color:var(--ink-3); font-size:12.8px; max-width:74ch;
  line-height:1.65}

/* --- legal documents --------------------------------------------------- */
body.doc main{max-width:800px; margin:0 auto; padding:52px 24px 90px}
body.doc .paper{background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-2xl); padding:clamp(26px,4.4vw,54px); box-shadow:var(--sh)}
body.doc h1{font-size:clamp(30px,4.4vw,44px); margin-bottom:8px}
body.doc .updated{color:var(--ink-3); font-size:14px; font-weight:700; margin-bottom:30px}
body.doc h2{font-size:22px; margin-top:38px; padding-top:26px; border-top:1px solid var(--border)}
body.doc h2:first-of-type{border-top:0; padding-top:0; margin-top:6px}
body.doc h3{font-size:17px; margin-top:24px}
body.doc li{margin-bottom:9px; color:var(--ink-2)}
body.doc p{color:var(--ink-2)}
body.doc strong{color:var(--ink)}
body.doc table{width:100%; border-collapse:collapse; margin:20px 0; font-size:14.5px}
body.doc th,body.doc td{text-align:left; padding:12px 13px; border-bottom:1px solid var(--border);
  vertical-align:top}
body.doc th{background:var(--card-alt); font-weight:800; color:var(--ink)}
.callout{background:linear-gradient(135deg,var(--brand-soft),#F4F0FF);
  border:1px solid #DCE4FF; border-radius:var(--r-lg); padding:20px 22px; margin:24px 0;
  color:var(--ink-2)}
.callout strong{color:var(--brand)}
.back{display:inline-flex; align-items:center; gap:9px; font-weight:800; font-size:14.5px;
  margin-bottom:24px; color:var(--ink-2)}
.back:hover{color:var(--brand)}

/* --- stats band -------------------------------------------------------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  border-block:1px solid var(--border); padding:44px 0; background:var(--card)}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr); gap:28px}}
.stat{text-align:center}
.stat b{display:block; font-size:clamp(30px,3.2vw,44px); font-weight:800;
  letter-spacing:-.045em; line-height:1;
  background:linear-gradient(135deg,var(--brand),var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.stat span{display:block; margin-top:9px; color:var(--ink-2); font-size:14px;
  font-weight:700; letter-spacing:-.01em}

/* --- distance diagram -------------------------------------------------- */
.diagram{background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-2xl); padding:clamp(24px,3.4vw,44px); box-shadow:var(--sh-sm)}
.diagram svg{width:100%; height:auto; max-width:760px; margin:0 auto; display:block}
.legend{display:flex; gap:26px; justify-content:center; flex-wrap:wrap;
  margin-top:26px; font-size:13.8px; font-weight:700; color:var(--ink-2)}
.legend i{width:11px; height:11px; border-radius:50%; display:inline-block;
  margin-right:8px; vertical-align:-1px}

/* --- languages ----------------------------------------------------------
   The home page exists in the app's six languages (tool/build_site.py). */

/* Plus Jakarta Sans has no Japanese or Korean glyphs; name real CJK faces
   rather than leaving each browser to pick its own fallback. Negative
   tracking suits Latin display type and crushes kana and hangul. */
:lang(ja) body, body:lang(ja){font-family:'Plus Jakarta Sans','Hiragino Sans',
  'Hiragino Kaku Gothic ProN','Noto Sans JP','Yu Gothic',Meiryo,sans-serif;
  line-break:strict}
:lang(ko) body, body:lang(ko){font-family:'Plus Jakarta Sans','Apple SD Gothic Neo',
  'Noto Sans KR','Malgun Gothic',sans-serif; word-break:keep-all}
:lang(ja) :is(h1,h2,h3), :lang(ko) :is(h1,h2,h3){letter-spacing:-.01em; line-height:1.22}
:lang(ja) h1, :lang(ko) h1{font-size:clamp(36px,5vw,74px)}
/* German compounds run long; let them break at the &shy; hints. */
:lang(de) h1{hyphens:manual}

/* Undo the FAQ's details/summary card styling, which is written against the
   bare elements and would otherwise box the switcher and give it a "+". */
details.lang{position:relative; background:none; border:0; border-radius:0;
  padding:0; margin:0; box-shadow:none}
details.lang[open]{box-shadow:none}
details.lang summary::after{content:none}
details.lang summary{list-style:none; cursor:pointer; display:flex; align-items:center;
  gap:6px; color:var(--ink-2); font-weight:800; font-size:13.5px; padding:8px 11px;
  border-radius:var(--r-pill); border:1px solid var(--border); background:var(--card)}
details.lang summary::-webkit-details-marker{display:none}
details.lang summary:hover, details.lang[open] summary{color:var(--ink)}
details.lang summary svg{width:16px; height:16px}
details.lang .menu{position:absolute; right:0; top:calc(100% + 8px); min-width:150px;
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  box-shadow:var(--sh); padding:6px; display:grid; z-index:20}
details.lang .menu a{color:var(--ink); font-weight:700; font-size:14.5px;
  padding:8px 12px; border-radius:10px}
details.lang .menu a:hover{background:var(--card-alt)}
details.lang .menu a[aria-current]{color:var(--brand)}

.price-note{text-align:center; color:var(--ink-3); font-size:14px; margin-top:20px}
footer.site nav.langs{display:flex; flex-wrap:wrap; gap:8px 18px; margin:28px 0 0}
footer.site nav.langs a{color:var(--ink-2); font-weight:700; font-size:14px}
footer.site nav.langs a[aria-current]{color:var(--brand)}
footer.site .legal-note{margin:14px 0 0; color:var(--ink-3); font-size:13px}
/* Kana and hangul have no spaces to break at, so a pill squeezed by its
   column wrapped one character per line ("プラ / イバ / シー"). */
.pill{white-space:nowrap}
.pill svg{width:16px; height:16px; flex:none}
/* The header has to fit brand, language and the install button on a 390px
   phone; with the switcher added the button label wrapped into a two-line
   blob. Keep it on one line and let the switcher drop to its globe. */
header.site nav .btn{white-space:nowrap}
@media(max-width:480px){
  header.site nav{gap:10px}
  header.site nav .btn{padding:11px 16px; font-size:14px}
  details.lang summary{padding:8px}
  details.lang summary span{display:none}
}